Merge pull request #185 from nitheesh-aot/requirement

Requirement Source Edit & Delete
bcgov · Jan 3, 2025 · 2667209 · 2667209
2 parents 901daf3 + 92ac6e5
commit 2667209
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 35 deletions.
diff --git a/compliance-web/src/components/App/Complaints/ComplaintFormUtils.ts b/compliance-web/src/components/App/Complaints/ComplaintFormUtils.ts
@@ -149,7 +149,7 @@ export const formatComplaintData = (
       case RequirementSourceEnum.NOT_EA_ACT:
       case RequirementSourceEnum.OTHER:
         complaintData.requirement_source_details.description =
-          formData.description;
+          formData.description ?? "";
         break;
       case RequirementSourceEnum.ACT2018:
       case RequirementSourceEnum.ACT2022:

diff --git a/compliance-web/src/components/App/Inspections/Profile/InspectionFileTabs.tsx b/compliance-web/src/components/App/Inspections/Profile/InspectionFileTabs.tsx
@@ -40,10 +40,10 @@ const InspectionFileTabs: React.FC<InspectionFileTabsProps> = () => {
             "&:first-of-type": {
               paddingLeft: "0",
             },
-          },
-          "& .Mui-selected": {
-            color: BCDesignTokens.typographyColorPrimary,
-            fontWeight: BCDesignTokens.typographyFontWeightsBold,
+            "&.Mui-selected": {
+              color: BCDesignTokens.typographyColorPrimary,
+              fontWeight: BCDesignTokens.typographyFontWeightsBold,
+            },
           },
         }}
       >

