Sets mockup: create links to the corresponging compound and targets page

components/mockups/OneSet.vue

@@ -18,15 +18,54 @@
         :items="setItems"
         :items-per-page="10"
         :search="search"
-      ></v-data-table>
+      >
+        <template #[`item.target_pref_name`]="{ item }">
+          <a
+            v-if="showItemLinkToTarget(item)"
+            :href="getItemLinkToTarget(item)"
+          >
+            {{ getItemTargetIDText(item) }}
+          </a>
+          <template v-else>
+            {{ getItemTargetIDText(item) }}
+          </template>
+        </template>
+
+        <template #[`item.COMPOUND_NAME`]="{ item }">
+          <div
+            v-if="showItemLinkToCompound(item)"
+            class="d-flex flex-column justify-center align-center"
+          >
+            <MoleculeImage
+              :molecule-chembl-id="item['Molecule ChEMBL ID']"
+              :aspect-ratio="String(16 / 9)"
+              max-width="250px"
+              contain
+            />
+
+            <a :href="getItemLinkToCompound(item)">
+              {{ getItemCompoundIDText(item) }}
+            </a>
+          </div>
+          <template v-else>
+            {{ getItemCompoundIDText(item) }}
+          </template>
+        </template>
+      </v-data-table>
     </template>
   </div>
 </template>
 
 <script>
 import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import MoleculeImage from '~/web-components-submodule/components/common/ReportCards/Shared/MoleculeImage.vue'
 
 export default {
+  components: {
+    MoleculeImage,
+  },
   props: {
     setID: {
       type: String,
@@ -40,11 +79,8 @@ export default {
       errorMsg: undefined,
       setItems: [],
       search: '',
+      nullTextValue: '---',
       headers: [
-        {
-          text: 'Compound CHEMBL ID',
-          value: 'Molecule ChEMBL ID',
-        },
         {
           text: 'Compound Name',
           value: 'COMPOUND_NAME',
@@ -53,10 +89,6 @@ export default {
           text: 'Protein Family',
           value: 'Protein Family',
         },
-        {
-          text: 'Target ChEMBL ID',
-          value: 'target_id',
-        },
         {
           text: 'Target Name',
           value: 'target_pref_name',
@@ -89,6 +121,41 @@ export default {
       this.loading = false
     }
   },
+  methods: {
+    showItemLinkToTarget(item) {
+      return item.target_id != null && item.target_id !== this.nullTextValue
+    },
+    getItemTargetIDText(item) {
+      const targetPrefName = item.target_pref_name
+      const targetID = item.target_id
+      return targetPrefName == null || targetPrefName === this.nullTextValue
+        ? targetID
+        : targetPrefName
+    },
+    getItemLinkToTarget(item) {
+      return LinksToEntities[
+        EntityNames.EubopenTarget.entityID
+      ].getLinkToReportCard(item.target_id)
+    },
+    showItemLinkToCompound(item) {
+      return (
+        item['Molecule ChEMBL ID'] != null &&
+        item['Molecule ChEMBL ID'] !== this.nullTextValue
+      )
+    },
+    getItemCompoundIDText(item) {
+      const compoundPrefName = item.COMPOUND_NAME
+      const compoundID = item['Molecule ChEMBL ID']
+      return compoundPrefName == null || compoundPrefName === this.nullTextValue
+        ? compoundID
+        : compoundPrefName
+    },
+    getItemLinkToCompound(item) {
+      return LinksToEntities[
+        EntityNames.EubopenCompound.entityID
+      ].getLinkToReportCard(item['Molecule ChEMBL ID'])
+    },
+  },
 }
 </script>