commit new sample react-documents-links-accordion
This commit is contained in:
João Mendes
parent
1911f8a5c8
commit
d7c31a3938
|
|
@ -0,0 +1,33 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
release
|
||||
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
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.12.1",
|
||||
"libraryName": "react-menu-accordion",
|
||||
"libraryId": "f7134ff1-6e97-430c-9a73-5dc4902c75e3",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
# Documents Links Accordion
|
||||
|
||||
## Summary
|
||||
|
||||
This web part allows user create a accordion with documents links grouped by any column of document library.
|
||||
When the user clicks on the header it dynamically load documents.
|
||||
|
||||
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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)
|
||||
|
||||
## WebPart Properties
|
||||
|
||||
Property |Type|Required| comments
|
||||
--------------------|----|--------|----------
|
||||
WebPart Title| Text| no|
|
||||
Select Document Library| dropdown|yes
|
||||
Select Field to Group By | dropdown|yes
|
||||
|
||||
|
||||
## Solution
|
||||
|
||||
The Web Part Use PnPjs library, Fluent-Ui-react components
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
React Documents Links Accordion |[João Mendes](https://github.com/joaojmendes) ([@joaojmendes](https://twitter.com/joaojmendes))
|
||||
|
||||
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|October 10, 2021|Initial release
|
||||
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to sample folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp build`
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- Add to AppCatalog and deploy
|
||||
|
||||
|
||||
## 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.**
|
||||
|
||||
|
||||
|
||||
## Support
|
||||
|
||||
We do not support samples, but we do use GitHub to track issues and constantly want to improve these samples.
|
||||
|
||||
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-list-items-menu&authors=@joaojmendes%20@Ravikadri&title=react-list-items-menu%20-%20).
|
||||
|
||||
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-list-items-menu&authors=@joaojmendes%20@Ravikadri&title=react-list-items-menu%20-%20).
|
||||
|
||||
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-list-items-menu&authors=@joaojmendes%20@Ravikadri&title=react-list-items-menu%20-%20).
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-documents-links-accordion" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 460 KiB |
|
|
@ -0,0 +1,92 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-list-items-menu",
|
||||
"source": "pnp",
|
||||
"title": "List Items Menu",
|
||||
"shortDescription": "Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents.",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-items-menu",
|
||||
"longDescription": [
|
||||
"Allows user create a navigation menu , grouped by any column of document library. When the user clicks on the header it dynamically load documents."
|
||||
],
|
||||
"creationDateTime": "2021-02-18",
|
||||
"updateDateTime": "2021-02-18",
|
||||
"products": [
|
||||
"SharePoint",
|
||||
"Office"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.11.0"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-SUPPORTSTHEMEVARIANTS",
|
||||
"value": "true"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-TEAMSTAB",
|
||||
"value": "true"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-TEAMSPERSONALAPP",
|
||||
"value": "true"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-list-items-menu/assets/ListMenuDocs.gif",
|
||||
"alt": "List Items Menu"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"order": 101,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu/assets/reactListItems1.JPG?raw=true",
|
||||
"alt": "List Items Menu"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"order": 102,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu/assets/reactListItems2.JPG?raw=true",
|
||||
"alt": "List Items Menu"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"order": 103,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-list-items-menu/assets/reactListItems3.JPG?raw=true",
|
||||
"alt": "List Items Menu"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "joaojmendes",
|
||||
"company": "Storm Technology Ltd",
|
||||
"pictureUrl": "https://github.com/joaojmendes.png",
|
||||
"name": "Jo\u00E3o Mendes",
|
||||
"twitter": "joaojmendes"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
},
|
||||
{
|
||||
"name": "Supporting section backgrounds",
|
||||
"description": "Starting with SharePoint Framework v1.8, web parts can be made aware of any section backgrounds and use these colors to improve the appearance of a web part when hosted in a section with a different background.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds"
|
||||
},
|
||||
{
|
||||
"name": "Building Microsoft Teams Tabs using SharePoint Framework",
|
||||
"description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"documentslinksaccordion-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/DocumentsLinksAccordion/DocumentsLinksAccordionWebPart.js",
|
||||
"manifest": "./src/webparts/DocumentsLinksAccordion/DocumentsLinksAccordionWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"DocumentsLinksAccordionWebPartStrings": "lib/webparts/DocumentsLinksAccordion/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"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "./release/assets/"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "react-menu-accordion",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "react-documentslinks-accordion",
|
||||
"id": "f7134ff1-6e97-430c-9a73-5dc4902c75e3",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": ""
|
||||
}
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/react-documentslinks-accordion.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -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/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "react-documentslinks-accordion",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.12.1",
|
||||
"@microsoft/sp-lodash-subset": "1.12.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
|
||||
"@microsoft/sp-property-pane": "1.12.1",
|
||||
"@microsoft/sp-webpart-base": "1.12.1",
|
||||
"@pnp/spfx-controls-react": "^3.3.0",
|
||||
"@pnp/spfx-property-controls": "^3.2.0",
|
||||
"@uifabric/file-type-icons": "^7.8.1",
|
||||
"date-fns": "^2.25.0",
|
||||
"office-ui-fabric-react": "7.156.0",
|
||||
"react": "16.9.0",
|
||||
"react-dom": "16.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "16.9.36",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@microsoft/sp-build-web": "1.12.1",
|
||||
"@microsoft/sp-tslint-rules": "1.12.1",
|
||||
"@microsoft/sp-module-interfaces": "1.12.1",
|
||||
"@microsoft/sp-webpart-workbench": "1.12.1",
|
||||
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
|
||||
"gulp": "~4.0.2",
|
||||
"ajv": "~5.2.2",
|
||||
"@types/webpack-env": "1.13.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import { SPComponentLoader } from "@microsoft/sp-loader";
|
||||
import { sp } from "@pnp/sp";
|
||||
import "@pnp/sp/webs";
|
||||
import "@pnp/sp/regional-settings/web";
|
||||
import { IRegionalSettingsInfo } from "@pnp/sp/regional-settings";
|
||||
|
||||
// get all the web's regional settings
|
||||
|
||||
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;
|
||||
});
|
||||
};
|
||||
|
||||
export const zeroPad = (num, places) => {
|
||||
var zero = places - num.toString().length + 1;
|
||||
return Array(+(zero > 0 && zero)).join("0") + num;
|
||||
};
|
||||
|
||||
export const getSiteRegionalSettings = async (): Promise<IRegionalSettingsInfo> => {
|
||||
try {
|
||||
const s = await sp.web.regionalSettings();
|
||||
return s;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Promise.reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
export const convertTimeTo12H = (
|
||||
_hour: number
|
||||
): Promise<{ hourInTimeFormat: string; current12HTimeFormat: string }> => {
|
||||
console.log("prm", _hour);
|
||||
return new Promise((resolve, rejected) => {
|
||||
let hourInTimeFormat: string = "";
|
||||
let current12HTimeFormat: string = "AM";
|
||||
if (_hour >= 0 && _hour <= 11) {
|
||||
if (_hour === 0) {
|
||||
hourInTimeFormat = "12";
|
||||
} else {
|
||||
hourInTimeFormat = _hour.toString();
|
||||
}
|
||||
current12HTimeFormat = "AM";
|
||||
} else {
|
||||
const _hour12h = _hour - 12;
|
||||
hourInTimeFormat = _hour12h === 0 ? "12" : _hour12h.toString();
|
||||
current12HTimeFormat = "PM";
|
||||
}
|
||||
resolve({ hourInTimeFormat, current12HTimeFormat });
|
||||
});
|
||||
};
|
||||
|
||||
export const convertTimeTo24h = (hour: number, current12HTimeFormat: string): Promise<string> => {
|
||||
return new Promise((resolve, rejected) => {
|
||||
let hourInTimeFormat: string = "";
|
||||
if (current12HTimeFormat === "PM") {
|
||||
if (hour >= 1 && hour <= 11) {
|
||||
if (hour === 12) {
|
||||
hourInTimeFormat = "12";
|
||||
}
|
||||
const _hour24h = hour + 12;
|
||||
hourInTimeFormat = _hour24h.toString();
|
||||
}
|
||||
} else {
|
||||
if (hour === 12) {
|
||||
hourInTimeFormat = "00";
|
||||
} else {
|
||||
hourInTimeFormat = hour.toString();
|
||||
}
|
||||
}
|
||||
resolve(hourInTimeFormat);
|
||||
});
|
||||
};
|
||||
|
||||
/* Check if string is valid date */
|
||||
export const checkIfValidDate = (str:string):boolean => {
|
||||
// Regular expression to check if string is valid date
|
||||
const regexExp = /(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})/gi;
|
||||
|
||||
return regexExp.test(str);
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
import * as React from "react";
|
||||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
|
||||
import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
import { IRegionalSettingsInfo} from "@pnp/sp/regional-settings";
|
||||
|
||||
|
||||
export interface IAppContextProps {
|
||||
currentUser:string;
|
||||
msGraphClient:MSGraphClient;
|
||||
locale:string;
|
||||
themeVariant: IReadonlyTheme | undefined;
|
||||
}
|
||||
|
||||
export const AppContext = React.createContext<IAppContextProps>(undefined);
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
|
||||
export const DayPickerStrings: IDatePickerStrings = {
|
||||
months: [
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
'April',
|
||||
'May',
|
||||
'June',
|
||||
'July',
|
||||
'August',
|
||||
'September',
|
||||
'October',
|
||||
'November',
|
||||
'December',
|
||||
],
|
||||
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
|
||||
goToToday: 'Go to today',
|
||||
prevMonthAriaLabel: 'Go to previous month',
|
||||
nextMonthAriaLabel: 'Go to next month',
|
||||
prevYearAriaLabel: 'Go to previous year',
|
||||
nextYearAriaLabel: 'Go to next year',
|
||||
closeButtonAriaLabel: 'Close date picker',
|
||||
monthPickerHeaderAriaLabel: '{0}, select to change the year',
|
||||
yearPickerHeaderAriaLabel: '{0}, select to change the month',
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.DocumentsLinksAccordion {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,356 @@
|
|||
import * as React from "react";
|
||||
import * as strings from "DocumentsLinksAccordionWebPartStrings";
|
||||
import { filter, findIndex, uniqBy } from "lodash";
|
||||
import {
|
||||
Customizer,
|
||||
INavLink,
|
||||
INavLinkGroup,
|
||||
Label,
|
||||
Link,
|
||||
mergeStyleSets,
|
||||
MessageBar,
|
||||
MessageBarType,
|
||||
Spinner,
|
||||
SpinnerSize,
|
||||
Stack,
|
||||
FontIcon,
|
||||
Text,
|
||||
DetailsList,
|
||||
DetailsListLayoutMode,
|
||||
IColumn,
|
||||
SelectionMode,
|
||||
IDetailsListProps,
|
||||
IStackStyles,
|
||||
IStyle,
|
||||
IDetailsListStyles,
|
||||
} from "office-ui-fabric-react";
|
||||
|
||||
import { getFileTypeIconProps } from "@uifabric/file-type-icons";
|
||||
import { useList } from "../../hooks/useList";
|
||||
import { IDocumentsLinksAccordionState } from "./IDocumentsLinksAccordionState";
|
||||
import { IDocumentsLinksAccordionProps } from "./IDocumentsLinksAccordionProps";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionItemHeading,
|
||||
AccordionItemButton,
|
||||
AccordionItemPanel,
|
||||
} from "@pnp/spfx-controls-react/lib/AccessibleAccordion";
|
||||
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
|
||||
|
||||
const { getGroupItems, getGroupHeaders, getField } = useList();
|
||||
export const DocumentsLinksAccordion: React.FunctionComponent<IDocumentsLinksAccordionProps> = (
|
||||
props: IDocumentsLinksAccordionProps
|
||||
) => {
|
||||
const [state, setState] = React.useState<IDocumentsLinksAccordionState>({
|
||||
navLinkGroups: [],
|
||||
isLoading: false,
|
||||
hasError: false,
|
||||
errorMessage: "",
|
||||
listName: "",
|
||||
});
|
||||
|
||||
const stackItemStyles: Partial<IStackStyles> = React.useMemo(() => {
|
||||
return {
|
||||
root: {
|
||||
padding: 7,
|
||||
} as IStyle,
|
||||
};
|
||||
}, []);
|
||||
|
||||
const listViewStyles: Partial<IDetailsListStyles> = React.useMemo(() => {
|
||||
return {
|
||||
focusZone: {
|
||||
width: "auto",
|
||||
maxHeight: 450,
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
backgroundColor: props.themeVariant?.palette?.neutralLighter,
|
||||
},
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "7.5px",
|
||||
},
|
||||
"scrollbar-color": props.themeVariant?.palette?.neutralLighter,
|
||||
"scrollbar-width": "thin",
|
||||
},
|
||||
root: {
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
backgroundColor: props.themeVariant?.palette?.neutralLighter,
|
||||
},
|
||||
"&::-webkit-scrollbar": {
|
||||
height: "7.5px",
|
||||
},
|
||||
"scrollbar-color": props.themeVariant?.palette?.neutralLighter,
|
||||
"scrollbar-width": "thin",
|
||||
},
|
||||
};
|
||||
}, []);
|
||||
|
||||
const classComponent = React.useMemo(() => {
|
||||
return mergeStyleSets({
|
||||
webPartTitle: {
|
||||
fontWeight: 600,
|
||||
overflowX: "hidden",
|
||||
textOverflow: "Ellipsis",
|
||||
fontSize: props.themeVariant.fonts.large.fontSize,
|
||||
marginBottom: 10,
|
||||
},
|
||||
});
|
||||
}, [props.themeVariant]);
|
||||
|
||||
const stateRef = React.useRef(state); // Use to access state on eventListenners
|
||||
|
||||
const columns: IColumn[] = React.useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: "documentRenderLink",
|
||||
name: "Document",
|
||||
fieldName: "name",
|
||||
minWidth: 400,
|
||||
maxWidth: 800,
|
||||
isResizable: false,
|
||||
data: "string",
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
const onRenderRow: IDetailsListProps["onRenderRow"] = (propsItem) => {
|
||||
if (propsItem.item) {
|
||||
const item = propsItem.item as INavLink;
|
||||
return (
|
||||
<Stack horizontal horizontalAlign="start" tokens={{ childrenGap: 10 }} styles={stackItemStyles}>
|
||||
<FontIcon iconName={item.iconProps.iconName} />
|
||||
<Link href={item.url} target="_blank">
|
||||
<Text variant={"medium"}>{item.name}</Text>
|
||||
</Link>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
React.useEffect(() => {
|
||||
(async () => {
|
||||
if (!props.listId || !props.fieldName) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
let _navLinksGroups: INavLinkGroup[] = [];
|
||||
stateRef.current = {
|
||||
...stateRef.current,
|
||||
isLoading: true,
|
||||
navLinkGroups: _navLinksGroups,
|
||||
};
|
||||
setState(stateRef.current);
|
||||
const _groupHeaders = await getGroupHeaders(props.listId, props.fieldName, props.listBaseTemplate);
|
||||
const { fieldName } = props;
|
||||
const _field: any = await getField(props.listId, props.fieldName);
|
||||
|
||||
for (const groupHeader of _groupHeaders) {
|
||||
let _name: any;
|
||||
switch (_field.fieldType) {
|
||||
case "TaxonomyFieldType":
|
||||
_name = groupHeader[fieldName]?.Label ?? "Unassigned";
|
||||
break;
|
||||
case "TaxonomyFieldTypeMulti":
|
||||
_name = groupHeader[fieldName][0]?.Label ?? "Unassigned";
|
||||
break;
|
||||
case "User":
|
||||
if (_name != "Unassigned") {
|
||||
_name = groupHeader[fieldName][0]?.title;
|
||||
}
|
||||
break;
|
||||
case "Lookup":
|
||||
_name =
|
||||
groupHeader[props.fieldName] !== "" &&
|
||||
groupHeader[props.fieldName] !== undefined &&
|
||||
groupHeader[props.fieldName][0].lookupValue !== ""
|
||||
? groupHeader[props.fieldName][0]?.lookupValue
|
||||
: "Unassigned";
|
||||
break;
|
||||
default:
|
||||
_name =
|
||||
groupHeader[props.fieldName] !== "" && groupHeader[props.fieldName] !== undefined
|
||||
? groupHeader[props.fieldName]
|
||||
: "Unassigned";
|
||||
break;
|
||||
}
|
||||
_navLinksGroups.push({
|
||||
name: _name,
|
||||
groupData: _name,
|
||||
collapseByDefault: true,
|
||||
links: [],
|
||||
});
|
||||
// Ensure the groups name are unique!
|
||||
_navLinksGroups = uniqBy(_navLinksGroups, "name");
|
||||
}
|
||||
stateRef.current = {
|
||||
...stateRef.current,
|
||||
hasError: false,
|
||||
errorMessage: "",
|
||||
isLoading: false,
|
||||
listName: _field.fieldScope,
|
||||
navLinkGroups: _navLinksGroups,
|
||||
};
|
||||
|
||||
setState(stateRef.current);
|
||||
} catch (error) {
|
||||
stateRef.current = {
|
||||
...stateRef.current,
|
||||
hasError: true,
|
||||
errorMessage: error.message,
|
||||
};
|
||||
setState(stateRef.current);
|
||||
}
|
||||
})();
|
||||
}, [props.listId, props.fieldName]);
|
||||
|
||||
// On Header click get Items for the header
|
||||
const onGroupHeaderClick = React.useCallback(
|
||||
async (ev: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||
try {
|
||||
const _groupName = ev.currentTarget.innerText;
|
||||
const { navLinkGroups } = stateRef.current;
|
||||
|
||||
setState(stateRef.current);
|
||||
const _navGroup = filter(navLinkGroups, { name: _groupName });
|
||||
if (_navGroup?.length && _navGroup[0]?.links?.length === 0) {
|
||||
const _navlinks: INavLink[] = [];
|
||||
const _groupHeaderItems: any[] = await getGroupItems(
|
||||
props.listId,
|
||||
props.fieldName,
|
||||
_groupName,
|
||||
props.listBaseTemplate
|
||||
);
|
||||
if (_groupHeaderItems?.length) {
|
||||
for (const _groupHeaderItem of _groupHeaderItems) {
|
||||
if (props.listBaseTemplate === 0) {
|
||||
// List
|
||||
_navlinks.push({
|
||||
name: _groupHeaderItem.Title,
|
||||
url: `${_groupHeaderItem.FileDirRef}/dispform.aspx?ID=${_groupHeaderItem.Id}`,
|
||||
iconProps: {
|
||||
iconName: "TaskManager",
|
||||
},
|
||||
key: _groupHeaderItem.Id,
|
||||
target: "_blank",
|
||||
isExpanded: false,
|
||||
});
|
||||
}
|
||||
if (props.listBaseTemplate === 1) {
|
||||
// Document Library
|
||||
_navlinks.push({
|
||||
name: _groupHeaderItem.FileLeafRef,
|
||||
url: _groupHeaderItem.FileRef,
|
||||
iconProps: {
|
||||
...getFileTypeIconProps({
|
||||
extension: _groupHeaderItem.DocIcon,
|
||||
size: 16,
|
||||
imageFileType: "svg",
|
||||
}),
|
||||
},
|
||||
key: _groupHeaderItem.title,
|
||||
target: "_blank",
|
||||
isExpanded: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Update Navigation with Items of Group
|
||||
|
||||
_navGroup[0].links = _navlinks;
|
||||
}
|
||||
const _index = findIndex(navLinkGroups, { name: _groupName });
|
||||
_navGroup[0].collapseByDefault = true;
|
||||
navLinkGroups[_index] = _navGroup[0];
|
||||
|
||||
stateRef.current = { ...stateRef.current, navLinkGroups: navLinkGroups };
|
||||
setState(stateRef.current);
|
||||
} catch (error) {}
|
||||
},
|
||||
[props]
|
||||
);
|
||||
|
||||
// Show Error if Exists
|
||||
if (state.hasError) {
|
||||
return (
|
||||
<>
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline>
|
||||
{state.errorMessage}
|
||||
</MessageBar>
|
||||
</>
|
||||
);
|
||||
}
|
||||
// render component
|
||||
if (!props.listId || !props.fieldName) {
|
||||
return (
|
||||
<Placeholder
|
||||
iconName="Edit"
|
||||
iconText={strings.PlaceHolderIconText}
|
||||
description={strings.PlaceHolderDescription}
|
||||
buttonLabel={strings.PlaceHolderButtonLable}
|
||||
onConfigure={props.onConfigure}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Customizer settings={{ theme: props.themeVariant }}>
|
||||
{state.isLoading ? (
|
||||
<Stack horizontal horizontalAlign="center">
|
||||
<Spinner size={SpinnerSize.medium}></Spinner>
|
||||
</Stack>
|
||||
) : (
|
||||
<>
|
||||
<Stack horizontalAlign="space-between" horizontal tokens={{ childrenGap: 10 }} style={{ width: "100%" }}>
|
||||
<div className={classComponent.webPartTitle}>{props.title}</div>
|
||||
<Link href={state.listName}>{strings.ViewAllLabel}</Link>
|
||||
</Stack>
|
||||
{state.navLinkGroups?.length === 0 ? (
|
||||
<Label
|
||||
style={{
|
||||
fontWeight: 400,
|
||||
fontSize: props.themeVariant.fonts.small.fontSize,
|
||||
}}
|
||||
>
|
||||
{strings.NodocumentsLabel}
|
||||
</Label>
|
||||
) : (
|
||||
<Accordion allowZeroExpanded allowMultipleExpanded>
|
||||
{state.navLinkGroups.map((item, i) => {
|
||||
return (
|
||||
<AccordionItem>
|
||||
<AccordionItemHeading
|
||||
onClick={async (ev) => {
|
||||
await onGroupHeaderClick(ev);
|
||||
}}
|
||||
>
|
||||
<AccordionItemButton>{item.name}</AccordionItemButton>
|
||||
</AccordionItemHeading>
|
||||
<AccordionItemPanel>
|
||||
<Stack>
|
||||
<DetailsList
|
||||
items={item.links}
|
||||
columns={columns}
|
||||
styles={listViewStyles}
|
||||
compact={true}
|
||||
selectionMode={SelectionMode.none}
|
||||
setKey="none"
|
||||
layoutMode={DetailsListLayoutMode.justified}
|
||||
isHeaderVisible={false}
|
||||
onRenderRow={onRenderRow}
|
||||
/>
|
||||
</Stack>
|
||||
</AccordionItemPanel>
|
||||
</AccordionItem>
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Customizer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
import { IReadonlyTheme } from "@microsoft/sp-component-base";
|
||||
import { DisplayMode } from "@microsoft/sp-core-library";
|
||||
|
||||
export interface IDocumentsLinksAccordionProps {
|
||||
title: string;
|
||||
listId:string;
|
||||
listBaseTemplate:number;
|
||||
fieldName:string;
|
||||
locale:string;
|
||||
themeVariant: IReadonlyTheme | undefined;
|
||||
onConfigure: () => void;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { Nav, INavStyles, INavLinkGroup } from 'office-ui-fabric-react/lib/Nav';
|
||||
export interface IDocumentsLinksAccordionState {
|
||||
navLinkGroups: INavLinkGroup[];
|
||||
isLoading: boolean;
|
||||
hasError:boolean;
|
||||
errorMessage:string;
|
||||
listName:string;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export interface IListItemsMenu {
|
||||
groupBy:string;
|
||||
id:string;
|
||||
title:string;
|
||||
url:string;
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
import "@pnp/sp/fields";
|
||||
import "@pnp/sp/items";
|
||||
import "@pnp/sp/lists";
|
||||
import "@pnp/sp/webs";
|
||||
|
||||
import { sortBy, uniqBy } from "lodash";
|
||||
|
||||
import { sp } from "@pnp/sp";
|
||||
import { IFieldInfo } from "@pnp/sp/fields";
|
||||
import { IListInfo } from "@pnp/sp/lists";
|
||||
import * as moment from "moment";
|
||||
import { format, parse, parseISO } from "date-fns";
|
||||
import { checkIfValidDate } from "../Utils/Utils";
|
||||
|
||||
export const useList = () => {
|
||||
// Run on useList hook
|
||||
(async () => {})();
|
||||
|
||||
// Get List Columns
|
||||
const getListColumns = async (listId: string): Promise<IFieldInfo[]> => {
|
||||
const _listColumnsResults: IFieldInfo[] = await sp.web.lists.getById(listId).fields.filter("Hidden eq false").get();
|
||||
|
||||
const _wColumns: IFieldInfo[] = uniqBy(sortBy(_listColumnsResults, "Title"), "Title");
|
||||
return _wColumns;
|
||||
};
|
||||
|
||||
const getField = async (listId: string, field: string): Promise<any> => {
|
||||
const _field: IFieldInfo = await sp.web.lists.getById(listId).fields.getByInternalNameOrTitle(field).get();
|
||||
|
||||
const fieldType = _field.TypeAsString;
|
||||
const fieldScope = _field.Scope;
|
||||
return { fieldType, fieldScope };
|
||||
};
|
||||
|
||||
const getGroupHeaders = async (listId: string, groupByField: string, baseTemplate: number): Promise<any[]> => {
|
||||
let _viewXml = `<View Scope='Recursive'>
|
||||
<Query>
|
||||
<GroupBy Collapse="TRUE">
|
||||
<FieldRef Name="${groupByField}"/>
|
||||
</GroupBy>
|
||||
</Query>
|
||||
<RowLimit>1000</RowLimit>
|
||||
</View>`;
|
||||
|
||||
const _groupHeadersResults = await sp.web.lists.getById(listId).renderListDataAsStream({ ViewXml: _viewXml });
|
||||
return uniqBy(_groupHeadersResults.Row, groupByField);
|
||||
};
|
||||
|
||||
const getGroupItems = async (
|
||||
listId: string,
|
||||
groupByField: string,
|
||||
groupFieldValue: string,
|
||||
baseTemplate: number
|
||||
): Promise<any[]> => {
|
||||
const _field: any = await getField(listId, groupByField);
|
||||
|
||||
if (checkIfValidDate(groupFieldValue)) {
|
||||
groupFieldValue = format(new Date(groupFieldValue), "yyyy-MM-dd");
|
||||
}
|
||||
|
||||
switch (_field.fieldType) {
|
||||
case "DateTime":
|
||||
groupFieldValue =
|
||||
groupFieldValue != "Unassigned" ? format(parseISO(groupFieldValue), "yyyy-MM-dd") : "Unassigned";
|
||||
break;
|
||||
case "AllDayEvent":
|
||||
groupFieldValue = groupFieldValue === "No" ? "0" : "1";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
let _viewXml = `<View Scope='Recursive'>
|
||||
<Query>
|
||||
<OrderBy>
|
||||
<FieldRef Name="${groupByField}" Ascending="FALSE"></FieldRef>
|
||||
</OrderBy>
|
||||
</Query>
|
||||
</View>`;
|
||||
|
||||
if (groupFieldValue != "Unassigned") {
|
||||
_viewXml = `<View Scope='Recursive'>
|
||||
<Query>
|
||||
<OrderBy>
|
||||
<FieldRef Name="${groupByField}" Ascending="FALSE"></FieldRef>
|
||||
</OrderBy>
|
||||
<Where>
|
||||
<Eq>
|
||||
<FieldRef Name="${groupByField}"></FieldRef>
|
||||
<Value Type="${_field.fieldType}" IncludeTimeValue="FALSE">${groupFieldValue}</Value>
|
||||
</Eq>
|
||||
</Where>
|
||||
</Query>
|
||||
</View>`;
|
||||
}
|
||||
|
||||
if (groupFieldValue === "Unassigned") {
|
||||
_viewXml = `<View Scope='Recursive'>
|
||||
<Query>
|
||||
<OrderBy>
|
||||
<FieldRef Name="${groupByField}" Ascending="FALSE"></FieldRef>
|
||||
</OrderBy>
|
||||
<Where>
|
||||
<IsNull>
|
||||
<FieldRef Name="${groupByField}"></FieldRef>
|
||||
</IsNull>
|
||||
</Where>
|
||||
</Query>
|
||||
</View>`;
|
||||
}
|
||||
|
||||
const _groupItemsResults = await sp.web.lists.getById(listId).renderListDataAsStream({ ViewXml: _viewXml });
|
||||
|
||||
return _groupItemsResults.Row;
|
||||
};
|
||||
|
||||
// Get Lists
|
||||
const getLists = async (baseTemplate: number): Promise<IListInfo[]> => {
|
||||
let _filter: string = "Hidden eq false and ";
|
||||
if (baseTemplate === 0) {
|
||||
_filter = _filter + " BaseType ne 1";
|
||||
} else {
|
||||
_filter = _filter + " BaseType eq 1";
|
||||
}
|
||||
const _lists: IListInfo[] = await sp.web.lists.filter(_filter).get();
|
||||
return _lists;
|
||||
};
|
||||
|
||||
// Return functions
|
||||
return {
|
||||
getListColumns,
|
||||
getLists,
|
||||
getGroupItems,
|
||||
getGroupHeaders,
|
||||
getField,
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "a0215264-a8cd-4952-aecd-4e80719de202",
|
||||
"alias": "DocumentsLinksAccordionWebPart",
|
||||
"componentType": "WebPart",
|
||||
"supportsFullBleed": 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": "SPFx Custom Web Parts" },
|
||||
"title": { "default": "Documents Links Accordion" },
|
||||
"description": { "default": "Documents" },
|
||||
"officeFabricIconFontName": "GroupedList",
|
||||
"properties": {
|
||||
"title": "Documents",
|
||||
"listId": "",
|
||||
"fieldName": "",
|
||||
"listBasetemplate": 1
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
import * as React from "react";
|
||||
import * as ReactDom from "react-dom";
|
||||
|
||||
import {
|
||||
loadTheme,
|
||||
MessageBarType,
|
||||
SpinnerSize
|
||||
} from "office-ui-fabric-react";
|
||||
|
||||
import {
|
||||
IReadonlyTheme,
|
||||
ThemeChangedEventArgs,
|
||||
ThemeProvider
|
||||
} from "@microsoft/sp-component-base";
|
||||
import { MSGraphClient } from "@microsoft/sp-http";
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
IPropertyPaneDropdownOption,
|
||||
IPropertyPaneField,
|
||||
IPropertyPaneGroup,
|
||||
IPropertyPanePage,
|
||||
PropertyPaneDropdown,
|
||||
PropertyPaneTextField
|
||||
} from "@microsoft/sp-property-pane";
|
||||
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
|
||||
import { sp } from "@pnp/sp";
|
||||
import {
|
||||
PropertyFieldListPicker,
|
||||
PropertyFieldListPickerOrderBy
|
||||
} from "@pnp/spfx-property-controls/lib/PropertyFieldListPicker";
|
||||
import {
|
||||
PropertyFieldMessage
|
||||
} from "@pnp/spfx-property-controls/lib/PropertyFieldMessage";
|
||||
import {
|
||||
PropertyFieldSpinner
|
||||
} from "@pnp/spfx-property-controls/lib/PropertyFieldSpinner";
|
||||
|
||||
|
||||
import { useList } from "../../hooks/useList";
|
||||
|
||||
export interface IListItemsMenuWebPartProps {
|
||||
title: string;
|
||||
listId: string;
|
||||
fieldName: string;
|
||||
listBasetemplate: number;
|
||||
}
|
||||
|
||||
const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json");
|
||||
const teamsDarkTheme = require("../../common/TeamsDarkTheme.json");
|
||||
const teamsContrastTheme = require("../../common/TeamsContrastTheme.json");
|
||||
|
||||
const { getListColumns, getLists } = useList() ;
|
||||
|
||||
import * as strings from 'DocumentsLinksAccordionWebPartStrings';
|
||||
import { IDocumentsLinksAccordionProps } from "../../components/DocumentsLinksAccordion/IDocumentsLinksAccordionProps";
|
||||
import {DocumentsLinksAccordion} from "../../components/DocumentsLinksAccordion/DocumentsLinksAccordion";
|
||||
import { Version } from "@microsoft/sp-core-library";
|
||||
export interface IDocumentsLinksAccordionWebPartProps {
|
||||
title: string;
|
||||
listId: string;
|
||||
fieldName: string;
|
||||
listBasetemplate: number;
|
||||
}
|
||||
|
||||
export default class DocumentsLinksAccordionWebPart extends BaseClientSideWebPart<IDocumentsLinksAccordionWebPartProps> {
|
||||
|
||||
private columns: IPropertyPaneDropdownOption[] = [];
|
||||
private lists: IPropertyPaneDropdownOption[] = [];
|
||||
private _themeProvider: ThemeProvider;
|
||||
private _themeVariant: IReadonlyTheme | undefined;
|
||||
private _msgGraphclient: MSGraphClient;
|
||||
private _hasError: boolean = false;
|
||||
private _messageError: string = undefined;
|
||||
|
||||
|
||||
protected async onInit(): Promise<void> {
|
||||
|
||||
sp.setup({
|
||||
spfxContext: this.context,
|
||||
});
|
||||
|
||||
this._msgGraphclient = await this.context.msGraphClientFactory.getClient();
|
||||
|
||||
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;
|
||||
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;
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
// Apply theme 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<IDocumentsLinksAccordionProps> = React.createElement(
|
||||
DocumentsLinksAccordion,
|
||||
{
|
||||
title: this.properties.title,
|
||||
listId: this.properties.listId,
|
||||
fieldName: this.properties.fieldName,
|
||||
themeVariant: this._themeVariant,
|
||||
locale: this.context.pageContext.cultureInfo.currentUICultureName,
|
||||
listBaseTemplate: this.properties.listBasetemplate ?? 1,
|
||||
onConfigure: () =>{ this.context.propertyPane.open(); },
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get disableReactivePropertyChanges() {
|
||||
return true;
|
||||
}
|
||||
|
||||
protected async onPropertyPaneConfigurationStart() {
|
||||
if (
|
||||
this.properties.fieldName &&
|
||||
this.properties.listId &&
|
||||
this.columns.length === 0
|
||||
) {
|
||||
await this.addListColumns(this.properties.listId);
|
||||
this.context.propertyPane.refresh();
|
||||
}
|
||||
|
||||
if ( this.properties.listId && this.lists.length === 0){
|
||||
await this.addLists('1');
|
||||
this.context.propertyPane.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
protected async onPropertyPaneFieldChanged(
|
||||
propertyPath: string,
|
||||
oldValue: any,
|
||||
newValue: any
|
||||
) {
|
||||
|
||||
if (propertyPath === "listId" && newValue != oldValue) {
|
||||
this.columns = [];
|
||||
|
||||
this.context.propertyPane.refresh();
|
||||
await this.addListColumns(newValue);
|
||||
this.context.propertyPane.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
private async addLists(newValue: any) {
|
||||
try {
|
||||
this.lists = [];
|
||||
const _lists = await getLists(newValue);
|
||||
for (const _list of _lists) {
|
||||
this.lists.push({ key: _list.Id, text: _list.Title });
|
||||
}
|
||||
} catch (error) {
|
||||
this._hasError = true;
|
||||
this._messageError =error.message;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private async addListColumns(newValue: any) {
|
||||
try {
|
||||
this.columns = [];
|
||||
const _listColumns = await getListColumns(newValue);
|
||||
for (const _column of _listColumns) {
|
||||
this.columns.push({ key: _column.InternalName, text: _column.Title });
|
||||
}
|
||||
} catch (error) {
|
||||
this._hasError = true;
|
||||
this._messageError = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
const _pages: IPropertyPanePage[] = [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription,
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField("title", {
|
||||
label: strings.DescriptionFieldLabel,
|
||||
}),
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
let groups: IPropertyPaneGroup = _pages[0].groups[0] as IPropertyPaneGroup;
|
||||
let groupFields: IPropertyPaneField<any>[] = groups.groupFields;
|
||||
groupFields.push(
|
||||
PropertyFieldListPicker("listId", {
|
||||
label: "Select Document Library",
|
||||
selectedList: this.properties.listId ,
|
||||
includeHidden: false,
|
||||
baseTemplate: 101,
|
||||
orderBy: PropertyFieldListPickerOrderBy.Title,
|
||||
disabled: false,
|
||||
onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
|
||||
properties: this.properties,
|
||||
context: this.context,
|
||||
onGetErrorMessage: null,
|
||||
deferredValidationTime: 0,
|
||||
key: "listPickerFieldId",
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
|
||||
if (this.properties.listId) {
|
||||
groupFields.push(
|
||||
PropertyFieldSpinner("", {
|
||||
key: "sp1",
|
||||
size: SpinnerSize.medium,
|
||||
isVisible: (this.columns.length || this._hasError) ? false : true,
|
||||
label: "Loading ...",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Show Columns
|
||||
if (this.columns.length > 0) {
|
||||
groupFields.push(
|
||||
PropertyPaneDropdown("fieldName", {
|
||||
label: "Select field to group by documents",
|
||||
options: this.columns,
|
||||
selectedKey: this.properties.fieldName,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Show Error
|
||||
if (this._hasError) {
|
||||
groupFields.push(
|
||||
PropertyFieldMessage("", {
|
||||
key: "msgError",
|
||||
messageType: MessageBarType.error,
|
||||
multiline: true,
|
||||
text: this._messageError,
|
||||
isVisible: this._hasError,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const _panelConfiguration: IPropertyPaneConfiguration = { pages: _pages };
|
||||
return _panelConfiguration;
|
||||
}
|
||||
}
|
||||
12
samples/react-document-links-accordion/src/webparts/DocumentsLinksAccordion/loc/en-us.js
vendored
Normal file
12
samples/react-document-links-accordion/src/webparts/DocumentsLinksAccordion/loc/en-us.js
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
define([], function() {
|
||||
return {
|
||||
PlaceHolderButtonLable: "Configure",
|
||||
PlaceHolderDescription: "Please configure the web part.",
|
||||
PlaceHolderIconText: "Configure Documents Links Accordion Web Part",
|
||||
"PropertyPaneDescription": "Show documents grouped by field",
|
||||
"BasicGroupName": "Properties",
|
||||
"DescriptionFieldLabel": "Title",
|
||||
"NodocumentsLabel":"No documents found in library",
|
||||
"ViewAllLabel": "View All"
|
||||
}
|
||||
});
|
||||
15
samples/react-document-links-accordion/src/webparts/DocumentsLinksAccordion/loc/mystrings.d.ts
vendored
Normal file
15
samples/react-document-links-accordion/src/webparts/DocumentsLinksAccordion/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
declare interface IDocumentsLinksAccordionWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
ViewAllLabel:string;
|
||||
NodocumentsLabel:string;
|
||||
PlaceHolderButtonLable: string;
|
||||
PlaceHolderDescription: string;
|
||||
PlaceHolderIconText: string;
|
||||
}
|
||||
|
||||
declare module 'DocumentsLinksAccordionWebPartStrings' {
|
||||
const strings: IDocumentsLinksAccordionWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 383 B |
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"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": [
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection",
|
||||
"es2015.promise"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"extends": "./node_modules/@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
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue