Task: Edit Single Text Field

src/apps/schema/src/appRevamp/components/AddFieldModal/FieldFormInput.tsx

@@ -9,6 +9,8 @@ import {
   InputBase,
 } from "@mui/material";
 
+import { FormValue } from "./views/FieldForm";
+
 type FieldType = "input" | "checkbox" | "dropdown";
 export interface InputField {
   name: string;
@@ -22,18 +24,14 @@ export interface InputField {
 interface Props {
   fieldConfig: InputField;
   errorMsg?: string;
-  onDataChange: ({
-    name,
-    value,
-  }: {
-    name: string;
-    value: string | boolean;
-  }) => void;
+  onDataChange: ({ name, value }: { name: string; value: FormValue }) => void;
+  prefillData?: FormValue;
 }
 export const FieldFormInput = ({
   fieldConfig,
   errorMsg,
   onDataChange,
+  prefillData,
 }: Props) => {
   return (
     <Box mb={2.5}>
@@ -78,6 +76,7 @@ export const FieldFormInput = ({
                 value: e.target.value,
               });
             }}
+            value={prefillData}
           />
           {errorMsg && (
             <Typography mt={0.5} variant="body2" color="error.dark">
@@ -100,6 +99,7 @@ export const FieldFormInput = ({
                   value: e.target.checked,
                 });
               }}
+              checked={Boolean(prefillData)}
             />
           }
           label={

src/apps/schema/src/appRevamp/components/AddFieldModal/index.tsx

@@ -1,21 +1,33 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction, useState, useMemo } from "react";
+import { useParams } from "react-router";
 import { Dialog } from "@mui/material";
 
 import { FieldSelection } from "./views/FieldSelection";
 import { FieldForm } from "./views/FieldForm";
-import { ContentModelField } from "../../../../../../shell/services/types";
+import { useGetContentModelFieldsQuery } from "../../../../../../shell/services/instance";
 
+type Params = {
+  id: string;
+  fieldId: string;
+};
 export type ViewMode = "fields_list" | "new_field" | "update_field";
 interface Props {
   onModalClose: Dispatch<SetStateAction<boolean>>;
-  fields: ContentModelField[];
+  mode: ViewMode;
 }
-export const AddFieldModal = ({ onModalClose, fields }: Props) => {
-  const [viewMode, setViewMode] = useState<ViewMode>("fields_list");
+export const AddFieldModal = ({ onModalClose, mode }: Props) => {
+  const [viewMode, setViewMode] = useState<ViewMode>(mode);
   const [selectedField, setSelectedField] = useState({
     fieldType: "",
     fieldName: "",
   });
+  const params = useParams<Params>();
+  const { id, fieldId } = params;
+  const { data: fields } = useGetContentModelFieldsQuery(id);
+
+  const fieldData = useMemo(() => {
+    return fields?.find((field) => field.ZUID === fieldId);
+  }, [fieldId, fields]);
 
   const handleFieldClick = (fieldType: string, fieldName: string) => {
     setViewMode("new_field");
@@ -57,6 +69,16 @@ export const AddFieldModal = ({ onModalClose, fields }: Props) => {
           onFieldCreationSuccesssful={() => onModalClose(false)}
         />
       )}
+      {viewMode === "update_field" && (
+        <FieldForm
+          fields={fields}
+          type={fieldData?.datatype}
+          name={fieldData?.label}
+          onModalClose={() => onModalClose(false)}
+          onFieldCreationSuccesssful={() => onModalClose(false)}
+          fieldData={fieldData}
+        />
+      )}
     </Dialog>
   );
 };

src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx

@@ -10,8 +10,10 @@ import {
   Tabs,
   Tab,
   Button,
+  CircularProgress,
 } from "@mui/material";
-import { snakeCase } from "lodash";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { snakeCase, isEmpty } from "lodash";
 
 import CloseIcon from "@mui/icons-material/Close";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -20,8 +22,15 @@ import AddRoundedIcon from "@mui/icons-material/AddRounded";
 import { FieldIcon } from "../../Field/FieldIcon";
 import { stringStartsWithVowel } from "../../utils";
 import { InputField, FieldFormInput } from "../FieldFormInput";
-import { useCreateContentModelFieldMutation } from "../../../../../../../shell/services/instance";
-import { ContentModelField } from "../../../../../../../shell/services/types";
+import {
+  useCreateContentModelFieldMutation,
+  useUpdateContentModelFieldMutation,
+} from "../../../../../../../shell/services/instance";
+import {
+  ContentModelField,
+  FieldSettings,
+  ContentModelFieldValue,
+} from "../../../../../../../shell/services/types";
 
 const commonFields: InputField[] = [
   {
@@ -88,8 +97,9 @@ type ActiveTab = "details" | "rules";
 type Params = {
   id: string;
 };
+export type FormValue = Exclude<ContentModelFieldValue, FieldSettings>;
 interface FormData {
-  [key: string]: string | boolean;
+  [key: string]: FormValue;
 }
 interface Errors {
   [key: string]: string;
@@ -98,9 +108,10 @@ interface Props {
   type: string;
   name: string;
   onModalClose: () => void;
-  onBackClick: () => void;
+  onBackClick?: () => void;
   fields: ContentModelField[];
   onFieldCreationSuccesssful: () => void;
+  fieldData?: ContentModelField;
 }
 export const FieldForm = ({
   type,
@@ -109,38 +120,62 @@ export const FieldForm = ({
   onBackClick,
   fields,
   onFieldCreationSuccesssful,
+  fieldData,
 }: Props) => {
   const [activeTab, setActiveTab] = useState<ActiveTab>("details");
   const [isSubmitClicked, setIsSubmitClicked] = useState(false);
   const [errors, setErrors] = useState<Errors>({});
   const [formData, setFormData] = useState<FormData>({});
   const params = useParams<Params>();
   const { id } = params;
-  const [createContentModelField, { isLoading, isSuccess }] =
-    useCreateContentModelFieldMutation();
+  const [
+    createContentModelField,
+    { isLoading: isCreatingField, isSuccess: isFieldCreated },
+  ] = useCreateContentModelFieldMutation();
+  const [
+    updateContentModelField,
+    { isLoading: isUpdatingField, isSuccess: isFieldUpdated },
+  ] = useUpdateContentModelFieldMutation();
+  const isUpdateField = !isEmpty(fieldData);
 
   useEffect(() => {
-    let formFields: { [key: string]: string | boolean } = {};
+    let formFields: { [key: string]: FormValue } = {};
     let errors: { [key: string]: string } = {};
 
-    formConfig[type].forEach((field) => {
-      formFields[field.name] = field.type === "checkbox" ? false : "";
+    formConfig[type]?.forEach((field) => {
+      if (isUpdateField) {
+        if (field.name === "list") {
+          formFields[field.name] = fieldData.settings[field.name];
+        } else {
+          formFields[field.name] = fieldData[field.name] as FormValue;
+        }
 
-      if (field.required) {
-        errors[field.name] = "This field is required";
+        // Pre-fill error messages based on content
+        if (field.required) {
+          errors[field.name] = isEmpty(fieldData[field.name])
+            ? "This field is required"
+            : "";
+        }
+      } else {
+        formFields[field.name] = field.type === "checkbox" ? false : "";
+
+        // Pre-fill required fields error msgs
+        if (field.required) {
+          errors[field.name] = "This field is required";
+        }
       }
     });
 
     setFormData(formFields);
     setErrors(errors);
-  }, [type]);
+  }, [type, fieldData]);
 
   useEffect(() => {
     // TODO: Field creation flow is not yet completed, closing modal on success for now
-    if (isSuccess) {
+    if (isFieldCreated || isFieldUpdated) {
       onFieldCreationSuccesssful();
     }
-  }, [isSuccess]);
+  }, [isFieldCreated, isFieldUpdated]);
 
   const handleSubmitForm = () => {
     setIsSubmitClicked(true);
@@ -163,10 +198,23 @@ export const FieldForm = ({
       settings: {
         list: formData.list as boolean,
       },
-      sort: fields?.length, // Just use the length since sort starts at 0
+      sort: isUpdateField ? fieldData.sort : fields?.length, // Just use the length since sort starts at 0
     };
 
-    createContentModelField({ modelZUID: id, body });
+    if (isUpdateField) {
+      const updateBody: ContentModelField = {
+        ...fieldData,
+        ...body,
+      };
+
+      updateContentModelField({
+        modelZUID: id,
+        fieldZUID: fieldData.ZUID,
+        body: updateBody,
+      });
+    } else {
+      createContentModelField({ modelZUID: id, body });
+    }
   };
 
   const handleFieldDataChange = ({
@@ -185,9 +233,17 @@ export const FieldForm = ({
     let errorMsg = value ? "" : "This field is required";
 
     if (value && name === "name") {
-      errorMsg = currFieldNames.includes(value as string)
-        ? "Field name already exists"
-        : "";
+      if (isUpdateField) {
+        // Re-using its original name is fine when updating a field
+        errorMsg =
+          currFieldNames.includes(value as string) && value !== fieldData.name
+            ? "Field name already exists"
+            : "";
+      } else {
+        errorMsg = currFieldNames.includes(value as string)
+          ? "Field name already exists"
+          : "";
+      }
     }
 
     if (name in errors) {
@@ -217,9 +273,11 @@ export const FieldForm = ({
           pb={0.5}
         >
           <Box display="flex" alignItems="center">
-            <IconButton size="small" onClick={onBackClick}>
-              <ArrowBackIcon />
-            </IconButton>
+            {!isUpdateField && (
+              <IconButton size="small" onClick={onBackClick}>
+                <ArrowBackIcon />
+              </IconButton>
+            )}
             <Box px={1.5}>
               <FieldIcon
                 type={type}
@@ -228,7 +286,7 @@ export const FieldForm = ({
                 fontSize="16px"
               />
             </Box>
-            {headerText}
+            {isUpdateField ? fieldData.label : headerText}
           </Box>
           <IconButton size="small" onClick={onModalClose}>
             <CloseIcon />
@@ -251,13 +309,14 @@ export const FieldForm = ({
       >
         {activeTab === "details" && (
           <>
-            {formConfig[type].map((fieldConfig, index) => {
+            {formConfig[type]?.map((fieldConfig, index) => {
               return (
                 <FieldFormInput
                   key={index}
                   fieldConfig={fieldConfig}
                   onDataChange={handleFieldDataChange}
                   errorMsg={isSubmitClicked && errors[fieldConfig.name]}
+                  prefillData={formData[fieldConfig.name]}
                 />
               );
             })}
@@ -290,13 +349,13 @@ export const FieldForm = ({
           >
             Add another field
           </Button>
-          <Button
-            disabled={isLoading}
+          <LoadingButton
+            loading={isCreatingField || isUpdatingField}
             onClick={handleSubmitForm}
             variant="contained"
           >
             Done
-          </Button>
+          </LoadingButton>
         </Box>
       </DialogActions>
     </>