Merge pull request #1429 from joaojmendes/master

react-my-sites
This commit is contained in:
Hugo Bernier 2020-08-06 20:36:19 -04:00 committed by GitHub
commit d78f91462b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 22664 additions and 1 deletions

View File

@ -1,6 +1,6 @@
{
"name": "workbench-customizer",
"version": "1.3.0",
"version": "1.4.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

Binary file not shown.

View File

@ -0,0 +1,25 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# change these settings to your own preference
indent_style = space
indent_size = 2
# we recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package,bower}.json]
indent_style = space
indent_size = 2

32
samples/react-my-sites/.gitignore vendored Normal file
View File

@ -0,0 +1,32 @@
# Logs
logs
*.log
npm-debug.log*
# Dependency directories
node_modules
# Build generated files
dist
lib
solution
temp
*.sppkg
# Coverage directory used by tools like istanbul
coverage
# OSX
.DS_Store
# Visual Studio files
.ntvs_analysis.dat
.vs
bin
obj
# Resx Generated Code
*.resx.ts
# Styles Generated Code
*.scss.ts

View File

@ -0,0 +1,34 @@
{
"@pnp/generator-spfx": {
"framework": "react",
"pnpFramework": "reactjs.plus",
"pnp-libraries": [
"jquery@3",
"msgraph",
"@pnp/pnpjs",
"@pnp/spfx-property-controls",
"spfx-uifabric-themes",
"lodash",
"@pnp/spfx-controls-react",
"ouifr@7",
"rush@3.7"
],
"pnp-ci": "azure-preview",
"pnp-vetting": [],
"spfxenv": "spo",
"pnp-testing": [
"jest"
]
},
"@microsoft/generator-sharepoint": {
"environment": "spo",
"framework": "react",
"isCreatingSolution": true,
"version": "1.11.0",
"libraryName": "react-my-sites",
"libraryId": "ad28b382-886b-4b2a-9646-92de8a0b1d13",
"packageManager": "npm",
"isDomainIsolated": false,
"componentType": "webpart"
}
}

View File

@ -0,0 +1,80 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
- Microsoft Graph
platforms:
- React
createdDate: 4/9/2020 12:00:00 AM
---
# React My Sites
## Summary
This web part shows sites that user has permissions to access. It includes Office 365 Groups, OneDrive Sites, SharePoint Sites and App Sites created by SharePoint Add-ins.
Each Site has a symbol indicate if it is SharePoint Site, Group, Group and OnDrive.
If the Group has a microsoft team associated and user has permissions to access the symbol of teams will be displayed.
  
![MySites](./assets/MySites.gif)
![MySites](./assets/Screenshot%202020-08-06%20at%2013.50.51.png)
![Birthdays Web Part](./assets/Screenshot%202020-08-06%20at%2013.52.58.png)
![PersonalApps](./assets/Screenshot%202020-08-06%20at%2014.17.35.png)
## Used SharePoint Framework Version
![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Solution
Solution|Author(s)
--------|---------
react-my-sites|João Mendes
## Version history
Version|Date|Comments
-------|----|--------
1.0.0|August 6, 2020|Initial release
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
---
## Minimal Path to Awesome
Please follow all the steps:
- Clone this repository
- in the command line run:
- `npm install`
- `gulp build`
- `gulp bundle --ship`
- `gulp package-solution --ship`
- Add and deploy package to your tenant's App Catalog
- Go to **API Access** - from **SharePoint Admin Center** new experience, and **Approve** the permission to use Microsoft Graph scope **Group.Read.All** and **Directory.Read.All**
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-my-sites" />

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 641 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -0,0 +1,67 @@
parameters:
name: ''
jobs:
- job: ${{ parameters.name }}
pool:
vmImage: 'ubuntu-latest'
demands:
- npm
- node.js
- java
variables:
npm_config_cache: $(Pipeline.Workspace)/.npm
steps:
- checkout: self
- task: NodeTool@0
displayName: 'Use Node 10.x'
inputs:
versionSpec: 10.x
checkLatest: true
- task: CacheBeta@1
inputs:
key: npm | $(Agent.OS) | package-lock.json
path: $(npm_config_cache)
cacheHitVar: CACHE_RESTORED
- script: npm ci
displayName: 'npm ci'
- task: Gulp@0
displayName: 'Bundle project'
inputs:
targets: bundle
arguments: '--ship'
- script: npm test
displayName: 'npm test'
- task: PublishTestResults@2
displayName: Publish test results
inputs:
testResultsFormat: JUnit
testResultsFiles: '**/junit.xml'
#failTaskOnFailedTests: true #if we want to fail the build on failed unit tests
- task: PublishCodeCoverageResults@1
displayName: 'Publish code coverage results'
inputs:
codeCoverageTool: Cobertura
summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
- task: Gulp@0
displayName: 'Package Solution'
inputs:
targets: 'package-solution'
arguments: '--ship'
- task: CopyFiles@2
displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
inputs:
Contents: |
sharepoint/**/*.sppkg
TargetFolder: '$(Build.ArtifactStagingDirectory)'
- task: PublishBuildArtifacts@1
displayName: 'Publish Artifact: drop'

View File

@ -0,0 +1,39 @@
parameters:
# unique name of the job
job_name: deploy_sppkg
# friendly name of the job
display_name: Upload & deploy *.sppkg to SharePoint app catalog
# name of target enviroment deploying to
target_environment: ''
# app catalog scope (tenant|sitecollection)
o365cli_app_catalog_scope: 'tenant'
variable_group_name: ''
jobs:
- deployment: ${{ parameters.job_name }}
displayName: ${{ parameters.display_name }}
pool:
vmImage: 'ubuntu-latest'
environment: ${{ parameters.target_environment }}
variables:
- group: ${{parameters.variable_group_name}} #o365_user_login, o365_user_password, o365_app_catalog_site_url
strategy:
runOnce:
deploy:
steps:
- checkout: none
- download: current
artifact: drop
patterns: '**/*.sppkg'
- script: sudo npm install --global @pnp/office365-cli
displayName: Install Office365 CLI
- script: o365 login $(o365_app_catalog_site_url) --authType password --userName $(o365_user_login) --password $(o365_user_password)
displayName: Login to Office365
- script: |
CMD_GET_SPPKG_NAME=$(find $(Pipeline.Workspace)/drop -name '*.sppkg' -exec basename {} \;)
echo "##vso[task.setvariable variable=SpPkgFileName;isOutput=true]${CMD_GET_SPPKG_NAME}"
displayName: Get generated *.sppkg filename
name: GetSharePointPackage
- script: o365 spo app add --filePath "$(Pipeline.Workspace)/drop/sharepoint/solution/$(GetSharePointPackage.SpPkgFileName)" --appCatalogUrl $(o365_app_catalog_site_url) --scope ${{ parameters.o365cli_app_catalog_scope }} --overwrite
displayName: Upload SharePoint package to Site Collection App Catalog
- script: o365 spo app deploy --name $(GetSharePointPackage.SpPkgFileName) --appCatalogUrl $(o365_app_catalog_site_url) --scope ${{ parameters.o365cli_app_catalog_scope }}
displayName: Deploy SharePoint package

View File

@ -0,0 +1,26 @@
name: $(TeamProject)_$(BuildDefinitionName)_$(SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)
resources:
- repo: self
trigger:
branches:
include:
- master
- develop
stages:
- stage: build
displayName: build
jobs:
- template: ./azure-pipelines-build-template.yml
parameters:
name: 'buildsolution'
- stage: 'deployqa'
# uncomment if you want deployments to occur only for a specific branch
#condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop'))
jobs:
- template: ./azure-pipelines-deploy-template.yml
parameters:
job_name: deploy_solution
target_environment: 'qa'
variable_group_name: qa_configuration

View File

@ -0,0 +1,20 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"my-sites-web-part": {
"components": [
{
"entrypoint": "./lib/webparts/mySites/MySitesWebPart.js",
"manifest": "./src/webparts/mySites/MySitesWebPart.manifest.json"
}
]
}
},
"externals": {},
"localizedResources": {
"MySitesWebPartStrings": "lib/webparts/mySites/loc/{locale}.js",
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
"PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

View File

@ -0,0 +1,7 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "react-my-sites",
"accessKey": "<!-- ACCESS KEY -->"
}

View File

@ -0,0 +1 @@
{"preset":"@voitanos/jest-preset-spfx-react16","rootDir":"../src","collectCoverageFrom":["<rootDir>/**/*.{ts,tsx}","!<rootDir>/**/*.scss.*","!<rootDir>/loc/**/*.*"],"coverageReporters":["text","json","lcov","text-summary","cobertura"],"reporters":["default",["jest-junit",{"suiteName":"jest tests","outputDirectory":"temp/test/junit","outputName":"junit.xml"}]]}

View File

@ -0,0 +1,31 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-my-sites-client-side-solution",
"id": "ad28b382-886b-4b2a-9646-92de8a0b1d13",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"isDomainIsolated": false,
"developer": {
"name": "",
"websiteUrl": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": ""
},
"webApiPermissionRequests": [{
"resource": "Microsoft Graph",
"scope": "Group.Read.All"
},
{
"resource": "Microsoft Graph",
"scope": "Directory.Read.All"
}
]
},
"paths": {
"zippedPackage": "solution/react-my-sites.sppkg"
}
}

