Merge pull request #54 from jadmsaadaot/SUBMIT-task#13

Add new management plan - conditions form
bcgov · Aug 30, 2024 · 2b5637a · 2b5637a
2 parents b5a0602 + aa1e48e
commit 2b5637a
Show file tree

Hide file tree

Showing 16 changed files with 447 additions and 364 deletions.
diff --git a/submit-web/index.html b/submit-web/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/png" href="/BCFavIcon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="/config/config.js"></script>
-    <title>Epic.Submit</title>
+    <title>EPIC.submit</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/submit-web/src/components/NewManagementPlan/Conditions.tsx b/submit-web/src/components/NewManagementPlan/Conditions.tsx
@@ -0,0 +1,170 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  Link as MuiLink,
+  MenuItem,
+  TextField,
+  Typography,
+  IconButton,
+} from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+import { useManagementPlanForm } from "./formStore";
+import { dummyConditions, stepLabels } from "./constants";
+import CloseIcon from "@mui/icons-material/Close";
+import { Unless } from "react-if";
+
+const MAX_CONDITIONS = 5;
+export const Conditions = () => {
+  const { step, setStep, reset, setFormData, formData } =
+    useManagementPlanForm();
+
+  const [conditionInputes, setConditionInputs] = useState([0]);
+  const [conditions, setConditions] = useState<
+    { key: number; value: number }[]
+  >([]);
+  const [errorText, setErrorText] = useState<string | null>(null);
+
+  const handleNext = () => {
+    if (conditions.length !== conditionInputes.length) {
+      setErrorText("Please select a condition for each input");
+      return;
+    }
+    const data = {
+      conditions: {
+        label: "Condition(s)",
+        value: conditions.map((c) => c.value),
+      },
+    };
+    setFormData({ ...formData, ...data });
+    setStep(Math.min(step + 1, stepLabels.length - 1));
+  };
+
+  const handleCancel = () => {
+    reset();
+  };
+
+  const handleAnotherCondition = () => {
+    setConditionInputs([
+      ...conditionInputes,
+      Math.max(...conditionInputes) + 1,
+    ]);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Typography
+        variant="h5"
+        sx={{
+          fontWeight: 400,
+          color: BCDesignTokens.typographyColorPlaceholder,
+        }}
+      >
+        Condition(s)
+      </Typography>
+      <Divider />
+      <Grid
+        container
+        sx={{
+          padding: "16px 0px",
+        }}
+      >
+        <Grid item xs={12}>
+          <Typography variant="body1">
+            What condition is this management plan for?
+          </Typography>
+        </Grid>
+        <Grid item xs={12}>
+          <Typography
+            variant="body2"
+            color={BCDesignTokens.typographyColorPlaceholder}
+          >
+            Please note: you can only submit one Management Plan per submission
+          </Typography>
+        </Grid>
+        {conditionInputes.map((input) => (
+          <Grid item xs={12} container spacing={1}>
+            <Grid item xs md={6} lg={4} key={input}>
+              <TextField
+                select
+                fullWidth
+                sx={{ marginBottom: "10px" }}
+                onChange={(e) => {
+                  const prev = conditions.filter((c) => c.key !== input);
+                  setConditions([
+                    ...prev,
+                    { key: input, value: parseInt(e.target.value) },
+                  ]);
+                  if (errorText) {
+                    setErrorText(null);
+                  }
+                }}
+                value={conditions.find((c) => c.key === input)?.value || ""}
+              >
+                {dummyConditions.map((condition) => (
+                  <MenuItem
+                    key={condition.id}
+                    value={condition.id}
+                    disabled={conditions.some((c) => c.value === condition.id)}
+                  >
+                    {condition.name}
+                  </MenuItem>
+                ))}
+              </TextField>
+            </Grid>
+            {input > 0 && (
+              <Grid item>
+                <IconButton
+                  onClick={() => {
+                    setConditionInputs(
+                      conditionInputes.filter((c) => c !== input),
+                    );
+                    setConditions(conditions.filter((c) => c.key !== input));
+                  }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              </Grid>
+            )}
+          </Grid>
+        ))}
+        <Unless condition={conditionInputes.length >= MAX_CONDITIONS}>
+          <Grid item xs={12}>
+            <MuiLink
+              sx={{
+                cursor: "pointer",
+              }}
+              onClick={handleAnotherCondition}
+            >
+              + Add another condition
+            </MuiLink>
+          </Grid>
+        </Unless>
+      </Grid>
+      {errorText && (
+        <Grid item xs={12}>
+          <Typography color="error" variant="body2">
+            {errorText}
+          </Typography>
+        </Grid>
+      )}
+      <Grid container spacing={2} mt="5em">
+        <Grid item>
+          <Button variant="text" onClick={handleCancel}>
+            Cancel
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button onClick={handleNext}>Next</Button>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
diff --git a/submit-web/src/components/NewManagementPlan/Form.tsx b/submit-web/src/components/NewManagementPlan/Form.tsx
@@ -0,0 +1,30 @@
+import { Grid } from "@mui/material";
+import TabStepper from "./TabStepper";
+import { TabPanel } from "./TabPanel";
+
+type FormProps = {
+  handleSubmit?: () => void;
+};
+export const Form: React.FC<FormProps> = () => {
+  return (
+    <Grid container width={"100%"}>
+      <Grid
+        item
+        xl={8}
+        lg={10}
+        md={12}
+        sx={{
+          padding: "24px 0px 12px 0px",
+        }}
+        container
+      >
+        <Grid item xs={12}>
+          <TabStepper />
+        </Grid>
+        <Grid item xs={12}>
+          <TabPanel />
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
diff --git a/submit-web/src/components/NewManagementPlan/TabPanel.tsx b/submit-web/src/components/NewManagementPlan/TabPanel.tsx
@@ -0,0 +1,32 @@
+import { Case, Switch } from "react-if";
+import { useManagementPlanForm } from "./formStore";
+import { MANAGEMENT_PLAN_FORM_STEPS } from "./constants";
+import { Box } from "@mui/material";
+import { Conditions } from "./Conditions";
+
+type TabPanelProps = {
+  handleSubmit?: () => void;
+};
+export const TabPanel: React.FC<TabPanelProps> = () => {
+  const { step } = useManagementPlanForm();
+  return (
+    <Box mt={"2em"}>
+      <Switch>
+        <Case condition={step === MANAGEMENT_PLAN_FORM_STEPS.CONDITIONS}>
+          <Conditions />
+        </Case>
+        <Case condition={step === MANAGEMENT_PLAN_FORM_STEPS.PLAN_DETAILS}>
+          <div>Plan Details</div>
+        </Case>
+        <Case condition={step === MANAGEMENT_PLAN_FORM_STEPS.REQUIREMENTS}>
+          <div>Requirements</div>
+        </Case>
+        <Case
+          condition={step === MANAGEMENT_PLAN_FORM_STEPS.CONTACT_INFORMATION}
+        >
+          <div>Contact Information</div>
+        </Case>
+      </Switch>
+    </Box>
+  );
+};
diff --git a/submit-web/src/components/NewManagementPlan/TabStepper.tsx b/submit-web/src/components/NewManagementPlan/TabStepper.tsx
@@ -0,0 +1,21 @@
+import Box from "@mui/material/Box";
+import Stepper from "@mui/material/Stepper";
+import Step from "@mui/material/Step";
+import StepLabel from "@mui/material/StepLabel";
+import { useManagementPlanForm } from "./formStore";
+import { stepLabels } from "./constants";
+
+export default function TabStepper() {
+  const { step } = useManagementPlanForm();
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Stepper activeStep={step} alternativeLabel>
+        {stepLabels.map((label) => (
+          <Step key={label}>
+            <StepLabel>{label}</StepLabel>
+          </Step>
+        ))}
+      </Stepper>
+    </Box>
+  );
+}
diff --git a/submit-web/src/components/NewManagementPlan/constants.ts b/submit-web/src/components/NewManagementPlan/constants.ts
@@ -0,0 +1,41 @@
+export const MANAGEMENT_PLAN_FORM_STEPS = {
+  CONDITIONS: 0,
+  PLAN_DETAILS: 1,
+  REQUIREMENTS: 2,
+  CONTACT_INFORMATION: 3,
+};
+
+export const stepLabels = [
+  "Conditions(s)",
+  "Plan Details",
+  "Requirements",
+  "Contact Information",
+];
+
+export type Condition = {
+  id: number;
+  name: string;
+};
+
+export const dummyConditions: Condition[] = [
+  {
+    id: 1,
+    name: "Condition 1",
+  },
+  {
+    id: 2,
+    name: "Condition 2",
+  },
+  {
+    id: 3,
+    name: "Condition 3",
+  },
+  {
+    id: 4,
+    name: "Condition 4",
+  },
+  {
+    id: 5,
+    name: "Condition 5",
+  },
+];
diff --git a/submit-web/src/components/NewManagementPlan/formStore.ts b/submit-web/src/components/NewManagementPlan/formStore.ts
@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+type FormData = {
+  [x: string]: {
+    label: string;
+    value: number | number[] | string;
+  };
+};
+interface ManagementPlanFormState {
+  formData: FormData;
+  setFormData: (formData: FormData) => void;
+  step: number;
+  setStep: (step: number) => void;
+  reset: () => void;
+}
+
+export const useManagementPlanForm = create<ManagementPlanFormState>((set) => ({
+  formData: {},
+  setFormData: (formData: FormData) => set(() => ({ formData })),
+  step: 0,
+  setStep: (step: number) => set(() => ({ step })),
+  reset: () => set(() => ({ formData: {}, step: 0 })),
+}));
diff --git a/submit-web/src/components/Projects/Project.tsx b/submit-web/src/components/Projects/Project.tsx
@@ -95,7 +95,7 @@ export const Project = ({ accountProject }: ProjectParam) => {
               <Typography variant="h4" fontWeight={400}>
                 Management Plans
               </Typography>
-              <ProjectStatus bold status={PROJECT_STATUS.POST_DECISION} />
+              <ProjectStatus status={PROJECT_STATUS.POST_DECISION} />
             </CardInnerBox>
             <CardInnerBox>
               <Button>

diff --git a/submit-web/src/components/Shared/ContentBox.tsx b/submit-web/src/components/Shared/ContentBox.tsx
@@ -0,0 +1,44 @@
+import { Box, Paper, PaperProps, Typography } from "@mui/material";
+import { BCDesignTokens } from "epic.theme";
+
+type ContentBoxProps = {
+  title: string;
+} & PaperProps;
+export const ContentBox = ({ children, title, ...rest }: ContentBoxProps) => {
+  return (
+    <Paper
+      sx={{
+        disply: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+      }}
+      {...rest}
+    >
+      <Box
+        sx={{
+          width: "auto",
+          padding: "12px 24px",
+          backgroundColor: BCDesignTokens.surfaceColorBackgroundLightBlue,
+        }}
+      >
+        <Typography
+          variant="h3"
+          sx={{
+            fontWeight: "bold",
+          }}
+        >
+          {title}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          padding: "24px 16px 16px 16px",
+          alignSelf: "stretch",
+        }}
+      >
+        {children}
+      </Box>
+    </Paper>
+  );
+};