Merge pull request #209 from nitheesh-aot/filters

COMP-309: Natural sort order for Topics

Author: nitheesh-aot

compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementDrawer.tsx

@@ -2,7 +2,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Stack } from "@mui/material";
 import { FormProvider, useForm } from "react-hook-form";
 import DrawerTitleBar from "@/components/Shared/Drawer/DrawerTitleBar";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useMenuStore } from "@/store/menuStore";
 import DrawerActionBarTop from "@/components/Shared/Drawer/DrawerActionBarTop";
 import DrawerActionBarBottom from "@/components/Shared/Drawer/DrawerActionBarBottom";
@@ -52,6 +52,9 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
   index,
 }) => {
   const { appHeaderHeight } = useMenuStore();
+  const [inspectionRequirementData, setInspectionRequirementData] = useState<
+    InspectionRequirementFormData | undefined
+  >(undefined);
   const [requirementSourceList, setRequirementSourceList] = useState<
     RequirementSourceFormData[]
   >([]);
@@ -60,18 +63,17 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
   const { data: complianceFindingsList } = useComplianceFindingsData();
   const { data: topicsList } = useTopicsData();
 
-  const defaultValues = useMemo<InspectionRequirementFormData>(() => {
-    return requirement ? formatRequirementFormData(requirement) : initFormData;
-  }, [requirement]);
-
   const methods = useForm<RequirementSchemaType>({
     resolver: yupResolver(RequirementFormSchema),
     mode: "onBlur",
-    defaultValues: defaultValues,
   });
 
   const { handleSubmit, reset } = methods;
 
+  useEffect(() => {
+    reset(inspectionRequirementData ?? initFormData);
+  }, [inspectionRequirementData, reset]);
+
   const onSuccess = useCallback(() => {
     onSubmit("Changes saved successfully!");
   }, [onSubmit]);
@@ -81,10 +83,34 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
     reset();
   }, [onSubmit, reset]);
 
-  const { mutate: createInspectionRequirement } =
-    useCreateInspectionRequirement(onSuccess);
-  const { mutate: updateInspectionRequirement } =
-    useUpdateInspectionRequirement(onSuccess);
+  const {
+    mutate: createInspectionRequirement,
+    data: inspectionRequirementCreateData,
+  } = useCreateInspectionRequirement(onSuccess);
+  const {
+    mutate: updateInspectionRequirement,
+    data: inspectionRequirementUpdateData,
+  } = useUpdateInspectionRequirement(onSuccess);
+
+  useEffect(() => {
+    const inspectionRequirement: InspectionRequirement =
+      inspectionRequirementUpdateData ??
+      inspectionRequirementCreateData ??
+      requirement;
+    if (inspectionRequirement) {
+      const inspectionRequirementFormData = formatRequirementFormData(
+        inspectionRequirement
+      );
+      setInspectionRequirementData(inspectionRequirementFormData);
+      setRequirementSourceList(
+        inspectionRequirementFormData.requirementSourceDetails ?? []
+      );
+    }
+  }, [
+    inspectionRequirementUpdateData,
+    inspectionRequirementCreateData,
+    requirement,
+  ]);
 
   const { mutate: deleteInspectionRequirement } =
     useDeleteInspectionRequirement(onDeleteSuccess);
@@ -106,10 +132,10 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
         requirementSourceList
       );
 
