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