fix: dynamic columns for orgunit list

dhis2 · Apr 30, 2024 · d97489f · d97489f
1 parent 89650fb
commit d97489f
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 45 deletions.
diff --git a/src/lib/sectionList/listViews/sectionListViewsConfig.ts b/src/lib/sectionList/listViews/sectionListViewsConfig.ts
@@ -97,4 +97,13 @@ export const modelListViewsConfig = {
             available: [DESCRIPTORS.publicAccess],
         },
     },
+    organisationUnit: {
+        columns: {
+            available: [],
+            default: ['name', 'id', 'code', 'lastUpdated'],
+        },
+        filters: {
+            default: [],
+        },
+    },
 } satisfies SectionListViewConfig
diff --git a/src/pages/organisationUnits/list/OrganisationUnitList.module.css b/src/pages/organisationUnits/list/OrganisationUnitList.module.css
@@ -0,0 +1,3 @@
+.expandButton {
+    border: 0 !important;
+}
diff --git a/src/pages/organisationUnits/list/OrganisationUnitList.tsx b/src/pages/organisationUnits/list/OrganisationUnitList.tsx
@@ -1,37 +1,30 @@
 import {
     Button,
     Checkbox,
-    DataTable,
     DataTableCell,
     DataTableRow,
     IconChevronDown16,
     IconChevronRight16,
 } from '@dhis2/ui'
 import {
-    Column,
-    Table,
     ExpandedState,
     useReactTable,
     getCoreRowModel,
-    getPaginationRowModel,
-    getFilteredRowModel,
     getExpandedRowModel,
     ColumnDef,
     flexRender,
 } from '@tanstack/react-table'
 import React, { useMemo, useState } from 'react'
-import { SectionList, SectionListRow } from '../../../components'
+import { SectionList } from '../../../components'
 import { FilterWrapper } from '../../../components/sectionList/filters/FilterWrapper'
-import { DefaultListActions } from '../../../components/sectionList/listActions'
+import { useModelListView } from '../../../components/sectionList/listView'
+import { ModelValue } from '../../../components/sectionList/modelValue/ModelValue'
+import { SectionListHeader } from '../../../components/sectionList/SectionListHeaderNormal'
 import { SectionListTitle } from '../../../components/sectionList/SectionListTitle'
+import { ModelPropertyDescriptor, useSchemaFromHandle } from '../../../lib'
 import { OrganisationUnit } from '../../../types/generated'
-import {
-    UseRootOrganisationUnit,
-    useExpandedOrgUnits,
-    useRootOrganisationUnit,
-} from './useRootOrganisationUnit'
+import { useExpandedOrgUnits } from './useRootOrganisationUnit'
 
-type PartialChildren = Partial<Pick<OrganisationUnit, 'children'>>
 export type OrganisationUnitListItem = Pick<
     OrganisationUnit,
     'id' | 'displayName' | 'access' | 'children' | 'path' | 'level' | 'parent'
