diff --git a/CHANGELOG.md b/CHANGELOG.md index 60577005..9465c947 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## 5.3.0 (IN PROGRESS) +* Display all versions in change log in fourth pane. Refs UIORGS-355. + ## [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) diff --git a/src/Organizations/OrganizationDetails/OrganizationDetails.js b/src/Organizations/OrganizationDetails/OrganizationDetails.js index d0990cf8..fca690ff 100644 --- a/src/Organizations/OrganizationDetails/OrganizationDetails.js +++ b/src/Organizations/OrganizationDetails/OrganizationDetails.js @@ -39,10 +39,12 @@ import { TagsPane, useAcqRestrictions, useModalToggle, + VersionHistoryButton, } from '@folio/stripes-acq-components'; import { NOTES_ROUTE, + ORGANIZATION_VERSIONS_VIEW_ROUTE, ORGANIZATIONS_ROUTE, } from '../../common/constants'; import { @@ -135,6 +137,13 @@ const OrganizationDetails = ({ if (isDetailsPaneInFocus) paneTitleRef.current.focus(); }, [isDetailsPaneInFocus]); + const openVersionHistory = useCallback(() => { + history.push({ + pathname: ORGANIZATION_VERSIONS_VIEW_ROUTE.replace(':id', organization.id), + search: location.search, + }); + }, [history, location.search, organization.id]); + const getActionMenu = useCallback( ({ onToggle }) => { return ( @@ -200,6 +209,7 @@ const OrganizationDetails = ({ tagsQuantity={get(organization, 'tags.tagList', []).length} tagsToggle={toggleTagsPane} /> + ); diff --git a/src/Organizations/OrganizationVersion/OrganizationVersion.js b/src/Organizations/OrganizationVersion/OrganizationVersion.js new file mode 100644 index 00000000..35c5b956 --- /dev/null +++ b/src/Organizations/OrganizationVersion/OrganizationVersion.js @@ -0,0 +1,107 @@ +import get from 'lodash/get'; +import { + memo, + useCallback, +} from 'react'; +import ReactRouterPropTypes from 'react-router-prop-types'; + +import { + useOrganization, + VersionHistoryPane, + VersionView, + VersionViewContextProvider, +} from '@folio/stripes-acq-components'; +import { TitleManager } from '@folio/stripes/core'; + +import { + ORGANIZATION_VERSIONS_VIEW_ROUTE, + ORGANIZATIONS_ROUTE, + VIEW_ORG_DETAILS, +} from '../../common/constants'; +import { HIDDEN_FIELDS_FOR_VERSION_HISTORY } from '../constants'; +import { useOrganizationVersions } from './hooks'; + +const OrganizationVersion = ({ + history, + location, + match, +}) => { + const { id: organizationId, versionId } = match.params; + const snapshotPath = 'organizationSnapshot.map'; + + const { + isLoading: isOrganizationLoading, + organization, + } = useOrganization(organizationId); + + const onHistoryClose = useCallback(() => history.push({ + pathname: `${VIEW_ORG_DETAILS}${organizationId}`, + search: location.search, + }), [history, location.search, organizationId]); + + const onVersionClose = useCallback(() => history.push({ + pathname: ORGANIZATIONS_ROUTE, + search: location.search, + }), [history, location.search]); + + const onSelectVersion = useCallback((_versionId) => { + history.push({ + pathname: `${ORGANIZATION_VERSIONS_VIEW_ROUTE}/${_versionId}`, + search: location.search, + }); + }, [history, location.search]); + + const { + versions, + isLoading: isHistoryLoading, + } = useOrganizationVersions(organizationId, { + onSuccess: ({ organizationAuditEvents }) => { + if (!versionId && organizationAuditEvents[0]?.id) onSelectVersion(organizationAuditEvents[0].id); + }, + }); + + const isVersionLoading = ( + isOrganizationLoading || isHistoryLoading + ); + + return ( + + + + {/* TODO: https://folio-org.atlassian.net/browse/UIORGS-356 */} + + + + + ); +}; + +OrganizationVersion.propTypes = { + history: ReactRouterPropTypes.history, + location: ReactRouterPropTypes.location, + match: ReactRouterPropTypes.match, +}; + +export default memo(OrganizationVersion); diff --git a/src/Organizations/OrganizationVersion/hooks/index.js b/src/Organizations/OrganizationVersion/hooks/index.js new file mode 100644 index 00000000..ecff7cfd --- /dev/null +++ b/src/Organizations/OrganizationVersion/hooks/index.js @@ -0,0 +1 @@ +export { useOrganizationVersions } from './useOrganizationVersions'; diff --git a/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js new file mode 100644 index 00000000..ecff7cfd --- /dev/null +++ b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/index.js @@ -0,0 +1 @@ +export { useOrganizationVersions } from './useOrganizationVersions'; diff --git a/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/useOrganizationVersions.js b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/useOrganizationVersions.js new file mode 100644 index 00000000..ba5d1ccc --- /dev/null +++ b/src/Organizations/OrganizationVersion/hooks/useOrganizationVersions/useOrganizationVersions.js @@ -0,0 +1,34 @@ +import { useQuery } from 'react-query'; + +import { + useNamespace, + useOkapiKy, +} from '@folio/stripes/core'; + +import { AUDIT_ACQ_EVENTS_API } from '@folio/stripes-acq-components'; + +const DEFAULT_DATA = []; + +export const useOrganizationVersions = (organizationId, options = {}) => { + const ky = useOkapiKy(); + const [namespace] = useNamespace({ key: 'organization-versions' }); + + const searchParams = { + sortBy: 'event_date', + sortOrder: 'desc', + }; + + const { isLoading, data } = useQuery( + [namespace, organizationId], + ({ signal }) => ky.get(`${AUDIT_ACQ_EVENTS_API}/organization/${organizationId}`, { signal, searchParams }).json(), + { + enabled: Boolean(organizationId), + ...options, + }, + ); + + return { + isLoading, + versions: data?.organizationAuditEvents || DEFAULT_DATA, + }; +}; diff --git a/src/Organizations/OrganizationVersion/index.js b/src/Organizations/OrganizationVersion/index.js new file mode 100644 index 00000000..8a312a96 --- /dev/null +++ b/src/Organizations/OrganizationVersion/index.js @@ -0,0 +1 @@ +export { default as OrganizationVersion } from './OrganizationVersion'; diff --git a/src/Organizations/OrganizationsList/OrganizationsList.js b/src/Organizations/OrganizationsList/OrganizationsList.js index d054d860..2b4522f8 100644 --- a/src/Organizations/OrganizationsList/OrganizationsList.js +++ b/src/Organizations/OrganizationsList/OrganizationsList.js @@ -44,10 +44,12 @@ import { } from '@folio/plugin-find-organization'; import { + ORGANIZATION_VERSIONS_VIEW_ROUTE, ORGANIZATIONS_ROUTE, VIEW_ORG_DETAILS, } from '../../common/constants'; import { OrganizationDetailsContainer } from '../OrganizationDetails'; +import { OrganizationVersion } from '../OrganizationVersion'; import OrganizationsListLastMenu from './OrganizationsListLastMenu'; const resultsPaneTitle = ; @@ -251,9 +253,16 @@ const OrganizationsList = ({ + + ); diff --git a/src/Organizations/constants.js b/src/Organizations/constants.js index 9f59e372..809620ae 100644 --- a/src/Organizations/constants.js +++ b/src/Organizations/constants.js @@ -46,3 +46,5 @@ export const MAP_FIELD_ACCORDION = { }; export const BANKING_INFORMATION_FIELD_NAME = 'bankingInformation'; + +export const HIDDEN_FIELDS_FOR_VERSION_HISTORY = []; diff --git a/src/common/constants/routes.js b/src/common/constants/routes.js index 455f24f9..c7e40458 100644 --- a/src/common/constants/routes.js +++ b/src/common/constants/routes.js @@ -1,3 +1,4 @@ export const NOTES_ROUTE = '/organizations/notes'; export const ORGANIZATIONS_ROUTE = '/organizations'; export const VIEW_ORG_DETAILS = '/organizations/view/'; +export const ORGANIZATION_VERSIONS_VIEW_ROUTE = `${VIEW_ORG_DETAILS}:id/versions`;