View File

@ -0,0 +1,10 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://localhost:5432/workbench",
"api": {
"port": 5432,
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
}
}

View File

@ -0,0 +1,4 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

29
samples/react-my-sites/gulpfile.js vendored Normal file
View File

@ -0,0 +1,29 @@
'use strict';
// check if gulp dist was called
if (process.argv.indexOf('dist') !== -1) {
// add ship options to command call
process.argv.push('--ship');
}
const path = require('path');
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
const gulpSequence = require('gulp-sequence');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
// Create clean distrubution package
gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
// Create clean development package
gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));
/**
* Custom Framework Specific gulp tasks
*/
build.initialize(gulp);

20719
samples/react-my-sites/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,61 @@
{
"name": "react-my-sites",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"preversion": "node ./tools/pre-version.js",
"postversion": "gulp dist",
"test": "./node_modules/.bin/jest --config ./config/jest.config.json",
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
},
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/lab": "^4.0.0-alpha.56",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@pnp/pnpjs": "^2.0.6",
"@pnp/spfx-controls-react": "1.19.0",
"@pnp/spfx-property-controls": "1.19.0",
"@types/jquery": "^3.5.0",
"jquery": "^3.5.1",
"office-ui-fabric-react": "^7.123.1",
"react": "16.8.5",
"react-dom": "16.8.5"
},
"devDependencies": {
"@microsoft/microsoft-graph-types": "^1.12.0",
"@microsoft/rush-stack-compiler-3.7": "^0.6.x",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34",
"@types/es6-promise": "0.0.33",
"@types/mocha": "2.2.38",
"@types/react": "^16.9.43",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"@voitanos/jest-preset-spfx-react16": "^1.3.2",
"ajv": "~5.2.2",
"gulp": "~3.9.1",
"gulp-sequence": "1.0.0",
"jest": "^23.6.0",
"jest-junit": "^10.0.0",
"lodash": "^4.17.15",
"spfx-uifabric-themes": "^0.8.0",
"typescript": "~3.7.x"
},
"jest-junit": {
"output": "temp/test/junit/junit.xml",
"usePathForSuiteName": "true"
}
}

View File

@ -0,0 +1,24 @@
{
"themePrimary": "#6264a7",
"themeLighterAlt": "#f7f7fb",
"themeLighter": "#e1e1f1",
"themeLight": "#c8c9e4",
"themeTertiary": "#989ac9",
"themeSecondary": "#7173b0",
"themeDarkAlt": "#585a95",
"themeDark": "#4a4c7e",
"themeDarker": "#37385d",
"neutralLighterAlt": "#0b0b0b",
"neutralLighter": "#151515",
"neutralLight": "#252525",
"neutralQuaternaryAlt": "#2f2f2f",
"neutralQuaternary": "#373737",
"neutralTertiaryAlt": "#595959",
"neutralTertiary": "#c8c8c8",
"neutralSecondary": "#d0d0d0",
"neutralPrimaryAlt": "#dadada",
"neutralPrimary": "#ffffff",
"neutralDark": "#f4f4f4",
"black": "#f8f8f8",
"white": "#000000"
}

