UX improvements

src/lib/components/backoffice/MetadataTable/MetadataTable.js

@@ -8,7 +8,9 @@ export default class MetadataTable extends Component {
 
     return rows.map(row => (
       <Table.Row key={row.name}>
-        <Table.Cell width={labelWidth}>{row.name}</Table.Cell>
+        <Table.Cell width={labelWidth}>
+          {row.icon} {row.name}
+        </Table.Cell>
         <Table.Cell>
           {typeof row.value == 'boolean'
             ? row.value

src/lib/components/backoffice/UrlList/UrlList.js

@@ -24,5 +24,9 @@ export class UrlList extends Component {
 }
 
 UrlList.propTypes = {
-  urls: PropTypes.array.isRequired,
+  urls: PropTypes.array,
+};
+
+UrlList.defaultProps = {
+  urls: null,
 };

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" />;
+  }
+}

src/lib/forms/core/GroupField.js

@@ -62,7 +62,7 @@ export class GroupField extends React.Component {
 GroupField.propTypes = {
   border: PropTypes.bool,
   fieldPath: PropTypes.string,
-  action: PropTypes.func,
+  action: PropTypes.node,
   children: PropTypes.node,
   basic: PropTypes.bool,
 };

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,
 };

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>

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>

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,26 @@ 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>
+          {selection.extra ? (
+            <Popup content={selection.extra} trigger={label} />
+          ) : (
+            label
+          )}
         </List.Content>
       </List.Item>
     );
@@ -98,7 +105,7 @@ class ESSelector extends Component {
 
     return (
       <Container className="result-selections">
-        <List divided relaxed>
+        <List>
           {selections.map(selection =>
             renderSelection(selection, removeSelection)
           )}
@@ -186,6 +193,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 +203,7 @@ ESSelector.defaultProps = {
   delay: 250,
   initialSelections: [],
   minCharacters: 3,
+  icon: null,
   onSelectionsUpdate: () => {},
   emptySelectionInfoText: null,
   selectionInfoText: null,

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);

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">

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}

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">

src/lib/pages/backoffice/Acquisition/Order/OrderDetails/OrderDetails.js

@@ -189,7 +189,7 @@ export default class OrderDetails extends React.Component {
 
   render() {
     const { isLoading, error, data } = this.props;
-
+    const metadata = data.metadata || {};
     return (
       <div ref={this.headerRef}>
         <Container fluid>
@@ -208,16 +208,16 @@ export default class OrderDetails extends React.Component {
                     <Grid.Column width={13}>
                       <Container className="spaced">
                         <Container className="spaced">
-                          <OrderStatistics order={data.metadata} />
+                          <OrderStatistics order={metadata} />
                           <br />
-                          <OrderSteps order={data.metadata} />
+                          <OrderSteps order={metadata} />
                         </Container>
-                        <OrderPanels data={data.metadata} />
+                        <OrderPanels data={metadata} />
                       </Container>
                     </Grid.Column>
                     <Grid.Column width={3}>
                       <Sticky context={this.menuRef} offset={150}>
-                        <ActionMenu data={data.metadata} offset={-150} />
+                        <ActionMenu data={metadata} offset={-150} />
                       </Sticky>
                     </Grid.Column>
                   </Grid>

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}
         />

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}

src/lib/pages/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"

src/lib/pages/backoffice/DocumentRequest/DocumentRequestDetails/DocumentRequestSteps/ProviderStep/ProviderStep.js

@@ -20,6 +20,10 @@ import {
   Step,
 } from 'semantic-ui-react';
 import { STEPS } from '../Steps';
+import {
+  AcquisitionOrderIcon,
+  ILLBorrowingRequestIcon,
+} from '@components/backoffice/icons';
 
 export const ProviderStep = ({ step }) => (
   <Step active={step === STEPS.provider} disabled={step === STEPS.document}>
@@ -76,6 +80,7 @@ class AcqProvider extends Component {
         <Grid columns={2} padded>
           <Grid.Column>
             <ESSelector
+              icon={<AcquisitionOrderIcon />}
               onSelectResult={this.onSelectResult}
               query={() =>
                 orderApi.list(
@@ -130,6 +135,7 @@ class IllProvider extends Component {
         <Grid columns={2} padded>
           <Grid.Column>
             <ESSelector
+              icon={<ILLBorrowingRequestIcon />}
               onSelectResult={this.onSelectResult}
               query={() =>
                 borrowingRequestApi.list(

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}
                 />
@@ -135,11 +137,12 @@ EItemForm.propTypes = {
   data: PropTypes.object,
   successSubmitMessage: PropTypes.string,
   title: PropTypes.string,
-  pid: PropTypes.string.isRequired,
+  pid: PropTypes.string,
 };
 
 EItemForm.defaultProps = {
   data: null,
   successSubmitMessage: null,
   title: null,
+  pid: null,
 };