Skip to content

Commit

Permalink
- CHG: Moved dataset collaborator and attributes information into the…
Browse files Browse the repository at this point in the history
… table from modals. Like the map.
  • Loading branch information
sebastian-raubach committed Jan 29, 2024
1 parent 3765921 commit b39ff75
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 153 deletions.
117 changes: 0 additions & 117 deletions src/components/modals/AttributeModal.vue

This file was deleted.

50 changes: 28 additions & 22 deletions src/components/tables/DatasetTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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/>
Expand Down Expand Up @@ -148,18 +148,24 @@

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

<!-- License modal -->
<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 -->
Expand All @@ -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'
Expand Down Expand Up @@ -242,7 +248,8 @@ export default {
},
dataset: null,
license: null,
previousDetailsRow: null
previousDetailsRow: null,
detailType: 'location'
}
},
computed: {
Expand Down Expand Up @@ -429,9 +436,9 @@ export default {
},
components: {
MdiIcon,
AttributeModal,
AttributeDetails,
BaseTable,
CollaboratorModal,
CollaboratorDetails,
DatasetEditModal,
GenotypeExportModal,
LocationMap,
Expand All @@ -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'),
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
110 changes: 110 additions & 0 deletions src/components/tables/details/AttributeDetails.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -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)
}
Expand Down
Loading

0 comments on commit b39ff75

Please sign in to comment.