@@ -40,56 +33,66 @@ export type OrganisationUnitListItem = Pick<
 }
 
 const useColumns = () => {
-    const columns: ColumnDef<OrganisationUnitListItem>[] = [
-        // {
-        //     id: 'checkbox',
-        //     // accessorKey: 'checkbox',
-        //     header: ({ table }) => (
-        //         <Checkbox
-        //             checked={table.getIsAllRowsSelected()}
-        //             onChange={() => table.getToggleAllRowsSelectedHandler()}
-        //         />
-        //     ),
-        // },
-        {
-            header: 'DisplayName',
-            accessorKey: 'displayName',
-            cell: ({ row, getValue }) => getValue<string>(),
-        },
-        {
-            accessorKey: 'id',
-            header: 'id',
-            cell: (cell) => cell.getValue(),
-        },
-    ]
+    const { columns: selectedColumns } = useModelListView()
+    const schema = useSchemaFromHandle()
+
+    const columnDefinitions: ColumnDef<OrganisationUnitListItem>[] = useMemo(
+        () =>
+            selectedColumns.map((descriptor) => {
+                return {
+                    accessorKey: descriptor.path,
+                    header: descriptor.label,
+                    cell: ({ row }) => {
+                        console.log({ orgin: row.original })
+                        return (
+                            <ModelValue
+                                path={
+                                    descriptor.path === 'name'
+                                        ? 'displayName'
+                                        : descriptor.path
+                                }
+                                schema={schema}
+                                sectionModel={row.original}
+                            />
+                        )
+                    },
+                }
+            }),
+        [selectedColumns, schema]
+    )
 
-    return columns
+    return {
+        columnDefinitions,
+        selectedColumns,
+    }
 }
 
 export const OrganisationUnitList = () => {
     //  const rootQuery = useRootOrganisationUnit()
     //  rootQuery.data
-    const columns = useColumns()
+
+    const { columnDefinitions, selectedColumns } = useColumns()
     //console.log(rootQuery)
 
     const [expanded, setExpanded] = useState<ExpandedState>({
         //  ImspTQPwCqd: true,
     })
-
+    const headers = columnDefinitions.map((c) => c.header)
     console.log({ expanded })
-    const expandedQueries = useExpandedOrgUnits({ expanded })
+    const expandedQueries = useExpandedOrgUnits({
+        expanded,
+        fieldFilters: selectedColumns.map((c) => c.path),
+    })
     const data = useMemo(
-        () =>
-            expandedQueries.filter((q) => q.isSuccess).map((q) => q.data!) ??
-            [],
+        () => expandedQueries.filter((q) => !!q.data).map((q) => q.data!) ?? [],
         [expandedQueries]
     )
 
     const rootData = useMemo(() => data.filter((d) => d.level === 1), [data])
 
     console.log({ data, rootData })
     const table = useReactTable({
-        columns,
+        columns: columnDefinitions,
         data: rootData ?? [],
         getRowId: (row) => row.id,
         getCoreRowModel: getCoreRowModel<OrganisationUnitListItem>(),
@@ -119,6 +122,7 @@ export const OrganisationUnitList = () => {
 
         getExpandedRowModel: getExpandedRowModel(),
         onExpandedChange: setExpanded,
+
         state: {
             expanded,
         },
@@ -132,6 +136,8 @@ export const OrganisationUnitList = () => {
     return (
         <div>
             <SectionListTitle />
+            <FilterWrapper />
+            <SectionListHeader />
             {/* <FilterWrapper /> */}
             <SectionList
                 allSelected={table.getIsAllRowsSelected()}
@@ -155,6 +161,10 @@ export const OrganisationUnitList = () => {
                                         <Button
                                             secondary
                                             type="button"
+                                            loading={
+                                                row.getIsExpanded() &&
+                                                row.subRows.length < 1
+                                            }
                                             icon={
                                                 row.getIsExpanded() ? (
                                                     <IconChevronDown16 />
@@ -164,7 +174,12 @@ export const OrganisationUnitList = () => {
                                             }
                                             // onClick={row.getToggleExpandedHandler()}
                                             onClick={() => row.toggleExpanded()}
-                                        />
+                                        >
+                                            {/* {row.getIsExpanded() &&
+                                            row.subRows.length < 1
+                                                ? 'loading'
+                                                : null} */}
+                                        </Button>
                                     ) : null}{' '}
                                     <Checkbox
                                         checked={row.getIsSelected()}

diff --git a/src/pages/organisationUnits/list/useRootOrganisationUnit.tsx b/src/pages/organisationUnits/list/useRootOrganisationUnit.tsx
@@ -23,6 +23,7 @@ const orgUnitFields = [
     'level',
     'path',
     'parent',
+    'ancestors[id,displayName,level,path]',
     'children[id,displayName,access,parent,level, path,children~isNotEmpty~rename(hasChildren)]',
 ]
 const rootOrgUnitQuery = {
@@ -58,8 +59,10 @@ export const useRootOrganisationUnit = () => {
 
 export const useExpandedOrgUnits = ({
     expanded,
+    fieldFilters,
 }: {
     expanded: ExpandedState
+    fieldFilters: string[]
 }) => {
     const rootOrgUnits = useRootOrganisationUnit()
 
@@ -76,7 +79,7 @@ export const useExpandedOrgUnits = ({
                     resource: 'organisationUnits',
                     id,
                     params: {
-                        fields: orgUnitFields,
+                        fields: orgUnitFields.concat(fieldFilters),
                         // filter: `parent.id:eq:${id}`,
                         // sort: 'displayName:desc',
                     },