From 181506ab9127f863f6c229280758e0d7f899b585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Thu, 18 Feb 2021 22:21:12 +0000 Subject: [PATCH 1/2] add support to Metada Columns --- samples/react-list-items-menu/launch.json | 80 +++++++++++++++++++ .../src/components/ListItemsMenu.tsx | 39 +++++---- .../src/hooks/useJsStore.ts | 25 ------ .../src/hooks/useList.ts | 4 + 4 files changed, 108 insertions(+), 40 deletions(-) create mode 100644 samples/react-list-items-menu/launch.json delete mode 100644 samples/react-list-items-menu/src/hooks/useJsStore.ts diff --git a/samples/react-list-items-menu/launch.json b/samples/react-list-items-menu/launch.json new file mode 100644 index 000000000..900b05132 --- /dev/null +++ b/samples/react-list-items-menu/launch.json @@ -0,0 +1,80 @@ +{ + /** + * Install Chrome Debugger Extension for Visual Studio Code to debug your components with the + * Chrome browser: https://aka.ms/spfx-debugger-extensions + */ + "version": "0.2.0", + "configurations": [{ + "name": "Local workbench", + "type": "chrome", + "request": "launch", + "url": "https://localhost:4321/temp/workbench.html", + "webRoot": "${workspaceRoot}", + "sourceMaps": true, + "sourceMapPathOverrides": { + "webpack:///.././src/*": "${webRoot}/src/*", + "webpack:///../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../../src/*": "${webRoot}/src/*" + }, + "runtimeArgs": [ + "--remote-debugging-port=9222" + ] + }, + { + "name": "Hosted workbench SPTeck", + "type": "chrome", + "request": "launch", + "url": "https://spteck.sharepoint.com/_layouts/workbench.aspx", + "webRoot": "${workspaceRoot}", + "sourceMaps": true, + "sourceMapPathOverrides": { + "webpack:///.././src/*": "${webRoot}/src/*", + "webpack:///../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../../src/*": "${webRoot}/src/*" + }, + "runtimeArgs": [ + "--remote-debugging-port=9222", + "-incognito" + ] + }, + { + "name": "Hosted workbench Fingal Dev", + "type": "chrome", + "request": "launch", + "url": "https://fingaldev.sharepoint.com/sites/mms-dev/_layouts/workbench.aspx", + "webRoot": "${workspaceRoot}", + "sourceMaps": true, + "sourceMapPathOverrides": { + "webpack:///.././src/*": "${webRoot}/src/*", + "webpack:///../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../../src/*": "${webRoot}/src/*", + + }, + "runtimeArgs": [ + "--remote-debugging-port=9222", + "-incognito" + ] + }, + { + "name": "Hosted workbench Fingal INT", + "type": "chrome", + "request": "launch", + "url": "https://fingaluat.sharepoint.com/sites/mms-int/_layouts/workbench.aspx", + "webRoot": "${workspaceRoot}", + "sourceMaps": true, + "sourceMapPathOverrides": { + "webpack:///.././src/*": "${webRoot}/src/*", + "webpack:///../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../src/*": "${webRoot}/src/*", + "webpack:///../../../../../src/*": "${webRoot}/src/*" + }, + "runtimeArgs": [ + "--remote-debugging-port=9222", + "-incognito" + ] + } + ] +} diff --git a/samples/react-list-items-menu/src/components/ListItemsMenu.tsx b/samples/react-list-items-menu/src/components/ListItemsMenu.tsx index 9fbf2d29c..a37959e5a 100644 --- a/samples/react-list-items-menu/src/components/ListItemsMenu.tsx +++ b/samples/react-list-items-menu/src/components/ListItemsMenu.tsx @@ -1,10 +1,7 @@ import * as React from "react"; import * as strings from "ListItemsMenuWebPartStrings"; -import { - filter, - findIndex -} from "lodash"; +import { filter, findIndex, uniqBy } from "lodash"; import { Customizer, INavLink, @@ -18,7 +15,7 @@ import { Nav, Spinner, SpinnerSize, - Stack + Stack, } from "office-ui-fabric-react"; import { getFileTypeIconProps } from "@uifabric/file-type-icons"; @@ -92,28 +89,39 @@ export const ListItemsMenu: React.FunctionComponent = ( props.fieldName, props.listBaseTemplate ); + console.log("t1", _groupHeaders); const _field: any = await getField(props.listId, props.fieldName); + console.log("f1", _field); for (const groupHeader of _groupHeaders) { - let _name = groupHeader[props.fieldName] - ? groupHeader[props.fieldName] - : "Unassigned"; + let _name: any; + if (_field.fieldType === "TaxonomyFieldType") { + _name = groupHeader.Metadata.Label ?? "Unassigned"; - if (_name != "Unassigned" && _field.fieldType === "User") { - _name = _name[0]?.title; - } + } if (_field.fieldType === "TaxonomyFieldTypeMulti") { + _name = groupHeader.Metadata[0]?.Label ?? "Unassigned"; - if (_name != "Unassigned" && _field.fieldType === "Lookup") { - _name = _name[0]?.lookupValue; + } else { + + _name = groupHeader[props.fieldName] ?? "Unassigned"; + + if (_name != "Unassigned" && _field.fieldType === "User") { + _name = _name[0]?.title; + } + if (_name != "Unassigned" && _field.fieldType === "Lookup") { + _name = _name[0]?.lookupValue; + } } _navLinksGroups.push({ name: _name, - groupData: groupHeader[props.fieldName], + groupData: _name, collapseByDefault: true, onHeaderClick: _onGroupHeaderClick, links: [], }); + // Ensure the groups name are unique! + _navLinksGroups = uniqBy( _navLinksGroups, "name"); } stateRef.current = { ...stateRef.current, @@ -123,6 +131,7 @@ export const ListItemsMenu: React.FunctionComponent = ( listName: _field.fieldScope, navLinkGroups: _navLinksGroups, }; + setState(stateRef.current); } catch (error) { stateRef.current = { @@ -181,7 +190,7 @@ export const ListItemsMenu: React.FunctionComponent = ( name: _groupHeaderItem.FileLeafRef, url: _groupHeaderItem.FileRef, iconProps: { - ...getFileTypeIconProps({ + ...getFileTypeIconProps({ extension: _groupHeaderItem.DocIcon, size: 16, imageFileType: "svg", diff --git a/samples/react-list-items-menu/src/hooks/useJsStore.ts b/samples/react-list-items-menu/src/hooks/useJsStore.ts deleted file mode 100644 index 06bef76fe..000000000 --- a/samples/react-list-items-menu/src/hooks/useJsStore.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as JsStoreWorker from "jsstore/dist/jsstore.worker.commonjs2"; -window["JsStoreWorker"] = JsStoreWorker; -import * as JsStore from "jsstore"; -import { ITable, DATA_TYPE, IDataBase } from "jsstore"; - -// Otherwise due to multiple instance multiple worker will be created. -const idbCon = new JsStore.Connection(); - -export const useJsStore = () => { - const initJsStore = async ( - dbname: string, - tablesSchemas: ITable[] - ): Promise => { - const dataBase: IDataBase = { - name: dbname, - tables: tablesSchemas, - }; - idbCon.initDb(dataBase); - window[`idbCon_${dbname}`] = idbCon; - return idbCon; - - }; - - return { initJsStore }; -}; diff --git a/samples/react-list-items-menu/src/hooks/useList.ts b/samples/react-list-items-menu/src/hooks/useList.ts index 628cb000d..fb4f19df5 100644 --- a/samples/react-list-items-menu/src/hooks/useList.ts +++ b/samples/react-list-items-menu/src/hooks/useList.ts @@ -56,10 +56,12 @@ export const useList = () => { 1000 `; + console.log('group',_viewXml ) const _groupHeadersResults = await sp.web.lists .getById(listId) .renderListDataAsStream({ ViewXml: _viewXml }); + console.log(_groupHeadersResults.Row); //console.log("groups", _groupHeadersResults.Row); return uniqBy(_groupHeadersResults.Row, groupByField); }; @@ -125,6 +127,8 @@ export const useList = () => { `; } + console.log(_viewXml); + const _groupItemsResults = await sp.web.lists .getById(listId) .renderListDataAsStream({ ViewXml: _viewXml }); From abe4ac30a9977e881c3e1d15a2929d4ec585bd2e Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Thu, 18 Feb 2021 17:37:06 -0500 Subject: [PATCH 2/2] Update solution version and README accordingly --- samples/react-list-items-menu/README.md | 3 ++- samples/react-list-items-menu/config/package-solution.json | 2 +- samples/react-list-items-menu/package.json | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/samples/react-list-items-menu/README.md b/samples/react-list-items-menu/README.md index 7b21dee88..8b66ca095 100644 --- a/samples/react-list-items-menu/README.md +++ b/samples/react-list-items-menu/README.md @@ -3,7 +3,7 @@ ## Summary This web part allows user create a navigation menu , grouped by any column of document library. -When the user clicks on the header it dynamically load documents. +When the user clicks on the header it dynamically load documents. ![ListItemsMenu](./assets/ListMenuDocs.gif) @@ -51,6 +51,7 @@ React List Items Menu |[João Mendes](https://github.com/joaojmendes) ([@joaojme Version|Date|Comments -------|----|-------- 1.0.0|November 20, 2020|Initial release +1.0.1|February 18, 2021|Added support for metadata columns ## Disclaimer diff --git a/samples/react-list-items-menu/config/package-solution.json b/samples/react-list-items-menu/config/package-solution.json index bdb419081..7123ae726 100644 --- a/samples/react-list-items-menu/config/package-solution.json +++ b/samples/react-list-items-menu/config/package-solution.json @@ -3,7 +3,7 @@ "solution": { "name": "react-list-items-menu-client-side-solution", "id": "8b4a758d-a968-4e7c-a949-b42e7dd5ad14", - "version": "1.0.0.0", + "version": "1.0.1.0", "includeClientSideAssets": true, "skipFeatureDeployment": true, "isDomainIsolated": false, diff --git a/samples/react-list-items-menu/package.json b/samples/react-list-items-menu/package.json index 9b45b8810..77c796a97 100644 --- a/samples/react-list-items-menu/package.json +++ b/samples/react-list-items-menu/package.json @@ -1,6 +1,6 @@ { "name": "react-list-items-menu", - "version": "0.0.1", + "version": "1.0.1", "private": true, "main": "lib/index.js", "engines": {