Merge pull request #1506 from salabh-aot/refactor-project-special-fields

Refactor project special fields

Author: jadmsaadaot

epictrack-web/src/components/project/ProjectForm/ProjectNameSpecialField.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { SpecialFieldGrid } from "../../shared/specialField";
+import {
+  SPECIAL_FIELDS,
+  SpecialFieldEntityEnum,
+} from "../../../constants/application-constant";
+import { ETCaption3 } from "../../shared";
+import { Grid } from "@mui/material";
+import { When } from "react-if";
+import { SpecialFieldLock } from "../../shared/specialField/components/SpecialFieldLock";
+
+interface ProjectNameSpecialFieldProps {
+  id: number;
+  onSave: () => void;
+  open: boolean;
+  onLockClick: () => void;
+  children?: React.ReactNode;
+  title: string;
+}
+export const ProjectNameSpecialField = ({
+  id,
+  onSave,
+  open = false,
+  onLockClick,
+  children,
+  title,
+}: ProjectNameSpecialFieldProps) => {
+  return (
+    <>
+      <Grid item xs={6}>
+        <SpecialFieldLock
+          id={id}
+          open={open}
+          onLockClick={onLockClick}
+          label={"Name"}
+          required
+        />
+        {children}
+      </Grid>
+      <When condition={open}>
+        <Grid item xs={12}>
+          <SpecialFieldGrid
+            entity={SpecialFieldEntityEnum.PROJECT}
+            entity_id={id}
+            fieldName={SPECIAL_FIELDS.PROJECT.NAME}
+            fieldLabel={"Name"}
+            fieldType={"text"}
+            title={title}
+            description={
+              <ETCaption3>
+                Update the legal name of the Project and the dates each name was
+                in legal use. <a href="#">Click this link</a> for detailed
+                instructions.
+              </ETCaption3>
+            }
+            onSave={onSave}
+          />
+        </Grid>
+      </When>
+    </>
+  );
+};

epictrack-web/src/components/project/ProjectForm/ProponentSpecialField.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from "react";
+import { SpecialFieldGrid } from "../../shared/specialField";
+import {
+  SPECIAL_FIELDS,
+  SpecialFieldEntityEnum,
+} from "../../../constants/application-constant";
+import { ETCaption3 } from "../../shared";
+import { Grid } from "@mui/material";
+import { When } from "react-if";
+import { Proponent } from "../../../models/proponent";
+import { SpecialFieldLock } from "../../shared/specialField/components/SpecialFieldLock";
+
+interface ProponentSpecialFieldProps {
+  id: number;
+  options: Proponent[];
+  onSave: () => void;
+  open: boolean;
+  onLockClick: () => void;
+  children?: React.ReactNode;
+}
+export const ProponentSpecialField = ({
+  id,
+  onSave,
+  open = false,
+  onLockClick,
+  options,
+  children,
+}: ProponentSpecialFieldProps) => {
+  const selectOptions = useMemo(() => {
+    return options.map((option) => ({
+      label: option.name,
+      value: String(option.id),
+    }));
+  }, [options]);
+
+  return (
+    <>
+      <Grid item xs={6}>
+        <SpecialFieldLock
+          id={id}
+          open={open}
+          onLockClick={onLockClick}
+          label={"Proponent"}
+          required
+        />
+        {children}
+      </Grid>
+      <When condition={open}>
+        <Grid item xs={12}>
+          <SpecialFieldGrid
+            entity={SpecialFieldEntityEnum.PROJECT}
+            entity_id={id}
+            fieldName={SPECIAL_FIELDS.PROJECT.PROPONENT}
+            fieldLabel={"Proponent Name"}
+            fieldType={"select"}
+            title={"Proponent History"}
+            description={
+              <ETCaption3>
+                Update the Proponent of this Project.{" "}
+                <a href="#">Click this link</a> for detailed instructions.
+              </ETCaption3>
+            }
+            options={selectOptions}
+            onSave={onSave}
+          />
+        </Grid>
+      </When>
+    </>
+  );
+};