Boolean felttyper vises feil og filtreres ikke korrekt #1579

SharePointFramework/shared-library/src/components/FilterPanel/Filter/useFilter.tsx

@@ -39,11 +39,12 @@ export function useFilter(props: IFilterProps) {
    * Render filter items
    */
   const renderItems = () => {
-    return state.items.map((props, idx) => (
+    return state.items.map((item, idx) => (
       <FilterItem
         key={idx}
-        {...props}
-        onChange={(_event, { checked }) => onChange(props, checked as boolean)}
+        {...item}
+        column={props.column}
+        onChange={(_event, { checked }) => onChange(item, checked as boolean)}
       />
     ))
   }

SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/FilterItem.tsx

@@ -1,13 +1,15 @@
+import { Checkbox } from '@fluentui/react-components'
 import React, { FC } from 'react'
 import styles from './FilterItem.module.scss'
 import { IFilterItemProps } from './types'
-import { Checkbox } from '@fluentui/react-components'
+import { useFilterItem } from './useFilterItem'
 
 export const FilterItem: FC<IFilterItemProps> = (props) => {
+  const { label } = useFilterItem(props)
   return (
     <Checkbox
       className={styles.filterItem}
-      label={props.name}
+      label={label}
       checked={props.selected}
       onChange={props.onChange}
     />

SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/types.tsx

@@ -1,7 +1,9 @@
+import { IColumn } from '@fluentui/react'
 import { CheckboxProps } from '@fluentui/react-components'
 
 export interface IFilterItemProps extends Pick<CheckboxProps, 'onChange'> {
   name: string
   value: string
   selected?: boolean
+  column?: IColumn
 }

SharePointFramework/shared-library/src/components/FilterPanel/FilterItem/useFilterItem.ts

@@ -0,0 +1,16 @@
+import strings from 'SharedLibraryStrings'
+import _ from 'lodash'
+import { IFilterItemProps } from './types'
+
+export function useFilterItem(props: IFilterItemProps) {
+    switch (props.column.data.renderAs) {
+        case 'boolean': {
+            const valueIfTrue = _.get(props, 'column.data.dataTypeProperties.valueIfTrue', strings.BooleanYes)
+            const valueIfFalse = _.get(props, 'column.data.dataTypeProperties.valueIfFalse', strings.BooleanNo)
+            return { label: parseInt(props.value) === 1 ? valueIfTrue : valueIfFalse }
+        }
+        default: {
+            return { label: props.name }
+        }
+    }
+}

SharePointFramework/shared-library/src/loc/mystrings.d.ts

@@ -1,5 +1,6 @@
-/* eslint-disable @typescript-eslint/no-empty-interface */
 declare interface ISharedLibraryStrings {
+  BooleanYes: string
+  BooleanNo: string
   GtModerationStatus_Choice_Draft: string
   GtModerationStatus_Choice_Published: string
   SaveText: string

SharePointFramework/shared-library/src/loc/nb-no.js

@@ -61,5 +61,7 @@ define([], function () {
     TriangleLabel: 'Trekant',
     TypeLabel: 'Type',
     SyncListAddingField: 'Legger til felt {0} i prosjektegenskaper...',
+    BooleanYes: 'Ja',
+    BooleanNo: 'Nei',
   }
 })