Merge branch 'main' of bitbucket.org:studiotem/jandl-taskmanager-app

app/src/plugins/tm@_components/z-files-upload.vue

@@ -21,6 +21,9 @@
 					<v-icon size="small" icon="mdi-close" @click.stop="remove(uploadedFiles.indexOf(file))"></v-icon>
 				</v-chip>
 			</div>
+			<div v-if="isSaving" class="d-flex align-center">
+				<img v-if="isSaving" class="gif-loader" :src="require('@/plugins/app/_img/spinner.gif')" alt="Loading...">
+			</div>
 		</div>
     </div>
 </template>
@@ -33,6 +36,11 @@ export default {
 		files: {
 			type: Array,
 			default: () => []
+		},
+
+		isSaving: {
+			type: Boolean,
+			required: false
 		}
 	},
 
@@ -78,4 +86,7 @@ export default {
 	position: absolute
 	width: 1px
 	height: 1px
+
+.gif-loader
+	height: 30px
 </style>

app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue

@@ -58,7 +58,6 @@ export default {
 	mounted() {
 		const monthIndex = new Date().getMonth()
 		this.filter.month = monthIndex < 9 ? `0${monthIndex + 1}` : `${monthIndex + 1}`
-		console.log(this.enrichedEmployees)
 	},
 
 	computed: {

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

@@ -1,14 +1,19 @@
 <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>
+					<p>{{ (file.file_size / (1024 * 1024)).toFixed(2) }} MB</p>
+				</v-chip>
+				<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>
+		</W-loadable>
 	</div>
 </template>
 
@@ -18,7 +23,29 @@ export default {
         files: {
             type: Array,
             default: () => []
-        }
-    }
+        },
+
+		downloadFile: {
+			type: Function,
+			required: true
+		},
+
+		showDownload: {
+			type: Boolean,
+			required: true
+		}
+    },
+
+	methods: {
+		handleDownload(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,31 @@ export default {
 			type: Object,
 			required: true
 		}
+	},
+
+	data() {
+        return {
+            showDownload: false
+        }
+    },
+
+	methods: {
+		async downloadFile(id) {
+			this.showDownload = true // Show loader
+
+			const file = this.mastertask.files[id]
+
+			// Iterate over each file in the task
+			const fileName = file.name
+
+			fetch(file.path)
+				.then(response => response.blob())
+				.then(blob => {
+					FileSaver.saveAs(blob, fileName)
+					this.showDownload = false
+				})
+				.catch(error => this.$toast.error(error))
+		},
 	}
 }
 </script>

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

@@ -45,10 +45,11 @@
 						<QuillEditor ref="description" v-model="mastertask.description" placeholder="Popis" theme="snow" class="rich-text-editor" @input="mastertask.description = $event.srcElement.innerHTML" />
 					</div>
 
-					<Z-files-upload class="mt-15 files" :files="mastertask.files" @files-uploaded="filesUploaded" />
+					<Z-files-upload class="mt-15 files" :files="mastertask.files" @files-uploaded="filesUploaded" :is-saving="isSaving" />
 				</v-card-actions>
 
-				<v-btn class="button primary" @click="save()">{{ mastertask.id ? 'ULOŽIŤ' : 'VYTVORIŤ' }}</v-btn>
+				<v-btn class="button primary" v-if="!isSaving" @click="save()">{{ mastertask.id ? 'ULOŽIŤ' : 'VYTVORIŤ' }}</v-btn>
+				<v-btn class="button primary disabled" v-else disabled>{{ $t('Ukladám...')}}</v-btn>
 			</v-card>
 
 			<v-card v-else height="100%" class="d-flex flex-column scrolling">
@@ -130,6 +131,7 @@ export default {
 			errorUtils,
 			v$: useVuelidate(),
 			mastertask: null,
+			isSaving: false,
 			showAddEmployeeInput: false,
 			date: null,
 			projectCodeSearch: null
@@ -226,6 +228,7 @@ export default {
 		},
 
 		async showModal({mastertask, editMode = false}) {
+			this.isSaving 	= false
 			this.editMode 	= null
 			this.visible 	= true
 			this.mastertask = null
@@ -269,6 +272,7 @@ export default {
 			this._mergeDeadlineTimeDate()
 
 			try {
+				this.isSaving = true
 				this.mastertask.deadline = moment(this.mastertask.deadline).format('YYYY-MM-DD HH:MM:SS')
 
 				if (this.mastertask.id) await this.$axios.put_auth_data(`v1/mastertasks/${this.mastertask.id}`, this.mastertask)
@@ -278,6 +282,8 @@ export default {
 				this.closeModal()
 			} catch (error) {
 				this.$toast.error(error)
+			} finally {
+				this.isSaving = true
 			}
 		},
 

app/src/plugins/tm@modal/task/_components/_components/a-task-spent-time.vue

@@ -54,6 +54,7 @@ import moment from 'moment'
 import errorUtils 	from '@/plugins/lib@auth/_utils/error.utils'
 import useVuelidate from '@vuelidate/core'
 import { required, numeric, minValue } 	from '@vuelidate/validators'
+import tmUtils 		from '@/plugins/tm@_utils/tm.utils'
 
 export default {
 	props: {
@@ -101,12 +102,15 @@ export default {
 				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)
 		},
 
 		async deleteTimesheet({ id }) {
 			const subtask = JSON.parse(JSON.stringify(this.subtask))
 			subtask.timesheets = subtask.timesheets.filter(timesheet => timesheet.id != id)
+			if(subtask.deadline) subtask.deadline = tmUtils.formatDateTimeForBackend(subtask.deadline)
 
 			this._update(subtask)
 		},

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,30 @@ export default {
 			type: Object,
 			required: true
 		}
-	}
+	},
+
+    data() {
+        return {
+            showDownload: false
+        }
+    },
+
+    methods: {
+        async downloadFile(id) {
+            this.showDownload = true // Show loader
+
+			// Iterate over each file in the task
+            const file = this.subtask.files[id]
+            const fileName = file.name
+
+            fetch(file.path)
+                .then(response => response.blob())
+                .then(blob => {
+                    FileSaver.saveAs(blob, fileName)
+                    this.showDownload = false
+                })
+                .catch(error => this.$toast.error(error))
+		},
+    }
 }
 </script>

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

@@ -55,10 +55,11 @@
 						<QuillEditor ref="description" v-model="subtask.description" placeholder="Popis" theme="snow" class="rich-text-editor" @input="subtask.description = $event.srcElement.innerHTML" />
 					</div>
 
-					<Z-files-upload class="mt-15 files" :files="subtask.files" @files-uploaded="filesUploaded" />
+					<Z-files-upload class="mt-15 files" :files="subtask.files" @files-uploaded="filesUploaded" :is-saving="isSaving" />
 				</v-card-actions>
 
-				<v-btn class="button primary" @click="save()">{{ subtask.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn>
+				<v-btn class="button primary" v-if="!isSaving" @click="save()">{{ subtask.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn>
+				<v-btn class="button primary disabled" v-else disabled>{{ $t('Ukladám...')}}</v-btn>
 			</v-card>
 
 			<v-card v-else height="100%" class="d-flex flex-column scrolling">
@@ -138,6 +139,7 @@ export default {
 			editMode: false,
 			visible: false,
 			subtask: null,
+			isSaving: false,
 			errorUtils,
 			v$: useVuelidate(),
 			employeeValidations: [],
@@ -188,8 +190,9 @@ export default {
 
 	methods: {
 		async showModal({subtask, editMode = false, mastertask = {}}) {
-			this.subtask = null
-			this.visible = true
+			this.isSaving 	= false
+			this.subtask 	= null
+			this.visible 	= true
 			this.$nextTick(() => this.v$.$reset())
 			
 			try {
@@ -233,6 +236,7 @@ export default {
 			this._mergeDeadlineTimeDate()
 
 			try {
+				this.isSaving = true
 				this.subtask.deadline = moment(this.subtask.deadline).format('YYYY-MM-DD HH:mm:SS')
 
 				if (this.subtask?.id) {
@@ -259,15 +263,8 @@ export default {
 			} catch (error) {
 				console.error(error)
 				this.$toast.error(error)
-			}
-		},
-
-		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)
+			} finally {
+				this.isSaving = true
 			}
 		},
 

app/src/plugins/w/loadable/_components/w-loadable.vue

@@ -54,6 +54,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-div
-	height: calc( 100vh - 329px )
+// div
+// 	height: calc( 100vh - 329px )
 </style>