From 2da731d711d2899c407130171e2ce5c804dd95e9 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Fri, 10 Feb 2023 09:48:51 +0800 Subject: [PATCH 1/4] task: add notification message on field creation & update errors --- .../AddFieldModal/views/FieldForm.tsx | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) 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..b87f1bb59f 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, @@ -46,6 +47,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 +90,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 +128,7 @@ export const FieldForm = ({ value: field.ZUID, }) ); + const dispatch = useDispatch(); useEffect(() => { let formFields: { [key: string]: FormValue } = {}; @@ -250,6 +261,31 @@ export const FieldForm = ({ setErrors(newErrorsObj); }, [formData]); + useEffect(() => { + if (fieldCreationError || fieldUpdateError) { + let errorMsg = ""; + + if (fieldCreationError) { + // @ts-ignore + errorMsg = + fieldCreationError?.data?.error || "Failed to create the field"; + } + + if (fieldUpdateError) { + // @ts-ignore + errorMsg = + fieldCreationError?.data?.error || "Failed to update the field"; + } + + dispatch( + notify({ + message: errorMsg, + kind: "error", + }) + ); + } + }, [fieldCreationError, fieldUpdateError]); + const handleSubmitForm = () => { setIsSubmitClicked(true); const hasErrors = Object.values(errors) From dddda8497f830dbe537ca789b4adc219e22c6bc4 Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Fri, 10 Feb 2023 09:53:04 +0800 Subject: [PATCH 2/4] task: update error msg --- .../components/AddFieldModal/views/FieldForm.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) 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 b87f1bb59f..5b79841f50 100644 --- a/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx +++ b/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx @@ -266,15 +266,11 @@ export const FieldForm = ({ let errorMsg = ""; if (fieldCreationError) { - // @ts-ignore - errorMsg = - fieldCreationError?.data?.error || "Failed to create the field"; + errorMsg = "Failed to create the field"; } if (fieldUpdateError) { - // @ts-ignore - errorMsg = - fieldCreationError?.data?.error || "Failed to update the field"; + errorMsg = "Failed to update the field"; } dispatch( From f6ef331531a0ccfb596b375d0d45740cb04404eb Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Fri, 10 Feb 2023 09:57:10 +0800 Subject: [PATCH 3/4] task: switch to details tab when user clicks done and there are form errors --- .../appRevamp/components/AddFieldModal/views/FieldForm.tsx | 6 ++++++ 1 file changed, 6 insertions(+) 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 5b79841f50..abcd743f5c 100644 --- a/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx +++ b/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx @@ -290,6 +290,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; } From eca1303b90c6aef25417f70d3655acac8b0ac40b Mon Sep 17 00:00:00 2001 From: Nar Cuenca Date: Fri, 10 Feb 2023 11:01:02 +0800 Subject: [PATCH 4/4] task: wire deactivate/reactivate field in field update modal --- .../AddFieldModal/views/FieldForm.tsx | 68 +++++++++++++++++-- 1 file changed, 61 insertions(+), 7 deletions(-) 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 abcd743f5c..b3fab00968 100644 --- a/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx +++ b/src/apps/schema/src/appRevamp/components/AddFieldModal/views/FieldForm.tsx @@ -23,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"; @@ -37,6 +38,8 @@ import { useBulkUpdateContentModelFieldMutation, useGetContentModelsQuery, useGetContentModelFieldsQuery, + useDeleteContentModelFieldMutation, + useUndeleteContentModelFieldMutation, } from "../../../../../../../shell/services/instance"; import { ContentModelField, @@ -128,6 +131,14 @@ export const FieldForm = ({ value: field.ZUID, }) ); + const [ + deleteContentModelField, + { isLoading: isDeletingField, isSuccess: isFieldDeleted }, + ] = useDeleteContentModelFieldMutation(); + const [ + undeleteContentModelField, + { isLoading: isUndeletingField, isSuccess: isFieldUndeleted }, + ] = useUndeleteContentModelFieldMutation(); const dispatch = useDispatch(); useEffect(() => { @@ -282,6 +293,28 @@ export const FieldForm = ({ } }, [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) @@ -510,16 +543,37 @@ export const FieldForm = ({ /> ); })} - {/* TODO: Add functionality once deactivate flow is provided */} {isUpdateField && ( - + {fieldData?.deletedAt + ? "Re-activate Field" + : "De-activate Field"} + )}