PIMS-2000: Make non-optional checkboxes mandatory (#2640)

Co-authored-by: dbarkowsky <[email protected]> Co-authored-by: Dylan Barkowsky <[email protected]>
bcgov · Sep 11, 2024 · 6ea197d · 6ea197d
1 parent 4d75a1f
commit 6ea197d
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 5 deletions.
diff --git a/express-api/src/typeorm/Migrations/1724686432998-UpdateTaskStatus.ts b/express-api/src/typeorm/Migrations/1724686432998-UpdateTaskStatus.ts
@@ -0,0 +1,39 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class UpdateTaskStatus1724686432998 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      UPDATE task SET status_id = 14 WHERE id = 3;
+    `);
+    await queryRunner.query(`
+      UPDATE task SET status_id = 15 WHERE id = 4;
+    `);
+    await queryRunner.query(`
+      UPDATE task SET is_optional = true WHERE id = 24;
+    `);
+    await queryRunner.query(`
+      UPDATE timestamp_type SET status_id = 21, is_optional = false WHERE id = 11;
+    `);
+    await queryRunner.query(`
+      UPDATE task SET name = 'Preparation and Due Diligence complete', is_optional = false WHERE id IN (9, 19);
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      UPDATE task SET status_id = 7 WHERE id = 3;
+    `);
+    await queryRunner.query(`
+      UPDATE task SET status_id = 8 WHERE id = 4;
+    `);
+    await queryRunner.query(`
+      UPDATE task SET is_optional = false WHERE id = 24;
+    `);
+    await queryRunner.query(`
+      UPDATE timestamp_type SET status_id = 14, is_optional = true WHERE id = 11;
+    `);
+    await queryRunner.query(`
+      UPDATE task SET name = 'Preparation and due diligence', is_optional = true WHERE id IN (9, 19);
+    `);
+  }
+}
diff --git a/react-app/src/components/form/DateFormField.tsx b/react-app/src/components/form/DateFormField.tsx
@@ -2,21 +2,25 @@ import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { DateField, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Box, Typography, useTheme } from '@mui/material';
 
 type DateFieldFormProps = {
   name: string;
   label: string;
   disabled?: boolean;
+  required?: boolean;
 };
 
 const DateFormField = (props: DateFieldFormProps) => {
   const { control } = useFormContext();
-  const { name, label, disabled } = props;
+  const theme = useTheme();
+  const { name, label, disabled, required } = props;
   return (
     <Controller
       control={control}
       name={name}
-      render={({ field: { onChange, value } }) => {
+      rules={{ validate: (value) => !required || value || 'Required field.' }}
+      render={({ field: { onChange, value }, fieldState: { error } }) => {
         return (
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <DateField
@@ -26,7 +30,18 @@ const DateFormField = (props: DateFieldFormProps) => {
               value={value}
               label={label}
               format={'LL'}
+              required={required}
+              slotProps={{ textField: { error: !!error && !!error.message } }}
             />
+            {!!error && !!error.message ? (
+              <Box>
+                <Typography ml={'3.2em'} fontSize={'smaller'} color={theme.palette.error.main}>
+                  {error.message}
+                </Typography>
+              </Box>
+            ) : (
+              <></>
+            )}
           </LocalizationProvider>
         );
       }}

diff --git a/react-app/src/components/form/SingleSelectBoxFormField.tsx b/react-app/src/components/form/SingleSelectBoxFormField.tsx
@@ -18,7 +18,7 @@ const SingleSelectBoxFormField = (props: SingleSelectBoxFormFieldProps) => {
       name={name}
       control={control}
       rules={{ validate: (value) => !required || value || 'Required field.' }}
-      render={({ field: { onChange, value }, fieldState: { error } }) => (
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
         <>
           <Box
             sx={{
@@ -29,6 +29,7 @@ const SingleSelectBoxFormField = (props: SingleSelectBoxFormFieldProps) => {
             <Checkbox
               id={`single-checkbox-${name}`}
               onChange={(_, data) => onChange(data)}
+              onBlur={onBlur}
               checked={!!value}
               required={required}
             />

diff --git a/react-app/src/components/projects/ProjectDialog.tsx b/react-app/src/components/projects/ProjectDialog.tsx
@@ -100,7 +100,8 @@ export const ProjectGeneralInfoDialog = (props: IProjectGeneralInfoDialog) => {
         TimestampTypes,
       });
     }
-  }, [projectFormMethods.watch('StatusId')]); //When status id changes, fetch a new set of tasks possible for this status...
+    projectFormMethods.clearErrors();
+  }, [projectFormMethods.watch('StatusId'), lookupData]); //When status id changes, fetch a new set of tasks possible for this status...
 
   useEffect(() => {
     //Subsequently, we need to default the values of the form either to the already present value in the Project data blob, or just set it to false.
@@ -167,6 +168,7 @@ export const ProjectGeneralInfoDialog = (props: IProjectGeneralInfoDialog) => {
   const requireNotificationAcknowledge =
     approvedStatus == status && status !== initialValues?.StatusId;
   const isAdmin = keycloak.hasRoles([Roles.ADMIN]);
+  console.log('project form values', projectFormMethods.getValues());
   return (
     <ConfirmDialog
       title={'Update Project'}
@@ -176,14 +178,17 @@ export const ProjectGeneralInfoDialog = (props: IProjectGeneralInfoDialog) => {
       }}
       onConfirm={async () => {
         const isValid = await projectFormMethods.trigger();
+        console.log('lookupData and isValid', lookupData, isValid);
         if (lookupData && isValid) {
           const values = projectFormMethods.getValues();
           submit(+initialValues.Id, {
             ...values,
             Id: initialValues.Id,
             ProjectProperties: initialValues.ProjectProperties,
             Timestamps: values.Timestamps.filter((a) => dayjs(a.Date).isValid()),
-          }).then(() => postSubmit());
+          })
+            .then(() => postSubmit())
+            .catch((reason) => console.log(reason));
         }
       }}
       onCancel={async () => onCancel()}
@@ -211,6 +216,7 @@ export const ProjectGeneralInfoDialog = (props: IProjectGeneralInfoDialog) => {
                 key={`${task.Id}-${idx}`}
                 name={`Tasks.${idx}.IsCompleted`}
                 label={task.Name}
+                required={!lookupData?.Tasks.find((t) => task.Id === t.Id)?.IsOptional}
               />
             ))}
           </Box>
@@ -268,6 +274,9 @@ export const ProjectGeneralInfoDialog = (props: IProjectGeneralInfoDialog) => {
                     key={`${ts.Id}-${idx}`}
                     name={`Timestamps.${idx}.Date`}
                     label={columnNameFormatter(ts.Name)}
+                    required={
+                      !lookupData?.TimestampTypes?.find((tt) => ts.Id === tt.Id)?.IsOptional
+                    }
                   />
                 </Grid>
               ))}