Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UIORGS-449 Add a Save & keep editing button #677

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

UIORGS-449 Add a Save & keep editing button #677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* React v19: refactor away from react-test-renderer. Refs UIORGS-433.
* React v19: refactor away from default props for functional components. Refs UIORGS-434.
* Migrate to shared GA workflows. Refs UIORGS-458.
* Add a Save & keep editing button. Refs UIORGS-449.

## [5.2.0](https://github.com/folio-org/ui-organizations/tree/v5.2.0) (2024-10-31)
[Full Changelog](https://github.com/folio-org/ui-organizations/compare/v5.1.1...v5.2.0)
Expand Down
82 changes: 53 additions & 29 deletions src/Organizations/OrganizationCreate/OrganizationCreate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,16 @@ import { withRouter } from 'react-router-dom';
import { stripesConnect } from '@folio/stripes/core';
import { useShowCallout } from '@folio/stripes-acq-components';

import { VIEW_ORG_DETAILS } from '../../common/constants';
import {
ORGANIZATIONS_ROUTE,
VIEW_ORG_DETAILS,
} from '../../common/constants';
import { organizationsResource } from '../../common/resources';
import { BANKING_INFORMATION_FIELD_NAME } from '../constants';
import {
BANKING_INFORMATION_FIELD_NAME,
SUBMIT_ACTION,
SUBMIT_ACTION_FIELD_NAME,
} from '../constants';
import { handleSaveErrorResponse } from '../handleSaveErrorResponse';
import { OrganizationForm } from '../OrganizationForm';
import { useBankingInformationManager } from '../useBankingInformationManager';
Expand All @@ -32,6 +39,13 @@ const INITIAL_VALUES = {
export const OrganizationCreate = ({ history, location, mutator }) => {
const { manageBankingInformation } = useBankingInformationManager();

const saveAndKeepEditingHandler = useCallback((id) => {
history.push({
pathname: `${ORGANIZATIONS_ROUTE}/${id}/edit`,
search: location.search,
});
}, [history, location.search]);

const cancelForm = useCallback(
(id) => {
history.push({
Expand All @@ -46,34 +60,44 @@ export const OrganizationCreate = ({ history, location, mutator }) => {
const showCallout = useShowCallout();
const intl = useIntl();

const createOrganization = useCallback(
(values, { getFieldState }) => {
const { [BANKING_INFORMATION_FIELD_NAME]: bankingInformation, ...data } = values;

return mutator.createOrganizationOrg.POST(data)
.then(async organization => {
await manageBankingInformation({
initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME)?.initial,
bankingInformation,
organization,
});

return organization;
})
.then(organization => {
setTimeout(() => cancelForm(organization.id));
showCallout({
messageId: 'ui-organizations.save.success',
values: { organizationName: organization.name },
});
})
.catch(async e => {
await handleSaveErrorResponse(intl, showCallout, e);
const createOrganization = useCallback((
{ [SUBMIT_ACTION_FIELD_NAME]: submitAction, ...values },
{ getFieldState },
) => {
const { [BANKING_INFORMATION_FIELD_NAME]: bankingInformation, ...data } = values;

return mutator.createOrganizationOrg.POST(data)
.then(async organization => {
await manageBankingInformation({
initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME)?.initial,
bankingInformation,
organization,
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cancelForm, intl, manageBankingInformation, showCallout],
);

return organization;
})
.then(organization => {
showCallout({
messageId: 'ui-organizations.save.success',
values: { organizationName: organization.name },
});

switch (submitAction) {
case SUBMIT_ACTION.saveAndKeepEditing:
setTimeout(() => saveAndKeepEditingHandler(organization.id));
break;
case SUBMIT_ACTION.saveAndClose:
default:
setTimeout(() => cancelForm(organization.id));
break;
}
})
.catch(async e => {
await handleSaveErrorResponse(intl, showCallout, e);
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cancelForm, intl, manageBankingInformation, saveAndKeepEditingHandler, showCallout]);

const initialValues = useMemo(() => ({
[BANKING_INFORMATION_FIELD_NAME]: [],
Expand Down
107 changes: 70 additions & 37 deletions src/Organizations/OrganizationEdit/OrganizationEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,17 @@ import {
useShowCallout,
} from '@folio/stripes-acq-components';

import { VIEW_ORG_DETAILS } from '../../common/constants';
import {
ORGANIZATIONS_ROUTE,
VIEW_ORG_DETAILS,
} from '../../common/constants';
import { useOrganizationBankingInformation } from '../../common/hooks';
import { organizationResourceByUrl } from '../../common/resources';
import { BANKING_INFORMATION_FIELD_NAME } from '../constants';
import {
BANKING_INFORMATION_FIELD_NAME,
SUBMIT_ACTION,
SUBMIT_ACTION_FIELD_NAME,
} from '../constants';
import { OrganizationForm } from '../OrganizationForm';
import { handleSaveErrorResponse } from '../handleSaveErrorResponse';
import { useBankingInformationManager } from '../useBankingInformationManager';
Expand All @@ -42,17 +49,32 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
isLoading: isBankingInformationLoading,
} = useOrganizationBankingInformation(organizationId);

useEffect(
() => {
mutator.editOrganizationOrg.GET()
.then(organizationsResponse => {
setOrganization(organizationsResponse);
})
.finally(() => setIsOrganizationLoading(false));
},
const fetchOrganization = useCallback(() => {
setIsOrganizationLoading(true);

return mutator.editOrganizationOrg.GET()
.then(organizationsResponse => {
setOrganization(organizationsResponse);
})
.finally(() => setIsOrganizationLoading(false));
// eslint-disable-next-line react-hooks/exhaustive-deps
[],
);
}, []);

useEffect(() => {
fetchOrganization();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const saveAndKeepEditingHandler = useCallback(() => {
fetchOrganization();

history.push({
pathname: `${ORGANIZATIONS_ROUTE}/${organizationId}/edit`,
search: location.search,
});

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fetchOrganization, location.search, organizationId]);

const cancelForm = useCallback(
() => {
Expand All @@ -66,32 +88,42 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
[location.search],
);

const updateOrganization = useCallback(
(values, { getFieldState }) => {
const { [BANKING_INFORMATION_FIELD_NAME]: bankingInformation, ...data } = values;

return mutator.editOrganizationOrg.PUT(data)
.then(() => {
return manageBankingInformation({
initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME)?.initial,
bankingInformation,
organization: values,
});
})
.then(() => {
setTimeout(cancelForm);
showCallout({
messageId: 'ui-organizations.save.success',
values: { organizationName: data.name },
});
})
.catch(async e => {
await handleSaveErrorResponse(intl, showCallout, e);
const updateOrganization = useCallback((
{ [SUBMIT_ACTION_FIELD_NAME]: submitAction, ...values },
{ getFieldState },
) => {
const { [BANKING_INFORMATION_FIELD_NAME]: bankingInformation, ...data } = values;

return mutator.editOrganizationOrg.PUT(data)
.then(() => {
return manageBankingInformation({
initBankingInformation: getFieldState(BANKING_INFORMATION_FIELD_NAME)?.initial,
bankingInformation,
organization: values,
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cancelForm, intl, manageBankingInformation, showCallout],
);
})
.then(() => {
showCallout({
messageId: 'ui-organizations.save.success',
values: { organizationName: data.name },
});

switch (submitAction) {
case SUBMIT_ACTION.saveAndKeepEditing:
setTimeout(saveAndKeepEditingHandler);
break;
case SUBMIT_ACTION.saveAndClose:
default:
setTimeout(cancelForm);
break;
}
})
.catch(async e => {
await handleSaveErrorResponse(intl, showCallout, e);
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cancelForm, intl, manageBankingInformation, saveAndKeepEditingHandler, showCallout]);

const initialValues = useMemo(() => ({
[BANKING_INFORMATION_FIELD_NAME]: bankingInformationData,
Expand All @@ -111,6 +143,7 @@ export const OrganizationEdit = ({ match, history, location, mutator }) => {
return (
<OrganizationForm
initialValues={initialValues}
isSubmitDisabled={isOrganizationLoading}
onSubmit={updateOrganization}
cancelForm={cancelForm}
paneTitle={<FormattedMessage id="ui-organizations.editOrg.title" values={{ name: organization.name }} />}
Expand Down
Loading
Loading