From b0056f690ac15a2de671cac7f0d971438cfa6dcf Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Sun, 24 Sep 2023 21:48:27 +0100
Subject: [PATCH] UIBULKED-341 Separate Item notes in different columns based
 on the note type

---
 CHANGELOG.md                                  |  1 +
 .../Preview/FormattedNotes/FormattedNotes.js  | 48 +++++++++++++++++++
 .../FormattedNotes/FormattedNotes.test.js     | 37 ++++++++++++++
 src/constants/columns.js                      |  1 +
 src/utils/mappers/mappers.js                  |  3 ++
 5 files changed, 90 insertions(+)
 create mode 100644 src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.js
 create mode 100644 src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.test.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d389f5e6..59cb5373 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.js b/src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.js
new file mode 100644
index 00000000..a5fc3939
--- /dev/null
+++ b/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>
+  )
+};
diff --git a/src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.test.js b/src/components/BulkEditList/BulkEditListResult/Preview/FormattedNotes/FormattedNotes.test.js
new file mode 100644
index 00000000..b293ef24
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/src/constants/columns.js b/src/constants/columns.js
index 5ecd98b3..589a1e4f 100644
--- a/src/constants/columns.js
+++ b/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',
 };
diff --git a/src/utils/mappers/mappers.js b/src/utils/mappers/mappers.js
index 76c4cb9d..28251a17 100644
--- a/src/utils/mappers/mappers.js
+++ b/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;
   }