-      if (requirement) {
+      if (inspectionRequirementData) {
         updateInspectionRequirement({
           inspectionId: inspectionData.id,
-          requirementId: requirement.id,
+          requirementId: inspectionRequirementData.id ?? 0,
           inspectionRequirement: inspectionRequirementPayload,
         });
       } else {
@@ -122,7 +148,7 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
     [
       inspectionData,
       requirementSourceList,
-      requirement,
+      inspectionRequirementData,
       updateInspectionRequirement,
       createInspectionRequirement,
     ]
@@ -140,14 +166,15 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
       <form onSubmit={handleSubmit(onSubmitHandler)}>
         <DrawerTitleBar
           title={
-            requirement
+            inspectionRequirementData
               ? `Edit Requirement ${index !== undefined ? `#${index + 1}` : ""}`
               : "Create Requirement"
           }
           isFormDirtyCheck
         />
-        <DrawerActionBarTop isShowActionBar={!requirement} />
+        <DrawerActionBarTop isShowActionBar={!inspectionRequirementData} />
         <Stack
+          key={JSON.stringify(inspectionRequirementData)}
           height={`calc(100vh - ${appHeaderHeight + 129}px)`} // 64px (DrawerTitleBar height) + 65px (DrawerActionBar height)
           direction={"row"}
         >
@@ -159,16 +186,15 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
           />
           <RequirementFormRight
             onDataChange={onRequirementSourceListDataChange}
-            requirementSourceFormDataList={
-              defaultValues.requirementSourceDetails ?? []
-            }
+            requirementSourceFormDataList={requirementSourceList}
           />
         </Stack>
         <DrawerActionBarBottom
-          isShowActionBar={!!requirement}
+          isShowActionBar={!!inspectionRequirementData}
           onDeleteAction={onDeleteRequirement}
           onDeleteTitle="Delete Requirement"
           onDeleteDescription="You are about to delete this Requirement. Are you sure?"
+          dirtyCheck={false}
         />
       </form>
     </FormProvider>

compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementRelatedDocumentModal.tsx

@@ -128,6 +128,7 @@ const RequirementRelatedDocumentModal: React.FC<
     };
     const reqSectionData: RequirementRelatedDocumentSectionData = {
       id: relatedDocumentSectionData?.id ?? Date.now(),
+      dbId: relatedDocumentSectionData?.dbId ?? undefined,
       sourceFormId: requirementSourceData.id,
       relatedDocumentFormId:
         relatedDocumentData?.id ?? reqRelatedDocumentData.id,

compliance-web/src/components/App/Inspections/Profile/Requirements/RequirementUtils.ts

@@ -44,6 +44,9 @@ export const formatRequirementAPIData = (
         description: item.description?.html ?? "",
         documents: [],
       };
+      if (item.dbId) {
+        requirementSource.id = item.dbId;
+      }
       if (isRequirementSourceCondition(item.requirementSource?.id ?? "")) {
         requirementSource.condition_number = item.sourceNumber ?? "";
       } else {
@@ -58,6 +61,9 @@ export const formatRequirementAPIData = (
             section_title: section.sectionTitle ?? "",
             description: section.description?.html ?? "",
           };
+          if (section.dbId) {
+            srcDocument.id = section.dbId;
+          }
           requirementSource.documents.push(srcDocument);
         });
       });
