From 8907b9066104ddaa4e681a50b2fdfdf91950b919 Mon Sep 17 00:00:00 2001
From: Adam Basha <55552142+adambasha0@users.noreply.github.com>
Date: Thu, 14 Nov 2024 09:35:57 +0100
Subject: [PATCH] feat: display sample inventory label tag in sample header and
  list (#2222)

---
 .../stylesheets/components/ElementsTable.scss   |  2 +-
 .../elements/details/samples/SampleDetails.js   |  6 ++++--
 .../elements/list/ElementsTableSampleEntries.js | 17 ++++++++++++++++-
 .../searchModal/forms/SearchResultTabContent.js |  2 +-
 app/packs/src/models/Sample.js                  |  8 ++++++++
 5 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/ElementsTable.scss b/app/assets/stylesheets/components/ElementsTable.scss
index 9276170e6f..593610192e 100644
--- a/app/assets/stylesheets/components/ElementsTable.scss
+++ b/app/assets/stylesheets/components/ElementsTable.scss
@@ -39,7 +39,7 @@
 }
 
 .sample-entries > tbody > tr > td {
-  border-top: 0
+  border-top: 0;
 }
 
 @media only screen and (max-width: 1500px) {
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 35243d2ec1..439e9b538f 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -332,7 +332,7 @@ export default class SampleDetails extends React.Component {
     const { currentCollection } = UIStore.getState();
     LoadingActions.start.defer();
     const { sample, validCas } = this.state;
-    if (this.matchSelectedCollection(currentCollection) && sample.xref.inventory_label !== undefined) {
+    if (this.matchSelectedCollection(currentCollection) && sample.inventory_label !== undefined) {
       sample.collection_id = currentCollection.id;
     }
     this.checkMolfileChange();
@@ -953,13 +953,15 @@ export default class SampleDetails extends React.Component {
       />
     ) : null;
 
+    const inventoryLabel = sample.inventory_sample && sample.inventory_label ? sample.inventory_label : null;
+
     return (
       <div className="d-flex align-items-center justify-content-between">
         <div className="d-flex align-items-center gap-2">
           <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
             <span className="flex-shrink-0">
               <i className="icon-sample me-1" />
-              {sample.title()}
+              {inventoryLabel || sample.title()}
             </span>
           </OverlayTrigger>
           <ShowUserLabels element={sample} />
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
index f2faaf5591..c9e6f6e152 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-  Table, Button, Tooltip, OverlayTrigger
+  Table, Button, Tooltip, OverlayTrigger, Badge,
 } from 'react-bootstrap';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
@@ -107,6 +107,20 @@ const showDecoupledIcon = (sample) => (sample.decoupled ? (
   </OverlayTrigger>
 ) : null);
 
+const showInventoryLabelIcon = (sample) => (sample.inventory_sample && sample.inventory_label ? (
+  <OverlayTrigger
+    placement="top"
+    overlay={<Tooltip id="sample_inventory_label">Inventory Label</Tooltip>}
+  >
+    <Badge
+      className="bg-info text-light p-1 mt-0 rounded"
+      key={`inventory_label_${sample.inventory_label}`}
+    >
+      {sample.inventory_label}
+    </Badge>
+  </OverlayTrigger>
+) : null);
+
 const overlayToggle = <Tooltip id="toggle_molecule">Toggle Molecule</Tooltip>;
 
 const svgPreview = (sample) => (
@@ -366,6 +380,7 @@ export default class ElementsTableSampleEntries extends Component {
               {sample.title(selected)}
 
               <div className="d-flex align-items-center gap-1">
+                {showInventoryLabelIcon(sample)}
                 <CommentIcon commentCount={sample.comment_count} />
                 <ShowUserLabels element={sample} />
                 <XvialIcon label={sample.external_label} />
diff --git a/app/packs/src/components/searchModal/forms/SearchResultTabContent.js b/app/packs/src/components/searchModal/forms/SearchResultTabContent.js
index 7c8e5f5e7c..50b56d1a06 100644
--- a/app/packs/src/components/searchModal/forms/SearchResultTabContent.js
+++ b/app/packs/src/components/searchModal/forms/SearchResultTabContent.js
@@ -138,7 +138,7 @@ const SearchResultTabContent = ({ list, tabResult, openDetail }) => {
     } else if (object.type == 'sample') {
       let infos = [];
       if (object.external_label) { infos.push(object.external_label) }
-      if (object.xref && object.xref.inventory_label) { infos.push(object.xref.inventory_label) }
+      if (object.xref && object.inventory_label) { infos.push(object.inventory_label) }
       if (object.xref && object.xref.cas) { infos.push(object.xref.cas) }
       names = [object.short_label, object.name].concat(infos).join(" | ");
     } else {
diff --git a/app/packs/src/models/Sample.js b/app/packs/src/models/Sample.js
index 5e3947ec76..d52147c52b 100644
--- a/app/packs/src/models/Sample.js
+++ b/app/packs/src/models/Sample.js
@@ -1113,6 +1113,14 @@ export default class Sample extends Element {
     return this._gas_phase_data;
   }
 
+  get inventory_label() {
+    return this.xref.inventory_label;
+  }
+
+  set inventory_label(inventory_label) {
+    this.xref.inventory_label = inventory_label;
+  }
+
   addSolvent(newSolvent) {
     const { molecule } = newSolvent;
     if (molecule) {