[FS-225]: Add Sort Feature To Household List

app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberForm.tsx

@@ -25,7 +25,7 @@ import {
   nationalities,
   religions,
 } from '@camp/domain';
-import { ArrowDownIcon, CheckIcon, EditIcon, TrashIcon } from '@camp/icons';
+import { CheckIcon, ChevronDownIcon, EditIcon, TrashIcon } from '@camp/icons';
 import { messages } from '@camp/messages';
 import { createTestAttr } from '@camp/test';
 import { isNull } from '@fullstacksjs/toolbox';
@@ -180,7 +180,7 @@ export const MemberForm = ({
     <DashboardCard
       left={
         <ActionIcon onClick={toggle}>
-          <ArrowDownIcon width="16" height="16" color="black" />
+          <ChevronDownIcon width="16" height="16" color="black" />
         </ActionIcon>
       }
       right={

app/Dashboard/Households/HouseholdList/HouseholdList.tsx

@@ -4,21 +4,80 @@ import {
   DashboardTitle,
   FullPageLoader,
   showNotification,
-  Table,
 } from '@camp/design';
+import { householdColumnHelper } from '@camp/domain';
 import { errorMessages, messages } from '@camp/messages';
+import { AppRoute } from '@camp/router';
 import { createTestAttr } from '@camp/test';
 import { isEmpty, isNull } from '@fullstacksjs/toolbox';
+import { Group } from '@mantine/core';
+import type { SortingState } from '@tanstack/react-table';
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useState } from 'react';
 
+import { InformationBadge } from '../../_components/InformationBadge';
+import { SeverityBadge } from '../../_components/SeverityBadge';
 import { CreateHouseholdButton } from '../_components/CreateHousehold';
+import { HouseholdActionButton } from '../_components/HouseholdActionButton';
 import { HouseholdEmptyState } from '../HouseholdEmptyState';
 import * as ids from './HouseholdList.ids';
-import { HouseholdTableRow } from './HouseholdTableRow';
+import { HouseholdTable } from './HouseholdTable';
+import { householdActionIds as actionIds } from './HouseholdTableRow.ids';
+
+const t = messages.households.list;
+
+const columns = [
+  householdColumnHelper.display({
+    header: t.table.columns.order,
+    cell: order => order.row.index + 1,
+  }),
+  householdColumnHelper.accessor('name', {
+    header: t.table.columns.name,
+    cell: name => name.getValue(),
+  }),
+  householdColumnHelper.accessor('isCompleted', {
+    id: 'status',
+    header: t.table.columns.status,
+    cell: status => (
+      <InformationBadge status={status.getValue() ? 'completed' : 'draft'} />
+    ),
+  }),
+  householdColumnHelper.accessor('severity', {
+    header: t.table.columns.severity,
+    enableSorting: true,
+    cell: props => (
+      <Group position="apart">
+        <SeverityBadge severity={props.getValue()} />
+        <HouseholdActionButton
+          to={AppRoute.householdDetail}
+          params={{ id: props.row.original.id }}
+          householdId={props.row.original.id}
+          householdName={props.row.original.name}
+          menuButtonId={actionIds.actionButton}
+          menuId={actionIds.actionMenu}
+        />
+      </Group>
+    ),
+  }),
+];
+
+const empty: any[] = [];
 
 export const HouseholdList = () => {
-  const t = messages.households.list;
-  const { data, loading, error } = useHouseholdListQuery();
-  const households = data?.household;
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const { data, loading, error } = useHouseholdListQuery({
+    variables: { orderBy: sorting },
+  });
+  const households = data?.household ?? null;
+
+  const table = useReactTable({
+    data: households ?? empty,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+  });
 
   if (error) {
     showNotification({
@@ -34,24 +93,12 @@ export const HouseholdList = () => {
   if (isNull(households)) return null;
   if (isEmpty(households)) return <HouseholdEmptyState />;
 
-  const rows = households.map((info, i) => (
-    <HouseholdTableRow
-      order={i + 1}
-      key={Object.values(info).join('-')}
-      household={info}
-    />
-  ));
-
   return (
     <DashboardCard
       left={<CreateHouseholdButton />}
       right={<DashboardTitle>{t.title}</DashboardTitle>}
     >
-      <Table
-        id={ids.householdTableId}
-        columns={t.table.columns as unknown as string[]}
-        rows={rows}
-      />
+      <HouseholdTable table={table} />
     </DashboardCard>
   );
 };

app/Dashboard/Households/HouseholdList/HouseholdTable.tsx

@@ -0,0 +1,84 @@
+import { Table } from '@camp/design';
+import type { HouseholdKeys, HouseholdListItem } from '@camp/domain';
+import type { Icon } from '@camp/icons';
+import { ArrowDownIcon, ArrowUpIcon } from '@camp/icons';
+import type { AppRoute } from '@camp/router';
+import { useNavigate } from '@camp/router';
+import { Text } from '@mantine/core';
+import type { Table as TableType } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+import { useCallback } from 'react';
+
+import * as ids from './HouseholdList.ids';
+
+interface Props {
+  table: TableType<HouseholdKeys & HouseholdListItem>;
+}
+
+const iconMap: Record<string, Icon> = {
+  asc: ArrowUpIcon,
+  desc: ArrowDownIcon,
+} as const;
+
+export const HouseholdTable = ({ table }: Props) => {
+  const navigate = useNavigate();
+  const gotoDetail = useCallback(
+    (householdId: string) => {
+      navigate({ to: `/dashboard/households/${householdId}` as AppRoute });
+    },
+    [navigate],
+  );
+
+  return (
+    <Table id={ids.householdTableId}>
+      <thead>
+        {table.getHeaderGroups().map(headerGroup => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map(header => {
+              const Icon = iconMap[header.column.getIsSorted() as string];
+              const canSort = header.column.getCanSort();
+
+              return (
+                <th key={header.id} colSpan={header.colSpan}>
+                  {header.isPlaceholder ? null : (
+                    <Text
+                      sx={{
+                        cursor: canSort ? 'pointer' : undefined,
+                        display: 'flex',
+                        alignItems: 'center',
+                        userSelect: canSort ? 'none' : undefined,
+                        gap: 5,
+                      }}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                      {Icon ? <Icon size={14} /> : null}
+                    </Text>
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map(row => (
+          <tr
+            style={{ cursor: 'pointer' }}
+            key={row.id}
+            onClick={() => gotoDetail(row.original.id)}
+          >
+            {row.getVisibleCells().map(cell => (
+              <td key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

app/Dashboard/Households/HouseholdList/HouseholdTableColumn.tsx

@@ -0,0 +1,49 @@
+import type { HouseholdKeys, HouseholdListItem } from '@camp/domain';
+import type { Icon } from '@camp/icons';
+import { ArrowDownIcon, ArrowUpIcon } from '@camp/icons';
+import { Text } from '@mantine/core';
+import type { Table } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+
+interface Props {
+  col: Table<HouseholdKeys & HouseholdListItem>;
+}
+
+const iconMap: Record<string, Icon> = {
+  asc: ArrowUpIcon,
+  desc: ArrowDownIcon,
+} as const;
+
+export const HouseholdTableColumn = ({ col }: Props) => {
+  return col.getHeaderGroups().map(headerGroup => (
+    <tr key={headerGroup.id}>
+      {headerGroup.headers.map(header => {
+        const Icon = iconMap[header.column.getIsSorted() as string];
+        const canSort = header.column.getCanSort();
+
+        return (
+          <th key={header.id} colSpan={header.colSpan}>
+            {header.isPlaceholder ? null : (
+              <Text
+                sx={{
+                  cursor: canSort ? 'pointer' : undefined,
+                  display: 'flex',
+                  alignItems: 'center',
+                  userSelect: canSort ? 'none' : undefined,
+                  gap: 5,
+                }}
+                onClick={header.column.getToggleSortingHandler()}
+              >
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext(),
+                )}
+                {Icon ? <Icon size={14} /> : null}
+              </Text>
+            )}
+          </th>
+        );
+      })}
+    </tr>
+  ));
+};

app/Dashboard/Households/HouseholdList/HouseholdTableRow.ids.ts

@@ -1,4 +1,4 @@
-export const householdRowIds = {
+export const householdActionIds = {
   actionButton: 'household-table-menu-button',
   actionMenu: 'household-table-menu',
   notifications: {

app/Dashboard/Households/_components/HouseholdActionButton/HouseholdActionButton.cy.tsx

@@ -7,6 +7,8 @@ describe('HouseholdActionButton', () => {
   beforeEach(() => {
     cy.mount(
       <HouseholdActionButton
+        householdName="mmd"
+        householdId="mmd alian"
         to="/"
         menuButtonId={menuButtonId}
         menuId={menuId}

app/Dashboard/Households/_components/HouseholdActionButton/HouseholdActionButton.ids.ts

@@ -0,0 +1,10 @@
+export const householdActionIds = {
+  actionButton: 'household-table-menu-button',
+  actionMenu: 'household-table-menu',
+  notifications: {
+    delete: {
+      success: 'delete-household-success-notification',
+      failure: 'delete-household-failure-notification',
+    },
+  },
+};