From 1d3bf7e5a650e7aa331ad60c54c79fb6e4b8da48 Mon Sep 17 00:00:00 2001 From: Mariia_Aloshyna Date: Fri, 22 Sep 2023 12:53:57 +0300 Subject: [PATCH] UIDATIMP-1503: Match profile: update options for Item "Incoming records" UIDATIMP-1505: Match profile: update options for MARC Authority "Incoming records" --- CHANGELOG.md | 2 + .../RecordTypesSelect/RecordTypesSelect.js | 81 ++++++++-- .../components/CompareRecordSelect.js | 3 + .../components/CompareRecordSelect.test.js | 2 + .../components/IncomingRecordMenu.js | 7 +- .../components/IncomingRecordMenu.test.js | 2 + .../components/RecordItem.js | 3 + .../components/RecordItem.test.js | 2 + .../MatchProfiles/MatchProfilesForm.js | 31 ++-- .../MatchProfiles/MatchProfilesForm.test.js | 150 +++++++++--------- 10 files changed, 173 insertions(+), 110 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fcc8e5c90..01b522df2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,8 @@ * Extend schema for profile relations manipulations (UIDATIMP-1471) * Change validation messages which were represented in code format (UIDATIMP-1473) * *BREAKING* bump `react` to `v18`, and dev-deps accordingly (UIDATIMP-1485) +* Match profile: update options for Item "Incoming records" (UIDATIMP-1503) +* Match profile: update options for MARC Authority "Incoming records" (UIDATIMP-1505) * Update Node.js to v18 in GitHub Actions (UIDATIMP-1507) * leverage jest-config-stripes for all jest and testing-library packages (UIDATIMP-1508) * *BREAKING* bump `react-intl` to `v6.4.4` (UIDATIMP-1520) diff --git a/src/components/RecordTypesSelect/RecordTypesSelect.js b/src/components/RecordTypesSelect/RecordTypesSelect.js index c2d160038..73536cd18 100644 --- a/src/components/RecordTypesSelect/RecordTypesSelect.js +++ b/src/components/RecordTypesSelect/RecordTypesSelect.js @@ -2,11 +2,13 @@ import React, { memo, useState, useEffect, + useMemo, } from 'react'; import PropTypes from 'prop-types'; import { debounce, noop, + pick, } from 'lodash'; import { FOLIO_RECORD_TYPES } from '@folio/stripes-data-transfer-components'; @@ -19,7 +21,7 @@ import { MATCH_INCOMING_RECORD_TYPES } from '../../utils'; const useForceUpdate = () => useState()[1]; const useUpdateOnResize = () => { - // forceUpdate is used to re-render elements that are depending on DOM such as TreeLine + // forceUpdate is used to re-render elements that depend on DOM such as TreeLine const forceUpdate = useForceUpdate(); useEffect(() => { @@ -33,8 +35,8 @@ const useUpdateOnResize = () => { export const RecordTypesSelect = memo(({ id, - existingRecordType, - incomingRecordType, + existingRecordType: initialExistingRecord, + incomingRecordType: initialIncomingRecord, onExistingSelect, onIncomingSelect, isEditable, @@ -42,20 +44,66 @@ export const RecordTypesSelect = memo(({ const IS_LOCALE_LTR = document.dir === HTML_LANG_DIRECTIONS.LEFT_TO_RIGHT; useUpdateOnResize(); - const [existingRecord, setExistingRecord] = useState(undefined); - const [incomingRecord, setIncomingRecord] = useState(undefined); + const [existingRecord, setExistingRecord] = useState(FOLIO_RECORD_TYPES[initialExistingRecord]); + const [incomingRecord, setIncomingRecord] = useState(MATCH_INCOMING_RECORD_TYPES[initialIncomingRecord]); + const existingRecordType = existingRecord?.type; - useEffect(() => { - setExistingRecord(FOLIO_RECORD_TYPES?.[existingRecordType]); - }, [existingRecordType]); + const getIncomingRecordOptions = (recordType) => { + switch (recordType) { + case FOLIO_RECORD_TYPES.INSTANCE.type: { + return pick(MATCH_INCOMING_RECORD_TYPES, [ + MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type, + MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type, + ]); + } + case FOLIO_RECORD_TYPES.HOLDINGS.type: { + return pick(MATCH_INCOMING_RECORD_TYPES, [ + MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type, + MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type, + ]); + } + case FOLIO_RECORD_TYPES.ITEM.type: { + return pick(MATCH_INCOMING_RECORD_TYPES, [ + MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type, + MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type, + ]); + } + case FOLIO_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type: { + return pick(MATCH_INCOMING_RECORD_TYPES, [ + MATCH_INCOMING_RECORD_TYPES.MARC_BIBLIOGRAPHIC.type, + MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type, + ]); + } + case FOLIO_RECORD_TYPES.MARC_AUTHORITY.type: { + return pick(MATCH_INCOMING_RECORD_TYPES, [ + MATCH_INCOMING_RECORD_TYPES.MARC_AUTHORITY.type, + MATCH_INCOMING_RECORD_TYPES.STATIC_VALUE.type, + ]); + } + default: { + return MATCH_INCOMING_RECORD_TYPES; + } + } + }; - useEffect(() => { - setIncomingRecord(MATCH_INCOMING_RECORD_TYPES?.[incomingRecordType]); - }, [incomingRecordType]); + const incomingRecordOptions = useMemo( + () => getIncomingRecordOptions(existingRecordType), + [existingRecordType], + ); - const handleSelect = selectedRecord => { - setExistingRecord(selectedRecord); + const handleIncomingRecordSelect = selectedRecord => { + onIncomingSelect(selectedRecord); + setIncomingRecord(selectedRecord); + }; + + const handleExistingRecordSelect = selectedRecord => { onExistingSelect(selectedRecord); + setExistingRecord(selectedRecord); + + const updatedIncomingRecordOptions = getIncomingRecordOptions(selectedRecord.type); + const defaultIncomingRecord = Object.values(updatedIncomingRecordOptions)[0]; + + handleIncomingRecordSelect(defaultIncomingRecord); }; return ( @@ -69,8 +117,9 @@ export const RecordTypesSelect = memo(({ id={id} incomingRecord={incomingRecord} existingRecord={existingRecord} - setExistingRecord={handleSelect} - setIncomingRecord={onIncomingSelect} + setExistingRecord={handleExistingRecordSelect} + setIncomingRecord={handleIncomingRecordSelect} + incomingRecordOptions={incomingRecordOptions} isEditable={isEditable} isLocalLTR={IS_LOCALE_LTR} /> @@ -78,7 +127,7 @@ export const RecordTypesSelect = memo(({ : ( diff --git a/src/components/RecordTypesSelect/components/CompareRecordSelect.js b/src/components/RecordTypesSelect/components/CompareRecordSelect.js index 66a459870..0cc63daa9 100644 --- a/src/components/RecordTypesSelect/components/CompareRecordSelect.js +++ b/src/components/RecordTypesSelect/components/CompareRecordSelect.js @@ -38,6 +38,7 @@ export const CompareRecordSelect = memo(({ existingRecord, setExistingRecord, setIncomingRecord, + incomingRecordOptions, isEditable, isLocalLTR, }) => { @@ -145,6 +146,7 @@ export const CompareRecordSelect = memo(({ className={css.incomingRecord} style={{ height }} isEditable={isEditable} + incomingRecordOptions={incomingRecordOptions} />
diff --git a/src/components/RecordTypesSelect/components/IncomingRecordMenu.js b/src/components/RecordTypesSelect/components/IncomingRecordMenu.js index e2d7f7150..846033f2d 100644 --- a/src/components/RecordTypesSelect/components/IncomingRecordMenu.js +++ b/src/components/RecordTypesSelect/components/IncomingRecordMenu.js @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; -import { omit } from 'lodash'; import { Button, @@ -16,9 +15,8 @@ export const IncomingRecordMenu = ({ onToggle, keyHandler, dataAttributes, + incomingRecordOptions, }) => { - const incomingRecordTypes = omit(MATCH_INCOMING_RECORD_TYPES, MATCH_INCOMING_RECORD_TYPES.MARC_HOLDINGS.type); - return ( - {Object.keys(incomingRecordTypes).map((recordType, i) => { + {Object.keys(incomingRecordOptions).map((recordType, i) => { return (