Skip to content
Snippets Groups Projects
Verified Commit d3656156 authored by Tobias Grantner's avatar Tobias Grantner
Browse files

Introduced shared identifier metadata download component

parent d52cf452
No related branches found
No related tags found
2 merge requests!163Relase 1.3.0,!151Introduced shared identifier metadata download component
...@@ -31,6 +31,13 @@ ...@@ -31,6 +31,13 @@
<v-btn v-if="!loading && canModify && isResearcher" class="mr-2 mb-1" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/import`"> <v-btn v-if="!loading && canModify && isResearcher" class="mr-2 mb-1" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/import`">
<v-icon left>mdi-cloud-upload</v-icon> Import CSV <v-icon left>mdi-cloud-upload</v-icon> Import CSV
</v-btn> </v-btn>
<DownloadButton
v-if="database?.identifier"
:pid="database.identifier.id"
color="secondary"
class="mr-2 mb-1 white--text">
<v-icon left>mdi-code-tags</v-icon> Identifier .xml
</DownloadButton>
<v-btn v-if="!loading && canRead && isResearcher" color="secondary" class="mb-1 white--text" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/query/create`"> <v-btn v-if="!loading && canRead && isResearcher" color="secondary" class="mb-1 white--text" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/query/create`">
<v-icon left>mdi-wrench</v-icon> Create Subset <v-icon left>mdi-wrench</v-icon> Create Subset
</v-btn> </v-btn>
...@@ -66,8 +73,10 @@ ...@@ -66,8 +73,10 @@
<script> <script>
import { isResearcher } from '@/utils' import { isResearcher } from '@/utils'
import DownloadButton from '@/components/identifier/DownloadButton.vue'
export default { export default {
components: { DownloadButton },
data () { data () {
return { return {
tab: null, tab: null,
......
<template>
<v-btn
:loading="loading"
v-bind="$attrs"
@click.stop="download">
<slot />
</v-btn>
</template>
<script>
export default {
props: {
pid: {
type: Number,
default () {
return null
}
},
contentType: {
type: String,
default () {
return 'text/xml'
}
},
filename: {
type: String,
default () {
return 'identifier.xml'
}
}
},
data () {
return {
loading: false
}
},
computed: {
token () {
return this.$store.state.token
},
config () {
if (this.token === null) {
return {
headers: { Accept: 'application/json' }
}
}
return {
headers: { Authorization: `Bearer ${this.token}`, Accept: 'application/json' }
}
}
},
methods: {
async download () {
this.loading = true
try {
const config = this.config
config.headers.Accept = this.contentType
const res = await this.$axios.get(`/api/pid/${this.pid}`, config)
console.debug('export identifier', res)
const url = window.URL.createObjectURL(new Blob([res.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', this.filename)
document.body.appendChild(link)
link.click()
} catch (err) {
console.error('Could not export identifier', err)
this.$toast.error('Could not export identifier')
this.error = true
}
this.loading = false
}
}
}
</script>
<style scoped>
</style>
...@@ -238,7 +238,6 @@ export default { ...@@ -238,7 +238,6 @@ export default {
loading: false, loading: false,
loadingDelete: false, loadingDelete: false,
editDbDialog: false, editDbDialog: false,
metadataLoading: false,
items: [ items: [
{ text: 'Databases', to: '/container', activeClass: '' }, { text: 'Databases', to: '/container', activeClass: '' },
{ {
...@@ -377,26 +376,6 @@ export default { ...@@ -377,26 +376,6 @@ export default {
this.editDbDialog = false this.editDbDialog = false
this.editVisibilityDialog = false this.editVisibilityDialog = false
}, },
async download () {
this.metadataLoading = true
try {
const config = this.config
config.headers.Accept = 'text/xml'
const res = await this.$axios.get(`/api/pid/${this.database.identifier.id}`, config)
console.debug('export identifier', res)
const url = window.URL.createObjectURL(new Blob([res.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', 'identifier.xml')
document.body.appendChild(link)
link.click()
} catch (err) {
console.error('Could not export identifier', err)
this.$toast.error('Could not export identifier')
this.error = true
}
this.metadataLoading = false
},
async deleteIdentifier () { async deleteIdentifier () {
if (!this.database.identifier.id) { if (!this.database.identifier.id) {
return return
......
...@@ -11,71 +11,25 @@ ...@@ -11,71 +11,25 @@
</v-toolbar-title> </v-toolbar-title>
<v-spacer /> <v-spacer />
<v-toolbar-title> <v-toolbar-title>
<v-btn v-if="!query.is_persisted && canWrite" :loading="loadingSave" class="mb-1 mr-2" @click.stop="save"> <v-btn v-if="!query.is_persisted && canWrite" :loading="loadingSave" class="mb-1" @click.stop="save">
<v-icon left>mdi-content-save-outline</v-icon> Save <v-icon left>mdi-content-save-outline</v-icon> Save
</v-btn> </v-btn>
<v-btn v-if="query.is_persisted && !query.identifier && canWrite" class="mb-1 mr-2" color="primary" :disabled="error || !executionUTC" @click.stop="openDialog()"> <v-btn v-if="query.is_persisted && !query.identifier && canWrite" class="mb-1 ml-2" color="primary" :disabled="error || !executionUTC" @click.stop="openDialog()">
<v-icon left>mdi-content-save-outline</v-icon> Get PID <v-icon left>mdi-content-save-outline</v-icon> Get PID
</v-btn> </v-btn>
<v-btn v-if="result_visibility && !query.identifier && query.result_number" class="mb-1" :loading="downloadLoading" @click.stop="downloadData"> <v-btn v-if="result_visibility && query.result_number" class="mb-1 ml-2" :loading="downloadLoading" @click.stop="downloadData">
<v-icon left>mdi-download</v-icon> Data .csv <v-icon left>mdi-download</v-icon> Data .csv
</v-btn> </v-btn>
<v-btn v-if="result_visibility && query.identifier && query.result_number" class="mb-1" :loading="downloadLoading" @click.stop="download('text/csv')"> <DownloadButton v-if="query.identifier" :pid="query.identifier.id" color="secondary" class="mb-1 ml-2">
<v-icon left>mdi-download</v-icon> Data .csv <v-icon left>mdi-code-tags</v-icon> Identifier .xml
</v-btn> </DownloadButton>
<v-btn
v-if="query.identifier"
color="secondary"
class="ml-2"
:loading="metadataLoading"
@click.stop="download('text/xml')">
<v-icon left>mdi-code-tags</v-icon> Metadata .xml
</v-btn>
</v-toolbar-title> </v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-card flat tile> <v-card v-if="query && query.identifier" flat tile>
<v-card-title> <v-card-title>Identifier</v-card-title>
Subset Information
</v-card-title>
<v-card-text> <v-card-text>
<v-alert
v-if="!loadingQuery && !query.is_persisted && canWrite"
border="left"
color="info">
Query is not yet saved in the query store, <a @click="save">save</a> it to view it later.
</v-alert>
<v-list dense> <v-list dense>
<v-list-item> <v-list-item>
<v-list-item-icon>
<v-icon v-if="!database">mdi-database-outline</v-icon>
<v-icon v-if="database" :color="database.is_public ? 'success' : 'error'">mdi-database-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
Database Visibility
</v-list-item-title>
<v-list-item-content>
<v-skeleton-loader v-if="!database" type="text" class="skeleton-small" />
<span v-if="database">{{ database.is_public ? 'Public' : 'Private' }}</span>
</v-list-item-content>
<v-list-item-title class="mt-2">
Database Name
</v-list-item-title>
<v-list-item-content>
<v-skeleton-loader v-if="!database" type="text" class="skeleton-small" />
<span v-if="database">{{ database.name }}</span>
</v-list-item-content>
<div v-if="database && database.identifier">
<v-list-item-title class="mt-2">
Database License
</v-list-item-title>
<v-list-item-content>
<a :href="database.identifier.license.uri">{{ database.identifier.license.identifier }}</a>
</v-list-item-content>
</div>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="query && query.identifier">
<v-list-item-icon> <v-list-item-icon>
<v-icon>mdi-lock-clock</v-icon> <v-icon>mdi-lock-clock</v-icon>
</v-list-item-icon> </v-list-item-icon>
...@@ -140,6 +94,52 @@ ...@@ -140,6 +94,52 @@
<Citation :pid="pid" /> <Citation :pid="pid" />
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</v-list>
</v-card-text>
</v-card>
<v-divider v-if="query && query.identifier" />
<v-card flat tile>
<v-card-title>
Subset Information
</v-card-title>
<v-card-text>
<v-alert
v-if="!loadingQuery && !query.is_persisted && canWrite"
border="left"
color="info">
Query is not yet saved in the query store, <a @click="save">save</a> it to view it later.
</v-alert>
<v-list dense>
<v-list-item>
<v-list-item-icon>
<v-icon v-if="!database">mdi-database-outline</v-icon>
<v-icon v-if="database" :color="database.is_public ? 'success' : 'error'">mdi-database-outline</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
Database Visibility
</v-list-item-title>
<v-list-item-content>
<v-skeleton-loader v-if="!database" type="text" class="skeleton-small" />
<span v-if="database">{{ database.is_public ? 'Public' : 'Private' }}</span>
</v-list-item-content>
<v-list-item-title class="mt-2">
Database Name
</v-list-item-title>
<v-list-item-content>
<v-skeleton-loader v-if="!database" type="text" class="skeleton-small" />
<span v-if="database">{{ database.name }}</span>
</v-list-item-content>
<div v-if="database && database.identifier">
<v-list-item-title class="mt-2">
Database License
</v-list-item-title>
<v-list-item-content>
<a :href="database.identifier.license.uri">{{ database.identifier.license.identifier }}</a>
</v-list-item-content>
</div>
</v-list-item-content>
</v-list-item>
<v-list-item> <v-list-item>
<v-list-item-icon> <v-list-item-icon>
<v-icon>mdi-text-short</v-icon> <v-icon>mdi-text-short</v-icon>
...@@ -202,6 +202,7 @@ ...@@ -202,6 +202,7 @@
</v-list> </v-list>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-divider />
<QueryResults <QueryResults
id="query-results" id="query-results"
ref="queryResults" ref="queryResults"
...@@ -221,6 +222,7 @@ ...@@ -221,6 +222,7 @@
import Persist from '@/components/dialogs/Persist' import Persist from '@/components/dialogs/Persist'
import Citation from '@/components/identifier/Citation' import Citation from '@/components/identifier/Citation'
import Banner from '@/components/identifier/Banner' import Banner from '@/components/identifier/Banner'
import DownloadButton from '@/components/identifier/DownloadButton.vue'
import { formatTimestampUTCLabel, formatDateUTC } from '@/utils' import { formatTimestampUTCLabel, formatDateUTC } from '@/utils'
export default { export default {
...@@ -228,7 +230,8 @@ export default { ...@@ -228,7 +230,8 @@ export default {
components: { components: {
Persist, Persist,
Citation, Citation,
Banner Banner,
DownloadButton
}, },
data () { data () {
return { return {
...@@ -261,7 +264,6 @@ export default { ...@@ -261,7 +264,6 @@ export default {
loadingDatabase: false, loadingDatabase: false,
loadingIdentifier: false, loadingIdentifier: false,
loadingQuery: true, loadingQuery: true,
metadataLoading: false,
downloadLoading: false, downloadLoading: false,
error: false, error: false,
promises: [] promises: []
...@@ -374,35 +376,6 @@ export default { ...@@ -374,35 +376,6 @@ export default {
this.$refs.queryResults.reExecute(this.query.id) this.$refs.queryResults.reExecute(this.query.id)
this.$refs.queryResults.reExecuteCount(this.query.id) this.$refs.queryResults.reExecuteCount(this.query.id)
}, },
async download (mime) {
if (mime === 'text/csv') {
this.downloadLoading = true
} else if (mime === 'text/xml') {
this.metadataLoading = true
}
try {
const config = this.config
config.headers.Accept = mime
const res = await this.$axios.get(`/api/pid/${this.query.identifier.id}`, config)
console.debug('export identifier', res)
const url = window.URL.createObjectURL(new Blob([res.data]))
const link = document.createElement('a')
link.href = url
if (mime === 'text/csv') {
link.setAttribute('download', 'subset.csv')
} else if (mime === 'text/xml') {
link.setAttribute('download', 'identifier.xml')
}
document.body.appendChild(link)
link.click()
} catch (err) {
console.error('Could not export identifier', err)
this.$toast.error('Could not export identifier')
this.error = true
}
this.downloadLoading = false
this.metadataLoading = false
},
async downloadData () { async downloadData () {
this.downloadLoading = true this.downloadLoading = true
try { try {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment