STSMACOM-196: Add notes pop-up (#500)

* STSMACOM-196: Add notes pop-up

index.js

@@ -53,4 +53,5 @@ export { default as UserName } from './lib/UserName';
 export { default as ViewMetaData } from './lib/ViewMetaData';
 
 export { default as DueDatePicker } from './lib/ChangeDueDateDialog/DueDatePicker';
-export { default as NoteForm } from './lib/Notes/NoteForm';
+
+export * from './lib/Notes';

lib/Notes/NotesAccordion/NotesAccordion.css

@@ -1,3 +1,3 @@
 a.new-button {
-  margin-left: 10px;
+  margin-left: 15px;
 }

lib/Notes/NotesAccordion/NotesAccordion.js

@@ -1,8 +1,7 @@
+/* eslint-disable react/prop-types */
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {
-  FormattedMessage,
-} from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import {
   Accordion,
@@ -11,92 +10,65 @@ import {
   Button,
 } from '@folio/stripes-components';
 
-import NotesList from './components';
+import NotesList from './components/NotesList';
+import NotesAssigningModal from './components/NotesAssigningModal';
+
 import styles from './NotesAccordion.css';
 
-const defaultColumnsConfig = [
-  {
-    name: 'date',
-    title: <FormattedMessage id="stripes-smart-components.date" />,
-    width: '30%',
-  },
-  {
-    name: 'updatedBy',
-    title: <FormattedMessage id="stripes-smart-components.updatedBy" />,
-    width: '30%',
-  },
-  {
-    name: 'title',
-    title: <FormattedMessage id="stripes-smart-components.title" />,
-    width: '40%',
-  },
-];
-
-export const columnShape = PropTypes.shape({
-  name: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
-  width: PropTypes.string,
-});
-
-export const noteShape = PropTypes.shape({
-  id: PropTypes.string,
-  lastSavedDate: PropTypes.instanceOf(Date),
-  lastSavedUserFullName: PropTypes.string,
-  title: PropTypes.string,
-});
-
-export class NotesAccordion extends Component {
+export default class NotesAccordion extends Component {
   static propTypes = {
-    columnsConfig: PropTypes.arrayOf(columnShape),
-    notes: PropTypes.arrayOf(noteShape),
     onCreate: PropTypes.func.isRequired,
-    onNoteClick: PropTypes.func.isRequired,
+    onSaveAssigningResults: PropTypes.func.isRequired,
     open: PropTypes.bool,
-  }
+  };
+
+  state = { modalIsOpen: false };
 
-  static defaultProps = {
-    columnsConfig: defaultColumnsConfig,
-    notes: [],
+  onCloseModal = () => {
+    this.setState({
+      modalIsOpen: false,
+    });
+  };
+
+  onSaveAssigningResults = (changedNoteIdToStatusMap) => {
+    this.props.onSaveAssigningResults(changedNoteIdToStatusMap);
+    this.onCloseModal();
   }
 
   renderHeader = () => {
     return (
-      <Headline
-        data-test-notes-accordion-header
-        size="large"
-        tag="h3"
-      >
+      <Headline size="large" tag="h3">
         <FormattedMessage id="stripes-smart-components.notes" />
       </Headline>
     );
-  }
+  };
 
   renderHeaderButtons() {
-    const {
-      onCreate,
-    } = this.props;
+    const { onCreate } = this.props;
 
     return (
       <Fragment>
-        <Button data-test-notes-accordion-add-button>
-          <FormattedMessage id="stripes-smart-components.add" />
+        <Button onClick={this.onAssignButtonClick}>
+          <FormattedMessage id="stripes-smart-components.assign" />
         </Button>
-        <Button
-          data-test-notes-accordion-new-button
-          buttonClass={styles['new-button']}
-          onClick={onCreate}
-        >
+        <Button buttonClass={styles['new-button']} onClick={onCreate}>
           <FormattedMessage id="stripes-smart-components.new" />
         </Button>
       </Fragment>
     );
   }
 
+  onAssignButtonClick = () => {
+    this.setState({
+      modalIsOpen: true,
+    });
+  };
+
   renderQuantityIndicator() {
     return (
       <Badge>
-        <span data-test-notes-accordion-quantity-indicator>
-          {this.props.notes.length}
+        <span>
+          {this.props.assignedNotes.items.length}
         </span>
       </Badge>
     );
@@ -106,24 +78,46 @@ export class NotesAccordion extends Component {
     const {
       columnsConfig,
       open,
-      notes,
+      assignedNotes,
+      domainNotes,
       onNoteClick,
+      onResetSearchResults,
+      onSearch,
+      onSortDomainNotes,
+      onNeedMoreDomainNotes,
     } = this.props;
 
+    const {
+      modalIsOpen,
+    } = this.state;
+
     return (
-      <Accordion
-        id="notes-accordion"
-        open={open}
-        label={this.renderHeader()}
-        displayWhenClosed={this.renderQuantityIndicator()}
-        displayWhenOpen={this.renderHeaderButtons()}
-      >
-        <NotesList
-          columnsConfig={columnsConfig}
-          notes={notes}
-          onNoteClick={onNoteClick}
+      <Fragment>
+        <Accordion
+          id="notes-accordion"
+          open={open}
+          label={this.renderHeader()}
+          displayWhenClosed={this.renderQuantityIndicator()}
+          displayWhenOpen={this.renderHeaderButtons()}
+        >
+          <NotesList
+            columnsConfig={columnsConfig}
+            notes={assignedNotes}
+            onNoteClick={onNoteClick}
+          />
+        </Accordion>
+
+        <NotesAssigningModal
+          open={modalIsOpen}
+          onReset={onResetSearchResults}
+          onSave={this.onSaveAssigningResults}
+          onSearch={onSearch}
+          onClose={this.onCloseModal}
+          onSort={onSortDomainNotes}
+          onNeedMore={onNeedMoreDomainNotes}
+          notes={domainNotes}
         />
-      </Accordion>
+      </Fragment>
     );
   }
 }

lib/Notes/NotesAccordion/components/NotesAssigningModal/NotesAssigningModal.css

@@ -0,0 +1,26 @@
+@import "@folio/stripes-components/lib/variables.css";
+
+.assign-checkbox label {
+  margin-bottom: 0;
+}
+
+.assign-checkbox input {
+  margin: 0;
+}
+
+.assign-checkbox label::before {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.assign-checkbox label::after {
+  content: none;
+}
+
+.save-button {
+  margin-right: var(--gutter-static);
+}
+
+.search-field {
+  margin-bottom: var(--gutter-static);
+}