View File

@ -0,0 +1,24 @@
{
"themePrimary": "#6264a7",
"themeLighterAlt": "#f7f7fb",
"themeLighter": "#e1e1f1",
"themeLight": "#c8c9e4",
"themeTertiary": "#989ac9",
"themeSecondary": "#7173b0",
"themeDarkAlt": "#585a95",
"themeDark": "#4a4c7e",
"themeDarker": "#37385d",
"neutralLighterAlt": "#2d2c2c",
"neutralLighter": "#2c2b2b",
"neutralLight": "#2a2929",
"neutralQuaternaryAlt": "#272626",
"neutralQuaternary": "#252525",
"neutralTertiaryAlt": "#242323",
"neutralTertiary": "#c8c8c8",
"neutralSecondary": "#d0d0d0",
"neutralPrimaryAlt": "#dadada",
"neutralPrimary": "#ffffff",
"neutralDark": "#f4f4f4",
"black": "#f8f8f8",
"white": "#2d2c2c"
}

View File

@ -0,0 +1,24 @@
{
"themePrimary": "#6264a7",
"themeLighterAlt": "#f7f7fb",
"themeLighter": "#e1e1f1",
"themeLight": "#c8c9e4",
"themeTertiary": "#989ac9",
"themeSecondary": "#7173b0",
"themeDarkAlt": "#585a95",
"themeDark": "#4a4c7e",
"themeDarker": "#37385d",
"neutralLighterAlt": "#ecebe9",
"neutralLighter": "#e8e7e6",
"neutralLight": "#dedddc",
"neutralQuaternaryAlt": "#cfcecd",
"neutralQuaternary": "#c6c5c4",
"neutralTertiaryAlt": "#bebdbc",
"neutralTertiary": "#b5b4b2",
"neutralSecondary": "#9d9c9a",
"neutralPrimaryAlt": "#868482",
"neutralPrimary": "#252423",
"neutralDark": "#565453",
"black": "#3e3d3b",
"white": "#f3f2f1"
}

View File

@ -0,0 +1,16 @@
$default-background: #f3f2f1;
$default-color: #252423;
$default-button-background: #6264a7;
$default-Button-color: #f3f2f1;
// dark theme
$dark-background: #2d2c2c;
$dark-color: #ffffff;
$dark-button-background: #6264a7;
$dark-button-color: #2d2c2c;
// contrast theme
$contrast-background: #000000;
$contrast-color: #ffffff;
$contrast-button-background: #b5c01c;
$contrast-Button-color: #000000;

View File

@ -0,0 +1,6 @@
export enum Filters {
"SharePoint",
"Group",
"OneDrive",
"All",
}

View File

@ -0,0 +1,8 @@
export interface ITitleData
{
activityUserEmail:string;
activityUser:string;
activityDate:string;
activityMessage:string;
userPhoto:string;
}

View File

@ -0,0 +1,107 @@
import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
import { Filters } from "../Entities/EnumFilters";
import { sp } from "@pnp/sp";
import { graph } from "@pnp/graph";
import { dateAdd, PnPClientStorage } from "@pnp/common";
import "@pnp/graph/groups";
import "@pnp/sp/search";
import {
SearchResults,
SearchQueryBuilder,
SortDirection,
} from "@pnp/sp/search";
const storage = new PnPClientStorage();
export const useUserSites = () => {
// Check if group has team
const checkGroupHasTeam = async (
groupId: string,
msGraphClient: MSGraphClient
): Promise<boolean> => {
// Check if value alreqdy cached
const cachedValue:string = storage.local.get(groupId);
if (!cachedValue) {
try {
const _teamInfo: any = await msGraphClient
.api(`/groups/${groupId}/team`)
.version("V1.0")
.get();
// put a value into storage with an expiration
storage.local.put(groupId, "true", dateAdd(new Date(), "day", 1));
return true;
} catch (error) {
// Team don't exists or user don' have acess
// put a value into storage with an expiration
storage.local.put(groupId, "false", dateAdd(new Date(), "day", 1));
return false;
}
}else{
// return cached value
return cachedValue == 'true' ? true : false;
}
};
// Get User Sites
const getUserSites = async (
searchString?: string,
itemsPerPage?: number,
filter?: Filters
): Promise<SearchResults> => {
let searchResults: SearchResults = null;
let _filter: string = "";
let _searchString: string = searchString ? `Title:${searchString}*` : "";
switch (filter) {
case Filters.All:
_filter = "";
break;
case Filters.Group:
_filter = ` GroupId:a* OR GroupId:b* OR GroupId:c* OR GroupId:d* OR GroupId:e* OR GroupId:f* OR GroupId:g* OR GroupId:h* OR GroupId:i* OR GroupId:j* OR GroupId:k* OR GroupId:l* OR GroupId:m* OR GroupId:n* OR GroupId:o* OR GroupId:p* OR GroupId:q* OR GroupId:r* OR GroupId:s* OR GroupId:t* OR GroupId:u* OR GroupId:v* OR GroupId:w* OR GroupId:x* OR GroupId:y* OR GroupId:z* OR GroupId:1* OR GroupId:2* OR GroupId:3* OR GroupId:4* OR GroupId:5* OR GroupId:6* OR GroupId:7* OR GroupId:8* OR GroupId:9* OR GroupId:0*`;
break;
case Filters.OneDrive:
_filter = " SiteGroup:Onedrive";
break;
case Filters.SharePoint:
_filter =
" SiteGroup:SharePoint AND NOT(GroupId:b* OR GroupId:c* OR GroupId:d* OR GroupId:e* OR GroupId:f* OR GroupId:g* OR GroupId:h* OR GroupId:i* OR GroupId:j* OR GroupId:k* OR GroupId:l* OR GroupId:m* OR GroupId:n* OR GroupId:o* OR GroupId:p* OR GroupId:q* OR GroupId:r* OR GroupId:s* OR GroupId:t* OR GroupId:u* OR GroupId:v* OR GroupId:w* OR GroupId:x* OR GroupId:y* OR GroupId:z* OR GroupId:1* OR GroupId:2* OR GroupId:3* OR GroupId:4* OR GroupId:5* OR GroupId:6* OR GroupId:7* OR GroupId:8* OR GroupId:9* OR GroupId:0*)";
break;
}
const q = SearchQueryBuilder(
`(contentclass:STS_Site OR contentclass:STS_Web) ${_filter} ${_searchString}`
)
.rowLimit(itemsPerPage ? itemsPerPage : 20)
.enableSorting.sortList({
Property: "LastModifiedTime",
Direction: SortDirection.Descending,
})
.selectProperties(
"SiteLogo",
"SiteClosed",
"RelatedHubSites",
"IsHubSite",
"GroupId",
"RelatedGroupId",
"SiteGroup",
"Author",
"CreatedBy",
"CreatedById",
"AccountName",
"ModifiedBy",
"ModifiedById",
"LastModifiedTime",
"OriginalPath",
"Title",
"Created"
);
const results = await sp.search(q);
searchResults = results; // set the current results
console.log(searchResults);
return searchResults;
};
return { getUserSites, checkGroupHasTeam };
};

