fix(list): add list filters for de group and groupsets

src/components/sectionList/filters/DynamicFilters.tsx

@@ -7,6 +7,8 @@ import {
     DomainTypeSelectionFilter,
     ValueTypeSelectionFilter,
     PublicAccessFilter,
+    DataElementFilter,
+    DataElementGroupFilter,
 } from './filterSelectors'
 import { useFilterKeys } from './useFilterKeys'
 
@@ -15,6 +17,8 @@ type FilterKeyToComponentMap = Partial<Record<ConfigurableFilterKey, React.FC>>
 const filterKeyToComponentMap: FilterKeyToComponentMap = {
     categoryCombo: CategoryComboFilter,
     dataSet: DataSetFilter,
+    dataElement: DataElementFilter,
+    dataElementGroup: DataElementGroupFilter,
     domainType: DomainTypeSelectionFilter,
     valueType: ValueTypeSelectionFilter,
     aggregationType: AggregationTypeFilter,

src/components/sectionList/filters/filterSelectors/DataElementFilter.tsx

@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { useSectionListFilter } from '../../../../lib'
+import { createFilterDataQuery } from './createFilterDataQuery'
+import { ModelFilterSelect } from './ModelFilter'
+
+const query = createFilterDataQuery('dataElements')
+
+export const DataElementFilter = () => {
+    const [filter, setFilter] = useSectionListFilter('dataElement')
+
+    const selected = filter?.[0]
+
+    return (
+        <ModelFilterSelect
+            placeholder={i18n.t('Data element')}
+            query={query}
+            selected={selected}
+            onChange={({ selected }) =>
+                setFilter(selected ? [selected] : undefined)
+            }
+        />
+    )
+}

src/components/sectionList/filters/filterSelectors/DataElementGroupFilter.tsx

@@ -0,0 +1,24 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import { useSectionListFilter } from '../../../../lib'
+import { createFilterDataQuery } from './createFilterDataQuery'
+import { ModelFilterSelect } from './ModelFilter'
+
+const query = createFilterDataQuery('dataElementGroups')
+
+export const DataElementGroupFilter = () => {
+    const [filter, setFilter] = useSectionListFilter('dataElementGroup')
+
+    const selected = filter?.[0]
+
+    return (
+        <ModelFilterSelect
+            placeholder={i18n.t('Data element group')}
+            query={query}
+            selected={selected}
+            onChange={({ selected }) =>
+                setFilter(selected ? [selected] : undefined)
+            }
+        />
+    )
+}

src/components/sectionList/filters/filterSelectors/index.ts

@@ -4,3 +4,5 @@ export * from './CategoryComboFilter'
 export * from './IdentifiableFilter'
 export * from './ConstantSelectionFilter'
 export * from './PublicAccessFilter'
+export * from './DataElementFilter'
+export * from './DataElementGroupFilter'

src/lib/sectionList/filters/filterConfig.tsx

@@ -13,6 +13,8 @@ export const filterParamsSchema = z
         [IDENTIFIABLE_FILTER_KEY]: z.string(),
         aggregationType: z.array(z.nativeEnum(DataElement.aggregationType)),
         categoryCombo: zodArrayIds,
+        dataElement: zodArrayIds,
+        dataElementGroup: zodArrayIds,
         dataSet: zodArrayIds,
         domainType: z.array(z.nativeEnum(DataElement.domainType)),
         publicAccess: z.array(
@@ -29,6 +31,8 @@ export const filterQueryParamType = {
     aggregationType: CustomDelimitedArrayParam,
     domainType: CustomDelimitedArrayParam,
     valueType: CustomDelimitedArrayParam,
+    dataElement: CustomDelimitedArrayParam,
+    dataElementGroup: CustomDelimitedArrayParam,
     dataSet: CustomDelimitedArrayParam,
     categoryCombo: CustomDelimitedArrayParam,
     publicAccess: CustomDelimitedArrayParam,

src/lib/sectionList/filters/parseFiltersToQueryParams.ts

@@ -35,6 +35,8 @@ const filterToQueryParamMap: FilterToQueryParamsMap = {
         section.name === SchemaName.dataElement
             ? inFilter('dataSetElements.dataSet.id', value)
             : defaultFilter('dataSet', value),
+    dataElement: (value) => inFilter('dataElements.id', value),
+    dataElementGroup: (value) => inFilter('dataElementGroups.id', value),
     publicAccess: (value) => inFilter('sharing.public', value),
 }
 

src/lib/sectionList/listViews/sectionListViewsConfig.ts

@@ -1,4 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
+import { SectionName } from '../../constants'
 import type { ConfigurableFilterKey } from '../filters'
 
 export interface ModelPropertyDescriptor {
@@ -97,4 +98,26 @@ export const modelListViewsConfig = {
             default: ['domainType', 'valueType', 'dataSet', 'categoryCombo'],
         },
     },
-} satisfies SectionListViewConfig
+    dataElementGroup: {
+        columns: {},
+        filters: {
+            default: [
+                {
+                    label: i18n.t('Data element'),
+                    filterKey: 'dataElement',
+                },
+            ],
+        },
+    },
+    dataElementGroupSet: {
+        columns: {},
+        filters: {
+            default: [
+                {
+                    label: i18n.t('Data element group'),
+                    filterKey: 'dataElementGroup',
+                },
+            ],
+        },
+    },
+} satisfies SectionListViewConfig<SectionName>

src/pages/DefaultSectionList.tsx

@@ -34,7 +34,8 @@ export const DefaultSectionList = () => {
             },
         },
     }
