[subtask, mastertask] download fileov

app/src/plugins/tm@modal/_components/read-only/z-files.vue

@@ -1,14 +1,17 @@
 <template>
 	<p class="mt-5">Prílohy</p>
 	<div class="w-100 d-flex align-center">
-		<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">
-				<p @click="downloadFile(index)" class="cursor-pointer">
-					{{ file.name }}
-				</p>
-				<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
-			</v-chip>
-		</div>
+		<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']">
+				<v-chip class="mt-2">
+					<p @click="handleDownload(index)" class="cursor-pointer">
+						{{ file.name }}
+					</p>
+					<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
+				</v-chip>
+				<img v-if="showDownload" class="gif-loader" :src="require('@/plugins/app/_img/spinner.gif')" alt="Loading...">
+			</div>
+		</W-loadable>
 	</div>
 </template>
 
@@ -18,7 +21,36 @@ export default {
         files: {
             type: Array,
             default: () => []
-        }
-    }
+        },
+
+		downloadFile: {
+			type: Function,
+			required: true
+		},
+
+		showDownload: {
+			type: Boolean,
+			required: true
+		}
+    },
+
+	data() {
+		return {
+			// downloadingIndex: null
+		}
+	},
+
+	methods: {
+		handleDownload(index) {
+			// this.downloadingIndex = index
+			this.downloadFile(index)
+		}
+	}
 }
 </script>
+
+<style lang="sass" scoped>
+.gif-loader
+	height: 30px
+	margin-left: 30px
+</style>

app/src/plugins/tm@modal/master-task/_components/a-mastertask-description.vue

@@ -7,10 +7,12 @@
     <Z-remaining-time      	:hours="mastertask.duration - mastertask.time_worked" />
 	<Z-spent-time     		:hours="mastertask.time_worked"  :is-exceeded="mastertask.time_worked > mastertask.duration" />
 	<Z-description			:description="mastertask.description" />
-	<Z-files				:files="mastertask.files" />
+	<Z-files				:files="mastertask.files" :download-file="downloadFile" :showDownload="showDownload" />
 </template>
 
 <script>
+import * as FileSaver from "file-saver"
+
 import ZCreatedBy 		from '../../_components/read-only/z-created-by.vue'
 import ZDeadline 		from '../../_components/read-only/z-deadline.vue'
 import ZDescription 	from '../../_components/read-only/z-description.vue'
@@ -39,6 +41,25 @@ export default {
 			type: Object,
 			required: true
 		}
+	},
+
+	data() {
+        return {
+            showDownload: false
+        }
+    },
+
+	methods: {
+		async downloadFile(id) {
+			this.showDownload = true
+			try {
+				const file = await this.$axios.get_auth_data(`v1/mastertasks/${this.mastertask.id}`, { responseType: "arraybuffer" })
+				FileSaver.saveAs(file.files[id].path, file.files[id].name)
+			} catch (error) {
+				this.$toast.error(error)
+			}
+			this.showDownload = false
+		},
 	}
 }
 </script>

app/src/plugins/tm@modal/task/_components/z-task-readonly-info.vue

@@ -8,10 +8,12 @@
     <A-task-remaining-time      :hours="subtask.duration - subtask.spent_time" />
     <A-task-spent-time          :hours="subtask.spent_time" :subtask="subtask" />
     <A-task-description         :description="subtask.description" :mastertask-description="subtask.master_task_description" />
-    <Z-files                    :files="subtask.files" />
+    <Z-files                    :files="subtask.files" :download-file="downloadFile" :showDownload="showDownload" />
 </template>
 
 <script>
+import * as FileSaver from "file-saver"
+
 import AMastertaskName          from './_components/a-mastertask-name.vue'
 import AMastertaskStatus        from './_components/a-mastertask-status.vue'
 import ATaskTimeblocks    		from './_components/a-task-timeblocks.vue'
@@ -44,6 +46,26 @@ export default {
 			type: Object,
 			required: true
 		}
-	}
+	},
+
+    data() {
+        return {
+            showDownload: false
+        }
+    },
+
+    methods: {
+        async downloadFile(id) {
+            this.showDownload = true
+			try {
+				const file = await this.$axios.get_auth_data(`v1/subtasks/${this.subtask.id}`, { responseType: "arraybuffer" })
+                console.log(file)
+				FileSaver.saveAs(file.files[id].path, file.files[id].name)
+			} catch (error) {
+				this.$toast.error(error)
+			}
+            this.showDownload = false
+		},
+    }
 }
 </script>

app/src/plugins/tm@modal/task/z-task-modal.vue

@@ -262,15 +262,6 @@ export default {
 			}
 		},
 
-		async downloadFile(id) {
-			try {
-				const file = await this.$axios.get_auth_data(`v1/subtasks/${this.subtask.id}`, { responseType: "arraybuffer" })
-				FileSaver.saveAs(file.files[id].path, file.files[id].name)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
 		openDeleteTaskModal(subtask) {
 			this.$events.emit("show-delete-task-modal", { subtask })
 		},