View File

@ -0,0 +1,84 @@
import { SPComponentLoader } from '@microsoft/sp-loader';
const DEFAULT_PERSONA_IMG_HASH: string = '7ad602295f8386b7615b582d87bcc294';
const DEFAULT_IMAGE_PLACEHOLDER_HASH: string = '4a48f26592f4e1498d7a478a4c48609c';
const MD5_MODULE_ID: string = '8494e7d7-6b99-47b2-a741-59873e42f16f';
const PROFILE_IMAGE_URL: string = '/_layouts/15/userphoto.aspx?size=M&accountname=';
/**
* Gets user photo
* @param userId
* @returns user photo
*/
export const getUserPhoto = async (userId): Promise<string> => {
const personaImgUrl = PROFILE_IMAGE_URL + userId;
console.log(personaImgUrl);
// tslint:disable-next-line: no-use-before-declare
const url: string = await getImageBase64(personaImgUrl);
// tslint:disable-next-line: no-use-before-declare
const newHash = await getMd5HashForUrl(url);
if (newHash !== DEFAULT_PERSONA_IMG_HASH && newHash !== DEFAULT_IMAGE_PLACEHOLDER_HASH) {
return 'data:image/png;base64,' + url;
} else {
return 'undefined';
}
};
/**
* Get MD5Hash for the image url to verify whether user has default image or custom image
* @param url
*/
export const getMd5HashForUrl = async (url: string) => {
return new Promise(async (resolve, reject) => {
// tslint:disable-next-line: no-use-before-declare
const library: any = await loadSPComponentById(MD5_MODULE_ID);
try {
const md5Hash = library.Md5Hash;
if (md5Hash) {
const convertedHash = md5Hash(url);
resolve(convertedHash);
}
} catch (error) {
resolve(url);
}
});
};
/**
* Load SPFx component by id, SPComponentLoader is used to load the SPFx components
* @param componentId - componentId, guid of the component library
*/
export const loadSPComponentById = async (componentId: string) => {
return new Promise((resolve, reject) => {
SPComponentLoader.loadComponentById(componentId)
.then((component: any) => {
resolve(component);
})
.catch(error => {});
});
};
/**
* Gets image base64
* @param pictureUrl
* @returns image base64
*/
export const getImageBase64 = async (pictureUrl: string): Promise<string> => {
console.log(pictureUrl);
return new Promise((resolve, reject) => {
let image = new Image();
image.addEventListener('load', () => {
let tempCanvas = document.createElement('canvas');
(tempCanvas.width = image.width), (tempCanvas.height = image.height), tempCanvas.getContext('2d').drawImage(image, 0, 0);
let base64Str;
try {
base64Str = tempCanvas.toDataURL('image/png');
} catch (e) {
return '';
}
base64Str = base64Str.replace(/^data:image\/png;base64,/, '');
resolve(base64Str);
});
image.src = pictureUrl;
});
};

View File

@ -0,0 +1 @@
// A file is required to be in the root of the /src directory by the TypeScript compiler

View File

@ -0,0 +1,29 @@
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "07c6a242-bf1b-4ba4-bf1b-7d0533cd65fd",
"alias": "MySitesWebPart",
"componentType": "WebPart",
"supportsThemeVariants": true,
// The "*" signifies that the version should be taken from the package.json
"version": "*",
"manifestVersion": 2,
// If true, the component can only be installed on sites where Custom Script is allowed.
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart", "SharePointFullPage","TeamsPersonalApp","TeamsTab"],
"preconfiguredEntries": [{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
"group": { "default": "Other" },
"title": { "default": "My Sites" },
"description": { "default": "List sites user has permissions, Include SharePoint Sites, Office365 Groups, OneDrive, Add-Ins App Sites" },
"officeFabricIconFontName": "SharepointLogo",
"properties": {
"title": "My Sites",
"itemsPerPage": 20
}
}]
}

View File

