diff --git a/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx b/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx index 53cb5a5c3a..b3fab00968 100644 --- a/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx +++ b/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from "react"; import { useParams } from "react-router"; +import { useDispatch } from "react-redux"; import { Typography, DialogContent, @@ -22,6 +23,7 @@ import RuleRoundedIcon from "@mui/icons-material/RuleRounded"; import MenuBookRoundedIcon from "@mui/icons-material/MenuBookRounded"; import SaveRoundedIcon from "@mui/icons-material/SaveRounded"; import PauseCircleOutlineRoundedIcon from "@mui/icons-material/PauseCircleOutlineRounded"; +import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded"; import { FieldIcon } from "../../Field/FieldIcon"; import { FieldFormInput, DropdownOptions } from "../FieldFormInput"; @@ -36,6 +38,8 @@ import { useBulkUpdateContentModelFieldMutation, useGetContentModelsQuery, useGetContentModelFieldsQuery, + useDeleteContentModelFieldMutation, + useUndeleteContentModelFieldMutation, } from "../../../../../../../shell/services/instance"; import { ContentModelField, @@ -46,6 +50,7 @@ import { import { FIELD_COPY_CONFIG, TYPE_TEXT, FORM_CONFIG } from "../../configs"; import { ComingSoon } from "../ComingSoon"; import { Learn } from "../Learn"; +import { notify } from "../../../../../../../shell/store/notifications"; type ActiveTab = "details" | "rules" | "learn"; type Params = { @@ -88,11 +93,19 @@ export const FieldForm = ({ const { id } = params; const [ createContentModelField, - { isLoading: isCreatingField, isSuccess: isFieldCreated }, + { + isLoading: isCreatingField, + isSuccess: isFieldCreated, + error: fieldCreationError, + }, ] = useCreateContentModelFieldMutation(); const [ updateContentModelField, - { isLoading: isUpdatingField, isSuccess: isFieldUpdated }, + { + isLoading: isUpdatingField, + isSuccess: isFieldUpdated, + error: fieldUpdateError, + }, ] = useUpdateContentModelFieldMutation(); const [ bulkUpdateContentModelField, @@ -118,6 +131,15 @@ export const FieldForm = ({ value: field.ZUID, }) ); + const [ + deleteContentModelField, + { isLoading: isDeletingField, isSuccess: isFieldDeleted }, + ] = useDeleteContentModelFieldMutation(); + const [ + undeleteContentModelField, + { isLoading: isUndeletingField, isSuccess: isFieldUndeleted }, + ] = useUndeleteContentModelFieldMutation(); + const dispatch = useDispatch(); useEffect(() => { let formFields: { [key: string]: FormValue } = {}; @@ -250,6 +272,49 @@ export const FieldForm = ({ setErrors(newErrorsObj); }, [formData]); + useEffect(() => { + if (fieldCreationError || fieldUpdateError) { + let errorMsg = ""; + + if (fieldCreationError) { + errorMsg = "Failed to create the field"; + } + + if (fieldUpdateError) { + errorMsg = "Failed to update the field"; + } + + dispatch( + notify({ + message: errorMsg, + kind: "error", + }) + ); + } + }, [fieldCreationError, fieldUpdateError]); + + useEffect(() => { + if (isFieldDeleted) { + dispatch( + notify({ + message: `\"${fieldData?.label}\" field is de-activated`, + kind: "success", + }) + ); + } + }, [isFieldDeleted]); + + useEffect(() => { + if (isFieldUndeleted) { + dispatch( + notify({ + message: `\"${fieldData?.label}\" field is re-activated`, + kind: "success", + }) + ); + } + }, [isFieldUndeleted]); + const handleSubmitForm = () => { setIsSubmitClicked(true); const hasErrors = Object.values(errors) @@ -258,6 +323,12 @@ export const FieldForm = ({ const sort = isInbetweenField ? sortIndex : fields?.length; if (hasErrors) { + // Switch the active tab to details to show the user the errors if + // they're not on the details tab and they clicked the submit button + if (activeTab !== "details") { + setActiveTab("details"); + } + return; } @@ -472,16 +543,37 @@ export const FieldForm = ({ /> ); })} - {/* TODO: Add functionality once deactivate flow is provided */} {isUpdateField && ( - + {fieldData?.deletedAt + ? "Re-activate Field" + : "De-activate Field"} + )}