From b39ff756a632f2523782ad99233d43578b5cdf51 Mon Sep 17 00:00:00 2001
From: sebastian-raubach <sebastian.raubach@hutton.ac.uk>
Date: Mon, 29 Jan 2024 16:15:24 +0000
Subject: [PATCH] - CHG: Moved dataset collaborator and attributes information
 into the table from modals. Like the map.

---
 src/components/modals/AttributeModal.vue      | 117 ------------------
 src/components/tables/DatasetTable.vue        |  50 ++++----
 .../tables/details/AttributeDetails.vue       | 110 ++++++++++++++++
 .../details/CollaboratorDetails.vue}          |  14 +--
 src/plugins/changelog/index.json              |   2 +-
 5 files changed, 140 insertions(+), 153 deletions(-)
 delete mode 100644 src/components/modals/AttributeModal.vue
 create mode 100644 src/components/tables/details/AttributeDetails.vue
 rename src/components/{modals/CollaboratorModal.vue => tables/details/CollaboratorDetails.vue} (52%)

diff --git a/src/components/modals/AttributeModal.vue b/src/components/modals/AttributeModal.vue
deleted file mode 100644
index d59a031..0000000
--- a/src/components/modals/AttributeModal.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <b-modal :ref="`attributeModal-${id}`" ok-only :ok-title="$t('buttonClose')" size="xl" :title="$t('modalTitleAttributes')">
-    <div>
-      <template v-if="dataset">
-        <h2>{{ $t('modalTitleDatasetAttributes') }}</h2>
-        <p>{{ $t('modalTextDatasetAttributes') }}</p>
-        <!-- Dataset attribute table -->
-        <DatasetAttributeTable :getData="getAttributeData" :downloadTable="downloadAttributes" />
-      </template>
-      <!-- Dublin core -->
-      <div v-if="dataset && dataset.dublinCore" class="mt-3">
-        <h2>{{ $t('modalTitleDatasetDublinCore') }}</h2>
-        <p>{{ $t('modalTextDatasetDublinCore') }}</p>
-        <dl class="row">
-          <template v-if="dataset.dublinCore.title">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreTitle') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.title.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.creator">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreCreator') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.creator.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.subject">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreSubject') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.subject.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.description">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreDescription') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.description.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.publisher">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCorePublisher') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.publisher.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.contributor">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreContributor') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.contributor.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.date">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreDate') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.date.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.type">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreType') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.type.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.format">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreFormat') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.format.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.identifier">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreIdentifier') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.identifier.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.source">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreSource') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.source.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.language">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreLanguage') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.language.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.relation">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreRelation') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.relation.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.coverage">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreCoverage') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.coverage.join(', ')" />
-          </template>
-          <template v-if="dataset.dublinCore.rights">
-            <dt class="col-sm-3 text-right">{{ $t('dublinCoreRights') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.rights.join(', ')" />
-          </template>
-        </dl>
-        <a  class="btn btn-secondary" :href="href" :download="`dataset-${dataset.datasetId}-dublin-core.json`" ><MdiIcon :path="mdiDownload" /></a>
-      </div>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import MdiIcon from '@/components/icons/MdiIcon'
-import DatasetAttributeTable from '@/components/tables/DatasetAttributeTable'
-import { apiPostDatasetAttributeTableExport, apiPostDatasetAttributeTable } from '@/mixins/api/dataset.js'
-import { uuidv4 } from '@/mixins/util'
-
-import { mdiDownload } from '@mdi/js'
-
-export default {
-  props: {
-    dataset: {
-      type: Object,
-      default: null
-    }
-  },
-  data: function () {
-    return {
-      mdiDownload,
-      id: uuidv4()
-    }
-  },
-  computed: {
-    href: function () {
-      if (this.dataset && this.dataset.dublinCore) {
-        return 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(this.dataset.dublinCore))
-      } else {
-        return null
-      }
-    }
-  },
-  components: {
-    DatasetAttributeTable,
-    MdiIcon
-  },
-  methods: {
-    getAttributeData: function (data, callback) {
-      return apiPostDatasetAttributeTable(this.dataset.datasetId, data, callback)
-    },
-    downloadAttributes: function (data, callback) {
-      return apiPostDatasetAttributeTableExport(this.dataset.datasetId, data, callback)
-    },
-    show: function () {
-      this.$refs['attributeModal-' + this.id].show()
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/components/tables/DatasetTable.vue b/src/components/tables/DatasetTable.vue
index 5bd686d..b6e01be 100644
--- a/src/components/tables/DatasetTable.vue
+++ b/src/components/tables/DatasetTable.vue
@@ -62,7 +62,7 @@
       <template v-slot:cell(locations)="data">
         <template v-if="data.item.locations !== undefined && data.item.locations !== null && data.item.locations.length > 0">
           <template v-if="data.item.locations[0].locationLatitude && data.item.locations[0].locationLongitude">
-            <a href="#" class="text-decoration-none text-nowrap" @click.prevent="data.toggleDetails()" v-b-tooltip.hover :title="$t('tableTooltipDatasetLocations')">
+            <a href="#" class="text-decoration-none text-nowrap" @click.prevent="showDetails('location', data)" v-b-tooltip.hover :title="$t('tableTooltipDatasetLocations')">
               <MdiIcon :path="mdiMapMarker" />
               <span>{{ data.item.locations.length }}</span>
             </a>
@@ -110,14 +110,14 @@
       </template>
       <!-- Show collaborators -->
       <template v-slot:cell(collaborators)="data">
-        <a href="#" class="text-decoration-none" v-if="data.item.collaborators !== 0" @click.prevent="showCollaborators(data.item)">
+        <a href="#" class="text-decoration-none" v-if="data.item.collaborators !== 0" @click.prevent="showDetails('collaborators', data)">
           <span v-b-tooltip.hover :title="$t('tableTooltipDatasetCollaborators')"><MdiIcon :path="mdiAccountMultiple"/></span>
         </a>
         <MdiIcon :path="mdiAccountMultiple" className="text-muted" v-else/>
       </template>
       <!-- Show attributes -->
       <template v-slot:cell(attributes)="data">
-        <a href="#" class="text-decoration-none" v-if="(data.item.attributes !== 0 || data.item.dublinCore) && (!data.item.licenseName || isAccepted(data.item))" @click.prevent="showAttributes(data.item)">
+        <a href="#" class="text-decoration-none" v-if="(data.item.attributes !== 0 || data.item.dublinCore) && (!data.item.licenseName || isAccepted(data.item))" @click.prevent="showDetails('attributes', data)">
           <span v-b-tooltip.hover :title="$t('tableTooltipDatasetAttributes')"><MdiIcon :path="mdiFilePlus"/></span>
         </a>
         <MdiIcon :path="mdiFilePlus" className="text-muted" v-else/>
@@ -148,7 +148,17 @@
 
       <!-- Row details is where the dataset locations are shown on a map -->
       <template v-slot:row-details="data">
-        <LocationMap :locations="data.item.locations" v-if="data.item.locations && data.item.locations.length > 0" :showLinks="false"/>
+        <template v-if="detailType === 'location'">
+          <LocationMap :locations="data.item.locations" v-if="data.item.locations && data.item.locations.length > 0" :showLinks="false"/>
+        </template>
+        <div v-else-if="detailType === 'collaborators'" class="border-top border-primary bg-white p-3">
+          <!-- Collaborators modal -->
+          <CollaboratorDetails :dataset="data.item" v-if="data.item && data.item.collaborators !== 0" />
+        </div>
+        <div v-else-if="detailType === 'attributes'" class="border-top border-primary bg-white p-3">
+          <!-- Attribute modal -->
+          <AttributeDetails :dataset="data.item" v-if="data.item && (data.item.dublinCore !== undefined || data.item.attributes !== 0)" />
+        </div>
       </template>
     </BaseTable>
 
@@ -156,10 +166,6 @@
     <LicenseModal :license="license" :dataset="dataset" :isAccepted="dataset.acceptedBy && dataset.acceptedBy.length > 0" ref="licenseModal" v-if="dataset" />
     <!-- Publications modal -->
     <PublicationsModal referenceType="dataset" :referencingId="dataset.datasetId" v-if="dataset && (dataset.publications !== 0 || userIsDataCurator)" ref="publicationsModal" />
-    <!-- Collaborators modal -->
-    <CollaboratorModal :dataset="dataset" v-if="dataset && dataset.collaborators !== 0" ref="collaboratorModal" />
-    <!-- Attribute modal -->
-    <AttributeModal :dataset="dataset" v-if="dataset && (dataset.dublinCore !== undefined || dataset.attributes !== 0)" ref="attributeModal" />
     <!-- Genotype export modal for direct downloads from the table -->
     <GenotypeExportModal v-if="dataset && dataset.datasetType === 'genotype'" ref="genotypeExportModal" @formats-selected="downloadGenotypicDataset" />
     <!-- Dataset state modal -->
@@ -173,12 +179,12 @@ import { mapGetters } from 'vuex'
 import MdiIcon from '@/components/icons/MdiIcon'
 import BaseTable from '@/components/tables/BaseTable'
 import LicenseModal from '@/components/modals/LicenseModal'
-import CollaboratorModal from '@/components/modals/CollaboratorModal'
+import CollaboratorDetails from '@/components/tables/details/CollaboratorDetails'
 import GenotypeExportModal from '@/components/modals/GenotypeExportModal'
 import DatasetEditModal from '@/components/modals/DatasetEditModal'
 import PublicationsModal from '@/components/modals/PublicationsModal'
 import LocationMap from '@/components/map/LocationMap'
-import AttributeModal from '@/components/modals/AttributeModal'
+import AttributeDetails from '@/components/tables/details/AttributeDetails'
 import defaultProps from '@/const/table-props'
 import { apiPostDatasetExport, apiGetDatasetSourceFile, apiPostLicenseTable, apiDeleteDataset } from '@/mixins/api/dataset'
 import { apiPostGenotypeDatasetExport } from '@/mixins/api/genotype'
@@ -242,7 +248,8 @@ export default {
       },
       dataset: null,
       license: null,
-      previousDetailsRow: null
+      previousDetailsRow: null,
+      detailType: 'location'
     }
   },
   computed: {
@@ -429,9 +436,9 @@ export default {
   },
   components: {
     MdiIcon,
-    AttributeModal,
+    AttributeDetails,
     BaseTable,
-    CollaboratorModal,
+    CollaboratorDetails,
     DatasetEditModal,
     GenotypeExportModal,
     LocationMap,
@@ -444,6 +451,13 @@ export default {
     truncateAfterWords,
     getHighContrastTextColor,
     isPageAvailable,
+    showDetails: function (type, data) {
+      if (!data.detailsShowing || type === this.detailType) {
+        this.$nextTick(() => data.toggleDetails())
+      }
+
+      this.detailType = type
+    },
     showFullDatasetDescription: function (description) {
       this.$bvModal.msgBoxOk(description, {
         title: this.$t('tableColumnDatasetDescription'),
@@ -566,18 +580,10 @@ export default {
         emitter.emit('show-loading', false)
       })
     },
-    showCollaborators: function (dataset) {
-      this.dataset = dataset
-      this.$nextTick(() => this.$refs.collaboratorModal.show())
-    },
     showPublications: function (dataset) {
       this.dataset = dataset
       this.$nextTick(() => this.$refs.publicationsModal.show())
     },
-    showAttributes: function (dataset) {
-      this.dataset = dataset
-      this.$nextTick(() => this.$refs.attributeModal.show())
-    },
     showFileresources: function (dataset) {
       const filter = [{
         column: 'datasetIds',
@@ -675,7 +681,7 @@ export default {
 .table-icon-link:hover {
   text-decoration: none;
 }
-.dataset-table .b-table-details td {
+.dataset-table .b-table-details > td {
   padding: 0;
 }
 </style>
diff --git a/src/components/tables/details/AttributeDetails.vue b/src/components/tables/details/AttributeDetails.vue
new file mode 100644
index 0000000..fde71f5
--- /dev/null
+++ b/src/components/tables/details/AttributeDetails.vue
@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <template v-if="dataset">
+      <h2>{{ $t('modalTitleDatasetAttributes') }}</h2>
+      <p>{{ $t('modalTextDatasetAttributes') }}</p>
+      <!-- Dataset attribute table -->
+      <DatasetAttributeTable :getData="getAttributeData" :downloadTable="downloadAttributes" />
+    </template>
+    <!-- Dublin core -->
+    <div v-if="dataset && dataset.dublinCore" class="mt-3">
+      <h2>{{ $t('modalTitleDatasetDublinCore') }}</h2>
+      <p>{{ $t('modalTextDatasetDublinCore') }}</p>
+      <dl class="row">
+        <template v-if="dataset.dublinCore.title">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreTitle') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.title.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.creator">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreCreator') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.creator.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.subject">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreSubject') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.subject.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.description">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreDescription') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.description.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.publisher">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCorePublisher') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.publisher.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.contributor">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreContributor') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.contributor.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.date">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreDate') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.date.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.type">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreType') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.type.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.format">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreFormat') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.format.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.identifier">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreIdentifier') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.identifier.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.source">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreSource') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.source.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.language">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreLanguage') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.language.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.relation">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreRelation') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.relation.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.coverage">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreCoverage') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.coverage.join(', ')" />
+        </template>
+        <template v-if="dataset.dublinCore.rights">
+          <dt class="col-sm-3 text-right">{{ $t('dublinCoreRights') }}</dt><dd class="col-sm-9" v-html="dataset.dublinCore.rights.join(', ')" />
+        </template>
+      </dl>
+      <a  class="btn btn-secondary" :href="href" :download="`dataset-${dataset.datasetId}-dublin-core.json`" ><MdiIcon :path="mdiDownload" /></a>
+    </div>
+  </div>
+</template>
+
+<script>
+import MdiIcon from '@/components/icons/MdiIcon'
+import DatasetAttributeTable from '@/components/tables/DatasetAttributeTable'
+import { apiPostDatasetAttributeTableExport, apiPostDatasetAttributeTable } from '@/mixins/api/dataset.js'
+
+import { mdiDownload } from '@mdi/js'
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      default: null
+    }
+  },
+  data: function () {
+    return {
+      mdiDownload
+    }
+  },
+  computed: {
+    href: function () {
+      if (this.dataset && this.dataset.dublinCore) {
+        return 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(this.dataset.dublinCore))
+      } else {
+        return null
+      }
+    }
+  },
+  components: {
+    DatasetAttributeTable,
+    MdiIcon
+  },
+  methods: {
+    getAttributeData: function (data, callback) {
+      return apiPostDatasetAttributeTable(this.dataset.datasetId, data, callback)
+    },
+    downloadAttributes: function (data, callback) {
+      return apiPostDatasetAttributeTableExport(this.dataset.datasetId, data, callback)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/modals/CollaboratorModal.vue b/src/components/tables/details/CollaboratorDetails.vue
similarity index 52%
rename from src/components/modals/CollaboratorModal.vue
rename to src/components/tables/details/CollaboratorDetails.vue
index 8bb9844..7baeced 100644
--- a/src/components/modals/CollaboratorModal.vue
+++ b/src/components/tables/details/CollaboratorDetails.vue
@@ -1,14 +1,10 @@
 <template>
-  <b-modal :ref="`collaboratorModal-${id}`" size="xl" :title="$t('modalTitleCollaborators')" ok-only :ok-title="$t('buttonClose')">
-    <!-- Modal showing collaborator information -->
-    <CollaboratorTable :getData="getData" />
-  </b-modal>
+  <CollaboratorTable :getData="getData" />
 </template>
 
 <script>
 import CollaboratorTable from '@/components/tables/CollaboratorTable'
 import { apiPostCollaboratorsTable } from '@/mixins/api/dataset.js'
-import { uuidv4 } from '@/mixins/util'
 
 export default {
   props: {
@@ -17,18 +13,10 @@ export default {
       default: null
     }
   },
-  data: function () {
-    return {
-      id: uuidv4()
-    }
-  },
   components: {
     CollaboratorTable
   },
   methods: {
-    show: function () {
-      this.$refs['collaboratorModal-' + this.id].show()
-    },
     getData: function (data, callback) {
       return apiPostCollaboratorsTable(this.dataset.datasetId, data, callback)
     }
diff --git a/src/plugins/changelog/index.json b/src/plugins/changelog/index.json
index b23cbcb..6b45374 100644
--- a/src/plugins/changelog/index.json
+++ b/src/plugins/changelog/index.json
@@ -1,6 +1,6 @@
 [
   {
-    "version": "4.7,1",
+    "version": "4.7.1",
     "date": "2024-01-17",
     "items": [
       {