@ -0,0 +1,162 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneSlider
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import * as strings from 'MySitesWebPartStrings';
import { MySites } from './components/MySites/MySites';
import { IMySitesProps } from './components/MySites/IMySitesProps';
import { loadTheme } from "office-ui-fabric-react";
import { DisplayMode } from '@microsoft/sp-core-library';
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
import { sp } from "@pnp/sp";
import { graph } from "@pnp/graph";
const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json");
const teamsDarkTheme = require("../../common/TeamsDarkTheme.json");
const teamsContrastTheme = require("../../common/TeamsContrastTheme.json");
export interface IMySitesWebPartProps {
title: string;
displayMode: DisplayMode;
updateProperty: (value: string) => void;
itemsPerPage: number;
}
export default class MySitesWebPart extends BaseClientSideWebPart<IMySitesWebPartProps> {
private _themeProvider: ThemeProvider;
private _themeVariant: IReadonlyTheme | undefined;
protected async onInit(): Promise<void> {
sp.setup({
spfxContext: this.context
});
graph.setup({
spfxContext: this.context
});
this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
// If it exists, get the theme variant
this._themeVariant = this._themeProvider.tryGetTheme();
// Register a handler to be notified if the theme variant changes
this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
if (this.context.sdks.microsoftTeams) {
// in teams ?
const context = this.context.sdks.microsoftTeams!.context;
console.log('theme', this._themeVariant);
this._applyTheme(context.theme || "default");
this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(
this._applyTheme
);
}
return Promise.resolve();
}
/**
* Update the current theme variant reference and re-render.
*
* @param args The new theme
*/
private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
this._themeVariant = args.theme;
console.log('theme', this._themeVariant);
this.render();
}
// Apply btheme id in Teams
private _applyTheme = (theme: string): void => {
this.context.domElement.setAttribute("data-theme", theme);
document.body.setAttribute("data-theme", theme);
if (theme == "dark") {
loadTheme({
palette: teamsDarkTheme
});
}
if (theme == "default") {
loadTheme({
palette: teamsDefaultTheme
});
}
if (theme == "contrast") {
loadTheme({
palette: teamsContrastTheme
});
}
}
public render(): void {
const element: React.ReactElement<IMySitesProps> = React.createElement(
MySites,
{
title: this.properties.title,
context: this.context,
themeVariant: this._themeVariant,
displayMode: this.displayMode,
itemsPerPage: this.properties.itemsPerPage,
updateProperty: (value: string) => {
this.properties.title = value;
}
}
);
ReactDom.render(element, this.domElement);
}
protected onDispose(): void {
ReactDom.unmountComponentAtNode(this.domElement);
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected get disableReactivePropertyChanges():boolean {
return true;
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('title', {
label: strings.TitleFieldLabel,
value: this.properties.title
}),
PropertyPaneSlider('itemsPerPage', {
min: 1,
max: 100,
value: this.properties.itemsPerPage,
step: 1,
label: strings.ItemsPerPageLabel,
})
]
}
]
}
]
};
}
}

View File

@ -0,0 +1,12 @@
import { IReadonlyTheme } from '@microsoft/sp-component-base';
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { DisplayMode } from "@microsoft/sp-core-library";
export interface IMySitesProps {
title: string;
context: WebPartContext;
themeVariant: IReadonlyTheme | undefined;
displayMode: DisplayMode;
updateProperty: (value: string) => void;
itemsPerPage:number;
}

View File

@ -0,0 +1,12 @@
export interface IMySitesState {
sites: any[];
isLoading: boolean;
errorMessage: string;
hasError:boolean;
title:string;
currentPage:number;
totalPages:number;
searchValue:string;
currentFilter?:number;
}

View File

