UIEH-1442: Package Record - Title List view - Apply MCL component, ad…

…d display of managed, custom coverage dates. (#1759)

CHANGELOG.md

@@ -1,10 +1,11 @@
 # Change history for ui-eholdings
 
-## [10.1.0] (IN PROGRESS)
+## [11.0.0] (IN PROGRESS)
 
 * Add `target="_blank"` to the `New` button of agreements accordion. (UIEH-1446)
 * Remove `shouldFocus` HOC and all related code. (UIEH-1444)
-* Package Record - Title List Accordion - Improve Visibility of Search Within/Filter/Sort options. (UIEH-1440)
+* *BREAKING* Package Record - Title List Accordion - Improve Visibility of Search Within/Filter/Sort options. (UIEH-1440)
+* *BREAKING* Package Record - Title List view - Apply MCL component, add display of managed, custom coverage dates. (UIEH-1442)
 
 ## [10.0.1] (https://github.com/folio-org/ui-eholdings/tree/v10.0.1) (2024-11-12)
 

src/components/custom-labels-section/custom-labels-edit-section.js

@@ -19,7 +19,7 @@ class CustomLabelsEditSection extends Component {
         id: PropTypes.number,
       })
     })).isRequired,
-  }
+  };
 
   validateStringLength = (value) => {
     const message = (
@@ -30,7 +30,7 @@ class CustomLabelsEditSection extends Component {
     );
 
     return value && value.length > CUSTOM_LABELS_VALUE_MAX_LENGTH ? message : undefined;
-  }
+  };
 
   render() {
     const {

src/components/custom-labels-section/custom-labels-show-section.js

@@ -19,7 +19,7 @@ export default class CustomLabelsShowSection extends Component {
       }),
     })).isRequired,
     userDefinedFields: PropTypes.objectOf(PropTypes.string).isRequired,
