Merge pull request #210 from nitheesh-aot/comp-307

nitheesh-aot · web-flow · commit b0ca2e02e905 · 2025-01-28T12:33:27.000-07:00
COMP-307: Date selection on Creating Inspection
diff --git a/compliance-api/src/compliance_api/schemas/inspection.py b/compliance-api/src/compliance_api/schemas/inspection.py
@@ -12,7 +12,7 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 """Inspection Schema Schema."""
-from marshmallow import EXCLUDE, ValidationError, fields, post_dump, post_load, validates_schema
+from marshmallow import EXCLUDE, ValidationError, fields, post_dump, post_load, pre_load, validates_schema
 from marshmallow_enum import EnumField
 
 from compliance_api.models.inspection import (
@@ -105,7 +105,7 @@ class InspectionUpdateSchema(BaseSchema):
     end_date = fields.DateTime(
         format=INPUT_DATE_TIME_FORMAT,
         metadata={"description": "The inspection end date in ISO 8601 format."},
-        required=True,
+        allow_none=True,
         error_messages={
             "invalid": f"Not a valid datetime. Expected format: {INPUT_DATE_TIME_FORMAT}."
         },
@@ -155,6 +155,15 @@ class InspectionUpdateSchema(BaseSchema):
         required=False,
     )
 
+    @pre_load
+    def end_date_populate(
+        self, data, **kwargs
+    ):  # pylint: disable=no-self-use, unused-argument
+        """Populate the end_date if it is not provided."""
+        if data.get("end_date") is None:
+            data["end_date"] = data["start_date"]
+        return data
+
     @validates_schema
     def validate_attendance_other(
         self, data, **kwargs
diff --git a/compliance-web/cypress/components/_components/_App/_CaseFiles/CaseFileForm.cy.tsx b/compliance-web/cypress/components/_components/_App/_CaseFiles/CaseFileForm.cy.tsx
@@ -19,9 +19,9 @@ const mockInitiations: Initiation[] = [
 ];
 
 const mockStaffUsers = [
-  { id: 1, name: "John Doe" },
-  { id: 2, name: "Jane Smith" },
-  { id: 3, name: "Alice Johnson" },
+  { id: 1, name: "John Doe", is_active: true },
+  { id: 2, name: "Jane Smith", is_active: true },
+  { id: 3, name: "Alice Johnson", is_active: true },
 ];
 
 const setup = (args: { isSuperUser: boolean }) => {
diff --git a/compliance-web/cypress/components/_components/_App/_CaseFiles/CaseFileGeneralInformation.cy.tsx b/compliance-web/cypress/components/_components/_App/_CaseFiles/CaseFileGeneralInformation.cy.tsx
@@ -13,10 +13,10 @@ describe("CaseFileGeneralInformation", () => {
     project: { id: 1, name: "Test Project" },
     date_created: "2023-04-15T12:00:00Z",
     initiation: { id: "1", name: "Test Initiation" },
-    primary_officer: { id: 1, name: "John Doe" },
+    primary_officer: { id: 1, name: "John Doe", is_active: true },
     officers: [
-      { id: 2, name: "Jane Smith" },
-      { id: 3, name: "Bob Johnson" },
+      { id: 2, name: "Jane Smith", is_active: true },
+      { id: 3, name: "Bob Johnson", is_active: true },
     ],
     project_id: 0,
     primary_officer_id: 0,
diff --git a/compliance-web/cypress/components/_components/_App/_Complaints/ComplaintFormLeft.cy.tsx b/compliance-web/cypress/components/_components/_App/_Complaints/ComplaintFormLeft.cy.tsx
@@ -7,8 +7,8 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; // Adjust to your date adapter
 
 const mockStaffUsers = [
-  { id: 1, name: "John Doe" },
-  { id: 2, name: "Jane Smith" },
+  { id: 1, name: "John Doe", is_active: true },
+  { id: 2, name: "Jane Smith", is_active: true },
 ];
 
 describe("ComplaintFormLeft Component", () => {
diff --git a/compliance-web/cypress/components/_components/_App/_Inspections/InspectionDrawer.cy.tsx b/compliance-web/cypress/components/_components/_App/_Inspections/InspectionDrawer.cy.tsx
@@ -8,6 +8,8 @@ import { AttendanceEnum } from "@/components/App/Inspections/InspectionFormUtils
 import { CaseFile } from "@/models/CaseFile";
 import { AuthProvider } from "react-oidc-context";
 import { OidcConfig } from "@/utils/config";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
 describe("InspectionDrawer Component", () => {
   let mockOnSubmit: sinon.SinonStub;
@@ -18,10 +20,10 @@ describe("InspectionDrawer Component", () => {
     project: { id: 1, name: "Test Project" },
     date_created: "2023-04-15T12:00:00Z",
     initiation: { id: "1", name: "Test Initiation" },
-    primary_officer: { id: 1, name: "John Doe", auth_user_guid: "123" },
+    primary_officer: { id: 1, name: "John Doe", auth_user_guid: "123", is_active: true },
     officers: [
-      { id: 2, name: "Jane Smith", auth_user_guid: "124" },
-      { id: 3, name: "Bob Johnson", auth_user_guid: "125" },
+      { id: 2, name: "Jane Smith", auth_user_guid: "124", is_active: true },
+      { id: 3, name: "Bob Johnson", auth_user_guid: "125", is_active: true },
     ],
     project_id: 0,
     primary_officer_id: 0,
@@ -45,7 +47,7 @@ describe("InspectionDrawer Component", () => {
     type: "Type",
     sub_type: "Sub Type",
     location_description: "Location Description",
-    primary_officer: { id: 1, name: "Officer Name" },
+    primary_officer: { id: 1, name: "Officer Name", is_active: true },
     ir_status: { id: "1", name: "Status" },
     project_status: { id: "1", name: "Project Status" },
     types: [
@@ -79,7 +81,7 @@ describe("InspectionDrawer Component", () => {
       initiation: { id: "1", name: "Initiation" },
       is_active: true,
       project: { id: 1, name: "Project" },
-      primary_officer: { id: 1, name: "Officer Name" },
+      primary_officer: { id: 1, name: "Officer Name", is_active: true },
     },
   };
 
@@ -97,7 +99,9 @@ describe("InspectionDrawer Component", () => {
     return (
       <QueryClientProvider client={queryClient}>
         <AuthProvider {...OidcConfig}>
-          {children}
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            {children}
+          </LocalizationProvider>
         </AuthProvider>
       </QueryClientProvider>
     );
diff --git a/compliance-web/cypress/components/_components/_App/_Inspections/InspectionFormLeft.cy.tsx b/compliance-web/cypress/components/_components/_App/_Inspections/InspectionFormLeft.cy.tsx
@@ -23,8 +23,8 @@ const mockInitiations = [
 ];
 
 const mockStaffUsers = [
-  { id: 1, name: "John Doe" },
-  { id: 2, name: "Jane Smith" },
+  { id: 1, name: "John Doe", is_active: true },
+  { id: 2, name: "Jane Smith", is_active: true },
 ];
 
 const mockIRTypes = [
@@ -85,7 +85,8 @@ describe("InspectionFormLeft Component", () => {
     cy.contains("UTM (optional)").should("exist");
     cy.contains("Primary").should("exist");
     cy.contains("Type").should("exist");
-    cy.contains("Dates").should("exist");
+    cy.contains("Start Date").should("exist");
+    cy.contains("End Date").should("exist");
     cy.contains("Initiation").should("exist");
   });
 
@@ -126,11 +127,17 @@ describe("InspectionFormLeft Component", () => {
   });
 
   it("allows selecting a date range", () => {
-    cy.get('input[name="dateRange"]').click();
-    cy.get(".MuiPickersDay-root").contains("10").click(); // Select the start date
-    cy.get(".MuiPickersDay-root").contains("20").click(); // Select the end date
-    cy.get('input[name="dateRange"]').should("contain.value", "10");
-    cy.get('input[name="dateRange"]').should("contain.value", "20");
+
+    cy.get('.cy-start-date').should("exist");
+    cy.get('.cy-end-date').should("exist");
+    
+    cy.get('.cy-start-date button[aria-label="Choose date"]').click();
+    cy.get(".MuiPickersDay-root", { timeout: 10000 }).contains("10").click(); // Select the start date
+    cy.get('input[name="startDate"]').should("contain.value", "10");
+    
+    cy.get('.cy-end-date button[aria-label="Choose date"]').click();
+    cy.get(".MuiPickersDay-root", { timeout: 10000 }).contains("20").click(); // Select the end date
+    cy.get('input[name="endDate"]').should("contain.value", "20");
   });
 
   it("allows selecting initiation", () => {
diff --git a/compliance-web/cypress/components/_components/_App/_Inspections/InspectionFormRight.cy.tsx b/compliance-web/cypress/components/_components/_App/_Inspections/InspectionFormRight.cy.tsx
@@ -22,8 +22,8 @@ const mockAgenciesList = [
 ];
 
 const mockStaffUsers = [
-  { id: 1, name: "John Doe" },
-  { id: 2, name: "Jane Smith" },
+  { id: 1, name: "John Doe", is_active: true },
+  { id: 2, name: "Jane Smith", is_active: true },
 ];
 
 const mockFirstNationsList = [
diff --git a/compliance-web/cypress/components/_components/_App/_Inspections/InspectionFormUtils.cy.ts b/compliance-web/cypress/components/_components/_App/_Inspections/InspectionFormUtils.cy.ts
@@ -66,10 +66,8 @@ describe("InspectionFormUtils", () => {
         primaryOfficer: { id: 1, full_name: "John Doe" },
         officers: [{ id: 2, full_name: "Jane Smith" }],
         irTypes: [{ id: 1, name: "IR Type Alpha" }],
-        dateRange: {
-          startDate: dayjs("2023-01-01"),
-          endDate: dayjs("2023-01-02"),
-        },
+        startDate: dayjs("2023-01-01"),
+        endDate: dayjs("2023-01-02"),
         initiation: { id: 1, name: "Initiation Alpha" },
         irStatus: { id: 1, name: "Status 1" },
         projectStatus: { id: 1, name: "Status 1" },
diff --git a/compliance-web/src/components/App/Inspections/InspectionDrawer.tsx b/compliance-web/src/components/App/Inspections/InspectionDrawer.tsx
@@ -40,9 +40,10 @@ type InspectionDrawerProps = {
 
 const initFormData: InspectionFormData = {
   project: undefined,
-  dateRange: undefined,
   primaryOfficer: undefined,
   irTypes: [],
+  startDate: undefined,
+  endDate: undefined,
   initiation: undefined,
   irStatus: undefined,
   projectStatus: undefined,
@@ -81,10 +82,8 @@ const InspectionDrawer: React.FC<InspectionDrawerProps> = ({
         irStatus: inspection.ir_status,
         projectStatus: inspection.project_status,
         irTypes: inspection.types,
-        dateRange: {
-          startDate: dayjs(inspection.start_date),
-          endDate: dayjs(inspection.end_date),
-        },
+        startDate: dayjs(inspection.start_date),
+        endDate: dayjs(inspection.end_date),
         inAttendance: inspection.inspectionAttendances?.map(
           (item) => item.attendance_option
         ),
diff --git a/compliance-web/src/components/App/Inspections/InspectionFormLeft.tsx b/compliance-web/src/components/App/Inspections/InspectionFormLeft.tsx
@@ -6,9 +6,10 @@ import { BCDesignTokens } from "epic.theme";
 import { Initiation } from "@/models/Initiation";
 import ControlledTextField from "@/components/Shared/Controlled/ControlledTextField";
 import { IRType } from "@/models/IRType";
-import ControlledDateRangePicker from "@/components/Shared/Controlled/ControlledDateRangePicker";
 import { IRStatus } from "@/models/IRStatus";
 import { ProjectStatus } from "@/models/ProjectStatus";
+import ControlledDateField from "@/components/Shared/Controlled/ControlledDateField";
+import { useFormContext } from "react-hook-form";
 
 type InspectionFormLeftProps = {
   initiationList: Initiation[];
@@ -25,6 +26,10 @@ const InspectionFormLeft: FC<InspectionFormLeftProps> = ({
   irStatusList,
   projectStatusList,
 }) => {
+  const { watch } = useFormContext();
+  const startDate = watch("startDate");
+  const endDate = watch("endDate");
+
   return (
     <>
       <Box
@@ -91,7 +96,20 @@ const InspectionFormLeft: FC<InspectionFormLeftProps> = ({
             multiple
             fullWidth
           />
-          <ControlledDateRangePicker name="dateRange" label="Dates" fullWidth />
+          <Stack direction={"row"} gap={2} sx={{ width: "100%" }}>
+            <ControlledDateField
+              className="cy-start-date"
+              name="startDate"
+              label="Start Date"
+              maxDate={endDate}
+            />
+            <ControlledDateField
+              className="cy-end-date"
+              name="endDate"
+              label="End Date (optional)"
+              minDate={startDate}
+            />
+          </Stack>
         </Stack>
         <Stack direction={"row"} gap={2}>
           <ControlledAutoComplete
diff --git a/compliance-web/src/components/App/Inspections/InspectionFormUtils.ts b/compliance-web/src/components/App/Inspections/InspectionFormUtils.ts
@@ -1,6 +1,5 @@
 import { Agency } from "@/models/Agency";
 import { Attendance } from "@/models/Attendance";
-import { DateRange } from "@/models/DateRange";
 import { FirstNation } from "@/models/FirstNation";
 import { Initiation } from "@/models/Initiation";
 import { InspectionAPIData } from "@/models/Inspection";
@@ -33,25 +32,22 @@ export const InspectionFormSchema = yup.object().shape({
     .of(yup.object<IRType>())
     .min(1, "At least one Type is required")
     .required("Type is required"),
-  dateRange: yup
-    .object<DateRange>()
-    .shape({
-      startDate: yup
-        .mixed<Dayjs>()
-        .required("Start date is required")
-        .typeError("Invalid date"),
-      endDate: yup
-        .mixed<Dayjs>()
-        .required("End date is required")
-        .typeError("Invalid date")
-      // .min(yup.ref("startDate"), "End date cannot be before start date"),
-    })
+  startDate: yup
+    .mixed<Dayjs>()
+    .required("Start date is required")
+    .typeError("Invalid date"),
+  endDate: yup
+    .mixed<Dayjs>()
+    .nullable()
+    .typeError("Invalid date")
     .test(
-      "required",
-      "Date is required",
-      (value) => !!value?.startDate || !!value?.endDate
-    )
-    .nullable(),
+      "is-greater",
+      "End date must be greater than start date",
+      function (value) {
+        const { startDate } = this.parent;
+        return !value || !startDate || value.isAfter(startDate);
+      }
+    ),
   initiation: yup
     .object<Initiation>()
     .nullable()
@@ -141,12 +137,10 @@ export const formatInspectionData = (
     inspection_type_ids:
       (formData.irTypes as IRType[])?.map((ir) => ir.id) ?? [],
     initiation_id: (formData.initiation as Initiation).id,
-    start_date: dateUtils.dateToISO(
-      formData.dateRange?.startDate ?? new Date()
-    ),
-    end_date: dateUtils.dateToISO(
-      formData.dateRange?.endDate ?? new Date()
-    ),
+    start_date: dateUtils.dateToISO(formData.startDate ?? new Date()),
+    end_date: formData.endDate
+      ? dateUtils.dateToISO(formData.endDate)
+      : undefined,
     primary_officer_id: (formData.primaryOfficer as StaffUser)?.id,
     location_description: formData.locationDescription ?? "",
     utm: formData.utm ?? "",
diff --git a/compliance-web/src/components/Shared/Controlled/ControlledDateField.tsx b/compliance-web/src/components/Shared/Controlled/ControlledDateField.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { DatePicker, DatePickerProps } from "@mui/x-date-pickers";
 import { Dayjs } from "dayjs";
-import { TextFieldProps } from '@mui/material';
+import { TextFieldProps } from "@mui/material";
 import { DATE_FORMAT } from "@/utils/constants";
 
 type IFormDateInputProps = {
@@ -42,7 +42,21 @@ const ControlledDateField: FC<IFormDateInputProps> = ({
               placeholder: placeHolder,
               InputLabelProps: {
                 shrink: true, // for always display the placeholder
-              }
+              },
+              sx: {
+                "& .MuiOutlinedInput-root": {
+                  paddingRight: "0",
+                  "& .MuiOutlinedInput-input": {
+                    paddingRight: "0",
+                  },
+                  "& .MuiInputAdornment-positionEnd": {
+                    "& .MuiIconButton-root": {
+                      marginRight: "0",
+                    },
+                  },
+                },
+              },
+              
             } as TextFieldProps,
           }}
           {...otherProps}
diff --git a/compliance-web/src/models/Inspection.ts b/compliance-web/src/models/Inspection.ts
@@ -1,6 +1,6 @@
+import { Dayjs } from "dayjs";
 import { InspectionAttendance } from "./Attendance";
 import { CaseFile } from "./CaseFile";
-import { DateRange } from "./DateRange";
 import { Initiation } from "./Initiation";
 import { IRStatus } from "./IRStatus";
 import { IRType } from "./IRType";
@@ -45,7 +45,8 @@ export interface Inspection {
 
 export interface InspectionFormData {
   project?: Project;
-  dateRange?: DateRange;
+  startDate?: Dayjs;
+  endDate?: Dayjs;
   primaryOfficer?: StaffUser;
   initiation?: Initiation;
   irTypes?: IRType[];
@@ -62,7 +63,7 @@ export interface InspectionAPIData {
   case_file_id?: number;
   inspection_type_ids: string[];
   start_date: string;
-  end_date: string;
+  end_date?: string;
   initiation_id: string;
   ir_status_id?: string;
   project_status_id?: string;
