Fixed dynamic links

* fixed some react related errors * ESSelector improved UX
inveniosoftware · Sep 11, 2020 · 2d11190 · 2d11190
1 parent 43751bf
commit 2d11190
Show file tree

Hide file tree

Showing 19 changed files with 84 additions and 25 deletions.
diff --git a/src/lib/components/backoffice/icons/Icons.js b/src/lib/components/backoffice/icons/Icons.js
@@ -66,3 +66,15 @@ export class ILLLibraryIcon extends Component {
     return <Icon name="boxes" />;
   }
 }
+
+export class InternalLocationIcon extends Component {
+  render() {
+    return <Icon name="map" />;
+  }
+}
+
+export class LibraryIcon extends Component {
+  render() {
+    return <Icon name="university" />;
+  }
+}
diff --git a/src/lib/forms/core/SelectorField.js b/src/lib/forms/core/SelectorField.js
@@ -73,6 +73,7 @@ export class SelectorField extends Component {
       errorPath,
       emptyHeader,
       emptyDescription,
+      icon,
       label,
       required,
       multiple,
@@ -121,6 +122,7 @@ export class SelectorField extends Component {
           }
           serializer={serializer}
           placeholder={placeholderText}
+          icon={icon}
           {...selectorProps}
         />
       </Form.Field>
@@ -139,6 +141,7 @@ SelectorField.propTypes = {
   emptyHeader: PropTypes.string,
   errorPath: PropTypes.string.isRequired,
   fieldPath: PropTypes.string.isRequired,
+  icon: PropTypes.any,
   label: PropTypes.string,
   optimized: PropTypes.bool,
   serializer: PropTypes.func.isRequired,
@@ -161,4 +164,5 @@ SelectorField.defaultProps = {
   renderSelection: null,
   renderGroup: null,
   label: '',
+  icon: null,
 };
diff --git a/src/lib/modules/Document/DocumentCard/DocumentCard.js b/src/lib/modules/Document/DocumentCard/DocumentCard.js
@@ -37,13 +37,18 @@ class DocumentCard extends Component {
   render() {
     const { data } = this.props;
     const { metadata } = data;
+    const url = FrontSiteRoutes.documentDetailsFor(metadata.pid);
     return (
       <Overridable id="DocumentCard.layout" {...this.props}>
         <Card
           link
           centered
           className="fs-book-card"
-          onClick={() => goTo(FrontSiteRoutes.documentDetailsFor(metadata.pid))}
+          href={url}
+          onClick={e => {
+            e.preventDefault();
+            goTo(url);
+          }}
           data-test={metadata.pid}
         >
           <Card.Meta className="discrete">{metadata.document_type}</Card.Meta>

diff --git a/src/lib/modules/Document/backoffice/DocumentList/DocumentListEntry.js b/src/lib/modules/Document/backoffice/DocumentList/DocumentListEntry.js
@@ -10,6 +10,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Grid, Header, Icon, Item, List } from 'semantic-ui-react';
 import DocumentCirculation from './DocumentCirculation';
+import { EItemIcon } from '@components/backoffice/icons';
 
 export default class DocumentListEntry extends Component {
   renderMiddleColumn = document => {
@@ -70,7 +71,7 @@ export default class DocumentListEntry extends Component {
           {document.metadata.eitems.total > 0 ? (
             <List.Item>
               <List.Content floated="right">
-                <Icon name="desktop" />
+                <EItemIcon />
               </List.Content>
               <List.Content>Has electronic items</List.Content>
             </List.Item>

diff --git a/src/lib/modules/ESSelector/ESSelector.js b/src/lib/modules/ESSelector/ESSelector.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Overridable from 'react-overridable';
-import { List, Container, Icon } from 'semantic-ui-react';
+import { List, Container, Icon, Label, Popup } from 'semantic-ui-react';
 import _isEmpty from 'lodash/isEmpty';
 import { HitsSearch } from './HitsSearch';
 import find from 'lodash/find';
@@ -74,19 +74,22 @@ class ESSelector extends Component {
   };
 
   renderSelection = (selection, removeSelection) => {
-    const { renderSelection } = this.props;
+    const { renderSelection, icon } = this.props;
     if (renderSelection) return renderSelection;
 
+    const label = (
+      <Label>
+        {icon}
+        {selection.title}
+        <Label.Detail>{selection.description}</Label.Detail>
+        <Icon name="delete" onClick={() => removeSelection(selection)} />
+      </Label>
+    );
+
     return (
       <List.Item key={selection.id}>
-        <List.Icon name="angle right" size="small" verticalAlign="middle" />
-        <List.Content onClick={() => removeSelection(selection)}>
-          <List.Header as="a">
-            <span className="extra">{selection.extra}</span>
-            {selection.title}
-            <Icon name="delete" />
-          </List.Header>
-          <List.Description as="a">{selection.description}</List.Description>
+        <List.Content>
+          <Popup content={selection.extra} trigger={label} />
         </List.Content>
       </List.Item>
     );
@@ -98,7 +101,7 @@ class ESSelector extends Component {
 
     return (
       <Container className="result-selections">
-        <List divided relaxed>
+        <List>
           {selections.map(selection =>
             renderSelection(selection, removeSelection)
           )}
@@ -186,6 +189,7 @@ ESSelector.propTypes = {
   serializer: PropTypes.func,
   id: PropTypes.string,
   name: PropTypes.string,
+  icon: PropTypes.any,
   selectionInfoText: PropTypes.string,
   emptySelectionInfoText: PropTypes.string,
   focus: PropTypes.bool,
@@ -195,6 +199,7 @@ ESSelector.defaultProps = {
   delay: 250,
   initialSelections: [],
   minCharacters: 3,
+  icon: null,
   onSelectionsUpdate: () => {},
   emptySelectionInfoText: null,
   selectionInfoText: null,

diff --git a/src/lib/modules/Literature/LiteratureTags.js b/src/lib/modules/Literature/LiteratureTags.js
@@ -40,11 +40,12 @@ class LiteratureTags extends Component {
 
 LiteratureTags.propTypes = {
   tags: PropTypes.array,
-  isBackOffice: PropTypes.bool.isRequired,
+  isBackOffice: PropTypes.bool,
 };
 
 LiteratureTags.defaultProps = {
   tags: [],
+  isBackOffice: true,
 };
 
 export default Overridable.component('LiteratureTags', LiteratureTags);
diff --git a/src/lib/modules/Relations/backoffice/components/RelationCard/DocumentCard.js b/src/lib/modules/Relations/backoffice/components/RelationCard/DocumentCard.js
@@ -8,7 +8,8 @@ import _isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Card, Icon } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
+import { SeriesIcon } from '@components/backoffice/icons';
 
 export class DocumentCard extends Component {
   render() {
@@ -26,7 +27,7 @@ export class DocumentCard extends Component {
             url={_get(data, 'metadata.cover_metadata.urls.medium')}
           />
         ) : (
-          <Icon name="clone outline" size="huge" color="grey" />
+          <SeriesIcon size="huge" color="grey" />
         )}
         <Card.Content>
           <Card.Header as={Link} to={linkTo} target="_blank">

diff --git a/src/lib/modules/Relations/backoffice/components/RelationCard/SeriesCard.js b/src/lib/modules/Relations/backoffice/components/RelationCard/SeriesCard.js
@@ -3,8 +3,9 @@ import { BackOfficeRoutes } from '@routes/urls';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Card, Icon } from 'semantic-ui-react';
+import { Card } from 'semantic-ui-react';
 import _isEmpty from 'lodash/isEmpty';
+import { SeriesIcon } from '@components/backoffice/icons';
 
 export default class SeriesCard extends Component {
   render() {
@@ -16,7 +17,7 @@ export default class SeriesCard extends Component {
           {actions}
           {data.metadata.document_type || data.metadata.mode_of_issuance}
         </Card.Meta>
-        <Icon name="clone outline" size="huge" color="grey" />
+        <SeriesIcon size="huge" color="grey" />
         <Card.Content>
           <Card.Header as={Link} to={linkTo} target="_blank">
             {data.metadata.title}

diff --git a/src/lib/modules/Relations/backoffice/components/RelationListEntry.js b/src/lib/modules/Relations/backoffice/components/RelationListEntry.js
@@ -9,7 +9,8 @@ import _get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Grid, Icon, Item } from 'semantic-ui-react';
+import { Grid, Item } from 'semantic-ui-react';
+import { SeriesIcon } from '@components/backoffice/icons';
 
 export class RelationListEntry extends Component {
   render() {
@@ -29,7 +30,7 @@ export class RelationListEntry extends Component {
           url={_get(record, 'metadata.cover_metadata.urls.medium')}
         />
       ) : (
-        <Icon name="clone outline" size="huge" color="grey" />
+        <SeriesIcon size="huge" color="grey" />
       );
     return (
       <Item className="relation-list-entry">

diff --git a/src/lib/pages/backoffice/Acquisition/Order/OrderEditor/OrderForm/OrderInfo.js b/src/lib/pages/backoffice/Acquisition/Order/OrderEditor/OrderForm/OrderInfo.js
@@ -10,6 +10,7 @@ import { TextField } from '@forms/core/TextField';
 import { serializeVendor } from '@modules/ESSelector/serializer';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { AcquisitionVendorIcon } from '@components/backoffice/icons';
 
 export class OrderInfo extends Component {
   render() {
@@ -24,6 +25,7 @@ export class OrderInfo extends Component {
           errorPath="vendor_pid"
           label="Vendor"
           placeholder="Search for a vendor..."
+          icon={<AcquisitionVendorIcon />}
           query={vendorApi.list}
           serializer={serializeVendor}
         />

diff --git a/src/lib/pages/backoffice/Acquisition/Order/OrderEditor/OrderForm/OrderLines.js b/src/lib/pages/backoffice/Acquisition/Order/OrderEditor/OrderForm/OrderLines.js
@@ -17,6 +17,7 @@ import {
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Segment, Divider, Grid } from 'semantic-ui-react';
+import { DocumentIcon, PatronIcon } from '@components/backoffice/icons';
 
 export class OrderLines extends Component {
   renderArrayItem = ({ arrayPath, indexPath, ...arrayHelpers }) => {
@@ -44,6 +45,7 @@ export class OrderLines extends Component {
               errorPath={`${arrayPath}.${indexPath}.document_pid`}
               label="Document"
               placeholder="Search for a document..."
+              icon={<DocumentIcon />}
               query={documentApi.list}
               serializer={serializeDocument}
             />
@@ -117,6 +119,7 @@ export class OrderLines extends Component {
             errorPath={`${arrayPath}.${indexPath}.patron_pid`}
             label="Patron"
             placeholder="Search for a patron..."
+            icon={<PatronIcon />}
             query={patronApi.list}
             serializer={serializePatron}
             width={10}

diff --git a/...es/backoffice/Document/DocumentForms/DocumentEditor/DocumentForm/DocumentBasicMetadata.js b/...es/backoffice/Document/DocumentForms/DocumentEditor/DocumentForm/DocumentBasicMetadata.js
@@ -21,7 +21,7 @@ export class DocumentBasicMetadata extends Component {
               <Grid stretched columns="equal">
                 <Grid.Row className="no-padding ">
                   <Grid.Column width={8}>
-                    <GroupField noBottomMargin widths="equal">
+                    <GroupField widths="equal">
                       <StringField
                         label="Publication year"
                         fieldPath="publication_year"

diff --git a/src/lib/pages/backoffice/EItem/EItemForms/EItemEditor/EItemForm/EItemForm.js b/src/lib/pages/backoffice/EItem/EItemForms/EItemEditor/EItemForm/EItemForm.js
@@ -16,6 +16,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Grid, Header, Segment } from 'semantic-ui-react';
 import eitemSubmitSerializer from './eitemSubmitSerializer';
+import { DocumentIcon } from '@components/backoffice/icons';
 
 export class EItemForm extends Component {
   prepareData = data => {
@@ -74,6 +75,7 @@ export class EItemForm extends Component {
                   errorPath="document_pid"
                   label="Document"
                   placeholder="Search for a document..."
+                  icon={<DocumentIcon />}
                   query={documentApi.list}
                   serializer={serializeDocument}
                 />

diff --git a/.../backoffice/ILL/BorrowingRequest/BorrowingRequestEditor/BorrowingRequestForm/OrderInfo.js b/.../backoffice/ILL/BorrowingRequest/BorrowingRequestEditor/BorrowingRequestForm/OrderInfo.js
@@ -17,6 +17,8 @@ import {
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Grid } from 'semantic-ui-react';
+import { DocumentIcon, PatronIcon } from '@components/backoffice/icons';
+import { LibraryIcon } from '@components/backoffice/icons/Icons';
 
 export class OrderInfo extends Component {
   render() {
@@ -33,6 +35,7 @@ export class OrderInfo extends Component {
               errorPath="document_pid"
               label="Document"
               placeholder="Search for a document..."
+              icon={<DocumentIcon />}
               query={documentApi.list}
               serializer={serializeDocument}
             />
@@ -46,6 +49,7 @@ export class OrderInfo extends Component {
               errorPath="patron_pid"
               label="Patron"
               placeholder="Search for a patron..."
+              icon={<PatronIcon />}
               query={patronApi.list}
               serializer={serializePatron}
             />
@@ -59,6 +63,7 @@ export class OrderInfo extends Component {
               errorPath="library_pid"
               label="Library"
               placeholder="Search for a library..."
+              icon={<LibraryIcon />}
               query={libraryApi.list}
               serializer={serializeLibrary}
             />

diff --git a/src/lib/pages/backoffice/Item/ItemDetails/ItemCirculation/ItemCirculation.js b/src/lib/pages/backoffice/Item/ItemDetails/ItemCirculation/ItemCirculation.js
@@ -15,6 +15,11 @@ import {
   Message,
   Segment,
 } from 'semantic-ui-react';
+import {
+  InternalLocationIcon,
+  LibraryIcon,
+  PatronIcon,
+} from '@components/backoffice/icons/Icons';
 
 class ItemStatusMessageOnLoan extends Component {
   render() {
@@ -24,7 +29,7 @@ class ItemStatusMessageOnLoan extends Component {
       {
         name: (
           <>
-            <Icon name="user" /> Patron{' '}
+            <PatronIcon /> Patron{' '}
           </>
         ),
         value: (
@@ -189,7 +194,7 @@ export default class ItemCirculation extends Component {
                 to={BackOfficeRoutes.locationsList}
                 size="small"
               >
-                <Icon name="university" />
+                <InternalLocationIcon />
 
                 <Header.Content>
                   {metadata.internal_location.name}
@@ -206,7 +211,7 @@ export default class ItemCirculation extends Component {
                 to={BackOfficeRoutes.locationsList}
                 size="small"
               >
-                <Icon name="map" />
+                <LibraryIcon />
                 <Header.Content>
                   {metadata.internal_location.location.name}
                   <Header.Subheader>Location</Header.Subheader>

diff --git a/src/lib/pages/backoffice/Item/ItemForms/ItemEditor/ItemForm/ItemForm.js b/src/lib/pages/backoffice/Item/ItemForms/ItemEditor/ItemForm/ItemForm.js
@@ -24,6 +24,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import itemSubmitSerializer from './itemSubmitSerializer';
 import { Segment, Header } from 'semantic-ui-react';
+import { DocumentIcon } from '@components/backoffice/icons';
+import { InternalLocationIcon } from '@components/backoffice/icons/Icons';
 
 export class ItemForm extends Component {
   constructor(props) {
@@ -160,6 +162,7 @@ export class ItemForm extends Component {
               errorPath="document_pid"
               label="Document"
               placeholder="Search for a document..."
+              icon={<DocumentIcon />}
               query={documentApi.list}
               serializer={serializeDocument}
               width={8}
@@ -182,6 +185,7 @@ export class ItemForm extends Component {
               errorPath="internal_location_pid"
               label="Internal location"
               placeholder="Search for an internal location..."
+              icon={<InternalLocationIcon />}
               query={internalLocationApi.list}
               serializer={serializeInternalLocation}
               width={8}

diff --git a/...ationForms/InternalLocationEditor/components/InternalLocationForm/InternalLocationForm.js b/...ationForms/InternalLocationEditor/components/InternalLocationForm/InternalLocationForm.js
@@ -14,6 +14,7 @@ import pick from 'lodash/pick';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Header, Segment } from 'semantic-ui-react';
+import { InternalLocationIcon } from '@components/backoffice/icons/Icons';
 
 export class InternalLocationForm extends Component {
   prepareData = data => {
@@ -81,6 +82,7 @@ export class InternalLocationForm extends Component {
               errorPath="location_pid"
               label="Location"
               placeholder="Search for a location..."
+              icon={<InternalLocationIcon />}
               query={locationApi.list}
               serializer={serializeLocation}
               width={8}