UIBULKED-341 Separate Item notes in different columns based on the no…

…te type

CHANGELOG.md

@@ -42,6 +42,7 @@
 * [UIBULKED-318](https://issues.folio.org/browse/UIBULKED-318) Add User filter to Logs tab
 * [UIBULKED-325](https://issues.folio.org/browse/UIBULKED-325) Rename "Suppressed from discovery" option to "Suppress from discovery" for Items and Holdings
 * [UIBULKED-337](https://issues.folio.org/browse/UIBULKED-337) *BREAKING* Update `react` to `v18`.
+* [UIBULKED-341](https://issues.folio.org/browse/UIBULKED-341) Separate Item notes in different columns based on the note type
 
 ## [3.0.5](https://github.com/folio-org/ui-bulk-edit/tree/v3.0.5) (2023-03-22)
 

src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const tableStyles = {
+  width: '100%',
+  borderCollapse: 'collapse'
+}
+
+const cellStyles = {
+  border: '1px solid',
+  padding: '0 4px',
+  maxWidth: '200px',
+}
+
+const ignoredContent = ['false'];
+
+export const FormattedNotes = ({ notes }) => {
+  if (!notes) return null;
+
+
+  const tableData = notes.split('|')
+    .map(i => i.split(';').filter(i => !ignoredContent.includes(i)))
+    .reduce((acc, elem) => {
+      const [head, ...content] = elem;
+
+      acc[head] = content.join(';');
+
+      return acc;
+    }, {});
+
+  const renderCell = (item, key, tag) => {
+    return React.createElement(tag, { key, style: cellStyles }, item);
+  };
+
+  const renderHead = () => {
+    return Object.keys(tableData).map((item, key) => renderCell(item, key, 'th'));
+  }
+
+  const renderBody = () => {
+    return Object.values(tableData).map((item, key) => renderCell(item, key, 'td'));
+  };
+
+  return (
+    <table style={tableStyles}>
+      <thead><tr>{renderHead()}</tr></thead>
+      <tbody><tr>{renderBody()}</tr></tbody>
+    </table>
+  )
+};

src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FormattedNotes } from './FormattedNotes';
+
+describe('FormattedNotes', () => {
+  const notes = "Note;Missing pages; p 10-13;false|Action note;My action note;false";
+
+  it('renders nothing when notes prop is not provided', () => {
+    const { container } = render(<FormattedNotes />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders a table with the correct structure when notes are provided', () => {
+    const { getByText } = render(<FormattedNotes notes={notes} />);
+
+    expect(getByText('Note')).toBeInTheDocument();
+    expect(getByText('Missing pages; p 10-13')).toBeInTheDocument();
+    expect(getByText('Action note')).toBeInTheDocument();
+    expect(getByText('My action note')).toBeInTheDocument();
+  });
+
+  it('ignores content specified in ignoredContent array', () => {
+    const { queryByText } = render(<FormattedNotes notes={notes} />);
+
+    expect(queryByText('false')).toBeNull();
+  });
+
+  it('renders a table with the correct number of rows', () => {
+    const { container } = render(<FormattedNotes notes={notes} />);
+
+    const headRows = container.querySelectorAll('thead tr');
+    const rows = container.querySelectorAll('tbody tr');
+
+    expect(headRows.length).toBe(1);
+    expect(rows.length).toBe(1);
+  });
+});

src/constants/columns.js

@@ -73,4 +73,5 @@ export const CUSTOM_ENTITY_COLUMNS = {
   USER_STATUS: 'Active',
   EXPIRATION_DATE: 'Expiration date',
   DATE_OF_BIRTH: 'Date Of Birth',
+  NOTES: 'Notes',
 };

src/utils/mappers/mappers.js

@@ -11,6 +11,7 @@ import {
   CAPABILITIES,
   CUSTOM_ENTITY_COLUMNS,
 } from '../../constants';
+import { FormattedNotes } from '../../components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes';
 
 export const DATA_TYPES = {
   NUMERIC: 'NUMERIC',
@@ -32,6 +33,8 @@ const formatData = ({ capability, column, data }) => {
       return <FormattedUTCDate value={data} />;
     case dataType === DATA_TYPES.DATE_TIME:
       return <FolioFormattedTime dateString={data} />;
+    case field === CUSTOM_ENTITY_COLUMNS.NOTES:
+      return <FormattedNotes notes={data} />;
     default:
       return data;
   }