feat: allow updating group

Author: joshunrau

apps/web/src/components/WithFallback.tsx

@@ -4,8 +4,6 @@ import { useEffect, useState } from 'react';
 
 import { LoadingFallback } from './LoadingFallback';
 
-const MIN_DELAY = 300; // ms
-
 function isDataReady<TProps extends { data: unknown }>(
   props: TProps
 ): props is TProps & { data: NonNullable<TProps['data']> } {
@@ -14,9 +12,12 @@ function isDataReady<TProps extends { data: unknown }>(
 
 export function WithFallback<TProps extends { [key: string]: unknown }>({
   Component,
+  minDelay = 300, // ms
   props
 }: {
   Component: React.FC<TProps>;
+  /** the minimum duration to suspend in ms */
+  minDelay?: number;
   props: TProps extends { data: infer TData extends NonNullable<unknown> }
     ? Omit<TProps, 'data'> & { data: null | TData | undefined }
     : never;
@@ -29,7 +30,7 @@ export function WithFallback<TProps extends { [key: string]: unknown }>({
     if (!isMinDelayComplete) {
       timeout = setTimeout(() => {
         setIsMinDelayComplete(true);
-      }, MIN_DELAY);
+      }, minDelay);
     }
     return () => clearTimeout(timeout);
   }, []);

apps/web/src/features/admin/pages/ManageUsersPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { snakeToCamelCase } from '@douglasneuroinformatics/libjs';
 import { Button, ClientTable, Heading, SearchBar, Sheet } from '@douglasneuroinformatics/libui/components';
@@ -7,31 +7,44 @@ import type { User } from '@opendatacapture/schemas/user';
 import { Link } from 'react-router-dom';
 
 import { PageHeader } from '@/components/PageHeader';
+import { WithFallback } from '@/components/WithFallback';
 import { useSearch } from '@/hooks/useSearch';
 import { useAppStore } from '@/store';
 
 import { useDeleteUserMutation } from '../hooks/useDeleteUserMutation';
+import { useGroupsQuery } from '../hooks/useGroupsQuery';
 import { useUpdateUserMutation } from '../hooks/useUpdateUserMutation';
 import { useUsersQuery } from '../hooks/useUsersQuery';
 import { UpdateUserForm, type UpdateUserFormInputData } from './UpdateUserForm';
 
 export const ManageUsersPage = () => {
   const currentUser = useAppStore((store) => store.currentUser);
   const { t } = useTranslation();
+  const groupsQuery = useGroupsQuery();
   const usersQuery = useUsersQuery();
   const deleteUserMutation = useDeleteUserMutation();
   const updateUserMutation = useUpdateUserMutation();
   const [selectedUser, setSelectedUser] = useState<null | User>(null);
   const { filteredData, searchTerm, setSearchTerm } = useSearch(usersQuery.data ?? [], 'username');
 
-  const data: UpdateUserFormInputData = {
-    disableDelete: selectedUser?.username === currentUser?.username,
-    initialValues: selectedUser?.additionalPermissions.length
-      ? {
-          additionalPermissions: selectedUser.additionalPermissions
-        }
-      : undefined
-  };
+  const [data, setData] = useState<null | UpdateUserFormInputData>(null);
+
+  useEffect(() => {
+    const groups = groupsQuery.data;
+    if (!selectedUser || !groups) {
+      setData(null);
+    } else {
+      setData({
+        disableDelete: selectedUser?.username === currentUser?.username,
+        groupOptions: Object.fromEntries(groups.map((group) => [group.id, group.name])),
+        initialValues: selectedUser?.additionalPermissions.length
+          ? {
+              additionalPermissions: selectedUser.additionalPermissions
+            }
+          : undefined
+      });
+    }
+  }, [groupsQuery.data, selectedUser]);
 
   return (
     <Sheet open={Boolean(selectedUser)} onOpenChange={() => setSelectedUser(null)}>
@@ -96,17 +109,23 @@ export const ManageUsersPage = () => {
             })}
           </Sheet.Description>
         </Sheet.Header>
-        <Sheet.Body className="grid gap-4">
-          <UpdateUserForm
-            data={data}
-            onDelete={() => {
-              deleteUserMutation.mutate({ id: selectedUser!.id });
-              setSelectedUser(null);
-            }}
-            onSubmit={(data) => {
-              void updateUserMutation.mutateAsync({ data, id: selectedUser!.id }).then(() => {
+        <Sheet.Body className="grid h-full gap-4">
+          <WithFallback
+            Component={UpdateUserForm}
+            minDelay={1000}
+            props={{
+              data,
+              onDelete: () => {
+                deleteUserMutation.mutate({ id: selectedUser!.id });
                 setSelectedUser(null);
-              });
+              },
+              onSubmit: ({ groupIds, ...data }) => {
+                void updateUserMutation
+                  .mutateAsync({ data: { groupIds: Array.from(groupIds), ...data }, id: selectedUser!.id })
+                  .then(() => {
+                    setSelectedUser(null);
+                  });
+              }
             }}
           />
         </Sheet.Body>

apps/web/src/features/admin/pages/UpdateUserForm.tsx

@@ -3,14 +3,22 @@ import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { FormTypes } from '@opendatacapture/runtime-core';
 import { $UpdateUserData } from '@opendatacapture/schemas/user';
 import type { Promisable } from 'type-fest';
-import type { z } from 'zod';
+import { z } from 'zod';
 
-const $UpdateUserFormData = $UpdateUserData.pick({ additionalPermissions: true }).required();
+const $UpdateUserFormData = $UpdateUserData
+  .pick({ additionalPermissions: true })
+  .required()
+  .extend({
+    groupIds: z.set(z.string())
+  });
 
 type UpdateUserFormData = z.infer<typeof $UpdateUserFormData>;
 
 export type UpdateUserFormInputData = {
   disableDelete: boolean;
+  groupOptions: {
+    [id: string]: string;
+  };
   initialValues?: FormTypes.PartialNullableData<UpdateUserFormData>;
 };
 
@@ -19,7 +27,7 @@ export const UpdateUserForm: React.FC<{
   onDelete: () => void;
   onSubmit: (data: UpdateUserFormData) => Promisable<void>;
 }> = ({ data, onDelete, onSubmit }) => {
-  const { disableDelete, initialValues } = data;
+  const { disableDelete, groupOptions, initialValues } = data;
   const { t } = useTranslation();
   return (
     <Form
@@ -123,6 +131,21 @@ export const UpdateUserForm: React.FC<{
             en: 'Authorization',
             fr: 'Autorisation'
           })
+        },
+        {
+          description: '',
+          fields: {
+            groupIds: {
+              kind: 'set',
+              label: 'Group IDs',
+              options: groupOptions,
+              variant: 'listbox'
+            }
+          },
+          title: t({
+            en: 'Groups',
+            fr: 'Groupes'
+          })
         }
       ]}
       initialValues={initialValues}