@ -0,0 +1,74 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';
.mySites {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

View File

@ -0,0 +1,317 @@
import * as React from "react";
import { Filters} from '../../../../Entities/EnumFilters';
import "./paginationOverride.module.scss";
import { IMySitesProps } from "./IMySitesProps";
import { escape } from "@microsoft/sp-lodash-subset";
import {
mergeStyleSets,
Customizer,
MessageBar,
MessageBarType,
Spinner,
SpinnerSize,
SearchBox,
CommandButton,
Stack,
IContextualMenuProps,
IIconProps,
IContextualMenuItem,
FontIcon,
Label,
} from "office-ui-fabric-react";
import { WebPartTitle } from "@pnp/spfx-controls-react";
import { useUserSites } from "../../../../Hooks/useUserSites";
import { IMySitesState } from "./IMySitesState";
import { SiteTile } from "../SiteTile/SiteTile";
import { SearchResults } from "@pnp/sp/search";
import { toInteger } from "lodash";
import Pagination from "@material-ui/lab/Pagination";
import strings from "MySitesWebPartStrings";
import _ from "lodash";
import { MSGraphClient } from "@microsoft/sp-http";
let _searchResults: SearchResults = null;
let _msGraphClient:MSGraphClient = undefined;
export const MySites: React.FunctionComponent<IMySitesProps> = (
props: IMySitesProps
) => {
// Global Compoment Styles
const stylesComponent = mergeStyleSets({
containerTiles: {
marginTop: 25,
display: "grid",
marginBottom: 10,
gridTemplateColumns: "repeat( auto-fit, minmax(300px, 1fr) )",
gridTemplateRows: "auto",
},
webPartTile: {
fontWeight: 500,
marginBottom: 20
},
});
// Document Card Styles
// state
const [state, setState] = React.useState<IMySitesState>({
errorMessage: "",
isLoading: true,
sites: [],
hasError: false,
title: props.title,
currentPage: 1,
totalPages: 50,
searchValue: "",
currentFilter: Filters.All,
});
const filterIcon: IIconProps = { iconName: "Filter" };
// Get Hook functions
const { getUserSites } = useUserSites();
// get User Sites
const _getUserSites = async (
searchString?: string,
currentFilter?: Filters
) => {
try {
console.log('tiles var', props.themeVariant);
setState({ ...state, isLoading: true });
const { itemsPerPage } = props;
const searchResults = await getUserSites(searchString, itemsPerPage, currentFilter);
_searchResults = searchResults;
let _totalPages: number = searchResults.TotalRows / itemsPerPage;
const _modulus: number = searchResults.TotalRows % itemsPerPage;
_totalPages =
_modulus > 0 ? toInteger(_totalPages) + 1 : toInteger(_totalPages);
setState({
searchValue: "",
currentPage: 1,
totalPages: _totalPages,
title: props.title,
isLoading: false,
hasError: false,
errorMessage: "",
sites: _searchResults.PrimarySearchResults,
currentFilter: currentFilter
});
} catch (error) {
console.log(error);
setState({
...state,
hasError: true,
isLoading: false,
errorMessage: error.message,
});
}
};
const _Filtersites = async (filter: string) => {
setState({ ...state, isLoading: true });
let _filteredSites: any[] = [];
switch (filter) {
case "All":
setState({...state,currentFilter: Filters.All});
await _getUserSites('', Filters.All);
break;
case "Groups":
setState({...state,currentFilter: Filters.Group});
await _getUserSites('', Filters.Group);
break;
case "OneDrive":
setState({...state,currentFilter: Filters.OneDrive});
await _getUserSites('', Filters.OneDrive);
break;
case "SharePoint":
setState({...state,currentFilter: Filters.SharePoint});
await _getUserSites('', Filters.SharePoint);
break;
default:
setState({ ...state, isLoading: false });
break;
}
};
const filterMenuProps: IContextualMenuProps = {
items: [
{
key: "0",
text: "All",
iconProps: { iconName: "ThumbnailView" },
onClick: (
ev:
| React.MouseEvent<HTMLElement, MouseEvent>
| React.KeyboardEvent<HTMLElement>,
item: IContextualMenuItem
) => {
_Filtersites(item.text);
},
},
{
key: "1",
text: "SharePoint",
iconProps: { iconName: "SharepointAppIcon16" },
onClick: (
ev:
| React.MouseEvent<HTMLElement, MouseEvent>
| React.KeyboardEvent<HTMLElement>,
item: IContextualMenuItem
) => {
_Filtersites(item.text);
},
},
{
key: "2",
text: "Groups",
iconProps: { iconName: "Group" },
onClick: (
ev:
| React.MouseEvent<HTMLElement, MouseEvent>
| React.KeyboardEvent<HTMLElement>,
item: IContextualMenuItem
) => {
_Filtersites(item.text);
},
},
{
key: "3",
text: "OneDrive",
iconProps: { iconName: "onedrive" },
onClick: (
ev:
| React.MouseEvent<HTMLElement, MouseEvent>
| React.KeyboardEvent<HTMLElement>,
item: IContextualMenuItem
) => {
_Filtersites(item.text);
},
},
],
};
// useEffect component did mount or modified
React.useEffect(() => {
(async () => {
_msGraphClient = await props.context.msGraphClientFactory.getClient();
await _getUserSites("",state.currentFilter);
})();
}, [props.title, props.itemsPerPage]);
// On Search Sites
const _onSearch = async (value: string) => {
await _getUserSites(value,state.currentFilter);
};
// On Search Sites
const _onClear = async (ev: any) => {
await _getUserSites("",state.currentFilter);
};
// Render component
if (state.hasError) { // render message error
return (
<MessageBar messageBarType={MessageBarType.error}>
{state.errorMessage}
</MessageBar>
);
}
// Render list of tiles
return (
<>
<Customizer settings={{ theme: props.themeVariant }}>
<WebPartTitle
displayMode={props.displayMode}
title={state.title}
themeVariant={props.themeVariant}
updateProperty={props.updateProperty}
className={stylesComponent.webPartTile}
/>
<Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 10 }}>
<SearchBox
placeholder="Search my sites"
underlined={true}
value={state.searchValue}
onSearch={_onSearch}
onClear={_onClear}
/>
<CommandButton
iconProps={{ iconName: "refresh" }}
onClick={_onClear}
title={strings.RefreshLabel}
/>
<CommandButton
iconProps={filterIcon}
text={Filters[state.currentFilter]}
menuProps={filterMenuProps}
disabled={false}
checked={true}
/>
</Stack>
{state.isLoading ? (
<Spinner
size={SpinnerSize.medium}
label={strings.LoadingLabel}
></Spinner>
) : (
<>
{ // has sites ?
state.sites.length > 0 ?
<div className={stylesComponent.containerTiles}>
{state.sites.map((site:any, i: number) => {
return (
<SiteTile
site={site}
msGraphClient={_msGraphClient}
themeVariant={props.themeVariant}
></SiteTile>
);
})}
</div>
:
<>
<Stack horizontal verticalAlign="center" horizontalAlign="center" tokens={{childrenGap: 20}} styles={{root: {marginTop: 50}}}>
<FontIcon iconName="Tiles" style={{fontSize: 48}}></FontIcon>
<Label styles={{root:{fontSize: 26}}}>No Sites Found </Label>
</Stack>
</>
}
{state.totalPages > 1 && (
<>
<div
style={{
display: "flex",
justifyContent: "center",
marginTop: 30,
}}
>
<Pagination
color="primary"
count={state.totalPages}
page={state.currentPage}
onChange={async (event:any, page:number) => {
const rs = await _searchResults.getPage(page);
_searchResults = rs;
setState({
...state,
currentPage: page,
sites: _searchResults.PrimarySearchResults,
});
}}
/>
</div>
</>
)}
</>
)}
</Customizer>
</>
);
};

View File

