use and move specialfield lock component

bcgov · Dec 21, 2023 · 7b897ad · 7b897ad
1 parent 5f897e9
commit 7b897ad
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 35 deletions.
diff --git a/...onents/work/WorkForm/SpecialFieldLock.tsx → ...cialField/components/SpecialFieldLock.tsx b/...onents/work/WorkForm/SpecialFieldLock.tsx → ...cialField/components/SpecialFieldLock.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import { ETFormLabel } from "../../shared";
+import { ETFormLabel } from "../..";
 import { IconButton, Stack } from "@mui/material";
-import icons from "../../icons";
-import { IconProps } from "../../icons/type";
-import { Palette } from "../../../styles/theme";
+import icons from "../../../icons";
+import { IconProps } from "../../../icons/type";
+import { Palette } from "../../../../styles/theme";
 
 interface SpecialFieldLockProps {
   id: number;

diff --git a/epictrack-web/src/components/work/WorkForm/EPDSpecialField.tsx b/epictrack-web/src/components/work/WorkForm/EPDSpecialField.tsx
@@ -8,7 +8,7 @@ import { ETCaption3 } from "../../shared";
 import { Grid } from "@mui/material";
 import { When } from "react-if";
 import { Staff } from "../../../models/staff";
-import { SpecialFieldLock } from "./SpecialFieldLock";
+import { SpecialFieldLock } from "../../shared/specialField/components/SpecialFieldLock";
 
 interface EPDSpecialFieldProps {
   id: number;
@@ -40,7 +40,7 @@ export const EPDSpecialField = ({
           id={id}
           open={open}
           onLockClick={onLockClick}
-          label={"Work Lead"}
+          label={"Responsible EPD"}
           required
         />
         {children}

diff --git a/epictrack-web/src/components/work/WorkForm/WorkLeadSpecialField.tsx b/epictrack-web/src/components/work/WorkForm/WorkLeadSpecialField.tsx
@@ -4,13 +4,11 @@ import {
   SPECIAL_FIELDS,
   SpecialFieldEntityEnum,
 } from "../../../constants/application-constant";
-import { ETCaption3, ETFormLabel } from "../../shared";
-import { Box, Grid, IconButton } from "@mui/material";
-import icons from "../../icons";
-import { IconProps } from "../../icons/type";
-import { Palette } from "../../../styles/theme";
+import { ETCaption3 } from "../../shared";
+import { Grid } from "@mui/material";
 import { When } from "react-if";
 import { Staff } from "../../../models/staff";
+import { SpecialFieldLock } from "../../shared/specialField/components/SpecialFieldLock";
 
 interface WorkLeadSpecialFieldProps {
   id: number;
@@ -28,9 +26,6 @@ export const WorkLeadSpecialField = ({
   options,
   children,
 }: WorkLeadSpecialFieldProps) => {
-  const LockClosedIcon: React.FC<IconProps> = icons["LockClosedIcon"];
-  const LockOpenIcon: React.FC<IconProps> = icons["LockOpenIcon"];
-
   const selectOptions = useMemo(() => {
     return options.map((option) => ({
       label: option.full_name,
@@ -41,27 +36,13 @@ export const WorkLeadSpecialField = ({
   return (
     <>
       <Grid item xs={6}>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            paddingTop: "3px",
-          }}
-        >
-          <ETFormLabel required>Work Lead</ETFormLabel>
-          <IconButton
-            onClick={onLockClick}
-            disableRipple
-            disabled={!id}
-            sx={{ padding: 0 }}
-          >
-            {open ? (
-              <LockOpenIcon fill={Palette.primary.accent.main} />
-            ) : (
-              <LockClosedIcon fill={Palette.primary.accent.main} />
-            )}
-          </IconButton>
-        </Box>
+        <SpecialFieldLock
+          id={id}
+          open={open}
+          onLockClick={onLockClick}
+          label={"Work Lead"}
+          required
+        />
         {children}
       </Grid>
       <When condition={open}>