[subtask, mastertask] dowmload files gif loader fix

This commit is contained in:
romankko2 committed 2023-07-04 17:17:03 +02:00
1 parent 412530fb93
commit f8656396e7
4 files changed
+35 -26

No files matched your search

@@ -4,12 +4,14 @@
<W-loadable :content="files" emptyMessage="Žiadne prílohy neboli nahraté"> <W-loadable :content="files" emptyMessage="Žiadne prílohy neboli nahraté">
<div v-for="(file, index) in files" :key="file.id" class="d-flex align-center flex-wrap" :class="[index === 0 ? 'ml-0' : 'ml-2']"> <div v-for="(file, index) in files" :key="file.id" class="d-flex align-center flex-wrap" :class="[index === 0 ? 'ml-0' : 'ml-2']">
<v-chip class="mt-2"> <v-chip class="mt-2">
<p @click="handleDownload(index)" class="cursor-pointer"> <p @click="handleDownload(index)" class="cursor-pointer">{{ file.name }}</p>
{{ file.name }}
</p>
<v-icon class="mx-1" icon="mdi-paperclip"></v-icon> <v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
<p>{{ (file.file_size / (1024 * 1024)).toFixed(2) }} MB</p>
</v-chip> </v-chip>
<img v-if="showDownload" class="gif-loader" :src="require('@/plugins/app/_img/spinner.gif')" alt="Loading..."> <div v-if="showDownload" class="d-flex align-center">
<img class="gif-loader" :src="require('@/plugins/app/_img/spinner.gif')" alt="Loading...">
<p class="ml-2">Súbor sa sťahuje, počkajte prosím</p>
</div>
</div> </div>
</W-loadable> </W-loadable>
</div> </div>
@@ -34,15 +36,8 @@ export default {
} }
}, },
data() {
return {
// downloadingIndex: null
}
},
methods: { methods: {
handleDownload(index) { handleDownload(index) {
// this.downloadingIndex = index
this.downloadFile(index) this.downloadFile(index)
} }
} }
@@ -51,14 +51,20 @@ export default {
methods: { methods: {
async downloadFile(id) { async downloadFile(id) {
this.showDownload = true this.showDownload = true // Show loader
try {
const file = await this.$axios.get_auth_data(`v1/mastertasks/${this.mastertask.id}`, { responseType: "arraybuffer" }) const file = this.mastertask.files[id]
FileSaver.saveAs(file.files[id].path, file.files[id].name)
} catch (error) { // Iterate over each file in the task
this.$toast.error(error) const fileName = file.name
}
fetch(file.path)
.then(response => response.blob())
.then(blob => {
FileSaver.saveAs(blob, fileName)
this.showDownload = false this.showDownload = false
})
.catch(error => this.$toast.error(error))
}, },
} }
} }
@@ -54,6 +54,7 @@ import moment from 'moment'
import errorUtils from '@/plugins/lib@auth/_utils/error.utils' import errorUtils from '@/plugins/lib@auth/_utils/error.utils'
import useVuelidate from '@vuelidate/core' import useVuelidate from '@vuelidate/core'
import { required, numeric, minValue } from '@vuelidate/validators' import { required, numeric, minValue } from '@vuelidate/validators'
import tmUtils from '@/plugins/tm@_utils/tm.utils'
export default { export default {
props: { props: {
@@ -101,12 +102,15 @@ export default {
time: typeof this.form.hours == 'string' ? parseFloat(this.form.hours) : this.form.hours time: typeof this.form.hours == 'string' ? parseFloat(this.form.hours) : this.form.hours
}) })
if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline)
this._update(subtask) this._update(subtask)
}, },
async deleteTimesheet({ id }) { async deleteTimesheet({ id }) {
const subtask = JSON.parse(JSON.stringify(this.subtask)) const subtask = JSON.parse(JSON.stringify(this.subtask))
subtask.timesheets = subtask.timesheets.filter(timesheet => timesheet.id != id) subtask.timesheets = subtask.timesheets.filter(timesheet => timesheet.id != id)
if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline)
this._update(subtask) this._update(subtask)
}, },
@@ -56,15 +56,19 @@ export default {
methods: { methods: {
async downloadFile(id) { async downloadFile(id) {
this.showDownload = true this.showDownload = true // Show loader
try {
const file = await this.$axios.get_auth_data(`v1/subtasks/${this.subtask.id}`, { responseType: "arraybuffer" }) // Iterate over each file in the task
console.log(file) const file = this.subtask.files[id]
FileSaver.saveAs(file.files[id].path, file.files[id].name) const fileName = file.name
} catch (error) {
this.$toast.error(error) fetch(file.path)
} .then(response => response.blob())
.then(blob => {
FileSaver.saveAs(blob, fileName)
this.showDownload = false this.showDownload = false
})
.catch(error => this.$toast.error(error))
}, },
} }
} }