@ -0,0 +1,127 @@
@import "~office-ui-fabric-react/dist/sass/References.scss";
@import "./node_modules/spfx-uifabric-themes/office.theme";
@import "~office-ui-fabric-react/dist/sass/semanticSlots";
/*}*/
:global {
// default theme
$default-background: #f3f2f1;
$default-color: #252423;
$default-button-background: #6264a7;
$default-Button-color: #f3f2f1;
// dark theme
$dark-background: #2d2c2c;
$dark-color: #ffffff;
$dark-button-background: #6264a7;
$dark-button-color: #2d2c2c;
// contrast theme
$contrast-background: #000000;
$contrast-color: #ffffff;
$contrast-button-background: #b5c01c;
$contrast-Button-color: #000000;
.MuiPaginationItem-root {
/* color: rgba(0, 0, 0, 0.87); */
color: $ms-color-neutralPrimary !important;
}
.MuiButtonBase-root {
/* color: inherit; */
color: $ms-color-neutralPrimary !important;
}
.MuiPaginationItem-textPrimary.Mui-selected {
color: $ms-color-white !important;
background-color: $ms-themePrimary !important;
}
.MuiPaginationItem-page:hover {
background-color: $ms-themePrimary !important;
}
[data-theme="dark"] {
.MuiPaginationItem-root {
/* color: rgba(0, 0, 0, 0.87); */
color: $dark-color !important;
}
.MuiButtonBase-root {
/* color: inherit; */
color: $dark-color !important;
}
.MuiPaginationItem-textPrimary.Mui-selected {
color: $dark-color !important;
background-color: $dark-button-background !important;
}
.MuiPaginationItem-page:hover {
background-color: $dark-button-background !important;
}
.ms-Dropdown-optionText {
color: $ms-color-white !important;
}
[class^="propertyPaneFooter_"] {
background-color: $dark-background;
}
}
[data-theme="default"] {
.MuiPaginationItem-root {
/* color: rgba(0, 0, 0, 0.87); */
color: $default-color !important;
}
.MuiButtonBase-root {
/* color: inherit; */
color: $default-color !important;
}
.MuiPaginationItem-textPrimary.Mui-selected {
color: $ms-color-white !important;
background-color: $default-button-background !important;
}
.MuiPaginationItem-page:hover {
background-color: $default-button-background !important;
}
[class^="propertyPaneFooter_"] {
background-color: $default-background;
}
}
[data-theme="contrast"] {
.MuiPaginationItem-root {
/* color: rgba(0, 0, 0, 0.87); */
color: $contrast-color !important;
}
.MuiButtonBase-root {
/* color: inherit; */
color: $contrast-color !important;
}
.MuiPaginationItem-textPrimary.Mui-selected {
color: $contrast-color !important;
background-color: $contrast-button-background !important;
}
.MuiPaginationItem-page:hover {
background-color: $contrast-button-background !important;
}
.ms-Dropdown-optionText {
color: $ms-color-white !important;
}
[class^="propertyPaneFooter_"] {
background-color: $contrast-background;
}
}
}

View File

@ -0,0 +1,8 @@
import { IReadonlyTheme } from '@microsoft/sp-component-base';
import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
export interface ISiteTileProps {
msGraphClient:MSGraphClient;
site:any;
themeVariant: IReadonlyTheme | undefined;
}

View File

@ -0,0 +1,10 @@
export interface ISiteTileState {
hasTeam:boolean;
tileData: {
activityUserEmail:string ,
activityUser:string,
activityDate:string,
activityMessage:string,
userPhoto:string
};
}

View File

@ -0,0 +1 @@
@import '~office-ui-fabric-react/dist/sass/References.scss';

View File

@ -0,0 +1,266 @@
import * as React from "react";
import { getUserPhoto } from "../../../../Utils/Utils";
import { ISiteTileProps } from "./ISiteTileProps";
import { ISiteTileState } from "./ISiteTileState";
import { escape } from "@microsoft/sp-lodash-subset";
import { ITitleData } from "../../../../Entities/ITitleData";
import strings from "MySitesWebPartStrings";
import styles from './SiteTile.module.scss';
import { useUserSites } from '../../../../Hooks/useUserSites';
import {
mergeStyleSets,
IDocumentCardStyles,
DocumentCardTitle,
DocumentCardPreview,
DocumentCardDetails,
DocumentCardActivity,
ImageFit,
Label,
Icon,
IIconStyles,
DocumentCard,
DocumentCardType,
FontSizes,
IDocumentCardActivityStyles,
IDocumentCardActivityStyleProps,
FontIcon,
ImageIcon,
css,
TooltipHost,
} from "office-ui-fabric-react";
const _siteLogoSP: string =
"https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/sharepoint_48x1.svg";
const _siteLogoOndrive: string =
"https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/onedrive_48x1.svg";
const _teamsLogo:string = "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/teams_48x1.svg";
export const SiteTile: React.FunctionComponent<ISiteTileProps> = (
props: ISiteTileProps
) => {
const [state, setState] = React.useState<ISiteTileState>({
hasTeam: false,
tileData: {} as ITitleData,
});
const { checkGroupHasTeam } = useUserSites();
// Global Compoment Styles
const stylesTile = mergeStyleSets({
imageContainer: {
display: "flex",
width: 104,
height: "100%",
alignItems: "center",
justifyContent: "center",
fontSize: props.themeVariant ? props.themeVariant.fonts.superLarge.fontSize: 24,
color: props.themeVariant ? props.themeVariant.palette.themePrimary: '',
backgroundColor: props.themeVariant ? props.themeVariant.palette.neutralLighterAlt: '',
},
webPartTile: {
paddingLeft: 30,
paddingTop: 20,
},
titleContainer: {
width: "100%",
display: "flex",
flexDirection: "row",
justifyContent: "start",
},
imageClass: {
marginTop: 8,
fontSize: 20,
height: 20,
width: 20,
marginRight: 7,
color: props.themeVariant ? props.themeVariant.palette.themePrimary: '',
}
});
const documentCardStyles: Partial<IDocumentCardStyles> = {
root: {
maxWidth: "100%",
maxHeight: 106,
marginTop: 10,
marginLeft: 7,
marginRight: 7,
},
};
const groupIconStyles: Partial<IIconStyles> = {
root: {
fontSize: 20,
color: props.themeVariant ? props.themeVariant.palette.themePrimary: 'white',
marginTop: 8,
marginRight: 16,
},
};
const DocumentCardActivityStyles: Partial<IDocumentCardActivityStyles> = {
root: { paddingBottom: 0 },
};
const DocumentCardDetailsStyles: Partial<IDocumentCardActivityStyles> = {
root: { justifyContent: "flex-start" },
};
let _activityUserEmail: string = "N/A";
let _activityUser: string = "N/A";
let _activityDate: string = "N/A";
let _activityMessage: string = "No Information";
let _userPhoto: string = undefined;
const {
SiteLogo,
Title,
GroupId,
LastModifiedTime,
ModifiedById,
SiteGroup,
OriginalPath,
CreatedBy,
Created,
} = props.site;
// Use Effect on Mounting
React.useEffect(() => {
(async () => {
if (ModifiedById) {
const _modifiedBySplit = ModifiedById.split("|");
_activityUserEmail = _modifiedBySplit[0].trim();
_activityUser = _modifiedBySplit[1].trim();
_activityDate = new Date(LastModifiedTime).toLocaleString();
_activityMessage = `${strings.ChangedOnLabel}${_activityDate}`;
try {
if (_activityUserEmail) {
console.log(_activityUserEmail);
_userPhoto = await getUserPhoto(_activityUserEmail);
}
} catch (error) {
console.log(error);
}
// _userPhoto = `/_layouts/15/userphoto.aspx?size=M&accountname=${_activityUserEmail}`;
} else {
_activityUserEmail = undefined;
_activityUser = CreatedBy;
_activityDate = new Date(Created).toLocaleString();
_activityMessage = `${strings.CreatedOnLabel}${_activityDate}`;
_userPhoto = undefined;
}
// If is a group check if has a team
let _hasTeam:boolean = false;
if (GroupId){
_hasTeam = await checkGroupHasTeam(GroupId, props.msGraphClient);
}
// Update State
setState({
hasTeam: _hasTeam,
tileData: {
activityDate: _activityDate,
activityUser: _activityUser,
activityMessage: _activityMessage,
activityUserEmail: _activityUserEmail,
userPhoto: _userPhoto
}
});
})();
}, []);
// destrectur TileData Activity
const {
activityDate,
activityMessage,
activityUser,
activityUserEmail,
userPhoto,
} = state.tileData;
const { hasTeam } = state;
// Render Component
return (
<>
<DocumentCard
styles={documentCardStyles}
type={DocumentCardType.compact}
onClickHref={OriginalPath}
>
{props.site.SiteLogo ? (
<DocumentCardPreview
className={stylesTile.imageContainer}
previewImages={[
{
previewImageSrc: SiteLogo,
width: 104,
height: 104,
imageFit: ImageFit.cover,
},
]}
></DocumentCardPreview>
) : (
<DocumentCardPreview
className={stylesTile.imageContainer}
previewImages={[
{
previewImageSrc:
SiteGroup == "OneDrive" ? _siteLogoOndrive : _siteLogoSP,
width: 68,
height: 68,
imageFit: ImageFit.cover,
},
]}
></DocumentCardPreview>
)}
<DocumentCardDetails styles={DocumentCardDetailsStyles}>
<div className={stylesTile.titleContainer}>
<DocumentCardTitle title={Title} shouldTruncate styles={{root:{flexGrow:2}}}></DocumentCardTitle>
{GroupId && hasTeam && (
<ImageIcon
title="Group has a Team"
imageProps={{
src: _teamsLogo,
className: stylesTile.imageClass,
}}
/>
)}
{GroupId && (
<Icon
styles={groupIconStyles}
iconName="Group"
title="Office 365 Group"
></Icon>
)}
{SiteGroup == "OneDrive" && (
<Icon
styles={groupIconStyles}
iconName="onedrive"
title="User OneDrive"
></Icon>
)}
{SiteGroup == "SharePoint" && !GroupId && (
<Icon
styles={groupIconStyles}
iconName="SharepointAppIcon16"
title="SharePoint Site"
></Icon>
)}
</div>
<TooltipHost content={activityMessage} calloutProps={{gapSpace:5}}>
<DocumentCardActivity
styles={DocumentCardActivityStyles}
activity={activityMessage}
people={[{ name: activityUser, profileImageSrc: userPhoto }]}
/>
</TooltipHost>
</DocumentCardDetails>
</DocumentCard>
</>
);
};

