From a86e6893c5c10b19d47ee39c32442d228157a413 Mon Sep 17 00:00:00 2001 From: Shreeyash Shrestha Date: Sun, 15 Dec 2024 15:47:53 +0545 Subject: [PATCH] Add revert changes button in local unit form --- .../LocalUnitsForm/i18n.json | 6 + .../LocalUnitsForm/index.tsx | 106 +++++++++++++++++- .../LocalUnitsForm/schema.ts | 16 +++ 3 files changed, 126 insertions(+), 2 deletions(-) diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json index fd81cd429..72650cb02 100644 --- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json +++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json @@ -3,7 +3,9 @@ "strings": { "lastUpdateLabel": "Last update: {modifiedAt} by {modifiedBy}", "successMessage": "Local unit added successfully!", + "revertChangesSuccessMessage": "Local unit reverted successfully!", "failedMessage": "Failed to add local unit", + "revertChangesfailedMessage": "Failed to revert changes in local unit", "updateMessage": "Local unit updated successfully!", "updateFailedMessage": "Failed to update local unit", "specialitiesAndCapacityTitle": "Specialities & Capacity", @@ -76,6 +78,10 @@ "editButtonLabel": "Edit", "localUnitDeleteButtonLabel": "Delete", "doneButtonLabel": "Done", + "revertButtonLabel": "Revert", + "reasonLabel": "Reason", + "revertChangesModalHeading": "Revert the Changes", + "revertChangesContentQuestion": "Are you sure you want to have these changes revert in this project?", "confirmChangesModalHeading": "Confirm the Changes", "confirmChangesContentQuestion": "Are you sure you want to have these changes in this project?", "latitude": "Latitude", diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx index fa1a92943..fdb5e5f4e 100644 --- a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx +++ b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx @@ -38,6 +38,7 @@ import { isNotDefined, } from '@togglecorp/fujs'; import { + createSubmitHandler, getErrorObject, getErrorString, removeNull, @@ -73,7 +74,10 @@ import LocalUnitDeleteModal from '../../LocalUnitDeleteModal'; import LocalUnitValidateButton from '../../LocalUnitValidateButton'; import schema, { type LocalUnitsRequestPostBody, + LocalUnitsRevertRequestPostBody, type PartialLocalUnits, + PartialLocalUnitsRevertForm, + revertSchema, TYPE_HEALTH_CARE, } from './schema'; import useLocalUnitFormFieldLabels from './useLocalUnitFormFieldLabels'; @@ -104,6 +108,7 @@ type ChangedFormField = { const VisibilityOptions = (option: VisibilityOptions) => option.key; const defaultHealthValue = {}; +const defaultRevertChangesValue: PartialLocalUnitsRevertForm = {}; interface FormGridProps { className?: string; @@ -232,7 +237,7 @@ interface Props { function LocalUnitsForm(props: Props) { const { - readOnly = false, + readOnly: readOnlyFromProps = false, onSuccess, onEditButtonClick, localUnitId, @@ -247,6 +252,11 @@ function LocalUnitsForm(props: Props) { setFalse: setShowChangesModalFalse, }] = useBooleanState(false); + const [showRevertChangesModal, { + setTrue: setShowRevertChangesModalTrue, + setFalse: setShowRevertChangesModalFalse, + }] = useBooleanState(false); + const alert = useAlert(); const strings = useTranslation(i18n); const formFieldsContainerRef = useRef(null); @@ -295,6 +305,17 @@ function LocalUnitsForm(props: Props) { }, ); + const { + value: revertChangesValue, + error: revertChangesError, + setFieldValue: setRevertChangesFieldValue, + validate: revertChangesValidate, + setError: setRevertChangesError, + } = useForm( + revertSchema, + { value: defaultRevertChangesValue }, + ); + const [ localUnitChangedFormFields, setLocalUnitChangedFormFields, @@ -404,6 +425,8 @@ function LocalUnitsForm(props: Props) { }, }); + const readOnly = readOnlyFromProps || localUnitDetailsResponse?.is_locked; + const { response: localUnitsOptions, pending: localUnitsOptionsPending, @@ -521,6 +544,44 @@ function LocalUnitsForm(props: Props) { [validate, localUnitId, setError, updateLocalUnit, addLocalUnit], ); + const { + pending: revertChangesPending, + trigger: revertChanges, + } = useLazyRequest({ + method: 'POST', + url: '/api/v2/local-units/{id}/revert/', + pathVariables: isDefined(localUnitId) ? { id: localUnitId } : undefined, + body: (formFields: LocalUnitsRevertRequestPostBody) => formFields, + onSuccess: () => { + alert.show( + strings.revertChangesSuccessMessage, + { variant: 'success' }, + ); + }, + onFailure: (response) => { + const { + value: { messageForNotification }, + debugMessage, + } = response; + + alert.show( + strings.revertChangesfailedMessage, + { + variant: 'danger', + description: messageForNotification, + debugMessage, + }, + ); + }, + }); + + const handleRevertChangesFormSubmit = useCallback( + (formValues: PartialLocalUnitsRevertForm) => { + revertChanges(formValues as LocalUnitsRevertRequestPostBody); + }, + [revertChanges], + ); + const onDoneButtonClick = useCallback( () => { if (isDefined(localUnitDetailsResponse) && isDefined(localUnitsOptions)) { @@ -543,6 +604,7 @@ function LocalUnitsForm(props: Props) { const error = getErrorObject(formError); const healthFormError = getErrorObject(error?.health); + const revertChangesFormError = getErrorObject(revertChangesError); const submitButton = readOnly ? null : ( + )} )} @@ -1336,6 +1409,35 @@ function LocalUnitsForm(props: Props) { localUnitId={localUnitId} /> )} + {showRevertChangesModal && ( + + {strings.submitButtonLabel} + + )} + > +