add support to Metada Columns

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

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

@@ -1,10 +1,7 @@
 import * as React from "react";
 
 import * as strings from "ListItemsMenuWebPartStrings";
-import {
+import { filter, findIndex, uniqBy } from "lodash";
-  filter,
-  findIndex
-} 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]
+          let _name: any;
-            ? groupHeader[props.fieldName]
+          if (_field.fieldType === "TaxonomyFieldType") {
-            : "Unassigned";
+            _name = groupHeader.Metadata.Label ?? "Unassigned";
+
+          } if (_field.fieldType === "TaxonomyFieldTypeMulti") {
+            _name = groupHeader.Metadata[0]?.Label ?? "Unassigned";
+
+          } 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 = {

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

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

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

@@ -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 });