PIMS-2036: Map Filter - ERP Projects (#2733)

bcgov · Oct 22, 2024 · 62411d0 · 62411d0
1 parent 6c9077c
commit 62411d0
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 0 deletions.
diff --git a/express-api/src/controllers/properties/propertiesSchema.ts b/express-api/src/controllers/properties/propertiesSchema.ts
@@ -30,6 +30,7 @@ export const MapFilterSchema = z.object({
   AdministrativeAreaIds: arrayFromString(numberSchema),
   ClassificationIds: arrayFromString(numberSchema),
   PropertyTypeIds: arrayFromString(numberSchema),
+  ProjectStatusId: z.coerce.number().optional(),
   Name: z.string().optional(),
   RegionalDistrictIds: arrayFromString(numberSchema),
   UserAgencies: z.array(z.number().int()).optional(),

diff --git a/express-api/src/services/properties/propertiesServices.ts b/express-api/src/services/properties/propertiesServices.ts
@@ -212,6 +212,7 @@ const getPropertiesForMap = async (filter?: MapFilter) => {
       : undefined,
     PID: filter.PID,
     PIN: filter.PIN,
+    ProjectStatusId: filter.ProjectStatusId,
     Address1: filter.Address ? ILike(`%${filter.Address}%`) : undefined,
     Name: filter.Name ? ILike(`%${filter.Name}%`) : undefined,
     PropertyTypeId: filter.PropertyTypeIds ? In(filter.PropertyTypeIds) : undefined,

diff --git a/react-app/src/components/form/ToggleSwitch.tsx b/react-app/src/components/form/ToggleSwitch.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { SxProps, Typography, Box, useTheme, Switch } from '@mui/material';
+import { Controller, useFormContext } from 'react-hook-form';
+
+interface ToggleSwitchProps {
+  name: string;
+  label: string;
+  sx?: SxProps;
+  required?: boolean;
+}
+
+const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const { control } = useFormContext();
+  const theme = useTheme();
+  const { name, label, required } = props;
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={{ validate: (value) => !required || value || 'Required field.' }}
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
+        <>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <Switch
+              id={`single-checkbox-${name}`}
+              onChange={(_, data) => onChange(data)}
+              onBlur={onBlur}
+              checked={!!value}
+              required={required}
+            />
+            <Typography>
+              {label} {required ? <sup>{'*'}</sup> : <></>}
+            </Typography>
+          </Box>
+          {!!error && !!error.message ? (
+            <Box>
+              <Typography ml={'3.2em'} fontSize={'smaller'} color={theme.palette.error.main}>
+                {error.message}
+              </Typography>
+            </Box>
+          ) : (
+            <></>
+          )}
+        </>
+      )}
+    />
+  );
+};
+
+export default ToggleSwitch;
diff --git a/react-app/src/components/map/controls/FilterControl.tsx b/react-app/src/components/map/controls/FilterControl.tsx
@@ -10,6 +10,8 @@ import usePimsApi from '@/hooks/usePimsApi';
 import { Box, Typography, Grid, Button } from '@mui/material';
 import React, { Dispatch, SetStateAction, useContext } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { ProjectStatus } from '@/constants/projectStatuses';
+import ToggleSwitch from '@/components/form/ToggleSwitch';
 
 interface FilterControlProps {
   setFilter: Dispatch<SetStateAction<MapFilter>>;
@@ -51,6 +53,7 @@ const FilterControl = (props: FilterControlProps) => {
       PropertyTypes: [],
       RegionalDistricts: [],
       Name: '',
+      InERP: false,
     },
   });
 
@@ -131,6 +134,7 @@ const FilterControl = (props: FilterControlProps) => {
               })) ?? []
             }
           />
+          <ToggleSwitch name={'InERP'} label="In ERP" />
           <Grid item xs={12} justifyContent={'space-between'} display={'inline-flex'} gap={1}>
             <Button
               variant="outlined"
@@ -167,6 +171,7 @@ const FilterControl = (props: FilterControlProps) => {
                     (option) => option.value,
                   ),
                   RegionalDistrictIds: formValues.RegionalDistricts.map((option) => option.value),
+                  ProjectStatusId: formValues.InERP ? ProjectStatus.APPROVED_FOR_ERP : undefined,
                 };
                 setFilter({
                   Polygon: filter.Polygon,

diff --git a/react-app/src/hooks/api/usePropertiesApi.ts b/react-app/src/hooks/api/usePropertiesApi.ts
@@ -46,6 +46,7 @@ export interface MapFilter {
   RegionalDistrictIds?: number[];
   Name?: string;
   Polygon?: string;
+  ProjectStatusId?: number;
 }
 
 export interface PropertyUnion {