-  }
+  };
 
   render() {
     const {

src/components/details-view/details-view.js

@@ -75,7 +75,7 @@ class DetailsView extends Component {
 
   static defaultProps = {
     searchModal: null,
-  }
+  };
 
   // used to focus the heading when the model loads
   $heading = createRef(); // eslint-disable-line react/sort-comp
@@ -105,7 +105,6 @@ class DetailsView extends Component {
   renderAccordionHeader = (props) => (
     <AccordionListHeader
       {...props}
-      isLoading={this.props.accordionHeaderLoading}
     />
   );
 
@@ -131,7 +130,7 @@ class DetailsView extends Component {
         )}
       </FormattedMessage>
     );
-  }
+  };
 
   renderItemData() {
     const {

src/components/inline-form/inline-form.js

@@ -11,7 +11,7 @@ export default class InlineForm extends Component {
     onCancel: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
     pristine: PropTypes.bool.isRequired
-  }
+  };
 
   render() {
     const {

src/components/package/_fields/custom-coverage/package-coverage-fields.js

@@ -40,7 +40,7 @@ class PackageCoverageFields extends Component {
     });
 
     return errorArray;
-  }
+  };
 
   validateCoverageDate = (value) => {
     const { intl } = this.props;
@@ -58,7 +58,7 @@ class PackageCoverageFields extends Component {
     }
 
     return errors;
-  }
+  };
 
   renderField = (dateRange, index) => {
     return (
@@ -111,7 +111,7 @@ class PackageCoverageFields extends Component {
         </Col>
       </Row>
     );
-  }
+  };
 
   renderRepeatableField = ({ fields, meta: { initial } }) => {
     const hasAddButton = fields.length === 0;

src/components/package/create/package-create.js

@@ -87,7 +87,7 @@ class PackageCreate extends Component {
         renderEnd={saveButton}
       />
     );
-  }
+  };
 
   getFirstMenu = () => {
     const { onCancel } = this.props;
@@ -109,7 +109,7 @@ class PackageCreate extends Component {
         </FormattedMessage>
       )
       : null;
-  }
+  };
 
   render() {
     const {

src/components/package/show/components/PackageTitleList/PackageTitleList.js

@@ -0,0 +1,133 @@
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+import {
+  MCLPagingTypes,
+  MultiColumnList,
+  TextLink,
+} from '@folio/stripes/components';
+
+import SelectedLabel from '../../../../selected-label';
+import InternalLink from '../../../../internal-link';
+import CoverageDateList from '../../../../coverage-date-list';
+import { isBookPublicationType } from '../../../../utilities';
+
+import styles from '../../package-show.css';
+
+const COLUMNS = {
+  STATUS: 'status',
+  TITLE: 'title',
+  MANAGED_COVERAGE: 'managedCoverage',
+  CUSTOM_COVERAGE: 'customCoverage',
+  MANAGED_EMBARGO: 'managedEmbargo',
+};
+
+const MAX_HEIGHT = 526;
+
+const propTypes = {
+  count: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool,
+  onFetchPackageTitles: PropTypes.func.isRequired,
+  page: PropTypes.number.isRequired,
+  records: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalResults: PropTypes.number.isRequired,
+};
+
+const PackageTitleList = ({
+  records,
+  isLoading,
+  totalResults,
+  page,
+  count,
+  onFetchPackageTitles,
+}) => {
+  const intl = useIntl();
+
+  const columnMappings = {
+    [COLUMNS.STATUS]: intl.formatMessage({ id: 'ui-eholdings.titlesList.status' }),
+    [COLUMNS.TITLE]: intl.formatMessage({ id: 'ui-eholdings.titlesList.title' }),
+    [COLUMNS.MANAGED_COVERAGE]: intl.formatMessage({ id: 'ui-eholdings.titlesList.managedCoverage' }),
+    [COLUMNS.CUSTOM_COVERAGE]: intl.formatMessage({ id: 'ui-eholdings.titlesList.customCoverage' }),
+    [COLUMNS.MANAGED_EMBARGO]: intl.formatMessage({ id: 'ui-eholdings.titlesList.managedEmbargo' }),
+  };
+
+  const handleMore = (askAmount, index, firstIndex, direction) => {
+    const newPage = direction === 'next' ? page + 1 : page - 1;
+    onFetchPackageTitles(newPage);
+  };
+
+  const formatter = {
+    [COLUMNS.STATUS]: item => {
+      return (
+        <SelectedLabel isSelected={item.attributes.isSelected} />
+      );
+    },
+    [COLUMNS.TITLE]: item => {
+      return (
+        <TextLink element="span">
+          {({ className }) => (
+            <InternalLink
+              to={`/eholdings/resources/${item.id}`}
+              className={className}
+            >
+              {item.attributes.name}
+            </InternalLink>
+          )}
+        </TextLink>
+      );
+    },
+    [COLUMNS.MANAGED_COVERAGE]: item => {
+      return (
+        <CoverageDateList
+          isManagedCoverage
+          coverageArray={item.attributes.managedCoverages}
+          isYearOnly={isBookPublicationType(item.attributes.publicationType)}
+        />
+      );
+    },
+    [COLUMNS.CUSTOM_COVERAGE]: item => {
+      return (
+        <CoverageDateList
+          coverageArray={item.attributes.customCoverages}
+          isYearOnly={isBookPublicationType(item.attributes.publicationType)}
+        />
+      );
+    },
+    [COLUMNS.MANAGED_EMBARGO]: item => {
+      const { embargoUnit, embargoValue } = item.attributes.managedEmbargoPeriod || {};
+
+      if (!embargoUnit || !embargoValue) {
+        return null;
+      }
+
+      return intl.formatMessage({ id: `ui-eholdings.resource.embargoUnit.${embargoUnit}` }, {
+        value: embargoValue,
+      });
+    },
+  };
+
+  return (
+    <div className={styles.titlesListContainer}>
+      <MultiColumnList
+        id="package-title-list"
+        maxHeight={MAX_HEIGHT}
+        contentData={records}
+        visibleColumns={Object.values(COLUMNS)}
+        columnMapping={columnMappings}
+        formatter={formatter}
+        isEmptyMessage={intl.formatMessage({ id: 'ui-eholdings.notFound' })}
+        loading={isLoading}
+        hasMargin
+        totalCount={totalResults}
+        onNeedMoreData={handleMore}
+        pageAmount={count}
+        pagingType={MCLPagingTypes.PREV_NEXT}
+        pagingOffset={count * (page - 1)}
+      />
+    </div>
+  );
+};
+
+PackageTitleList.propTypes = propTypes;
+
+export { PackageTitleList };

src/components/package/show/components/PackageTitleList/PackageTitleList.test.js

@@ -0,0 +1,137 @@
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+
+import { createMemoryHistory } from 'history';
+import { PackageTitleList } from './PackageTitleList';
+import getAxe from '../../../../../../test/jest/helpers/get-axe';
+import Harness from '../../../../../../test/jest/helpers/harness';
+
+const records = [
+  {
+    id: '1',
+    attributes: {
+      isSelected: true,
+      name: 'Title name1',
+      managedCoverages: [{
+        beginCoverage: '2005-01-01',
+        endCoverage: '2005-12-31'
+      }],
+      customCoverages: [
+        {
+          beginCoverage: '2025-01-09',
+          endCoverage: '2026-01-01'
+        },
+        {
+          beginCoverage: '2025-01-07',
+          endCoverage: '2025-01-08'
+        },
+      ],
+      managedEmbargoPeriod: {
+        embargoUnit: 'Days',
+        embargoValue: 11,
+      },
+      publicationType: 'book',
+    },
+  },
+  {
+    id: '2',
+    attributes: {
+      isSelected: false,
+      name: 'Title name2',
+      managedCoverages: [{
+        beginCoverage: '2017-08-01',
+        endCoverage: '2017-08-01',
+      }],
+      customCoverages: [],
+      managedEmbargoPeriod: {
+        embargoValue: 0,
+      },
+      publicationType: 'book',
+    },
+  },
+];
+
+const mockOnFetchPackageTitles = jest.fn();
+const mockHistoryPush = jest.fn();
+
+const history = createMemoryHistory();
+history.push = mockHistoryPush;
+
+const renderPackageTitleList = (props = {}) => render(
+  <Harness
+    history={history}
+  >
+    <PackageTitleList
+      records={records}
+      isLoading={false}
+      totalResults={3}
+      page={1}
+      count={2}
+      onFetchPackageTitles={mockOnFetchPackageTitles}
+      {...props}
+    />
+  </Harness>
+);
+
+const axe = getAxe();
+
+describe('Given PackageTitleList', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should have no a11y issues', async () => {
+    const { container } = renderPackageTitleList();
+
+    const a11yResults = await axe.run(container);
+
+    expect(a11yResults.violations.length).toEqual(0);
+  });
+
+  it('should display the correct columns', () => {
+    const { getByText } = renderPackageTitleList();
+
+    expect(getByText('ui-eholdings.titlesList.status')).toBeDefined();
+    expect(getByText('ui-eholdings.titlesList.title')).toBeDefined();
+    expect(getByText('ui-eholdings.titlesList.managedCoverage')).toBeDefined();
+    expect(getByText('ui-eholdings.titlesList.customCoverage')).toBeDefined();
+    expect(getByText('ui-eholdings.titlesList.managedEmbargo')).toBeDefined();
+  });
+
+  it('should call onFetchPackageTitles when fetching more data', async () => {
+    const { getByRole } = renderPackageTitleList();
+
+    await userEvent.click(getByRole('button', { name: 'stripes-components.next' }));
+
+    expect(mockOnFetchPackageTitles).toHaveBeenCalledWith(2);
+  });
+
+  describe('when clicking on the title link', () => {
+    it('should set location.state.eholdings to true', async () => {
+      const { getByText } = renderPackageTitleList();
+
+      await userEvent.click(getByText('Title name1'));
+
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: '/eholdings/resources/1',
+        state: {
+          eholdings: true,
+        },
+      });
+    });
+  });
+
+  it('should display records correctly', () => {
+    const { getByText } = renderPackageTitleList();
+
+    expect(getByText('ui-eholdings.selected')).toBeDefined();
+    expect(getByText('Title name1')).toBeDefined();
+    expect(getByText('1/1/2005 - 12/31/2005')).toBeDefined();
+    expect(getByText('1/9/2025 - 1/1/2026, 1/7/2025 - 1/8/2025')).toBeDefined();
+    expect(getByText('ui-eholdings.resource.embargoUnit.Days')).toBeDefined();
+
+    expect(getByText('ui-eholdings.notSelected')).toBeDefined();
+    expect(getByText('Title name2')).toBeDefined();
+    expect(getByText('8/1/2017 - 8/1/2017')).toBeDefined();
+  });
+});

src/components/package/show/components/PackageTitleList/index.js

@@ -0,0 +1 @@
+export * from './PackageTitleList';