feat: enable sort and pagination in LL plugin [DHIS2-20124] (#63)

Author: edoardo

src/components/app/app.tsx

@@ -1,6 +1,6 @@
 import { CssVariables } from '@dhis2/ui'
 import cx from 'classnames'
-import type { FC } from 'react'
+import { useCallback, type FC } from 'react'
 import classes from './app.module.css'
 import { AppWrapper } from '@components/app-wrapper'
 import {
@@ -14,20 +14,34 @@ import {
 import { PluginWrapper } from '@components/plugin-wrapper/plugin-wrapper'
 import { StartScreen } from '@components/start-screen/start-screen'
 import { Toolbar } from '@components/toolbar/toolbar'
-import { useAppSelector, useCurrentUser } from '@hooks'
+import { useAppDispatch, useAppSelector, useCurrentUser } from '@hooks'
 import { isVisualizationEmpty } from '@modules/visualization'
-import { getCurrentVis } from '@store/current-vis-slice'
+import { getCurrentVis, setCurrentVis } from '@store/current-vis-slice'
 import {
     getUiDetailsPanelVisible,
     getUiMainSidebarVisible,
 } from '@store/ui-slice'
+import type { CurrentVisualization, Sorting } from '@types'
 
 const EventVisualizer: FC = () => {
+    const dispatch = useAppDispatch()
     const currentUser = useCurrentUser()
     const currentVis = useAppSelector(getCurrentVis)
     const isMainSidebarVisible = useAppSelector(getUiMainSidebarVisible)
     const isDetailsPanelVisible = useAppSelector(getUiDetailsPanelVisible)
 
+    const onDataSorted = useCallback(
+        (sorting: Sorting) => {
+            dispatch(
+                setCurrentVis({
+                    ...currentVis,
+                    sorting: sorting ? [sorting] : undefined,
+                } as CurrentVisualization)
+            )
+        },
+        [currentVis, dispatch]
+    )
+
     return (
         <GridContainer>
             <GridTopRow>
@@ -52,6 +66,7 @@ const EventVisualizer: FC = () => {
                     <PluginWrapper
                         visualization={currentVis}
                         displayProperty={currentUser.settings.displayProperty}
+                        onDataSorted={onDataSorted}
                     />
                 )}
             </GridCenterColumnBottom>

src/components/line-list/types.ts

@@ -56,6 +56,6 @@ export type PaginatePayload = {
     page?: number
     pageSize?: number
 }
-export type DataSortFn = (payload?: DataSortPayload) => void
+export type DataSortFn = (payload: DataSortPayload) => void
 export type PaginateFn = (payload: PaginatePayload) => void
 export type ColumnHeaderClickFn = (cleanedHeaderName: string) => void

src/components/plugin-wrapper/hooks/query-tools-line-list.ts

@@ -54,7 +54,7 @@ export const getAdaptedVisualization = (
     visualization: CurrentVisualization
 ): {
     adaptedVisualization: Record<Axis, object[]> & {
-        inputType: InputType
+        outputType: InputType
     }
     headers: (string | string[])[]
     parameters: object
@@ -103,7 +103,7 @@ export const getAdaptedVisualization = (
             columns: adaptedColumns,
             rows: adaptedRows,
             filters: adaptedFilters,
-            inputType,
+            outputType: inputType,
         },
         headers,
         parameters,

src/components/plugin-wrapper/hooks/use-line-list-analytics-data.ts

@@ -113,10 +113,10 @@ const fetchAnalyticsDataForLL = async ({
 
     if (sortField) {
         switch (sortDirection) {
-            case 'asc':
+            case 'ASC':
                 req = req.withAsc(sortField)
                 break
-            case 'desc':
+            case 'DESC':
                 req = req.withDesc(sortField)
                 break
         }

src/components/plugin-wrapper/line-list-plugin.tsx

@@ -4,6 +4,7 @@ import { useLineListAnalyticsData } from './hooks/use-line-list-analytics-data'
 import type { MetadataInput } from '@components/app-wrapper/metadata-helpers'
 import { LineList } from '@components/line-list'
 import type { LineListAnalyticsData } from '@components/line-list'
+import type { DataSortFn, DataSortPayload } from '@components/line-list/types'
 import { transformVisualization } from '@modules/visualization'
 import type { CurrentUser, CurrentVisualization, SortDirection } from '@types'
 
@@ -14,6 +15,7 @@ type LineListPluginProps = {
     isInDashboard: boolean
     isInModal: boolean
     isVisualizationLoading: boolean
+    onDataSorted?: (sorting: DataSortPayload | undefined) => void
     onResponseReceived?: (metadata: MetadataInput) => void
 }
 
@@ -27,6 +29,7 @@ export const LineListPlugin: FC<LineListPluginProps> = ({
     isInDashboard,
     isInModal,
     isVisualizationLoading,
+    onDataSorted,
     onResponseReceived,
 }) => {
     console.log(
@@ -39,8 +42,7 @@ export const LineListPlugin: FC<LineListPluginProps> = ({
         isVisualizationLoading
     )
 
-    // TODO: add setter used in onDataSort
-    const [visualization] = useState<CurrentVisualization>(
+    const [visualization, setVisualization] = useState<CurrentVisualization>(
         transformVisualization(originalVisualization)
     )
 
@@ -55,31 +57,36 @@ export const LineListPlugin: FC<LineListPluginProps> = ({
         }
     )
 
-    // TODO: get this from visualization.sorting
-    const sortField = null
-    const sortDirection = 'default'
+    const { dimension: sortField, direction: sortDirection } = visualization
+        .sorting?.length
+        ? visualization.sorting[0]
+        : { dimension: undefined, direction: undefined }
 
-    // TODO: remove this comment once LineList component is used here
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const onPaginate = useCallback(
-        ({ page, pageSize }) =>
-            setPagination({ page: pageSize ? FIRST_PAGE : page, pageSize }),
-        []
-    )
+    const onPaginate = useCallback(({ page, pageSize }) => {
+        if (pageSize) {
+            setPagination({ page: pageSize ? FIRST_PAGE : page, pageSize })
+        } else if (page) {
+            setPagination({ page })
+        } else {
+            throw new Error(
+                'onPaginate was called with neither a page nor pageSize. At least one is expected'
+            )
+        }
+    }, [])
 
-    // TODO: remove this comment once LineList component is used here
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const onDataSort = useCallback(
+    const onDataSort: DataSortFn = useCallback(
         (sorting) => {
-            console.log('onDataSort TBD', sorting)
-            //setVisualization({
-            //    ...originalVisualization,
-            //    sorting,
-            //})
+            const newSorting =
+                sorting.direction === undefined ? undefined : sorting
+
+            setVisualization({
+                ...visualization,
+                sorting: newSorting ? [newSorting] : undefined,
+            } as CurrentVisualization)
+
+            onDataSorted?.(newSorting)
         },
-        [
-            /*originalVisualization*/
-        ]
+        [visualization, onDataSorted]
     )
 
     const {
@@ -122,7 +129,7 @@ export const LineListPlugin: FC<LineListPluginProps> = ({
                 )
             }}
             sortDirection={sortDirection as SortDirection}
-            sortField={sortField ?? undefined}
+            sortField={sortField}
         />
     )
 }

src/components/plugin-wrapper/plugin-wrapper.tsx

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { LineListPlugin } from './line-list-plugin'
 import type { MetadataInput } from '@components/app-wrapper/metadata-helpers'
+import type { DataSortPayload } from '@components/line-list/types'
 import type { CurrentUser, CurrentVisualization } from '@types'
 
 type PluginWrapperProps = {
@@ -10,6 +11,7 @@ type PluginWrapperProps = {
     isInDashboard?: boolean
     isInModal?: boolean // passed when viewing an intepretation via the InterpretationModal from analytics
     isVisualizationLoading?: boolean
+    onDataSorted?: (sorting: DataSortPayload | undefined) => void
     onResponseReceived?: (metadata: MetadataInput) => void
 }
 
@@ -20,6 +22,7 @@ export const PluginWrapper: FC<PluginWrapperProps> = ({
     isInDashboard = false,
     isInModal = false,
     isVisualizationLoading = false,
+    onDataSorted,
     onResponseReceived,
 }) => {
     if (visualization.type === 'LINE_LIST') {
@@ -31,6 +34,7 @@ export const PluginWrapper: FC<PluginWrapperProps> = ({
                 isInDashboard={isInDashboard}
                 isInModal={isInModal}
                 isVisualizationLoading={isVisualizationLoading}
+                onDataSorted={onDataSorted}
                 onResponseReceived={onResponseReceived}
             />
         )

src/types/index.ts

@@ -21,6 +21,7 @@ export type {
     ProgramType,
     RelativePeriodEnum,
     SortDirection,
+    Sorting,
     ValueType,
 } from './dhis2-openapi-schemas'
 export type { PickWithFieldFilters } from './pick-with-field-filters'