frontside: added config to display selected item identifiers

Author: JakobMiesner

src/lib/config/defaultConfig.js

@@ -521,6 +521,7 @@ export const RECORDS_CONFIG = {
     },
   },
   ITEMS: {
+    identifiersToDisplayInFrontside: [],
     circulationRestrictions: [
       { value: 'NO_RESTRICTION', text: 'No restriction (4 weeks)' },
       { value: 'ONE_WEEK', text: '1 week' },

src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItem.js

@@ -3,15 +3,28 @@ import React, { Component } from 'react';
 import Overridable from 'react-overridable';
 import { Button, Table } from 'semantic-ui-react';
 import DocumentItemBody from './DocumentItemBody';
+import { invenioConfig } from '@config';
+import { vocabularyApi } from '@api/vocabularies';
 
 class DocumentItem extends Component {
   constructor(props) {
     super(props);
 
+    const identifiersToDisplayInFrontside =
+      invenioConfig.ITEMS.identifiersToDisplayInFrontside.map((identifier) => ({
+        key: identifier,
+        text: identifier,
+      }));
+
     this.state = {
       isShowingAll: false,
       itemAmountLimit: 5,
+      identifiersToDisplayInFrontside,
     };
+
+    if (identifiersToDisplayInFrontside.length > 0) {
+      this.fetchIdentifiersToDisplayInFrontsideTitles();
+    }
   }
 
   get moreItemsToLoad() {
@@ -21,6 +34,26 @@ class DocumentItem extends Component {
     return items.length > itemAmountLimit;
   }
 
+  fetchIdentifiersToDisplayInFrontsideTitles = () => {
+    const query = vocabularyApi
+      .query()
+      .withType(invenioConfig.VOCABULARIES.item.identifier.scheme);
+    vocabularyApi.list(query.qs()).then((response) => {
+      const identifiersToDisplayInFrontside =
+        this.state.identifiersToDisplayInFrontside.map((identifier) => {
+          const vocabEntry = response.data.hits.find(
+            (entry) => entry.metadata.key === identifier.key
+          );
+          return {
+            ...identifier,
+            text: vocabEntry ? vocabEntry.metadata.text : identifier.text,
+          };
+        });
+
+      this.setState({ identifiersToDisplayInFrontside });
+    });
+  };
+
   toggleItems = () => {
     const { isShowingAll } = this.state;
 
@@ -30,7 +63,8 @@ class DocumentItem extends Component {
   render() {
     const { internalLocationName, items, documentDetails, showTitle } =
       this.props;
-    const { isShowingAll, itemAmountLimit } = this.state;
+    const { isShowingAll, itemAmountLimit, identifiersToDisplayInFrontside } =
+      this.state;
 
     const previewArrayOfItems = items.slice(0, itemAmountLimit);
     const completeArrayOfItems = items;
@@ -56,6 +90,11 @@ class DocumentItem extends Component {
               <Table.Row data-test="header">
                 <Table.HeaderCell>Barcode</Table.HeaderCell>
                 <Table.HeaderCell>Shelf</Table.HeaderCell>
+                {identifiersToDisplayInFrontside.map((identifier) => (
+                  <Table.HeaderCell key={identifier.key}>
+                    {identifier.text}
+                  </Table.HeaderCell>
+                ))}
                 <Table.HeaderCell>Status</Table.HeaderCell>
                 <Table.HeaderCell>Medium</Table.HeaderCell>
                 <Table.HeaderCell>Loan restriction</Table.HeaderCell>
@@ -68,6 +107,9 @@ class DocumentItem extends Component {
               <DocumentItemBody
                 items={itemsToShow}
                 documentDetails={documentDetails}
+                identifiersToDisplayInFrontside={
+                  identifiersToDisplayInFrontside
+                }
               />
             </Overridable>
           </Table.Body>

src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItemBody.js

@@ -27,7 +27,12 @@ export default class DocumentItemBody extends Component {
   };
 
   render() {
-    const { items, shelfLink, documentDetails } = this.props;
+    const {
+      items,
+      shelfLink,
+      documentDetails,
+      identifiersToDisplayInFrontside,
+    } = this.props;
 
     return items.map((item) => (
       <Table.Row key={item.pid}>
@@ -37,13 +42,26 @@ export default class DocumentItemBody extends Component {
         >
           {item.barcode}
         </Table.Cell>
-
         <Table.Cell data-label="Shelf" className="document-item-table-itemCell">
           {shelfLink !== null
             ? shelfLink(item, documentDetails)
             : _get(item, 'shelf')}
         </Table.Cell>
 
+        {identifiersToDisplayInFrontside.map((identifier) => (
+          <Table.Cell
+            key={identifier}
+            data-label={identifier.text}
+            className="document-item-table-itemCell"
+          >
+            {
+              item.identifiers?.find((entry) => {
+                return entry.scheme === identifier.key;
+              })?.value
+            }
+          </Table.Cell>
+        ))}
+
         <Table.Cell data-label="Status">{this.statusLabel(item)}</Table.Cell>
         <Table.Cell data-label="Medium">
           {getDisplayVal('ITEMS.mediums', item.medium)}
@@ -63,6 +81,8 @@ DocumentItemBody.propTypes = {
   items: PropTypes.array.isRequired,
   documentDetails: PropTypes.object.isRequired,
   shelfLink: PropTypes.func,
+  identifiersToDisplayInFrontside: PropTypes.arrayOf(PropTypes.object)
+    .isRequired,
 };
 
 DocumentItemBody.defaultProps = {