Skip to content

Commit

Permalink
Add revert changes button in local unit form
Browse files Browse the repository at this point in the history
  • Loading branch information
@shreeyash07 @samshara
shreeyash07 authored and samshara committed Dec 18, 2024
1 parent 3a0cd23 commit a86e689
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 2 deletions.
6 changes: 6 additions & 0 deletions ...ontextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/i18n.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
106 changes: 104 additions & 2 deletions ...ontextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
isNotDefined,
} from '@togglecorp/fujs';
import {
createSubmitHandler,
getErrorObject,
getErrorString,
removeNull,
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -104,6 +108,7 @@ type ChangedFormField = {
const VisibilityOptions = (option: VisibilityOptions) => option.key;

const defaultHealthValue = {};
const defaultRevertChangesValue: PartialLocalUnitsRevertForm = {};

interface FormGridProps {
className?: string;
Expand Down Expand Up @@ -232,7 +237,7 @@ interface Props {

function LocalUnitsForm(props: Props) {
const {
readOnly = false,
readOnly: readOnlyFromProps = false,
onSuccess,
onEditButtonClick,
localUnitId,
Expand All @@ -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<HTMLDivElement>(null);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -404,6 +425,8 @@ function LocalUnitsForm(props: Props) {
},
});

const readOnly = readOnlyFromProps || localUnitDetailsResponse?.is_locked;

const {
response: localUnitsOptions,
pending: localUnitsOptionsPending,
Expand Down Expand Up @@ -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)) {
Expand All @@ -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 : (
<Button
Expand Down Expand Up @@ -575,7 +637,9 @@ function LocalUnitsForm(props: Props) {

return (
<div className={styles.localUnitsForm}>
{readOnly && isDefined(actionsContainerRef.current) && (
{!localUnitDetailsResponse?.is_locked
&& readOnlyFromProps
&& isDefined(actionsContainerRef.current) && (
<Portal container={actionsContainerRef.current}>
{(environment !== 'production') && (
<Button
Expand Down Expand Up @@ -680,6 +744,15 @@ function LocalUnitsForm(props: Props) {
readOnly={!pristine}
/>
)}
{localUnitDetailsResponse?.is_locked && (
<Button
name={undefined}
onClick={setShowRevertChangesModalTrue}
variant="secondary"
>
{strings.revertButtonLabel}
</Button>
)}
</div>
)}
</FormGrid>
Expand Down Expand Up @@ -1336,6 +1409,35 @@ function LocalUnitsForm(props: Props) {
localUnitId={localUnitId}
/>
)}
{showRevertChangesModal && (
<Modal
heading={strings.revertChangesModalHeading}
headerDescription={strings.revertChangesContentQuestion}
onClose={setShowRevertChangesModalFalse}
footerActions={(
<Button
name={undefined}
onClick={createSubmitHandler(
revertChangesValidate,
setRevertChangesError,
handleRevertChangesFormSubmit,
)}
disabled={revertChangesPending}
>
{strings.submitButtonLabel}
</Button>
)}
>
<TextArea
name="reason"
required
label={strings.reasonLabel}
value={revertChangesValue.reason}
onChange={setRevertChangesFieldValue}
error={getErrorString(revertChangesFormError?.reason)}
/>
</Modal>
)}
{showChangesModal && (
<Modal
heading={strings.confirmChangesModalHeading}
Expand Down
16 changes: 16 additions & 0 deletions ...ontextAndStructure/NationalSocietyLocalUnits/LocalUnitsFormModal/LocalUnitsForm/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
type ObjectSchema,
type PartialForm,
type PurgeNull,
requiredStringCondition,
urlCondition,
} from '@togglecorp/toggle-form';

Expand All @@ -28,6 +29,8 @@ export type LocalUnitsRequestPostBody = GoApiBody<'/api/v2/local-units/', 'POST'
lat: number;
}
};

export type LocalUnitsRevertRequestPostBody = GoApiBody<'/api/v2/local-units/{id}/revert/', 'POST'>;
type TypeOfLocalUnits = components<'read'>['schemas']['LocalUnitType']['code'];

export type PartialLocalUnits = PartialForm<
Expand All @@ -42,6 +45,19 @@ export const TYPE_HEALTH_CARE = 2 satisfies TypeOfLocalUnits;
// const TYPE_TRAINING_AND_EDUCATION = 5 satisfies TypeOfLocalUnits;
// const TYPE_OTHER = 6 satisfies TypeOfLocalUnits;

export type PartialLocalUnitsRevertForm = PartialForm<LocalUnitsRevertRequestPostBody>;
type LocalUnitsRevertFormSchema = ObjectSchema<PartialLocalUnitsRevertForm>;
type LocalUnitRevertSchemaFields = ReturnType<LocalUnitsRevertFormSchema['fields']>;

export const revertSchema: LocalUnitsRevertFormSchema = {
fields: (): LocalUnitRevertSchemaFields => ({
reason: {
required: true,
requiredValidation: requiredStringCondition,
},
}),
};

type LocalUnitsFormSchema = ObjectSchema<PartialLocalUnits>;
type LocalUnitsFormSchemaFields = ReturnType<LocalUnitsFormSchema['fields']>;
type LocalUnitsHealthFormSchema = ObjectSchema<NonNullable<PartialLocalUnits['health']>>;
Expand Down

0 comments on commit a86e689

Please sign in to comment.