honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1720 from joaojmendes/list-menu-fix

This commit is contained in:
Hugo Bernier 2021-02-18 17:38:01 -05:00 committed by GitHub
parent 69f9f63cb9 abe4ac30a9
commit 181f815aa7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 112 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
samples/react-list-items-menu/README.md
View File

@ -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

2
samples/react-list-items-menu/config/package-solution.json
View File

@ -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,

80
samples/react-list-items-menu/launch.json Normal file
View File

@ -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"
]
}
]
}

2
samples/react-list-items-menu/package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-list-items-menu",
"version": "0.0.1",
"version": "1.0.1",
"private": true,
"main": "lib/index.js",
"engines": {

39
samples/react-list-items-menu/src/components/ListItemsMenu.tsx
View File

@ -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<IListItemsMenuProps> = (
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<IListItemsMenuProps> = (
listName: _field.fieldScope,
navLinkGroups: _navLinksGroups,
};
setState(stateRef.current);
} catch (error) {
stateRef.current = {
@ -181,7 +190,7 @@ export const ListItemsMenu: React.FunctionComponent<IListItemsMenuProps> = (
name: _groupHeaderItem.FileLeafRef,
url: _groupHeaderItem.FileRef,
iconProps: {
...getFileTypeIconProps({
...getFileTypeIconProps({
extension: _groupHeaderItem.DocIcon,
size: 16,
imageFileType: "svg",

25
samples/react-list-items-menu/src/hooks/useJsStore.ts
View File

@ -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<JsStore.Connection> => {
const dataBase: IDataBase = {
name: dbname,
tables: tablesSchemas,
};
idbCon.initDb(dataBase);
window[`idbCon_${dbname}`] = idbCon;
return idbCon;
};
return { initJsStore };
};

4
samples/react-list-items-menu/src/hooks/useList.ts
View File

@ -56,10 +56,12 @@ export const useList = () => {
<RowLimit>1000</RowLimit>
</View>`;
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 = () => {
</View>`;
}
console.log(_viewXml);
const _groupItemsResults = await sp.web.lists
.getById(listId)
.renderListDataAsStream({ ViewXml: _viewXml });