Rettet et problem hvor taksonomifelt i redigeringspanel ikke støttet …

…nivåer av termer (#1507) * Modern taxonomy picker as replacement for tagpicker * Use dataAdapter context object - description as panel title - ITag -> ITermInfo in model * Workaround to safely map ModernTaxonomyPicker initial values without affecting other components * Linting and cleanup * Changelog * Initial value for single select taxonomy * Update CHANGELOG.md --------- Co-authored-by: Bloom <[email protected]>
Puzzlepart · Apr 24, 2024 · 5ac9f01 · 5ac9f01
1 parent b0c7bc1
commit 5ac9f01
Show file tree

Hide file tree

Showing 10 changed files with 2,378 additions and 202 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -37,6 +37,7 @@ Sjekk ut [release notes](./releasenotes/1.9.0.md) for høydepunkter og mer detal
 - Rettet et problem hvor visnings-id ikke la seg i URL feltet ved innlastning eller bytting av visninger i Porteføljeoversikt [#1355](https://github.com/Puzzlepart/prosjektportalen365/issues/1355)
 - Rettet et problem hvor visnings-id ikke la seg i URL feltet ved opprettelse av nye visninger, samt oppdatering av visningen (Porteføljeoversikter og andre aggregerte oversikter) [#1441](https://github.com/Puzzlepart/prosjektportalen365/issues/1441)
 - Rettet et problem hvor `Standardmal` ble satt som standard selvom andre maler var angitt som standard [#1471](https://github.com/Puzzlepart/prosjektportalen365/issues/1471)
+- Rettet et problem hvor taksonomifelt i redigeringspanel ikke støttet nivåer av termer [#1504](https://github.com/Puzzlepart/prosjektportalen365/issues/1504)
 
 ### Forbedringer
 

diff --git a/...ectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanel.tsx b/...ectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanel.tsx
@@ -28,4 +28,4 @@ export const EditPropertiesPanel: FC = () => {
   )
 }
 
-EditPropertiesPanel.displayName = 'EditPropertiesPanel'
+EditPropertiesPanel.displayName = 'EditPropertiesPanel'
diff --git a/SharePointFramework/shared-library/config/config.json b/SharePointFramework/shared-library/config/config.json
@@ -13,6 +13,7 @@
   },
   "externals": {},
   "localizedResources": {
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
     "SharedLibraryStrings": "lib/loc/{locale}.js"
   }
 }
diff --git a/SharePointFramework/shared-library/package.json b/SharePointFramework/shared-library/package.json
@@ -19,6 +19,8 @@
     "@microsoft/sp-lodash-subset": "1.17.4",
     "@pnp/logging": "3.17.0",
     "@pnp/sp": "3.17.0",
+    "@pnp/odata": "2.15.0",
+    "@pnp/spfx-controls-react": "3.17.0",
     "tslib": "2.3.1",
     "file-saver": "^2.0.5",
     "react-markdown": "^8.0.3",

diff --git a/...ry/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldType.tsx b/...ry/src/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldType.tsx
@@ -1,39 +1,30 @@
-import { ITag, TagPicker } from '@fluentui/react'
 import React from 'react'
 import { FieldContainer } from '../../../FieldContainer'
-import styles from '../CustomEditPanelBody.module.scss'
 import { useCustomEditPanelContext } from '../../context'
 import { FieldElementComponent } from './types'
+import { ModernTaxonomyPicker } from '@pnp/spfx-controls-react'
+import { Term, useInitialTaxonomyValues } from './useInitialTaxonomyValues'
 
 export const TaxonomyFieldType: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
+  const mapInitialValues = useInitialTaxonomyValues()
+  const terms = context.model.get<Term[]>(field)
+
   return (
     <FieldContainer
       iconName='AppsList'
       label={field.displayName}
       description={field.description}
       required={field.required}
     >
-      <TagPicker
-        styles={{ text: styles.field }}
-        onResolveSuggestions={async (filter, selectedItems) =>
-          await context.props.dataAdapter.getTerms(
-            field.getProperty('TermSetId'),
-            filter,
-            selectedItems
-          )
-        }
-        onEmptyResolveSuggestions={async (selectedItems) =>
-          await context.props.dataAdapter.getTerms(
-            field.getProperty('TermSetId'),
-            '',
-            selectedItems
-          )
-        }
-        defaultSelectedItems={context.model.get<ITag[]>(field)}
-        itemLimit={1}
+      <ModernTaxonomyPicker
+        context={context.props.dataAdapter.spfxContext as any} // Newest version of the control requires this cast for now, as context type is incompatibale with other types of SPFxContext
+        panelTitle={field.description || field.displayName}
+        initialValues={terms?.map(mapInitialValues)}
+        label=''
+        termSetId={field.getProperty('TermSetId')}
         onChange={(items) => context.model.set(field, items)}
       />
     </FieldContainer>
   )
-}
+}
diff --git a/...c/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldTypeMulti.tsx b/...c/components/CustomEditPanel/CustomEditPanelBody/FieldElements/TaxonomyFieldTypeMulti.tsx
@@ -1,39 +1,31 @@
-import { ITag, TagPicker } from '@fluentui/react'
+import { ModernTaxonomyPicker } from '@pnp/spfx-controls-react/lib/ModernTaxonomyPicker'
 import React from 'react'
 import { FieldContainer } from '../../../FieldContainer'
 import { useCustomEditPanelContext } from '../../context'
-import styles from '../CustomEditPanelBody.module.scss'
 import { FieldElementComponent } from './types'
