Skip to content

Commit dc2a704

Browse files
tolkamps1tolkamps1
authored
[Comp-706] Change drawer to layouts with useMediaQuery (#757)
1 parent 24b47c5 commit dc2a704

File tree

16 files changed

+89
-115
lines changed

16 files changed

+89
-115
lines changed

‎compliance-web/src/components/App/Complaints/ComplaintDrawer.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { yupResolver } from "@hookform/resolvers/yup";
2-
import { Box } from "@mui/material";
2+
import { Box, useMediaQuery } from "@mui/material";
33
import { FormProvider, useForm } from "react-hook-form";
44
import ComplaintFormLeft from "./ComplaintFormLeft";
55
import DrawerTitleBar from "@/components/Shared/Drawer/DrawerTitleBar";
@@ -66,6 +66,7 @@ const ComplaintDrawer: React.FC<ComplaintDrawerProps> = ({
6666
caseFile,
6767
}) => {
6868
const { appHeaderHeight } = useMenuStore();
69+
const isMdToLg = useMediaQuery(MQ.mdToLg);
6970

7071
const { data: complaintSourceList } = useComplaintSourcesData();
7172
const { data: requirementSourceList } = useRequirementSourcesData();
@@ -186,11 +187,8 @@ const ComplaintDrawer: React.FC<ComplaintDrawerProps> = ({
186187
height={`calc(100vh - ${appHeaderHeight + 129}px)`} // 64px (DrawerTitleBar height) + 65px (DrawerActionBar height)
187188
sx={{
188189
display: "flex",
189-
flexDirection: "row",
190-
[MQ.mdToLg]: {
191-
flexDirection: "column",
192-
overflow: "auto",
193-
}
190+
flexDirection: isMdToLg ? "column" : "row",
191+
overflow: isMdToLg ? "auto" : "unset"
194192
}}
195193
>
196194
<ComplaintFormLeft
@@ -202,14 +200,10 @@ const ComplaintDrawer: React.FC<ComplaintDrawerProps> = ({
202200
/>
203201
<Box
204202
sx={{
205-
width: "399px",
203+
width: isMdToLg ? "auto" : "399px",
206204
boxSizing: "border-box",
207-
overflow: "auto",
208-
[MQ.mdToLg]: {
209-
width: "auto",
210-
overflow: "unset",
211-
ml: 2
212-
}
205+
overflow: isMdToLg? "unset" : "auto",
206+
margin: isMdToLg ? 2 : "unset"
213207
}}
214208
>
215209
<ComplaintSourceForm

‎compliance-web/src/components/App/Complaints/ComplaintFormLeft.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC } from "react";
2-
import { Box, Stack } from "@mui/material";
2+
import { Box, Stack, useMediaQuery } from "@mui/material";
33
import { StaffUser } from "@/models/Staff";
44
import ControlledAutoComplete from "@/components/Shared/Controlled/ControlledAutoComplete";
55
import { BCDesignTokens } from "epic.theme";
@@ -27,20 +27,18 @@ const ComplaintFormLeft: FC<ComplaintFormLeftProps> = ({
2727
complaint,
2828
caseFileId,
2929
}) => {
30+
const isMdToLg = useMediaQuery(MQ.mdToLg);
31+
3032
return (
3133
<>
3234
<Box
3335
sx={{
3436
background: BCDesignTokens.surfaceColorBackgroundLightGray,
3537
padding: "1rem 1rem 1rem 2rem",
36-
width: "718px",
37-
overflow: "auto",
38+
width: isMdToLg ? "auto" : "718px",
39+
overflow: isMdToLg ? "unset" : "auto",
40+
paddingRight: isMdToLg ? 4 : "1rem",
3841
boxSizing: "border-box",
39-
[MQ.mdToLg]: {
40-
width: "auto",
41-
overflow: "unset",
42-
pr: 4,
43-
}
4442
}}
4543
>
4644
<ControlledTextField

‎compliance-web/src/components/App/Inspections/InspectionDrawer.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Inspection, InspectionFormData } from "@/models/Inspection";
1818
import { StaffUser } from "@/models/Staff";
1919
import { useMenuStore } from "@/store/menuStore";
2020
import { yupResolver } from "@hookform/resolvers/yup";
21-
import { Box } from "@mui/material";
21+
import { Box, useMediaQuery } from "@mui/material";
2222
import dayjs from "dayjs";
2323
import { useCallback, useMemo } from "react";
2424
import { FormProvider, useForm } from "react-hook-form";
@@ -73,6 +73,7 @@ const InspectionDrawer: React.FC<InspectionDrawerProps> = ({
7373
}) => {
7474
const { appHeaderHeight } = useMenuStore();
7575
const queryClient = useQueryClient();
76+
const isMdToLg = useMediaQuery(MQ.mdToLg);
7677

7778
const { data: initiationList } = useInitiationsData();
7879
const { data: irTypeList } = useIRTypesData();
@@ -235,11 +236,8 @@ const InspectionDrawer: React.FC<InspectionDrawerProps> = ({
235236
height={`calc(100vh - ${appHeaderHeight + 129}px)`} // 64px (DrawerTitleBar height) + 65px (DrawerActionBar height)
236237
sx={{
237238
display: "flex",
238-
flexDirection: "row",
239-
[MQ.mdToLg]: {
240-
flexDirection: "column",
241-
overflow: "auto",
242-
}
239+
flexDirection: isMdToLg ? "column" : "row",
240+
overflow: isMdToLg ? "auto" : undefined,
243241
}}
244242
>
245243
<InspectionFormLeft

‎compliance-web/src/components/App/Inspections/InspectionFormLeft.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { IRType } from "@/models/IRType";
77
import { ProjectStatus } from "@/models/ProjectStatus";
88
import { StaffUser } from "@/models/Staff";
99
import { MQ } from "@/styles/responsive";
10-
import { Box, Stack } from "@mui/material";
10+
import { Box, Stack, useMediaQuery } from "@mui/material";
1111
import { BCDesignTokens } from "epic.theme";
1212
import { FC } from "react";
1313
import { useFormContext } from "react-hook-form";
@@ -25,6 +25,7 @@ const InspectionFormLeft: FC<InspectionFormLeftProps> = ({
2525
irTypeList,
2626
projectStatusList,
2727
}) => {
28+
const isMdToLg = useMediaQuery(MQ.mdToLg);
2829
const { watch } = useFormContext();
2930
const startDate = watch("startDate");
3031
const endDate = watch("endDate");
@@ -35,14 +36,10 @@ const InspectionFormLeft: FC<InspectionFormLeftProps> = ({
3536
sx={{
3637
background: BCDesignTokens.surfaceColorBackgroundLightGray,
3738
padding: "1rem 1rem 1rem 2rem",
38-
width: "718px",
39-
overflow: "auto",
39+
width: isMdToLg ? "auto" : "718px",
40+
overflow: isMdToLg ? "unset" : "auto",
41+
paddingRight: isMdToLg ? 4 : "1rem",
4042
boxSizing: "border-box",
41-
[MQ.mdToLg]: {
42-
width: "auto",
43-
overflow: "unset",
44-
pr: 4,
45-
}
4643
}}
4744
>
4845
<ControlledSwitch

‎compliance-web/src/components/App/Inspections/InspectionFormRight.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { FirstNation } from "@/models/FirstNation";
1010
import { StaffUser } from "@/models/Staff";
1111
import { useDrawer } from "@/store/drawerStore";
1212
import { useModal } from "@/store/modalStore";
13-
import { Box, Stack, Typography } from "@mui/material";
13+
import { Box, Stack, Typography, useMediaQuery } from "@mui/material";
1414
import { BCDesignTokens } from "epic.theme";
1515
import { FC, useEffect } from "react";
1616
import { useFormContext, useWatch } from "react-hook-form";
@@ -41,6 +41,7 @@ const InspectionFormRight: FC<InspectionFormRightProps> = ({
4141
const { isOpen } = useDrawer();
4242
const { setOpen, setClose } = useModal();
4343
const { control, resetField, getValues, setValue } = useFormContext();
44+
const isMdToLg = useMediaQuery(MQ.mdToLg);
4445

4546
const attendanceOptions = attendanceList.filter(
4647
(attendance) =>
@@ -139,14 +140,10 @@ const InspectionFormRight: FC<InspectionFormRightProps> = ({
139140
<>
140141
<Box
141142
sx={{
142-
width: "399px",
143+
width: isMdToLg ? "auto" : "399px",
143144
boxSizing: "border-box",
144-
overflow: "auto",
145-
[MQ.mdToLg]: {
146-
width: "auto",
147-
overflow: "unset",
148-
ml: 2
149-
}
145+
overflow: isMdToLg ? "unset" : "auto",
146+
marginLeft: isMdToLg ? 2 : "unset",
150147
}}
151148
>
152149
<Stack>

‎compliance-web/src/components/App/Inspections/Profile/InspectionRequirements.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const InspectionRequirements: React.FC<InspectionRequirementsProps> = ({
3737
inspectionData,
3838
}) => {
3939
const queryClient = useQueryClient();
40-
const { setOpen, isOpen: isDrawerOpen, setClose } = useDrawer();
40+
const { setOpen, isOpen: isDrawerOpen, setClose, setDrawerWidth } = useDrawer();
4141
const {
4242
requirementPhotos,
4343
requirementFigures,
@@ -286,6 +286,12 @@ const InspectionRequirements: React.FC<InspectionRequirementsProps> = ({
286286
}
287287
}, [isDrawerOpen]);
288288

289+
useEffect(() => {
290+
if (isDrawerOpen && setDrawerWidth) {
291+
setDrawerWidth(drawerWidth);
292+
}
293+
}, [drawerWidth, isDrawerOpen, setDrawerWidth]);
294+
289295
useEffect(() => {
290296
if (
291297
!isInspectionRequirementsLoading &&

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { RequirementSourceFormData } from "@/models/InspectionRequirementSource"
1616
import { useMenuStore } from "@/store/menuStore";
1717
import { yupResolver } from "@hookform/resolvers/yup";
1818
import { Box } from "@mui/material";
19+
import useMediaQuery from "@mui/material/useMediaQuery";
1920
import { useCallback, useEffect, useMemo, useState } from "react";
2021
import { FormProvider, useForm } from "react-hook-form";
2122
import RequirementFormLeft from "./RequirementFormLeft";
@@ -88,6 +89,8 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
8889
const { data: inspectionRequirementTypesList } =
8990
useInspectionRequirementTypesData();
9091

92+
const isMdToLg = useMediaQuery(MQ.mdToLg);
93+
9194
const isRequirementEditable = useMemo(
9295
() =>
9396
inspectionData?.inspection_status === InspectionStatusEnum.OPEN &&
@@ -371,11 +374,8 @@ const RequirementDrawer: React.FC<RequirementDrawerProps> = ({
371374
height={`calc(100vh - ${appHeaderHeight + 129}px)`} // 64px (DrawerTitleBar height) + 65px (DrawerActionBar height)
372375
sx={{
373376
display: "flex",
374-
flexDirection: "row",
375-
[MQ.mdToLg]: {
376-
flexDirection: "column-reverse",
377-
overflow: "auto",
378-
}
377+
flexDirection: isMdToLg ? "column-reverse" : "row",
378+
overflow: isMdToLg ? "auto" : undefined,
379379
}}
380380
>
381381
<RequirementFormLeft

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, useEffect, useState, useRef, useCallback } from "react";
2-
import { Box, Grid, IconButton } from "@mui/material";
2+
import { Box, Grid, IconButton, useMediaQuery } from "@mui/material";
33
import { BCDesignTokens } from "epic.theme";
44
import { EnforcementAction } from "@/models/EnforcementAction";
55
import { useFormContext, useWatch } from "react-hook-form";
@@ -97,6 +97,8 @@ const RequirementFormLeft: FC<RequirementFormLeftProps> = ({
9797
}
9898
);
9999

100+
const isMdToLg = useMediaQuery(MQ.mdToLg);
101+
100102
const inputFocus = useCallback((inputRef: HTMLInputElement | null) => {
101103
if (inputRef) {
102104
inputRef.focus();
@@ -368,14 +370,10 @@ Changing it will delete the existing document so you can create a new one`;
368370
sx={{
369371
background: BCDesignTokens.surfaceColorBackgroundLightGray,
370372
padding: "0.5rem 1rem 1rem 1.5rem",
371-
width: "730px",
372-
overflow: "auto",
373+
width: isMdToLg ? "auto" : "730px",
374+
overflow: isMdToLg ? "unset" : "auto",
373375
boxSizing: "border-box",
374-
[MQ.mdToLg]: {
375-
width: "auto",
376-
overflow: "unset",
377-
pr: 4,
378-
}
376+
paddingRight: isMdToLg ? 4 : "1.5rem",
379377
}}
380378
>
381379
{isReadOnly ? (
@@ -391,7 +389,7 @@ Changing it will delete the existing document so you can create a new one`;
391389
label="Inspection Details"
392390
name="findings"
393391
placeholder="Enter Inspection Details..."
394-
height={`calc(100vh - ${appHeaderHeight + 363}px)`}
392+
height={ isMdToLg ? "auto" : `calc(100vh - ${appHeaderHeight + 363}px)`}
395393
isAdvanced
396394
mentionsList={mentionDataList}
397395
key={`lexical-editor-${mentionVersion}`}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
} from "@/models/InspectionRequirementSource";
1818
import { useModal } from "@/store/modalStore";
1919
import { AddRounded } from "@mui/icons-material";
20-
import { Box, Button } from "@mui/material";
20+
import { Box, Button, useMediaQuery } from "@mui/material";
2121
import { FC, useEffect, useMemo, useState } from "react";
2222
import { useRequirementStore } from "./requirementStore";
2323
import { CaseFile } from "@/models/CaseFile";
@@ -47,6 +47,9 @@ const RequirementFormRight: FC<RequirementFormRightProps> = ({
4747
}) => {
4848
const { setOpen, setClose } = useModal();
4949

50+
const isMdToLg = useMediaQuery(MQ.mdToLg);
51+
52+
5053
// Helper function to synchronize requirementSourceTitle across all items
5154
const syncRequirementSourceTitle = (allItems: RequirementSourceFormData[], requirementSourceId?: string) => {
5255
// Filter out the items that have the same requirementSourceId
@@ -407,14 +410,10 @@ const syncRequirementSourceTitle = (allItems: RequirementSourceFormData[], requi
407410
<Box
408411
sx={{
409412
padding: "1.5rem 1rem",
410-
width: "510px",
411-
overflow: "auto",
413+
width: isMdToLg ? "auto" : "510px",
414+
overflow: isMdToLg ? "unset" : "auto",
412415
boxSizing: "border-box",
413-
[MQ.mdToLg]: {
414-
width: "auto",
415-
overflow: "unset",
416-
ml: 2
417-
}
416+
marginLeft: isMdToLg ? 0 : 2,
418417
}}
419418
>
420419
{!isRegulatoryConsideration && isRequirementEditable && (

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

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Collapse, DialogContent, Typography } from "@mui/material";
1+
import { Box, Collapse, DialogContent, Typography, useMediaQuery } from "@mui/material";
22
import { useEffect, useMemo, useState } from "react";
33
import * as yup from "yup";
44
import { FormProvider, useForm } from "react-hook-form";
@@ -111,6 +111,8 @@ const RequirementRelatedDocumentModal: React.FC<
111111
relatedDocumentImages ?? []
112112
);
113113

114+
const isMdToLg = useMediaQuery(MQ.mdToLg);
115+
114116
const isScheduleB =
115117
requirementSourceData.requirementSource?.id ===
116118
RequirementSourceEnum.SCHEDULE_B;
@@ -239,12 +241,9 @@ const RequirementRelatedDocumentModal: React.FC<
239241
flex: 1,
240242
minHeight: 0,
241243
display: "flex",
242-
flexDirection: "row",
243-
[MQ.mdToLg]: {
244-
flexDirection: "column",
245-
overflow: "auto",
246-
gap: 0,
247-
}
244+
flexDirection: isMdToLg? "column" : "row",
245+
overflow: isMdToLg ? "auto" : "unset",
246+
gap: isMdToLg ? 0 : "unset",
248247
}}>
249248
<Box flex={1}>
250249
<Box
@@ -330,16 +329,12 @@ const RequirementRelatedDocumentModal: React.FC<
330329
/>
331330
</Box>
332331
<Box
333-
width={"680px"}
332+
width={isMdToLg ? "auto" : "680px"}
334333
display="flex"
335334
flexDirection="column"
336335
height="100%"
337336
sx={{
338-
minHeight: 0,
339-
[MQ.mdToLg]: {
340-
width: "auto",
341-
minHeight: "unset",
342-
}
337+
minHeight: isMdToLg ? "unset" : 0,
343338
}}
344339
>
345340
<Box

0 commit comments

Comments
 (0)