diff --git a/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementDrawer.tsx b/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementDrawer.tsx
@@ -25,16 +25,9 @@ type RequirementDrawerProps = {
 
 const RequirementFormSchema = yup.object().shape({
   requirementSummary: yup.string().nullable(),
-  topic: yup.object<Topic>().nullable().required("Primary is required"),
-  complianceFinding: yup
-    .object<IRType>()
-    .nullable()
-    .required("Compliance Finding is required"),
-  enforcementAction: yup
-    .array()
-    .of(yup.object<IRStatus>())
-    .min(1, "At least one Enforcement Action is required")
-    .required("Enforcement Action is required"),
+  topic: yup.object<Topic>().nullable().required("Topic is required"),
+  complianceFinding: yup.object<IRType>().nullable(),
+  enforcementAction: yup.array().of(yup.object<IRStatus>()).nullable(),
   findings: yup
     .object({
       html: yup.string().required("Entry is required"),

diff --git a/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementFormRight.tsx b/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementFormRight.tsx
@@ -5,27 +5,70 @@ import { useModal } from "@/store/modalStore";
 import RequirementSourceModal from "./RequirementSourceModal";
 import { RequirementSourceFormData } from "@/models/InspectionRequirement";
 import RequirementSourceCard from "./RequirementSourceCard";
+import ConfirmationModal from "@/components/Shared/Popups/ConfirmationModal";
 
 const RequirementFormRight: FC = () => {
   const { setOpen, setClose } = useModal();
   const [requirementSourceFormData, setRequirementSourceFormData] = useState<
     RequirementSourceFormData[]
   >([]);
 
-  const handleOnSubmit = (data: RequirementSourceFormData) => {
-    setClose();
-    // eslint-disable-next-line no-console
-    console.log(data);
+  const handleOnAddSubmit = (data: RequirementSourceFormData) => {
     setRequirementSourceFormData((prevData) => [...prevData, data]);
+    setClose();
+  };
+
+  const handleOnEditSubmit = (data: RequirementSourceFormData) => {
+    setRequirementSourceFormData((prevData) =>
+      prevData.map((item) =>
+        item.id === data.id ? { ...item, ...data } : item
+      )
+    );
+    setClose();
   };
 
-  const handleAddRequirementSourceModal = () => {
+  const handleOnDeleteSubmit = (data: RequirementSourceFormData) => {
+    setRequirementSourceFormData((prevData) =>
+      prevData.filter((item) => item.id !== data.id)
+    );
+    setClose();
+  };
+
+  const handleAddRequirementSource = () => {
     setOpen({
-      content: <RequirementSourceModal onSubmit={handleOnSubmit} />,
+      content: <RequirementSourceModal onSubmit={handleOnAddSubmit} />,
       width: "640px",
     });
   };
 
+  const handleEditRequirementSource = (data: RequirementSourceFormData) => {
+    setOpen({
+      content: (
+        <RequirementSourceModal
+          onSubmit={handleOnEditSubmit}
+          requirementSourceData={data}
+        />
+      ),
+      width: "640px",
+    });
+  };
+
+  const handleDeleteRequirementSource = (data: RequirementSourceFormData) => {
+    setOpen({
+      content: (
+        <ConfirmationModal
+          title="Delete Requirement Source?"
+          description={`You are about to delete ${data.requirementSource?.name}.
+          This is the primary requirement source. 
+          Deleting it will also permanently remove all associated documents. 
+          Are you sure you want to proceed?`}
+          confirmButtonText="Delete"
+          onConfirm={() => handleOnDeleteSubmit(data)}
+        />
+      ),
+    });
+  };
+
   return (
     <Box
       sx={{
@@ -37,13 +80,19 @@ const RequirementFormRight: FC = () => {
     >
       <Button
         color="secondary"
-        onClick={handleAddRequirementSourceModal}
+        onClick={handleAddRequirementSource}
         startIcon={<AddRounded />}
       >
         Requirement Source
       </Button>
       {requirementSourceFormData.map((data, index) => (
-        <RequirementSourceCard key={index} data={data} index={index} />
+        <RequirementSourceCard
+          key={index}
+          data={data}
+          index={index}
+          onEdit={handleEditRequirementSource}
+          onDelete={handleDeleteRequirementSource}
+        />
       ))}
     </Box>
   );

diff --git a/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementSourceCard.tsx b/compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementSourceCard.tsx
@@ -26,10 +26,12 @@ import { RequirementSourceEnum } from "@/utils/constants";
 type RequirementSourceCardProps = {
   data: RequirementSourceFormData;
   index: number;
+  onEdit: (data: RequirementSourceFormData) => void;
+  onDelete: (data: RequirementSourceFormData) => void;
 };
 
 const RequirementSourceCard: FC<RequirementSourceCardProps> = memo(
-  ({ data, index }) => {
+  ({ data, index, onEdit, onDelete }) => {
     const [isExpanded, setIsExpanded] = useState(index === 0);
 
     const isCondition = [
@@ -110,12 +112,20 @@ const RequirementSourceCard: FC<RequirementSourceCardProps> = memo(
                 </IconButton>
               </Tooltip>
               <Tooltip title="Edit" arrow>
-                <IconButton size="small" color="secondary">
+                <IconButton
+                  size="small"
+                  color="secondary"
+                  onClick={() => onEdit(data)}
+                >
                   <EditOutlined />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Delete" arrow>
-                <IconButton size="small" color="secondary">
+                <IconButton
+                  size="small"
+                  color="secondary"
+                  onClick={() => onDelete(data)}
+                >
                   <DeleteOutlineRounded />
                 </IconButton>
               </Tooltip>
@@ -161,9 +171,14 @@ const RequirementSourceCard: FC<RequirementSourceCardProps> = memo(
               <ParagraphWithReadMore
                 maxHeight={84}
                 renderTypography={
-                  <Typography variant="body2" display={"flex"} flex={1}>
-                    {data.description?.text}
-                  </Typography>
+                  <Typography
+                    variant="subtitle2"
+                    component={"div"}
+                    className="quill-render"
+                    dangerouslySetInnerHTML={{
+                      __html: data.description?.html ?? "",
+                    }}
+                  />
                 }
               />
             </Box>

diff --git a/...liance-web/src/components/App/Inspections/Profile/Requirements/RequirementSourceModal.tsx b/...liance-web/src/components/App/Inspections/Profile/Requirements/RequirementSourceModal.tsx
@@ -15,6 +15,7 @@ import { RequirementSourceEnum } from "@/utils/constants";
 
 type RequirementSourceModalProps = {
   onSubmit: (data: RequirementSourceFormData) => void;
+  requirementSourceData?: RequirementSourceFormData;
 };
 
 const requirementSourceFormSchema = yup.object().shape({
@@ -47,12 +48,13 @@ const initFormData: RequirementSourceFormData = {
 
 const RequirementSourceModal: React.FC<RequirementSourceModalProps> = ({
   onSubmit,
+  requirementSourceData,
 }) => {
   const { data: requirementSourceList } = useRequirementSourcesData();
 
   const defaultValues = useMemo<RequirementSourceFormData>(() => {
-    return initFormData;
-  }, []);
+    return requirementSourceData ?? initFormData;
+  }, [requirementSourceData]);
 
   const methods = useForm<RequirementSourceSchemaType>({
     resolver: yupResolver(requirementSourceFormSchema),
@@ -75,14 +77,24 @@ const RequirementSourceModal: React.FC<RequirementSourceModalProps> = ({
   const onSubmitHandler = (data: RequirementSourceSchemaType) => {
     // eslint-disable-next-line no-console
     console.log(data);
-    onSubmit(data as RequirementSourceFormData);
+    const formData = data as RequirementSourceFormData;
+    if (!requirementSourceData) {
+      formData.id = Date.now();
+    }
+    onSubmit(formData);
   };
 
   return (
     <>
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <ModalTitleBar title={"Add Requirement Source"} />
+          <ModalTitleBar
+            title={
+              requirementSourceData
+                ? "Edit Requirement Source"
+                : "Add Requirement Source"
+            }
+          />
           <DialogContent dividers>
             <ControlledAutoComplete
               name="requirementSource"
@@ -91,6 +103,7 @@ const RequirementSourceModal: React.FC<RequirementSourceModalProps> = ({
               getOptionLabel={(option) => option.name}
               getOptionKey={(option) => option.id}
               isOptionEqualToValue={(option, value) => option.id === value.id}
+              disabled={!!requirementSourceData}
             />
             {selectedRequirementSource?.id === RequirementSourceEnum.EACA && (
               <ControlledTextField
@@ -107,7 +120,9 @@ const RequirementSourceModal: React.FC<RequirementSourceModalProps> = ({
                     RequirementSourceEnum.SCHEDULE_B,
                     RequirementSourceEnum.EAC,
                     RequirementSourceEnum.EACA,
-                  ].includes(selectedRequirementSource?.id as RequirementSourceEnum)
+                  ].includes(
+                    selectedRequirementSource?.id as RequirementSourceEnum
+                  )
                     ? "Condition # (optional)"
                     : "Section # (optional)"
                 }
@@ -121,7 +136,9 @@ const RequirementSourceModal: React.FC<RequirementSourceModalProps> = ({
             </Stack>
             <ControlledRichTextEditor label="Description" name="description" />
           </DialogContent>
-          <ModalActions primaryActionButtonText={"Add"} />
+          <ModalActions
+            primaryActionButtonText={requirementSourceData ? "Save" : "Add"}
+          />
         </form>
       </FormProvider>
     </>

diff --git a/compliance-web/src/models/InspectionRequirement.ts b/compliance-web/src/models/InspectionRequirement.ts
@@ -16,6 +16,7 @@ export interface InspectionRequirementFormData {
 }
 
 export interface RequirementSourceFormData {
+  id?: number;
   requirementSource?: RequirementSource;
   sourceNumber?: string;
   sourceTitle?: string,

diff --git a/compliance-web/src/styles/quill.scss b/compliance-web/src/styles/quill.scss
@@ -27,4 +27,14 @@
   p {
     margin: 0;
   }
+  a {
+    margin: 0;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    color: #255a90;
+    &:hover {
+      -webkit-text-decoration: underline;
+      text-decoration: underline;
+    }
+  }
 }