diff --git a/CHANGELOG.md b/CHANGELOG.md index 7eb8b9e5..67acb72a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -40,6 +40,7 @@ * [UIQM-701](https://issues.folio.org/browse/UIQM-701) Use new GA workflows. * [UIQM-711](https://issues.folio.org/browse/UIQM-711) Update `validateFixedFieldPositions` to display all 008 field errors instead of one in Bibliographic records. * [UIQM-712](https://issues.folio.org/browse/UIQM-712) In field 007 for Projected Graphic type: change the `MfS` field type to `Byte` to allow only 1 character to be entered. +* [UIQM-715](https://issues.folio.org/browse/UIQM-715) Reuse existing ids for fields after saving a record to avoid re-rendering and be able to focus on a field by ref. ## [8.0.1] (https://github.com/folio-org/ui-quick-marc/tree/v8.0.1) (2024-04-18) diff --git a/src/QuickMarcEditor/QuickMarcEditWrapper.js b/src/QuickMarcEditor/QuickMarcEditWrapper.js index 85531437..78ca823a 100644 --- a/src/QuickMarcEditor/QuickMarcEditWrapper.js +++ b/src/QuickMarcEditor/QuickMarcEditWrapper.js @@ -224,7 +224,9 @@ const QuickMarcEditWrapper = ({ }); } - await refreshPageData(); + const fieldIds = formValuesToHydrate.records.slice(1).map(field => field.id); + + await refreshPageData(fieldIds); return { version: parseInt(formValuesToSave.relatedRecordVersion, 10) + 1 }; }) diff --git a/src/QuickMarcEditor/QuickMarcEditWrapper.test.js b/src/QuickMarcEditor/QuickMarcEditWrapper.test.js index d7176c3c..7b816cea 100644 --- a/src/QuickMarcEditor/QuickMarcEditWrapper.test.js +++ b/src/QuickMarcEditor/QuickMarcEditWrapper.test.js @@ -314,6 +314,7 @@ jest.mock('@folio/stripes/final-form', () => () => (Component) => ({ }); const mockShowCallout = jest.fn(); +const mockRefreshPageData = jest.fn().mockResolvedValue(); jest.mock('@folio/stripes-acq-components', () => ({ ...jest.requireActual('@folio/stripes-acq-components'), @@ -384,7 +385,7 @@ const renderQuickMarcEditWrapper = ({ location={{}} locations={locations} externalRecordPath="/some-record" - refreshPageData={jest.fn().mockResolvedValue()} + refreshPageData={mockRefreshPageData} fixedFieldSpec={mockSpecs[marcType]} onCheckCentralTenantPerm={mockOnCheckCentralTenantPerm} {...renderProps} @@ -474,6 +475,24 @@ describe('Given QuickMarcEditWrapper', () => { expect(mockOnClose).not.toHaveBeenCalled(); expect(mockOnSave).not.toHaveBeenCalled(); }); + + it('pass ids of fields to the refreshPageData', async () => { + const mockOnClose = jest.fn(); + const mockOnSave = jest.fn(); + + const { getByText } = renderQuickMarcEditWrapper({ + instance, + mutator, + onClose: mockOnClose, + onSave: mockOnSave, + }); + + await act(async () => { fireEvent.click(getByText('ui-quick-marc.record.save.continue')); }); + + const fieldIds = mockRecords[MARC_TYPES.BIB].slice(1).map(field => field.id); + + expect(mockRefreshPageData).toHaveBeenCalledWith(fieldIds); + }); }); describe('when click on save button', () => { diff --git a/src/QuickMarcEditor/QuickMarcEditor.js b/src/QuickMarcEditor/QuickMarcEditor.js index 18901adb..395d357a 100644 --- a/src/QuickMarcEditor/QuickMarcEditor.js +++ b/src/QuickMarcEditor/QuickMarcEditor.js @@ -514,7 +514,7 @@ const QuickMarcEditor = ({ { + const loadData = useCallback(async (fieldIds) => { const path = action === QUICK_MARC_ACTIONS.CREATE && marcType === MARC_TYPES.HOLDINGS ? EXTERNAL_INSTANCE_APIS[MARC_TYPES.BIB] : EXTERNAL_INSTANCE_APIS[marcType]; @@ -172,7 +172,12 @@ const QuickMarcEditorContainer = ({ if (action === QUICK_MARC_ACTIONS.CREATE) { dehydratedMarcRecord = createRecordDefaults[marcType](instanceResponse, fixedFieldSpecResponse); } else { - dehydratedMarcRecord = dehydrateMarcRecordResponse(marcRecordResponse, marcType, fixedFieldSpecResponse); + dehydratedMarcRecord = dehydrateMarcRecordResponse( + marcRecordResponse, + marcType, + fixedFieldSpecResponse, + fieldIds, + ); } const formattedMarcRecord = formatMarcRecordByQuickMarcAction(dehydratedMarcRecord, action, marcType); diff --git a/src/QuickMarcEditor/utils.js b/src/QuickMarcEditor/utils.js index 285c95a5..4b6ee723 100644 --- a/src/QuickMarcEditor/utils.js +++ b/src/QuickMarcEditor/utils.js @@ -1159,7 +1159,7 @@ export const isReadOnly = ( return rows.has(recordRow.tag) || isLastRecord(recordRow); }; -const addLeaderFieldAndIdToRecords = (marcRecordResponse) => { +const addLeaderFieldAndIdToRecords = (marcRecordResponse, fieldIds) => { const marcType = marcRecordResponse.marcFormat.toLowerCase(); const leader = convertLeaderToObject(marcType, marcRecordResponse.leader); @@ -1173,17 +1173,17 @@ const addLeaderFieldAndIdToRecords = (marcRecordResponse) => { content: leader, id: LEADER_TAG, }, - ...marcRecordResponse.fields.map(record => ({ + ...marcRecordResponse.fields.map((record, index) => ({ ...record, - id: uuidv4(), + id: fieldIds?.[index] || uuidv4(), })), ], }; }; -export const dehydrateMarcRecordResponse = (marcRecordResponse, marcType, fixedFieldSpec) => ( +export const dehydrateMarcRecordResponse = (marcRecordResponse, marcType, fixedFieldSpec, fieldIds) => ( flow( - addLeaderFieldAndIdToRecords, + marcRecord => addLeaderFieldAndIdToRecords(marcRecord, fieldIds), marcRecord => autopopulateFixedField(marcRecord, marcType, fixedFieldSpec), autopopulatePhysDescriptionField, autopopulateMaterialCharsField, diff --git a/src/QuickMarcEditor/utils.test.js b/src/QuickMarcEditor/utils.test.js index 8011e252..b4082e71 100644 --- a/src/QuickMarcEditor/utils.test.js +++ b/src/QuickMarcEditor/utils.test.js @@ -120,6 +120,56 @@ describe('QuickMarcEditor utils', () => { Date2: '\\\\\\\\', }); }); + + it('should reuse existing ids for fields if they are available', () => { + const marcRecord = { + id: faker.random.uuid(), + marcFormat: MARC_TYPES.BIB.toUpperCase(), + leader: bibLeaderString, + fields: [ + { + id: 'id-1', + tag: '001', + content: '$a fss $b asd', + }, + { + id: 'id-2', + tag: '006', + content: { + Type: 'c', + }, + }, + { + tag: '007', + content: { + Category: 'c', + }, + }, + { + tag: '008', + content: {}, + }, + ], + }; + + const fieldIds = ['id-1', 'id-2']; + + const dehydratedMarcRecord = utils.dehydrateMarcRecordResponse( + marcRecord, + MARC_TYPES.BIB, + fixedFieldSpecBib, + fieldIds, + ); + const field001 = dehydratedMarcRecord.records[1]; + const field006 = dehydratedMarcRecord.records[2]; + const field007 = dehydratedMarcRecord.records[3]; + const field008 = dehydratedMarcRecord.records[4]; + + expect(field001.id).toBe('id-1'); + expect(field006.id).toBe('id-2'); + expect(field007.id).toBe('uuid'); + expect(field008.id).toBe('uuid'); + }); }); describe('hydrateMarcRecord', () => {