Fabians
141 lines
3.4 KiB
Vue
141 lines
3.4 KiB
Vue
<template>
|
|
<v-card class="my-4 pa-1 elevation-0" :loading="$apollo.loading">
|
|
<div v-if="!$apollo.loading && file" class="d-flex align-center">
|
|
<v-btn
|
|
v-tooltip="`Download the original file`"
|
|
icon
|
|
small
|
|
@click="downloadOriginalFile()"
|
|
>
|
|
<v-icon small>mdi-download</v-icon>
|
|
</v-btn>
|
|
|
|
<div class="text-truncate">
|
|
{{ file.fileName }}
|
|
</div>
|
|
<v-spacer></v-spacer>
|
|
<template v-if="file.convertedStatus === 0">
|
|
<v-btn text small disabled>
|
|
<span class="mr-2">Queued</span>
|
|
<v-progress-circular
|
|
indeterminate
|
|
:size="20"
|
|
:width="2"
|
|
></v-progress-circular>
|
|
</v-btn>
|
|
</template>
|
|
<template v-if="file.convertedStatus === 1">
|
|
<v-btn text small>
|
|
<span class="mr-2">Converting</span>
|
|
<v-progress-circular
|
|
indeterminate
|
|
:size="20"
|
|
:width="2"
|
|
></v-progress-circular>
|
|
</v-btn>
|
|
</template>
|
|
<template v-if="file.convertedStatus === 2">
|
|
<v-btn
|
|
text
|
|
small
|
|
color="primary"
|
|
:to="`/streams/${$route.params.streamId}/commits/${file.convertedCommitId}`"
|
|
>
|
|
<span class="mr-2">View Commit</span>
|
|
<v-icon small class="">mdi-open-in-new</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<template v-if="file.convertedStatus === 3">
|
|
<v-btn v-tooltip="file.convertedMessage" text small>
|
|
<span class="mr-2 error--text">Error</span>
|
|
<v-icon color="error">mdi-bug</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
</div>
|
|
<div v-else>
|
|
<v-skeleton-loader
|
|
class="mx-auto"
|
|
max-width="300"
|
|
type="list-item-one-line"
|
|
></v-skeleton-loader>
|
|
</div>
|
|
</v-card>
|
|
</template>
|
|
<script>
|
|
import gql from 'graphql-tag'
|
|
|
|
export default {
|
|
props: {
|
|
fileId: {
|
|
type: String,
|
|
default: null
|
|
}
|
|
},
|
|
data: () => ({
|
|
percentCompleted: -1,
|
|
error: null,
|
|
file: null
|
|
}),
|
|
apollo: {
|
|
file: {
|
|
query: gql`
|
|
query File($id: String!, $streamId: String!) {
|
|
stream(id: $streamId) {
|
|
id
|
|
fileUpload(id: $id) {
|
|
id
|
|
convertedCommitId
|
|
userId
|
|
convertedStatus
|
|
convertedMessage
|
|
fileName
|
|
fileType
|
|
uploadComplete
|
|
uploadDate
|
|
convertedLastUpdate
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
variables() {
|
|
return {
|
|
id: this.fileId,
|
|
streamId: this.$route.params.streamId
|
|
}
|
|
},
|
|
skip() {
|
|
return !this.fileId
|
|
},
|
|
update: (data) => data.stream.fileUpload
|
|
}
|
|
},
|
|
watch: {
|
|
file(val) {
|
|
if (val.convertedStatus >= 2) this.$apollo.queries.file.stopPolling()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$apollo.queries.file.startPolling(1000)
|
|
},
|
|
methods: {
|
|
async downloadOriginalFile() {
|
|
let res = await fetch(`/api/file/${this.fileId}`, {
|
|
headers: {
|
|
Authorization: localStorage.getItem('AuthToken')
|
|
}
|
|
})
|
|
let blob = await res.blob()
|
|
let file = window.URL.createObjectURL(blob)
|
|
|
|
let a = document.createElement('a')
|
|
document.body.appendChild(a)
|
|
a.style = 'display: none'
|
|
a.href = file
|
|
a.download = this.file.fileName
|
|
a.click()
|
|
window.URL.revokeObjectURL(file)
|
|
}
|
|
}
|
|
}
|
|
</script>
|