Special history - proponent name

epictrack-api/src/api/services/proponent.py

@@ -19,7 +19,9 @@
 
 from api.exceptions import ResourceExistsError, ResourceNotFoundError
 from api.models import Proponent, db
+from api.models.special_field import EntityEnum
 from api.models.staff import Staff
+from api.services.special_field import SpecialFieldService
 from api.utils.token_info import TokenInfo
 
 
@@ -52,6 +54,15 @@ def create_proponent(cls, payload: dict):
         if exists:
             raise ResourceExistsError("Proponent with same name exists")
         proponent = Proponent(**payload)
+        proponent.flush()
+        proponent_name_special_field_data = {
+            "entity": EntityEnum.PROPONENT,
+            "entity_id": proponent.id,
+            "field_name": "name",
+            "field_value": proponent.name,
+            "active_from": proponent.created_at
+        }
+        SpecialFieldService.create_special_field_entry(proponent_name_special_field_data)
         proponent.save()
         return proponent
 

epictrack-web/src/components/proponent/ProponentForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TextField, Grid, Box } from "@mui/material";
+import { TextField, Grid, Box, IconButton } from "@mui/material";
 import { FormProvider, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -11,7 +11,15 @@ import ControlledSelectV2 from "../shared/controlledInputComponents/ControlledSe
 import { MasterContext } from "../shared/MasterContext";
 import proponentService from "../../services/proponentService/proponentService";
 import ControlledSwitch from "../shared/controlledInputComponents/ControlledSwitch";
-import LockClosed from "../../assets/images/lock-closed.svg";
+import { When, If, Then, Else } from "react-if";
+import {
+  SpecialFieldEntityEnum,
+  SpecialFields,
+} from "../../constants/application-constant";
+import Icons from "../icons";
+import { IconProps } from "../icons/type";
+import { Palette } from "../../styles/theme";
+import { SpecialFieldGrid } from "../shared/specialField";
 
 const schema = yup.object().shape({
   name: yup
@@ -33,10 +41,14 @@ const schema = yup.object().shape({
     }),
 });
 
+const LockClosedIcon: React.FC<IconProps> = Icons["LockClosedIcon"];
+const LockOpenIcon: React.FC<IconProps> = Icons["LockOpenIcon"];
+
 export default function ProponentForm({ ...props }) {
   const [staffs, setStaffs] = React.useState<Staff[]>([]);
   const [disabled, setDisabled] = React.useState<boolean>();
   const ctx = React.useContext(MasterContext);
+  const [specialField, setSpecialField] = React.useState<string>("");
 
   React.useEffect(() => {
     ctx.setFormId("proponent-form");
@@ -100,17 +112,24 @@ export default function ProponentForm({ ...props }) {
               }}
             >
               <ETFormLabel required>Name</ETFormLabel>
-              <ETFormLabel>
-                <Box
-                  sx={{
-                    opacity: disabled ? "100" : "0",
-                    cursor: "pointer",
-                  }}
-                  component="img"
-                  src={LockClosed}
-                  alt="Lock"
-                />
-              </ETFormLabel>
+              <When condition={disabled}>
+                <If condition={specialField === SpecialFields.PROPONENT.NAME}>
+                  <Then>
+                    <IconButton onClick={() => setSpecialField("")}>
+                      <LockOpenIcon fill={Palette.primary.accent.main} />
+                    </IconButton>
+                  </Then>
+                  <Else>
+                    <IconButton
+                      onClick={() =>
+                        setSpecialField(SpecialFields.PROPONENT.NAME)
+                      }
+                    >
+                      <LockClosedIcon fill={Palette.primary.accent.main} />
+                    </IconButton>
+                  </Else>
+                </If>
+              </When>
             </Box>
             <Box sx={{ paddingTop: "4px" }}>
               <TextField
@@ -126,8 +145,9 @@ export default function ProponentForm({ ...props }) {
           </Grid>
           <Grid item xs={6}>
             <ETFormLabel>Relationship Holder</ETFormLabel>
-            <Box sx={{ paddingTop: "4px" }}>
+            <Box sx={{ paddingTop: Boolean(specialField) ? "15px" : "11px" }}>
               <ControlledSelectV2
+                disabled={Boolean(specialField)}
                 placeholder="Select"
                 defaultValue={(ctx.item as Proponent)?.relationship_holder_id}
                 options={staffs || []}
@@ -137,8 +157,54 @@ export default function ProponentForm({ ...props }) {
               ></ControlledSelectV2>
             </Box>
           </Grid>
+          <Grid item xs={12}>
+            <When condition={Boolean(specialField)}>
+              <SpecialFieldGrid
+                entity={SpecialFieldEntityEnum.PROPONENT}
+                entity_id={(ctx.item as Proponent)?.id}
+                fieldName={specialField}
+                fieldLabel={
+                  specialField === SpecialFields.PROPONENT.NAME
+                    ? "Proponent Name"
+                    : "Name"
+                }
+                fieldType={"text"}
+                title={
+                  specialField === SpecialFields.PROPONENT.NAME
+                    ? "Proponet History"
+                    : (ctx.item as Proponent)?.name
+                }
+                description={
+                  <>
+                    <When
+                      condition={
+                        specialField === SpecialFields.PROJECT.PROPONENT
+                      }
+                    >
+                      Update the Proponent of this Project.{" "}
+                      <a href="#">Click this link</a> for detailed instructions.
+                    </When>
+                    <When
+                      condition={specialField === SpecialFields.PROJECT.NAME}
+                    >
+                      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
+                    </When>
+                  </>
+                }
+                onSave={() => {
+                  // TODO: Refresh form field value for the specific field?
+                  // OR do we just call form save/submit handler
+                  ctx.setId(props.proponentId);
+                  ctx.getById(props.proponentId);
+                }}
+              />
+            </When>
+          </Grid>
           <Grid item xs={6} sx={{ paddingTop: "30px !important" }}>
             <ControlledSwitch
+              disabled={Boolean(specialField)}
               sx={{ paddingLeft: "0px", marginRight: "10px" }}
               name="is_active"
             />

epictrack-web/src/components/shared/CustomSwitch.tsx

@@ -9,7 +9,7 @@ export const CustomSwitch = styled((props: SwitchProps) => (
     {...props}
     disabled={props.disabled}
   />
-))(() => ({
+))((props: SwitchProps) => ({
   width: 40,
   height: 24,
   padding: 0,
@@ -20,7 +20,9 @@ export const CustomSwitch = styled((props: SwitchProps) => (
       transform: "translateX(16px)",
       color: "#FFFFFF",
       "& + .MuiSwitch-track": {
-        backgroundColor: Palette.primary.accent.main,
+        backgroundColor: `${
+          props.disabled ? Palette.neutral.light : Palette.primary.accent.main
+        }`,
         opacity: 1,
       },
     },

epictrack-web/src/components/shared/MasterContext.tsx

@@ -28,6 +28,7 @@ interface MasterContextProps {
   setFormId: Dispatch<SetStateAction<string | undefined>>;
   onDialogClose(event: any, reason: any): any;
   setFormStyle: Dispatch<SetStateAction<SxProps | undefined>>;
+  getById: (id: string) => Promise<void>;
 }
 
 export const MasterContext = createContext<MasterContextProps>({
@@ -48,6 +49,9 @@ export const MasterContext = createContext<MasterContextProps>({
   setFormId: () => ({}),
   onDialogClose: (event: any, reason: any) => ({}),
   setFormStyle: () => ({}),
+  getById: async (id: string) => {
+    return Promise.resolve();
+  },
 });
 
 export const MasterProvider = ({
@@ -172,6 +176,7 @@ export const MasterProvider = ({
   return (
     <MasterContext.Provider
       value={{
+        getById,
         title,
         setTitle,
         data,

epictrack-web/src/components/shared/specialField/index.tsx

@@ -93,7 +93,6 @@ export const SpecialFieldGrid = ({
             value = options?.find((o) => row.original.field_value == o.value);
           }
           const onBlur = (newValue: any) => {
-            debugger;
             row._valuesCache[column.id] =
               fieldType === "select" ? newValue.value : newValue.target.value;
             if (Boolean(tableState.creatingRow)) {
@@ -186,7 +185,6 @@ export const SpecialFieldGrid = ({
 
   const handleCreateRowSave: MRT_TableOptions<SpecialField>["onCreatingRowSave"] =
     async ({ values, table }) => {
-      debugger;
       await saveEntry(values);
       table.setCreatingRow(null); //exit creating mode
     };
@@ -220,6 +218,7 @@ export const SpecialFieldGrid = ({
       isLoading: loading,
     },
     enableSorting: false,
+    enableBottomToolbar: false,
     editDisplayMode: "row",
     createDisplayMode: "row",
     enableFilters: false,

epictrack-web/src/constants/application-constant.ts

@@ -101,4 +101,7 @@ export const SpecialFields = {
     NAME: "name",
     PROPONENT: "proponent_id",
   },
+  PROPONENT: {
+    NAME: "name",
+  },
 };