folio-org · aliaksei-chumakou · Dec 7, 2018 · Dec 7, 2018
diff --git a/src/components/LayerCollection/LayerPO.js b/src/components/LayerCollection/LayerPO.js
@@ -45,12 +45,12 @@ class LayerPO extends Component {
 
   render() {
     const { initialValues, location } = this.props;
-    const query = location.search ? queryString.parse(location.search) : {};
+    const { layer } = location.search ? queryString.parse(location.search) : {};
 
-    return (
-      <div>
+    if (layer === 'edit') {
+      return (
         <Layer
-          isOpen={query.layer ? query.layer === 'edit' : false}
+          isOpen
           contentLabel="Edit Order Dialog"
         >
           <this.connectedPOForm
@@ -59,20 +59,28 @@ class LayerPO extends Component {
             {...this.props}
           />
         </Layer>
+      );
+    } else if (layer === 'receive-items') {
+      return (
         <Layer
-          isOpen={query.layer ? query.layer === 'receive-items' : false}
+          isOpen
           contentLabel="Receive Items"
         >
           <this.connectedReceiveItems openReceived={this.openReceived} {...this.props} />
         </Layer>
+      );
+    } else if (layer === 'received') {
+      return (
         <Layer
-          isOpen={query.layer ? query.layer === 'received' : false}
+          isOpen
           contentLabel="Received"
         >
           <this.connectedReceived {...this.props} />
         </Layer>
-      </div>
-    );
+      );
+    }
+
+    return null;
   }
 }
 

diff --git a/src/components/LayerCollection/LayerPOLine.js b/src/components/LayerCollection/LayerPOLine.js
@@ -72,12 +72,12 @@ class LayerPOLine extends Component {
 
   render() {
     const { initialValues, location } = this.props;
-    const query = location.search ? queryString.parse(location.search) : {};
+    const { layer } = location.search ? queryString.parse(location.search) : {};
 
-    return (
-      <div>
+    if (layer === 'create-po-line') {
+      return (
         <Layer
-          isOpen={query.layer ? query.layer === 'create-po-line' : false}
+          isOpen
           contentLabel="Create PO Line Dialog"
         >
           <this.connectedPOLineForm
@@ -86,8 +86,11 @@ class LayerPOLine extends Component {
             {...this.props}
           />
         </Layer>
+      );
+    } else if (layer === 'edit-po-line') {
+      return (
         <Layer
-          isOpen={query.layer ? query.layer === 'edit-po-line' : false}
+          isOpen
           contentLabel="Edit PO Line Dialog"
         >
           <this.connectedPOLineForm
@@ -96,8 +99,10 @@ class LayerPOLine extends Component {
             {...this.props}
           />
         </Layer>
-      </div>
-    );
+      );
+    }
+
+    return null;
   }
 }
 

diff --git a/src/components/POLine/POLine.js b/src/components/POLine/POLine.js
@@ -125,6 +125,7 @@ class POLine extends Component {
       <PaneMenu>
         <IfPermission perm="po_line.item.put">
           <IconButton
+            disabled
             icon="edit"
             id="clickable-edit-po-line"
             onClick={this.onEditPOLine}

diff --git a/src/components/POLine/POLineForm.js b/src/components/POLine/POLineForm.js
@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import includes from 'lodash/includes';
-import get from 'lodash/get';
+import {
+  get,
+  includes,
+} from 'lodash';
 import { Fields } from 'redux-form';
+
 import { IfPermission } from '@folio/stripes/core';
 import {
   Accordion,
@@ -16,6 +19,7 @@ import {
   Row,
 } from '@folio/stripes/components';
 import stripesForm from '@folio/stripes/form';
+
 import { EresourcesForm } from './Eresources';
 import { PhysicalForm } from './Physical';
 import { POLineDetailsForm } from './POLineDetails';
@@ -28,6 +32,7 @@ import {
   PHRESOURCES,
 } from './const';
 import HandleErrors from '../Utils/HandleErrors';
+
 import css from './css/POLineForm.css';
 
 class POLineForm extends Component {
@@ -182,7 +187,7 @@ class POLineForm extends Component {
     const message = (
       <em className={css.requiredIcon} style={{ color: 'red', display: 'flex', alignItems: 'center' }}>
         <Icon
-          icon="validation-error"
+          icon="exclamation-circle"
           size="medium"
         />
         Required fields!

diff --git a/src/components/PurchaseOrder/PO.js b/src/components/PurchaseOrder/PO.js
@@ -1,12 +1,7 @@
 import React, { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-
-import {
-  get,
-  isEmpty,
-  isEqual,
-} from 'lodash';
+import { get } from 'lodash';
 
 import { IfPermission } from '@folio/stripes/core';
 import {
@@ -75,49 +70,6 @@ class PO extends Component {
     resources: PropTypes.object.isRequired,
   }
 
-  static getDerivedStateFromProps(props, state) {
-    const { parentMutator, parentResources, resources } = props;
-    const initialValues = get(resources, ['order', 'records', 0]);
-
-    // Set initialValues
-    if (initialValues) {
-      if (!isEqual(initialValues, state.initialValues)) {
-        return { initialValues };
-      }
-    }
-    // Check if initialValues STATE before updating child;
-    if (!isEmpty(state.initialValues)) {
-      const createdBy = get(parentResources, 'createdBy.records', []);
-      const vendor = get(parentResources, 'vendor.records', []);
-      const user = get(parentResources, 'user.records', []);
-      const isAnyDataLoaded = vendor.length > 0 || user.length > 0 || createdBy.length > 0;
-
-      if (isAnyDataLoaded) {
-        const initData = state.initialValues;
-        const vendorName = vendor[0] && vendor[0].name ? `${vendor[0].name}` : '';
-        const assignToName = user[0] && user[0].personal ? `${user[0].personal.firstName} ${user[0].personal.lastName}` : '';
-        const createdByPersonal = get(createdBy, '0.personal');
-        const createdByName = createdByPersonal ? `${createdByPersonal.firstName} ${createdByPersonal.lastName}` : '';
-        const isDataChanged = vendorName !== initData.vendor_name || assignToName !== initData.assigned_to_user || createdByName !== initData.created_by_name;
-
-        if (isDataChanged) {
-          parentMutator.queryII.update({
-            createdByID: initData.created_by,
-            vendorID: initData.vendor,
-            userID: initData.assigned_to,
-          });
-          initData.vendor_name = vendorName;
-          initData.assigned_to_user = assignToName;
-          initData.created_by_name = createdByName;
-
-          return { initialValues: initData };
-        }
-      }
-    }
-
-    return null;
-  }
-
   constructor(props) {
     super(props);
     this.state = {
@@ -126,7 +78,6 @@ class PO extends Component {
         POSummary: true,
         POListing: true,
       },
-      initialValues: {},
     };
     this.onAddPOLine = this.onAddPOLine.bind(this);
     this.transitionToParams = transitionToParams.bind(this);
@@ -181,8 +132,8 @@ class PO extends Component {
   }
 
   render() {
-    const { location, history, match, resources } = this.props;
-    const initialValues = this.state.initialValues || {};
+    const { location, history, match, resources, parentResources } = this.props;
+    const initialValues = get(resources, ['order', 'records', 0]);
     const poLines = get(resources, ['poLine', 'records'], []);
     const lastMenu = (
       <PaneMenu>
@@ -196,7 +147,6 @@ class PO extends Component {
                 style={{ visibility: !initialValues ? 'hidden' : 'visible' }}
                 onClick={this.props.onEdit}
                 href={this.props.editLink}
-                title={ariaLabel}
               />
             )}
           </FormattedMessage>
@@ -220,6 +170,18 @@ class PO extends Component {
       );
     }
 
+    const vendor = get(parentResources, 'vendors.records', []).find(d => d.id === initialValues.vendor);
+    const assignedTo = get(parentResources, 'users.records', []).find(d => d.id === initialValues.assigned_to);
+    const createdBy = get(parentResources, 'users.records', []).find(d => d.id === initialValues.created_by);
+
+    initialValues.vendor_name = get(vendor, 'name');
+    initialValues.assigned_to_user = assignedTo && assignedTo.personal
+      ? `${assignedTo.personal.firstName} ${assignedTo.personal.lastName}`
+      : '';
+    initialValues.created_by_name = createdBy && createdBy.personal
+      ? `${createdBy.personal.firstName} ${createdBy.personal.lastName}`
+      : '';
+
     return (
       <Pane
         id="pane-podetails"

diff --git a/src/routes/Main.js b/src/routes/Main.js
@@ -108,34 +108,16 @@ class Main extends Component {
       path: 'po_line',
       records: 'po_lines',
     },
-    queryII: {
-      initialValue: {
-        vendorID: '',
-        createdByID: '',
-        userID: '',
-      },
-    },
-    vendor: {
+    vendors: {
       type: 'okapi',
       path: 'vendor',
       records: 'vendors',
-      GET: {
-        params: {
-          query: (...args) => {
-            const resourceData = args[2];
-            const cql = `(id="${resourceData.queryII.vendorID}")`;
-
-            return cql;
-          },
-        },
-        limit: 1,
-        staticFallback: { params: {} },
-      },
+      perRequest: 1000,
     },
-    vendors: {
+    users: {
       type: 'okapi',
-      path: 'vendor',
-      records: 'vendors',
+      path: 'users',
+      records: 'users',
       perRequest: 1000,
     },
     fund: {
@@ -144,45 +126,6 @@ class Main extends Component {
       records: 'funds',
       perRequest: 1000,
     },
-    user: {
-      type: 'okapi',
-      path: 'users',
-      records: 'users',
-      GET: {
-        params: {
-          query: (...args) => {
-            const resourceData = args[2];
-            const cql = `(id="${resourceData.queryII.userID}")`;
-
-            return cql;
-          },
-        },
-        limit: 1,
-        staticFallback: { params: {} },
-      },
-    },
-    createdBy: {
-      type: 'okapi',
-      path: 'users',
-      records: 'users',
-      GET: {
-        params: {
-          query: (...args) => {
-            const resourceData = args[2];
-            const cql = `(id="${resourceData.queryII.createdByID}")`;
-
-            return cql;
-          },
-        },
-        limit: 1,
-        staticFallback: { params: {} },
-      },
-    },
-    source: {
-      type: 'okapi',
-      path: 'source?query=cql.allRecords=1 sortby desc',
-      records: 'sources',
-    },
     materialTypes: {
       type: 'okapi',
       path: 'material-types',
@@ -281,11 +224,19 @@ class Main extends Component {
         },
       },
     } = this.props;
+    const users = get(resources, 'users.records', []);
     const resultsFormatter = {
       'po_number': data => toString(get(data, ['po_number'], '')),
       'created': data => <FolioFormattedTime dateString={get(data, 'created')} />,
-      'notes': data => toString(get(data, ['notes'], '')),
-      'assigned_to': data => toString(get(data, ['assigned_to'], '')),
+      'notes': data => get(data, 'notes', []).join(', '),
+      'assigned_to': data => {
+        const assignedToId = get(data, 'assigned_to', '');
+        const assignedTo = users.find(d => d.id === assignedToId);
+
+        return assignedTo && assignedTo.personal
+          ? `${assignedTo.personal.firstName} ${assignedTo.personal.lastName}`
+          : '';
+      },
     };
     const newRecordInitialValues = {
       created_by: id || '',