View File

@ -0,0 +1,12 @@
define([], function() {
return {
CreatedOnLabel: "Created on ",
ChangedOnLabel: "Changed on ",
RefreshLabel: "Refresh",
LoadingLabel: "Loading...",
"PropertyPaneDescription": "List sites user has permissions, Include SharePoint Sites, Office365 Groups, OneDrive, Add-Ins App Sites",
"BasicGroupName": "Properties",
"TitleFieldLabel": "Title",
"ItemsPerPageLabel": "Number items per page"
}
});

View File

@ -0,0 +1,15 @@
declare interface IMySitesWebPartStrings {
CreatedOnLabel: string;
ChangedOnLabel: string;
RefreshLabel: string;
LoadingLabel: string;
PropertyPaneDescription: string;
BasicGroupName: string;
TitleFieldLabel: string;
ItemsPerPageLabel: string;
}
declare module 'MySitesWebPartStrings' {
const strings: IMySitesWebPartStrings;
export = strings;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 B

View File

@ -0,0 +1,64 @@
/**
* This script updates the package-solution version analogue to the
* the package.json file.
*/
if (process.env.npm_package_version === undefined) {
throw 'Package version cannot be evaluated';
}
// define path to package-solution file
const solution = './config/package-solution.json',
teams = './teams/manifest.json';
// require filesystem instance
const fs = require('fs');
// get next automated package version from process variable
const nextPkgVersion = process.env.npm_package_version;
// make sure next build version match
const nextVersion = nextPkgVersion.indexOf('-') === -1 ?
nextPkgVersion : nextPkgVersion.split('-')[0];
// Update version in SPFx package-solution if exists
if (fs.existsSync(solution)) {
// read package-solution file
const solutionFileContent = fs.readFileSync(solution, 'UTF-8');
// parse file as json
const solutionContents = JSON.parse(solutionFileContent);
// set property of version to next version
solutionContents.solution.version = nextVersion + '.0';
// save file
fs.writeFileSync(
solution,
// convert file back to proper json
JSON.stringify(solutionContents, null, 2),
'UTF-8');
}
// Update version in teams manifest if exists
if (fs.existsSync(teams)) {
// read package-solution file
const teamsManifestContent = fs.readFileSync(teams, 'UTF-8');
// parse file as json
const teamsContent = JSON.parse(teamsManifestContent);
// set property of version to next version
teamsContent.version = nextVersion;
// save file
fs.writeFileSync(
teams,
// convert file back to proper json
JSON.stringify(teamsContent, null, 2),
'UTF-8');
}

View File

@ -0,0 +1,41 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",
"lib"
]
}

View File

@ -0,0 +1,30 @@
{
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}