-    const { error, data } = useQuery({
+
+    const { error, data, refetch } = useQuery({
         queryKey: [query],
         queryFn: ({ queryKey: [query], signal }) => {
             return engine.query(query, { signal }) as Promise<ModelListResponse>
@@ -48,6 +49,7 @@ export const DefaultSectionList = () => {
                 error={error as FetchError | undefined}
                 data={modelList}
                 pager={data?.result.pager}
+                refetch={refetch}
             />
         </div>
     )

src/pages/dataElements/List.tsx

@@ -1,64 +1,3 @@
-import { useDataQuery } from '@dhis2/app-runtime'
-import { SharingDialog } from '@dhis2/ui'
-import React, { useEffect } from 'react'
-import { SectionListWrapper } from '../../components'
-import { useModelListView } from '../../components/sectionList/listView'
-import {
-    useSchemaFromHandle,
-    useParamsForDataQuery,
-    DEFAULT_FIELD_FILTERS,
-    DefaultFields,
-} from '../../lib/'
-import { getFieldFilter } from '../../lib/models/path'
-import { Query, WrapQueryResponse } from '../../types'
-import { DataElement, ModelCollectionResponse } from '../../types/models'
+import { DefaultSectionList } from '../DefaultSectionList'
 
-type FilteredDataElement = Pick<DataElement, DefaultFields> &
-    Partial<DataElement>
-
-type DataElements = ModelCollectionResponse<FilteredDataElement, 'dataElements'>
-
-type DataElementsResponse = WrapQueryResponse<DataElements>
-
-const query: Query = {
-    result: {
-        resource: 'dataElements',
-        params: (params) => params,
-    },
-}
-
-export const Component = () => {
-    const { columns, query: listViewQuery } = useModelListView()
-    const initialParams = useParamsForDataQuery()
-    const schema = useSchemaFromHandle()
-    const { refetch, error, data } = useDataQuery<DataElementsResponse>(
-        query,
-        // refetched on mount by effect below
-        { lazy: true }
-    )
-
-    useEffect(() => {
-        // wait to fetch until selected-columns are loaded
-        // so we dont fetch data multiple times
-        if (listViewQuery.isLoading) {
-            return
-        }
-        refetch({
-            ...initialParams,
-            fields: columns
-                .map((column) => getFieldFilter(schema, column.path))
-                .concat(DEFAULT_FIELD_FILTERS),
-        })
-    }, [refetch, initialParams, columns, listViewQuery.isLoading, schema])
-
-    return (
-        <div>
-            <SectionListWrapper
-                error={error}
-                data={data?.result.dataElements}
-                pager={data?.result.pager}
-                refetch={refetch}
-            />
-        </div>
-    )
-}
+export const Component = DefaultSectionList