[tm@modals] Refactoring

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

@@ -11,8 +11,8 @@
 				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center">
-				<v-btn class="z-btn" variant="flat" @click="complete()">ÁNO</v-btn>
-				<v-btn class="ml-7 cancel-btn" @click.stop="visible = false">ZRUŠIŤ</v-btn>
+				<v-btn class="button primary" variant="flat" @click="complete()">ÁNO</v-btn>
+				<v-btn class="ml-7 button cancel" @click.stop="visible = false">ZRUŠIŤ</v-btn>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
@@ -20,7 +20,7 @@
 
 <script>
 export default {
-	emits: ['close'],
+	emits: ['close', 'task-completed'],
 
 	data() {
 		return {
@@ -37,14 +37,9 @@ export default {
 
 		async complete() {
 			try {
-				const task = {
-					...this.task,
-					is_finished: true
-				}
-
-				await this.$axios.post(`v1/tasks/${task.id}`, task)
+				await this.$axios.post(`v1/tasks/${this.task.id}`, {...this.task, is_finished: true})
 				this.visible = false
-				this.$emit('completeTask', task.id)
+				this.$emit('task-completed', this.task)
 			} catch (error) {
 				this.$toast.error(error)
 			}

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

@@ -5,14 +5,14 @@
 				<h1>Ste si istý, že chcete zmazať <b>{{ task.title }}</b>?</h1>
 
 				<v-icon
-					@click.stop="visible = false"
+					@click.stop="closeModal()"
 					icon="mdi-close"
 					size="large"
 				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center">
-				<v-btn class="z-btn" variant="flat" @click="deleteTask()">ÁNO</v-btn>
-				<v-btn class="ml-7 cancel-btn" @click.stop="visible = false">ZRUŠIŤ</v-btn>
+				<v-btn class="button primary" variant="flat" @click="deleteTask()">ÁNO</v-btn>
+				<v-btn class="ml-7 button cancel" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
@@ -35,11 +35,15 @@ export default {
 			this.visible = true
 		},
 
+		closeModal() {
+			this.visible = false
+		},
+
 		async deleteTask() {
 			try {
 				await this.$axios.delete(`v1/tasks/${this.task.id}`)
-				this.visible = false
 				this.$emit('deleted', this.task)
+				this.closeModal()
 			} catch (error) {
 				this.$toast.error(error)
 			}

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

@@ -5,7 +5,7 @@
 				<h1>Prosím zadajte odpracovaný čas</h1>
 
 				<v-icon
-					@click.stop="close()"
+					@click.stop="closeModal()"
 					icon="mdi-close"
 					size="large"
 				></v-icon>
@@ -20,7 +20,7 @@
 					append-inner-icon="mdi-timer-outline"
 				></v-text-field>
 			</v-card-actions>
-			<v-btn class="z-btn mt-5">Potvrdiť</v-btn>
+			<v-btn class="button primary mt-5">Potvrdiť</v-btn>
 		</v-card>
 	</v-dialog>
 </template>
@@ -55,7 +55,7 @@ export default {
 			this.visible = true
 		},
 
-		close() {
+		closeModal() {
 			this.visible = false
 			this.$emit('close', this.blocker)
 			this.blocker = null
@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.z-btn
+.button primary
 	height: 48px !important
 
 h1

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

@@ -4,7 +4,7 @@
 			<v-card v-if="editMode" height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ task.id ? 'Upraviť task' : 'Vytvoriť task' }}</h1>
-					<v-icon @click.stop="close()" icon="mdi-close" size="large"></v-icon>
+					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
 				</div>
 
 				<v-card-actions class="d-flex flex-column modal-content">
@@ -82,7 +82,7 @@
 					<Z-files-upload class="mt-15 files" @files-uploaded="filesUploaded" />
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">{{
+				<v-btn class="button primary" @click="save()">{{
 					task.id ? 'UPRAVIŤ' : 'VYTVORIŤ'
 				}}</v-btn>
 			</v-card>
@@ -91,7 +91,7 @@
 				<div class="d-flex justify-space-between align-center">
 					<p>{{ task.project_code }}</p>
 					<v-icon
-						@click.stop="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 						class="pb-5"
@@ -112,7 +112,7 @@
 							class="trash-icon"
 							:src="require('@/plugins/tm@overview/_img/trash-icon.svg')"
 							alt="trash-icon"
-							@click.stop="deleteTask(task)"
+							@click.stop="openDeleteTaskModal(task)"
 						/>
 					</div>
 				</div>
@@ -181,7 +181,7 @@
 								<v-sheet class="ma-2">
 									<p
 										v-html="
-											`${formattedStartDate} - ${formattedEndDate}`
+											`${tmUtils.formatDateTime(task.starts_at)} - ${tmUtils.formatDateTime(task.ends_at)}`
 										"
 									/>
 								</v-sheet>
@@ -307,10 +307,10 @@
 							</div>
 						</div>
 						<div class="d-flex justify-start align-center mt-8">
-							<v-btn class="done-btn" @click.stop="clickCompleteTask()"
+							<v-btn class="done-btn" @click.stop="task.is_finished = 1; save()"
 								>Dokončené</v-btn
 							>
-							<v-btn class="add-employee-btn" @click="save()"
+							<v-btn class="button secondary" @click="save()"
 								>Uložiť zmeny</v-btn
 							>
 						</div>
@@ -329,11 +329,14 @@ import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
 import moment 			from 'moment'
 import { QuillEditor } 	from '@vueup/vue-quill'
+import VuetifyFixFocusMixin from  '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 import * as FileSaver 	from 'file-saver'
+import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
 export default {
 	emits: ['close', 'refresh'],
+	mixins: [VuetifyFixFocusMixin],
 
 	components: {
 		Datepicker,
@@ -343,6 +346,7 @@ export default {
 
 	data() {
 		return {
+			tmUtils,
 			editMode: false,
 			visible: false,
 			task: null,
@@ -355,6 +359,15 @@ export default {
 		}
 	},
 
+	computed: {
+		employees() {
+			if (!this.task?.master_task?.employees)
+				return []
+
+			return tmUtils.enrichEmployeesByFullName(this.task.master_task.employees)
+		}
+	},
+
 	validations() {
 		return {
 			task: {
@@ -369,61 +382,35 @@ export default {
 
 	mounted() {
 		this.$events.on('on-task-deleted', (task) => {
-			if (task?.id == this.task?.id) this.close()
+			if (task?.id == this.task?.id) this.closeModal()
 		})
 	},
 
 	methods: {
-		// async downloadFile() {
-		// 	try {
-		// 		const file = await this.$axios.get_auth(`v1/files/${this.file.basename}`, { responseType: 'arraybuffer' })
-		// 		const blob = new Blob([file], { type: this.file.mimetype })
-		// 		FileSaver.saveAs(blob, this.file.name)
-		// 		this.isLoading = false
-		// 	} catch(error) {
-		// 		this.$toast.error(error)
-		// 	}
-		// },
-
 		async showModal(task, editMode = false) {
 			this.visible = true
 			this.task = null
 
 			try {
 				this.masterTasks = await this.$axios.get_auth_data('v1/mastertasks')
-			} catch (error) {
-				this.$toast.error(error)
-			}
+				if (task?.id) {
+					const t = await this.$axios.get_auth_data(`v1/tasks/${task.id}`)
 
-			if (task?.id) {
-				await this._load(task.id)
-				this.editMode = editMode || !this.task?.id
-			} else {
-				const task = {
-					project_code: null,
-					date: null,
-					team: {},
-					employee: null,
-					duration: null,
-					description: null,
-					files: [],
+					this.selectedEmployeeId 	= t.employee.id
+					this.selectedMasterTaskId 	= t.master_task.id
+					this.task 					= t
+				} else {
+					this.task = {master_task: {}}
 				}
 
-				setTimeout(() => {
-					this.task = task
-					this.editMode = editMode || !this.task.id
-				})
+				this.editMode = (editMode || !this.task.id)
+			} catch (error) {
+				this.$toast.error(error)
 			}
 		},
 
-		async clickCompleteTask() {
-			try {
-				await this.$axios.delete(`v1/tasks/${this.task.id}`)
-				this.close()
-			} catch (error) {
-				this.$toast.error(error)
-			}
-			this.close()
+		closeModal() {
+			this.visible = false
 		},
 
 		async save() {
@@ -431,126 +418,43 @@ export default {
 
 			try {
 				if (this.task.id) {
-					await this._update()
-					this.close()
-				} else await this._create()
+					await this.$axios.post_auth(`v1/master-tasks/${this.task.id}`)
+				} else {
+					await this.$axios.post_auth('v1/mastertasks')
+				}
 
-				this.close()
+				this.closeModal()
+
+				// Kravarik: Toto tu ma byt?
 				this.$router.push({ name: 'Dashboard - Tasks' })
 			} catch (error) {
 				this.$toast.error(error)
 			}
 		},
 
-		close() {
-			this.visible = false
-			this.$emit('close', this.task)
-		},
-
-		async _load(taskId) {
-			try {
-				const task = await this.$axios.get_auth_data(`v1/tasks/${taskId}`)
-
-				// const employees = task.master_task.employees.map(employee => {
-				// 	employee._fullName = `${employee.name} ${employee.surname}`
-				// 	return employee
-				// })
-
-				// this.employees 				= employees
-				this.task 					= task
-				this.selectedEmployeeId 	= this.task.employee.id
-				this.selectedMasterTaskId 	= this.task.master_task.id
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		async _create() {
-			try {
-				await this.$axios.post_auth('v1/mastertasks')
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		async _update() {
-			try {
-				await this.$axios.post_auth(`v1/master-tasks/${this.task.id}`)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		deleteTask(task) {
+		openDeleteTaskModal(task) {
 			this.$events.emit('show-delete-task-modal', { task })
 		},
 
-		onTaskDeleted() {
-			this.$emit('refresh')
-		},
-
-		employeeSelected(selectedOption) {
-			const employee = this.task.master_task.employees.find(employee => employee.id == selectedOption.key)
-			this.task.employee = employee
-		},
-
-		// Vuetify input was automatically focus after date input was clicked. This will prevent this unwanted behavior
-		onDateFocus($event) {
-			if ($event == undefined) {
-				this.preventInputFocus = true
-			}
-		},
-
-		onInputFocus($event) {
-			if (this.preventInputFocus) {
-				$event.target.blur()
-				this.preventInputFocus = false
-			}
-		},
-
 		filesUploaded(files) {
 			this.task.files = files
 		},
 	},
 
-	computed: {
-		employees() {
-			if (!this.task?.master_task?.employees)
-				return []
-
-			return this.task.master_task.employees.map(employee => {
-				employee._fullName = `${employee.name} ${employee.surname}`
-				return employee
-			})
-		},
-
-		formattedStartDate() {
-			let startDate = moment(this.task.starts_at)
-			let date = startDate.format('DD.MM.yyyy, HH:mm')
-			return date
-		},
-
-		formattedEndDate() {
-			let endDate = moment(this.task.ends_at)
-			let date = endDate.format('DD.MM.yyyy, HH:mm')
-			return date
-		},
-	},
-
 	watch: {
-		selectedMasterTaskId() {
-			this.task.master_task = this.masterTasks.find(
-				(masterTask) => masterTask.id == this.selectedMasterTaskId
-			)
+		selectedMasterTaskId(value) {
+			if (!value || !this.task) return
 
-			// Kravarik: Tu bude treba vymsliet logiku resetovania, ale ked dam toto sa to trigeruje aj pri otvarani existujuceho tasku a hned to vymaze
-			// this.selectedEmployeeId 	= null
-			// this.task.employee 			= {}
+			this.task.master_task = this.masterTasks.find(
+				(masterTask) => masterTask.id == value
+			)
 		},
 
-		selectedEmployeeId() {
+		selectedEmployeeId(value) {
+			if (!value || !this.task) return
+
 			this.task.employee = this.task.master_task.employees.find(
-				(employee) => employee.id == this.selectedEmployeeId
+				(employee) => employee.id == value
 			)
 		},
 	},
@@ -558,59 +462,9 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.modal-input
-	width: 100% !important
-	flex: 0 0 auto
-.modal-header
-	flex: 0 0 auto
-
-.modal-content
-	flex: 1 1 100%
-	margin: 10px 0
-	overflow-y: scroll
-
-.z-btn
-	height: 50px
-	width: 100%
-	flex: 0 0 auto
-
-.employee-position
-	position: relative
-
-.employee-select-avatar
-	background: #6200EE
-	color: #fff
-	border-radius: 50%
-	padding: 13px
-	font-size: 11.5px
-	height: 24px
-	width: 24px
-	position: absolute
-	top: 50%
-	right: 0
-	transform: translate(-50%, -50%)
-
-.add-employee-btn
-	color: #6200EE
-	border: 1px solid #E0E0E0
-	border-radius: 4px
-	height: 50px
-	width: 203px
 .scrolling
 	overflow: hidden !important
 
-.trash-icon
-	padding: 10px
-	background: rgba(0, 0, 0, 0.04)
-	margin-left: 12px
-	border-radius: 50%
-	cursor: pointer
-.pencil-icon
-	padding: 10px
-	background: rgba(0, 0, 0, 0.04)
-	border-radius: 50%
-	cursor: pointer
-
 .border-bottom
 	border-bottom: 1px solid rgba(0,0,0,.1)