+import { Term, useInitialTaxonomyValues } from './useInitialTaxonomyValues'
 
 export const TaxonomyFieldTypeMulti: FieldElementComponent = ({ field }) => {
   const context = useCustomEditPanelContext()
+  const mapInitialValues = useInitialTaxonomyValues()
+  const terms = context.model.get<Term[]>(field)
+
   return (
     <FieldContainer
       iconName='AppsList'
       label={field.displayName}
       description={field.description}
       required={field.required}
     >
-      <TagPicker
-        styles={{ text: styles.field }}
-        onResolveSuggestions={async (filter, selectedItems) =>
-          await context.props.dataAdapter.getTerms(
-            field.getProperty('TermSetId'),
-            filter,
-            selectedItems
-          )
-        }
-        onEmptyResolveSuggestions={async (selectedItems) =>
-          await context.props.dataAdapter.getTerms(
-            field.getProperty('TermSetId'),
-            '',
-            selectedItems
-          )
-        }
-        defaultSelectedItems={context.model.get<ITag[]>(field)}
-        itemLimit={20}
+      <ModernTaxonomyPicker
+        context={context.props.dataAdapter.spfxContext as any} // Newest version of the control requires this cast for now, as context type is incompatibale with other types of SPFxContext
+        panelTitle={field.description || field.displayName}
+        initialValues={terms?.map(mapInitialValues)}
+        allowMultipleSelections
+        label=''
+        termSetId={field.getProperty('TermSetId')}
         onChange={(items) => context.model.set(field, items)}
       />
     </FieldContainer>
   )
-}
+}
diff --git a/.../components/CustomEditPanel/CustomEditPanelBody/FieldElements/useInitialTaxonomyValues.ts b/.../components/CustomEditPanel/CustomEditPanelBody/FieldElements/useInitialTaxonomyValues.ts
@@ -0,0 +1,31 @@
+import { useCallback } from 'react'
+
+interface ITermLabel {
+    name: string
+    isDefault: boolean
+    languageTag: string
+}
+
+interface ITagTerm {
+    key: string
+    name: string
+}
+
+interface IModernTaxonomyTerm {
+    id: string
+    labels: ITermLabel[]
+}
+
+export type Term = ITagTerm | IModernTaxonomyTerm;
+
+export const useInitialTaxonomyValues = () => {
+    const mapInitialValues = useCallback((term: Term) => {
+        if ('id' in term) {
+            return { labels: term.labels, id: term.id }
+        } else {
+            return { labels: [{ name: term.name, isDefault: true, languageTag: 'nb-NO' }], id: term.key }
+        }
+    }, [])
+
+    return mapInitialValues
+}
diff --git a/SharePointFramework/shared-library/src/components/CustomEditPanel/useModel.ts b/SharePointFramework/shared-library/src/components/CustomEditPanel/useModel.ts
@@ -1,5 +1,6 @@
-import { IPersonaProps, ITag } from '@fluentui/react'
+import { IPersonaProps } from '@fluentui/react'
 import _ from 'lodash'
+import { ITermInfo } from '@pnp/sp/taxonomy'
 import { useState } from 'react'
 import { EditableSPField } from '../../models'
 import { DefaultCaching } from '../../data/cache'
@@ -58,8 +59,13 @@ export function useModel(props: ICustomEditPanelProps) {
             .getById(field.getProperty('TextField'))
             .select('InternalName')
             .using(DefaultCaching)()
+
+          const languageTag = props.dataAdapter.spfxContext.pageContext.cultureInfo.currentUICultureName || 'nb-NO'
           return [
-            (value as ITag[]).map((v) => `-1;#${v.name}|${v.key}`).join(';#'),
+            (value as ITermInfo[]).map((v) => {
+              const label = v.labels.find(l => l.languageTag === languageTag)
+              return `-1;#${label?.name}|${v.id}`
+            }).join(';#'),
             textField.InternalName
           ]
         }
@@ -71,8 +77,13 @@ export function useModel(props: ICustomEditPanelProps) {
             .getById(field.getProperty('TextField'))
             .select('InternalName')
             .using(DefaultCaching)()
+
+          const languageTag = props.dataAdapter.spfxContext.pageContext.cultureInfo.currentUICultureName || 'nb-NO'
           return [
-            (value as ITag[]).map((v) => `-1;#${v.name}|${v.key}`).join(';#'),
+            (value as ITermInfo[]).map((v) => {
+              const label = v.labels.find(l => l.languageTag === languageTag)
+              return `-1;#${label?.name}|${v.id}`
+            }).join(';#'),
             textField.InternalName
           ]
         }

diff --git a/SharePointFramework/shared-library/src/services/ProjectDataService/ProjectDataService.ts b/SharePointFramework/shared-library/src/services/ProjectDataService/ProjectDataService.ts
@@ -190,7 +190,7 @@ export class ProjectDataService extends DataService<IProjectDataServiceParams> {
    * corrupt data.
    */
   private async _getLocalProjectInformationItem(
-    fieldsFilter = "substringof('Gt', InternalName)"
+    fieldsFilter = 'substringof(\'Gt\', InternalName)'
   ): Promise<IProjectInformationData> {
     try {
       const ctx = await this._getLocalProjectInformationItemContext()
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,4 +28,4 @@ export const EditPropertiesPanel: FC = () => { @@
       )
     }
-    EditPropertiesPanel.displayName = 'EditPropertiesPanel'
+    EditPropertiesPanel.displayName = 'EditPropertiesPanel'