CR-96:Changes to '+ Add Document' button

Author: don-aot

condition-web/src/components/Documents/index.tsx

@@ -1,13 +1,17 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "@tanstack/react-router";
 import { BCDesignTokens } from "epic.theme";
-import { AllDocumentModel, DocumentStatus } from "@/models/Document";
+import { AllDocumentModel, DocumentStatus, DocumentTypeModel } from "@/models/Document";
 import { Box, styled, Stack, FormControlLabel, Typography, Switch, Grid } from "@mui/material";
 import { ContentBoxSkeleton } from "../Shared/ContentBox/ContentBoxSkeleton";
 import { ContentBox } from "../Shared/ContentBox";
 import DocumentTable from "./DocumentTable";
 import DocumentStatusChip from "../Projects/DocumentStatusChip";
 import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
+import AddIcon from '@mui/icons-material/Add';
+import LoadingButton from "../Shared/Buttons/LoadingButton";
+import { CreateDocumentModal } from "../Projects/CreateDocumentModal";
+import { ProjectModel } from "@/models/Project";
 
 export const CardInnerBox = styled(Box)({
   display: "flex",
@@ -24,13 +28,26 @@ type DocumentsParam = {
   projectId: string;
   categoryId: number;
   documentLabel: string;
+  project?: ProjectModel;
+  documentType?: DocumentTypeModel[];
 };
 
-export const Documents = ({ projectName, projectId, categoryId, documentLabel, documents }: DocumentsParam) => {
+export const Documents = ({ projectName, projectId, categoryId, documentLabel, documents, project, documentType }: DocumentsParam) => {
   const navigate = useNavigate();
   const [isToggled, setIsToggled] = useState(false);
   const [isToggleEnabled, setIsToggleEnabled] = useState<boolean | null>(false);
   const [isAllApproved, setIsAllApproved] = useState<boolean | null>(false);
+  const [openModal, setOpenModal] = useState(false);
+  const [isOpeningModal, setIsOpeningModal] = useState(false);
+
+  const handleOpenAddDocument = () => {
+    setIsOpeningModal(true);
+    setOpenModal(true);
+  };
+
+  const handleCloseAddDocument = () => {
+    setOpenModal(false);
+  };
 
   const handleToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
     const checked = event.target.checked;
@@ -108,13 +125,43 @@ export const Documents = ({ projectName, projectId, categoryId, documentLabel, d
                   </Box>
                 </Box>
               </Grid>
-              <Grid item xs={6} textAlign="right">
+              <Grid item xs={6} textAlign="right" sx={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 2 }}>
+                {project && documentType && (
+                  <LoadingButton
+                    variant="contained"
+                    onClick={handleOpenAddDocument}
+                    loading={isOpeningModal}
+                    sx={{
+                      display: "flex",
+                      padding: "8px 22px 7px 15px",
+                      alignItems: "center",
+                      gap: "14.178px",
+                      height: "70%",
+                      borderRadius: "4px",
+                      border: "2px solid #353433",
+                      backgroundColor: "#013366",
+                      color: "#FFF",
+                      textAlign: "center",
+                      fontFamily: '"BC Sans"',
+                      fontSize: "16px",
+                      fontStyle: "normal",
+                      fontWeight: 400,
+                      lineHeight: "27.008px",
+                      "&:hover": {
+                        backgroundColor: "#002a52",
+                        border: "2px solid #353433",
+                      },
+                    }}
+                  >
+                    <AddIcon fontSize="small" /> Add Document
+                  </LoadingButton>
+                )}
                 <FormControlLabel
                   control={
                     <Switch
-                      disabled={!isToggleEnabled} // Disable the switch based on the isToggleEnabled state
+                      disabled={!isToggleEnabled}
                       checked={isToggled}
-                      onChange={handleToggle} // Add onChange handler to toggle and navigate
+                      onChange={handleToggle}
                     />
                   }
                   label="View Consolidated Conditions"
@@ -135,6 +182,17 @@ export const Documents = ({ projectName, projectId, categoryId, documentLabel, d
           </Typography>
         </Box>
       </ContentBox>
+      {project && documentType && (
+        <CreateDocumentModal
+          open={openModal}
+          onClose={handleCloseAddDocument}
+          documentType={documentType}
+          projectArray={[project]}
+          preselectedProject={project}
+          restrictToCategoryId={categoryId}
+          onTransitionEnd={() => setIsOpeningModal(false)}
+        />
+      )}
     </Stack>
   );
 };

condition-web/src/components/Projects/CreateDocumentModal.tsx

@@ -38,6 +38,8 @@ type CreateDocumentModalProps = {
   documentType: DocumentTypeModel[];
   projectArray: ProjectModel[];
   onTransitionEnd?: () => void;
+  preselectedProject?: ProjectModel;
+  restrictToCategoryId?: number;
 };
 
 export const CreateDocumentModal = ({
@@ -46,11 +48,13 @@ export const CreateDocumentModal = ({
   documentType,
   projectArray,
   onTransitionEnd,
+  preselectedProject,
+  restrictToCategoryId,
 }: CreateDocumentModalProps) => {
     const queryClient = useQueryClient();
     const navigate = useNavigate();
     const [formState, setFormState] = useState({
-        selectedProject: null as ProjectModel | null,
+        selectedProject: preselectedProject || null as ProjectModel | null,
         selectedDocumentType: null as number | null,
         selectedDocumentId: null as string | null,
         selectedDocumentLabel: null as string | null,
@@ -88,24 +92,28 @@ export const CreateDocumentModal = ({
     };
 
     const filteredDocumentTypes = (documentType || []).filter((type) => {
+        if (restrictToCategoryId && type.document_category_id !== restrictToCategoryId) {
+            return false;
+        }
+
         if (!formState.selectedProject || !formState.selectedProject.documents) return true;
-    
+
         const hasCertificate = formState.selectedProject.documents.some((document) =>
           document.document_types.includes(DocumentType.Certificate)
         );
-    
+
         const hasExemptionOrder = formState.selectedProject.documents.some((document) =>
           document.document_types.includes(DocumentType.ExemptionOrder)
         );
-    
+
         if (type.document_type === DocumentType.Certificate) {
           return !hasExemptionOrder; // Exclude Certificate if ExemptionOrder is present
         }
-    
+
         if (type.document_type === DocumentType.ExemptionOrder) {
           return !hasCertificate; // Exclude ExemptionOrder if Certificate is present
         }
-    
+
         return true;
     });
 
@@ -211,7 +219,7 @@ export const CreateDocumentModal = ({
 
     const resetForm = () => {
         setFormState({
-            selectedProject: null,
+            selectedProject: preselectedProject || null,
             selectedDocumentType: null,
             selectedDocumentId: null,
             selectedDocumentLabel: null,
@@ -269,6 +277,11 @@ export const CreateDocumentModal = ({
                         <Typography variant="body1" marginBottom={"2px"}>
                             Which project does this document belong to?
                         </Typography>
+                        {preselectedProject ? (
+                            <Typography variant="body1" fontWeight="bold" marginBottom={"8px"}>
+                                {preselectedProject.project_name}
+                            </Typography>
+                        ) : (
                         <Autocomplete
                             id="project-selector"
                             data-testid="project-selector"
@@ -295,6 +308,7 @@ export const CreateDocumentModal = ({
                                 setErrors((prev) => ({ ...prev, selectedProject: false }));
                             }}
                         />
+                        )}
                         {/* Document Type Selector */}
                         <Typography variant="body1">
                             What type of document are you adding?

condition-web/src/routes/_authenticated/_dashboard/documents/project/$projectId/document-category/$categoryId/index.tsx

@@ -3,7 +3,8 @@ import { Else, If, Then } from "react-if";
 import { PageGrid } from "@/components/Shared/PageGrid";
 import { Grid } from "@mui/material";
 import { createFileRoute, Navigate, useParams } from "@tanstack/react-router";
-import { useGetDocuments } from "@/hooks/api/useDocuments";
+import { useGetDocuments, useGetDocumentType } from "@/hooks/api/useDocuments";
+import { useGetProjects } from "@/hooks/api/useProjects";
 import { Documents, DocumentsSkeleton } from "@/components/Documents";
 import { notify } from "@/components/Shared/Snackbar/snackbarStore";
 import { useBreadCrumb } from "@/components/Shared/layout/SideNav/breadCrumbStore";
@@ -32,6 +33,11 @@ function DocumentPage() {
     isError: isAmendmentsError
   } = useGetDocuments(projectId, categoryId);
 
+  const { data: projectsData } = useGetProjects();
+  const { data: documentTypeData } = useGetDocumentType();
+
+  const project = projectsData?.find((p) => p.project_id === projectId);
+
   useEffect(() => {
     if (isAmendmentsError) {
       notify.error("Failed to load documents");
@@ -70,11 +76,13 @@ function DocumentPage() {
           </Then>
           <Else>
             <Documents
-              projectName = {allDocuments?.project_name || ""}
-              projectId = {projectId}
-              categoryId = {categoryId}
-              documentLabel = {allDocuments?.document_category || ""}
+              projectName={allDocuments?.project_name || ""}
+              projectId={projectId}
+              categoryId={categoryId}
+              documentLabel={allDocuments?.document_category || ""}
               documents={allDocuments?.documents}
+              project={project}
+              documentType={documentTypeData}
             />
           </Else>
         </If>