diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f01046f..5f14b571 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ * [UIBULKED-589](https://folio-org.atlassian.net/browse/UIBULKED-589) Make options in the "Actions" dropdown in "Bulk edits" in alphabetical order. * [UIBULKED-588](https://folio-org.atlassian.net/browse/IBULKED-588) Displaying errors and warnings. * [UIBULKED-570](https://folio-org.atlassian.net/browse/UIBULKED-570) Downloading files from Logs tab +* [UIBULKED-605](https://folio-org.atlassian.net/browse/UIBULKED-605) Enabling Confirm changes button based on forms state. ## [4.2.2](https://github.com/folio-org/ui-bulk-edit/tree/v4.2.2) (2024-11-15) diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers.js index cfaa0bf0..4842ab10 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers.js +++ b/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers.js @@ -398,6 +398,10 @@ export const isContentUpdatesFormValid = (contentUpdates) => { }); }; +export const isMarcContentUpdatesFormValid = (errors) => { + return Object.keys(errors).length === 0; +}; + export const getFilteredFields = (initialFields) => { return initialFields.map(f => { const uniqOptions = new Set(initialFields.map(i => i.option)); diff --git a/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js b/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js index 848832fa..5ed16f42 100644 --- a/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js +++ b/src/components/BulkEditPane/BulkEditMarcLayer/BulkEditMarcLayer.js @@ -1,7 +1,8 @@ import React, { useState } from 'react'; -import PropTypes from 'prop-types'; import { useIntl } from 'react-intl'; +import PropTypes from 'prop-types'; import uniqueId from 'lodash/uniqueId'; +import { omit, isEqual } from 'lodash'; import { BulkEditLayer } from '../BulkEditListResult/BulkEditInAppLayer/BulkEditLayer'; import { BulkEditMarc } from '../BulkEditListResult/BulkEditMarc/BulkEditMarc'; @@ -13,14 +14,20 @@ import { useContentUpdate } from '../../../hooks/api'; import { getContentUpdatesBody, getMappedContentUpdates, - isContentUpdatesFormValid + isContentUpdatesFormValid, + isMarcContentUpdatesFormValid } from '../BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers'; -import { getMarcFormErrors } from '../BulkEditListResult/BulkEditMarc/validation'; -import { getAdministrativeDataOptions } from '../../../constants'; import { sortAlphabetically } from '../../../utils/sortAlphabetically'; import { BulkEditPreviewModalFooter } from '../BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalFooter'; import { useCommitChanges } from '../../../hooks/useCommitChanges'; - +import { getAdministrativeDataOptions } from '../../../constants'; +import { getMarcFormErrors } from '../BulkEditListResult/BulkEditMarc/validation'; +import { + ADMINISTRATIVE_DEFAULT_BODY, + ADMINISTRATIVE_FORM_INITIAL_STATE, + MARC_DEFAULT_BODY, + MARC_FORM_INITIAL_STATE +} from '../../../constants/forms'; export const BulkEditMarcLayer = ({ bulkOperationId, @@ -40,11 +47,24 @@ export const BulkEditMarcLayer = ({ const sortedOptions = sortAlphabetically(options); const marcFormErrors = getMarcFormErrors(marcFields); + const marcContentUpdates = marcFields.map(getTransformedField); + const marcContentUpdatesWithoutId = marcContentUpdates.map(item => omit(item, ['id'])); const contentUpdates = getMappedContentUpdates(fields, options); - const isMarcFieldsValid = Object.keys(marcFormErrors).length === 0; + const isMarcFormValid = isMarcContentUpdatesFormValid(marcFormErrors); const isAdministrativeFormValid = isContentUpdatesFormValid(contentUpdates); - const isAnyFormValid = isMarcFieldsValid || isAdministrativeFormValid; + + const isAdministrativeFormPristine = isEqual(ADMINISTRATIVE_FORM_INITIAL_STATE, contentUpdates); + const isMarcFormPristine = isEqual(MARC_FORM_INITIAL_STATE, marcContentUpdatesWithoutId); + + const areBothFormsValid = isAdministrativeFormValid && isMarcFormValid; + const isOnlyAdministrativeValid = isAdministrativeFormValid && isMarcFormPristine; + const isOnlyMarcFormValid = isMarcFormValid && isAdministrativeFormPristine; + + // we can confirm the changes if either: + // both forms are changed-and-valid + // one is changed-and-valid and the other pristine + const areFormsStateValid = isOnlyAdministrativeValid || isOnlyMarcFormValid || areBothFormsValid; const { isPreviewModalOpened, @@ -69,32 +89,21 @@ export const BulkEditMarcLayer = ({ const areMarcAndCsvReady = hasBothFiles && isPreviewSettled; const handleConfirm = () => { - const bulkOperationMarcRules = marcFields - .map(field => ({ - bulkOperationId, - ...getTransformedField(field), - })); - - const marcDefaultBody = { - bulkOperationMarcRules: [], - totalRecords: 0, - }; - - const administrativeDefaultBody = { - bulkOperationRules: [], - totalRecords: 0, - }; - - const marcUpdateBody = isMarcFieldsValid ? { + const bulkOperationMarcRules = marcContentUpdates.map((item) => ({ + bulkOperationId, + ...item + })); + + const marcUpdateBody = isMarcFormValid ? { bulkOperationMarcRules, totalRecords, - } : marcDefaultBody; + } : MARC_DEFAULT_BODY; const administrativeBody = isAdministrativeFormValid ? getContentUpdatesBody({ bulkOperationId, contentUpdates, totalRecords, - }) : administrativeDefaultBody; + }) : ADMINISTRATIVE_DEFAULT_BODY; const updateSequence = () => contentUpdate(administrativeBody) .then(() => marcContentUpdate(marcUpdateBody)); @@ -106,7 +115,7 @@ export const BulkEditMarcLayer = ({ <>