@@ -78,26 +84,28 @@ export const formatRequirementAPIData = (
 
 
 export const formatRequirementFormData = (requirement: InspectionRequirement): InspectionRequirementFormData => {
-  const requirementSourceDetails: RequirementSourceFormData[] = requirement.requirement_source_details.map((item) => {
+  const requirementSourceDetails: RequirementSourceFormData[] = requirement?.requirement_source_details?.map((item) => {
     const relatedDocuments: RequirementRelatedDocumentData[] = [];
-    item.documents.forEach((document) => {
+    item.documents.forEach((document, index) => {
       const existingDocumentIndex = relatedDocuments.findIndex(
         (doc) => doc.documentTitle === document.document_title
       );
+      const docFormId = existingDocumentIndex >= 0 ? relatedDocuments[existingDocumentIndex].id : Date.now() + index;
       const section: RequirementRelatedDocumentSectionData = {
-        id: Date.now(),
+        id: document.id,
+        dbId: document.id,
         sourceFormId: item.id,
-        relatedDocumentFormId: document.id,
+        relatedDocumentFormId: docFormId,
         sectionNumber: document.section_number,
         sectionTitle: document.section_title,
         description: { html: document.description, text: document.description },
       };
 
-      if (existingDocumentIndex !== -1) {
+      if (existingDocumentIndex >= 0) {
         relatedDocuments[existingDocumentIndex]?.sections?.push(section);
       } else {
         relatedDocuments.push({
-          id: document.id,
+          id: docFormId,
           relatedDocument: document.document_type,
           documentTitle: document.document_title,
           sections: [section],
@@ -106,6 +114,7 @@ export const formatRequirementFormData = (requirement: InspectionRequirement): I
     });
     return {
       id: item.id,
+      dbId: item.id,
       requirementSource: item.requirement_source,
       sourceNumber: item.section_number ?? item.condition_number,
       sourceTitle: item.title,
@@ -115,6 +124,7 @@ export const formatRequirementFormData = (requirement: InspectionRequirement): I
     };
   });
   return {
+    id: requirement.id,
     requirementSummary: requirement.summary,
     topic: requirement.topic,
     complianceFinding: requirement.compliance_finding,

compliance-web/src/components/Shared/Drawer/DrawerActionBarBottom.tsx

@@ -12,10 +12,17 @@ type DrawerActionBarBottomProps = {
   onDeleteAction?: () => void;
   onDeleteTitle?: string;
   onDeleteDescription?: string;
+  dirtyCheck?: boolean;
 };
 
 const DrawerActionBarBottom: React.FC<DrawerActionBarBottomProps> = React.memo(
-  ({ isShowActionBar, onDeleteAction, onDeleteTitle, onDeleteDescription }) => {
+  ({
+    isShowActionBar,
+    onDeleteAction,
+    onDeleteTitle,
+    onDeleteDescription,
+    dirtyCheck = true,
+  }) => {
     const { setClose } = useDrawer();
     const { setOpen, setClose: setModalClose } = useModal();
 
@@ -63,10 +70,17 @@ const DrawerActionBarBottom: React.FC<DrawerActionBarBottomProps> = React.memo(
             </Button>
           )}
           <Box sx={{ display: "flex", gap: "1rem" }}>
-            <Button onClick={setClose} color="secondary" disabled={!isDirty}>
+            <Button
+              onClick={setClose}
+              color="secondary"
+              disabled={dirtyCheck && !isDirty}
+            >
               Cancel
             </Button>
-            <Button type="submit" disabled={!isValid || !isDirty}>
+            <Button
+              type="submit"
+              disabled={!isValid || (dirtyCheck && !isDirty)}
+            >
               Save
             </Button>
           </Box>

compliance-web/src/hooks/useTopics.tsx

@@ -27,7 +27,12 @@ const deleteTopic = (id: number) => {
 export const useTopicsData = () => {
   return useQuery({
     queryKey: ["topics"],
-    queryFn: fetchTopics,
+    queryFn: async () => {
+      const topics = await fetchTopics();
+      return topics.sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, { sensitivity: "base" })
+      );
+    },
   });
 };
 

compliance-web/src/models/InspectionRequirement.ts

@@ -49,6 +49,7 @@ export interface InspectionRequirement {
 }
 
 export interface InspectionRequirementFormData {
+  id?: number;
   requirementSummary?: string;
   topic?: Topic;
   complianceFinding?: IRType;
@@ -62,6 +63,7 @@ export interface InspectionRequirementFormData {
 
 export interface RequirementSourceFormData {
   id?: number;
+  dbId?: number;
   requirementSource?: RequirementSource;
   sourceNumber?: string;
   sourceTitle?: string,
@@ -83,6 +85,7 @@ export interface RequirementRelatedDocumentData {
 
 export interface RequirementRelatedDocumentSectionData {
   id?: number;
+  dbId?: number;
   sourceFormId?: number;
   relatedDocumentFormId?: number;
   sectionNumber?: string;
@@ -116,6 +119,7 @@ export interface InspectionRequirementAPIData {
 }
 
 export interface InspectionRequirementSourceAPIData {
+  id?: number,
   requirement_source_id: string,
   section_number?: string,
   condition_number?: string,
@@ -126,6 +130,7 @@ export interface InspectionRequirementSourceAPIData {
 }
 
 export interface InspectionRequirementSourceDocumentAPIData {
+  id?: number,
   document_type_id: string,
   document_title: string,
   section_number: string,