[tm@modals] Refactoring

app/src/plugins/app/_theme/_components/buttons.sass

@@ -0,0 +1,18 @@
+.button.primary
+	background: #7f39fb !important
+	border-radius: 4px !important
+	color: #fff !important
+	height: 50px
+	width: 100%
+	flex: 0 0 auto
+
+.button.secondary
+	color: #6200EE
+	border: 1px solid #E0E0E0
+	border-radius: 4px
+	height: 50px
+	width: 203px
+
+.button.cancel
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important
+	color: #7f39fb !important

app/src/plugins/app/_theme/_components/modals.sass

@@ -0,0 +1,13 @@
+.modal-header
+	.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

app/src/plugins/app/_theme/_components/z-cancel-btn.sass

@@ -1,3 +0,0 @@
-.cancel-btn
-	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important
-	color: #7f39fb !important

app/src/plugins/app/_theme/_components/z-default-btn.sass

@@ -1,4 +0,0 @@
-.z-btn
-	background: #7f39fb !important
-	border-radius: 4px !important
-	color: #fff !important

app/src/plugins/app/_theme/index.sass

@@ -1,13 +1,14 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap')
 
 @import './vuetify/v-dialog'
-@import './_components/z-default-btn'
+@import './_components/buttons'
-@import './_components/z-cancel-btn'
 @import './date-picker'
 
 @import './global'
 @import '@/plugins/lib@auth/_theme/auth.theme'
 
+@import './modals'
+
 *
 	font-family: 'Roboto', sans-serif
 

app/src/plugins/app/_theme/modals.sass

@@ -0,0 +1,17 @@
+.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
+
+.remove-input
+	pointer-events: auto
+	opacity: 2
+	position: absolute
+	left: 92%
+	top: 25%

app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue

@@ -43,7 +43,7 @@ export default {
 
 	methods: {
 		async submit() {
-			if (!(await this.v$.$validate())) return console.log(this.v$)
+			if (!(await this.v$.$validate())) return
 
 			try {
 				await this.$axios.post_data('v1/auth/reset', this.form)

app/src/plugins/lib@search/search/search.vue

@@ -24,7 +24,6 @@ export default {
 	created() {
 		try {
 			this.searchResults = this.$axios.get_auth_data('v1/search')
-			console.log(this.searchResults)
 		} catch (error) {
 			this.$toast.error(error)
 		}

app/src/plugins/tm@_utils/tm.utils.ts

@@ -0,0 +1,19 @@
+import moment from 'moment'
+
+export default {
+	enrichEmployeesByFullName(employees) {
+		return employees.map(employee => ({...employee, _fullName: `${ employee.name } ${ employee.surname }`}))
+	},
+
+	formatDateTime(date) {
+		return moment(date).format('DD.MM.yyyy, HH:mm')
+	},
+
+	isBefore(date, compareTo = null) {
+		return moment(date).isBefore(moment(compareTo))
+	},
+
+	isAfter(date, compareTo = null) {
+		return moment(date).isAfter(moment(compareTo))
+	}
+}

app/src/plugins/tm@modal/_mixins/vuetify-fix-focus.ts

@@ -0,0 +1,23 @@
+export default {
+	// Mixin to fix autofocus on v-input in modals where date selects are used
+	data() {
+		return {
+			preventInputFocus: false
+		}
+	},
+
+	methods: {
+		onDateFocus($event) {
+			if ($event == undefined) {
+				this.preventInputFocus = true
+			}
+		},
+
+		onInputFocus($event) {
+			if (this.preventInputFocus) {
+				$event.target.blur()
+				this.preventInputFocus = false
+			}
+		}
+	}
+}

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

@@ -5,7 +5,7 @@
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť'}} blocker</h1>
 					<v-icon
-						@click.stop="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 					></v-icon>
@@ -26,7 +26,7 @@
 						variant="solo"
 					></v-text-field>
 					<div
-						class="employee-position w-100"
+						class="relative w-100"
 						v-for="(employee, index) in blocker.employees"
 						:key="employee.id"
 					>
@@ -66,22 +66,26 @@
 					/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
+				<v-btn class="button primary" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
 </template>
 
 <script>
-import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+import ZAutocomplete 		from '@/plugins/tm@_components/z-autocomplete.vue'
-import Datepicker	 	from '@vuepic/vue-datepicker'
+import Datepicker	 		from '@vuepic/vue-datepicker'
-import useVuelidate 	from '@vuelidate/core'
+import useVuelidate 		from '@vuelidate/core'
-import { required } 	from '@vuelidate/validators'
+import { required } 		from '@vuelidate/validators'
-import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
+import errorUtils 			from '@/plugins/lib@auth/_utils/error.utils'
+import VuetifyFixFocusMixin from  '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
+import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
 
 const atLeastOne = (value) => value.length
 
 export default {
+	mixins: [VuetifyFixFocusMixin],
+
 	emits: ['close'],
 
 	components: {
@@ -92,7 +96,7 @@ export default {
 	data() {
 		return {
 			visible: false,
-			allEmployees: null,
+			employees: null,
 			v$: useVuelidate(),
 			errorUtils,
 			blocker: null
@@ -104,7 +108,7 @@ export default {
 			const selectedEmployeesIds = this.blocker.employees.map(
 				(employee) => employee.id
 			)
-			const employees = this.allEmployees.filter(
+			const employees = this.employees.filter(
 				(employee) => !selectedEmployeesIds.includes(employee.id)
 			)
 
@@ -133,29 +137,22 @@ export default {
 			this.blocker = null
 
 			try {
-				const allEmployees = await this.$axios.get_auth_data('v1/employees')
+				const employees = await this.$axios.get_auth_data('v1/employees')
-				this.allEmployees  = this._enrichEmployeesByFullName(allEmployees)
+				this.employees 	= tmUtils.enrichEmployeesByFullName(employees)
+
+				if (blocker?.id) {
+					const b 	  = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
+					this.blocker  = {...b, employees: tmUtils.enrichEmployeesByFullName(b.employees)}
+				} else {
+					this.blocker  = {employees: []}
+				}
 			} catch (error) {
 				this.$toast.error(error)
 			}
-
-			if (blocker?.id) {
-				await this._load(blocker.id)
-			} else {
-				const blocker = {
-					name: '',
-					date: null,
-					employees: []
-				}
-
-				setTimeout(() => {
-					this.blocker = blocker
-				})
-			}
 		},
 
 		employeeSelected(selectedOption) {
-			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
+			const employee = this.employees.find((empl) => empl.id == selectedOption.key)
 			this.blocker.employees.push(employee)
 		},
 
@@ -165,97 +162,23 @@ export default {
 
 			try {
 				if (this.blocker.id)
-					await this._edit()
+					await this.$axios.post_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
 				else
-					await this._create()
+					await this.$axios.post_auth('v1/blockers', this.blocker)
 
-				this.close()
+				this.closeModal()
+
+				// Kravarik: Toto tu ma byt?
 				this.$router.push({ name: 'Dashboard - Tasks' })
 			} catch (error) {
 				this.$toast(error)
 			}
 		},
 
-		close() {
+		closeModal() {
 			this.visible = false
 			this.$emit('close', this.blocker)
-		},
-
-		async _create() {
-			try {
-				await this.$axios.post_auth('v1/blockers', this.blocker)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		async _edit() {
-			try {
-				await this.$axios.post_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		async _load() {
-			try {
-				const blocker 		= await this.$axios.get_auth_data(`v1/blockers/${this.blocker.id}`)
-				blocker.employees 	= this._enrichEmployeesByFullName(blocker.employees)
-
-				this.blocker = blocker
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		// 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
-			}
-		},
-
-		_enrichEmployeesByFullName(employees) {
-			return employees.map(employee => {
-				employee._fullName = `${employee.name} ${employee.surname}`
-				return employee
-			})
 		}
 	}
 }
-</script>
+</script>
-
-<style lang="sass" scoped>
-.modal-input
-	width: 100%
-	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
-
-.remove-input
-	pointer-events: auto
-	opacity: 2
-	position: absolute
-	left: 92%
-	top: 25%
-
-.employee-position
-	position: relative
-</style>

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

@@ -5,7 +5,7 @@
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ masterTask.id ? 'Upraviť master task' : 'Vytvoriť master task' }}</h1>
 					<v-icon
-						@click.stop="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 					></v-icon>
@@ -64,7 +64,7 @@
 					></v-text-field>
 
 					<v-select
-						v-model="selectedTeam"
+						v-model="teamSelect"
 						@focus="onInputFocus"
 						class="modal-input border-select"
 						label="Tím"
@@ -101,7 +101,17 @@
 						@option-selected="employeeSelected"
 					/>
 
-					<v-btn class="w-100 mb-5 add-employee-btn" :disabled="!masterTask.team.employees" @click="showAddEmployeeInput = true">
+					<!-- Kravarik: Tu je original autocomplete, skus to spravit radsej cez tento -->
+					<!-- <v-autocomplete
+						ref="employee-select"
+						v-model="employeeSelect"
+						:items="employees"
+						item-value="id"
+						item-title="_fullName"
+						class="modal-input"
+					/> -->
+
+					<v-btn class="w-100 mb-5 button secondary" :disabled="!masterTask.team.employees" @click="showAddEmployeeInput = true">
 						<v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca
 					</v-btn>
 
@@ -117,14 +127,14 @@
 					<Z-files-upload class="mt-15 files" @files-uploaded="filesUploaded"/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
+				<v-btn class="button primary" @click="save()">VYTVORIŤ</v-btn>
 			</v-card>
 
 			<v-card v-else height="100%" class="d-flex flex-column scrolling">
 				<div class="d-flex justify-space-between align-center">
 					<p>{{ masterTask.project_code }}</p>
 					<v-icon
-						@click.stop="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 						class="pb-5"
@@ -134,7 +144,7 @@
 					<h1>{{ masterTask.name }}</h1>
 					<div class="d-flex justify-start">
 						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="editMode = !editMode" />
-						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="deleteTask()"/>
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="_delete()"/>
 					</div>
 				</div>
 
@@ -173,7 +183,7 @@
 							</v-col>
 							<v-col cols="7">
 								<v-sheet class="ma-2">
-									<p :class="`${compareDates ? 'text-black' : 'text-red-darken-4'}`">{{ formattedDeadline }}</p>
+									<p :class="`${tmUtils.isAfter(masterTask.deadline) ? 'text-black' : 'text-red-darken-4'}`">{{ tmUtils.formatDateTime(masterTask.deadline) }}</p>
 								</v-sheet>
 							</v-col>
 						</v-row>
@@ -269,7 +279,7 @@
 							</div>
 						</div>
 						<div class="d-flex justify-start align-center mt-8">
-							<v-btn class="z-btn" @click="save()">Ukončiť mastertask</v-btn>
+							<v-btn class="button primary" @click="save()">Ukončiť mastertask</v-btn>
 						</div>
 						<v-table class="mt-7 mb-5">
 							<tbody class="px-5 py-5">
@@ -308,9 +318,11 @@ import ZFilesUpload 	from '@/plugins/tm@_components/z-files-upload.vue'
 import useVuelidate 	from '@vuelidate/core'
 import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
-import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+// import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
+import VuetifyFixFocusMixin from  '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
 import moment 			from 'moment'
 import { QuillEditor } 	from '@vueup/vue-quill'
+import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
 import * as FileSaver	from 'file-saver'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
@@ -318,26 +330,29 @@ const atLeastOne = (value) => value.length
 
 export default {
 	emits: ['close'],
+	mixins: [VuetifyFixFocusMixin],
 
 	components: {
 		Datepicker,
 		ZFilesUpload,
-		ZAutocomplete,
+		// ZAutocomplete,
 		QuillEditor
 	},
 
 	data() {
 		return {
+			tmUtils,
 			editMode: false,
 			visible: false,
 			errorUtils,
 			v$: useVuelidate(),
-			preventInputFocus: false,
 			teams: null,
 			employees: null,
-			selectedTeam: '',
+			employeeSelect: null,
-			showAddEmployeeInput: false,
+			teamSelect: '',
-			masterTask: null
+			masterTask: null,
+
+			showAddEmployeeInput: false
 		}
 	},
 
@@ -354,47 +369,31 @@ export default {
 	},
 
 	methods: {
-		// async downloadFile() {
+		itemSelected(x) {
-		// 	try {
+			console.log(x)
-		// 		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(masterTask, editMode = false) {
-			this.visible = true
+			this.visible 		= true
-			this.masterTask = null
+			this.masterTask 	= null
+			this.teamSelect 	= null
+			this.employeeSelect = null
 
 			try {
 				this.teams 		= await this.$axios.get_auth_data('v1/teams')
-				this.employees 	= await this.$axios.get_auth_data('v1/employees')
+				const employees = await this.$axios.get_auth_data('v1/employees')
-			} catch (error) {
+				this.employees 	= tmUtils.enrichEmployeesByFullName(employees)
-				this.$toast.error(error)
-			}
 
-			if (masterTask?.id) {
+				if (masterTask?.id) {
-				await this._load(masterTask.id)
+					this.masterTask = await this.$axios.get_auth_data(`v1/master-tasks/${masterTask.id}`)
-				this.editMode = editMode || !masterTask?.id
+					this.teamSelect = this.masterTask.team.id
-			} else {
+				} else {
-				const masterTask = {
+					this.masterTask = {team: {}, employees: []}
-					project_code: null,
-					name: null,
-					deadline: null,
-					duration: null,
-					team: {},
-					description: null,
-					employees: [],
-					files: []
 				}
 
-				setTimeout(() => {
+				this.editMode = (editMode || !this.masterTask.id)
-					this.masterTask = masterTask
+			} catch (error) {
-					this.editMode = editMode || !this.masterTask.id
+				this.$toast.error(error)
-				})
 			}
 		},
 
@@ -404,54 +403,32 @@ export default {
 
 			try {
 				if (this.masterTask.id)
-					await this._update()
+					await this.$axios.post_auth(`v1/master-tasks/${this.masterTask.id}`, this.masterTask)
 
 				else
-					await this._create()
+					await this.$axios.post_auth('v1/mastertasks')
 
-				this.close()
+				this.closeModal()
-				this.$router.push({ name: 'Dashboard - Tasks' })
+				// this.$router.push({ name: 'Dashboard - Tasks' })
 			} catch (error) {
 				this.$toast(error)
 			}
 		},
 
-		close() {
+		closeModal() {
 			this.visible = false
 			this.$emit('close', this.masterTask)
 		},
 
-		async _load(masterTaskId) {
+		async _delete() {
-			try {
+			// Kravarik: Tu sa ma volat delete-master-task-modal, ak taka funkcionalita vlastne je
-				this.masterTask = await this.$axios.get_auth_data(`v1/master-tasks/${masterTaskId}`)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
 
-		async _create() {
+			// try {
-			try {
+			// 	await this.$axios.delete(`v1/master-tasks/${this.masterTask.id}`)
-				await this.$axios.post_auth('v1/mastertasks')
+			// 	this.closeModal()
-			} catch (error) {
+			// } catch (error) {
-				this.$toast.error(error)
+			// 	this.$toast.error(error)
-			}
+			// }
-		},
-
-		async _update() {
-			try {
-				await this.$axios.post_auth(`v1/master-tasks/${this.masterTask.id}`)
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		async deleteTask(masterTaskId) {
-			try {
-				await this.$axios.delete(`v1/master-tasks/${masterTaskId}`)
-				this.close()
-			} catch (error) {
-				this.$toast.error(error)
-			}
 		},
 
 		employeeSelected(selectedOption) {
@@ -460,27 +437,12 @@ export default {
 			this.showAddEmployeeInput = false
 		},
 
-		// 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.masterTask.files = files
 		}
 	},
 
 	computed: {
-
 		totalHours() {
 			let hours = 0
 
@@ -505,57 +467,36 @@ export default {
 					value: `${employee.name} ${employee.surname}`,
 				}
 			})
-		},
-
-		formattedDeadline() {
-			let deadline = moment(this.masterTask.deadline)
-			let date = deadline.format('DD.MM.yyyy')
-			return date
-		},
-
-		compareDates() {
-			const date1 = moment()
-			const date2 = moment(this.masterTask.deadline)
-			return moment(date1).isBefore(date2)
 		}
 	},
 
 	watch: {
-		selectedTeam() {
+		teamSelect(value) {
-			this.masterTask.team 		= this.teams.find(team => team.id == this.selectedTeam)
+			if (!value || !this.masterTask) return
+
+			this.masterTask.team 		= this.teams.find(team => team.id == value)
 			this.masterTask.employees 	= this.masterTask.team.employees
+		},
+
+		employeeSelect(value) {
+			if (!value || !this.masterTask) return
+
+			const employee 				= this.employees.find(employee => employee.id == value)
+			this.masterTask.employees.push(employee)
+
+			this.$nextTick(() => {
+				this.employeeSelect = null
+				this.$el.activeElement.blur()
+				// console.log(this.$refs['employee-select'])
+				// this.$refs['employee-select'].focused = false
+				// this.employeeSelect = ''
+			})
 		}
 	}
 }
 </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
-
-.remove-input
-	pointer-events: auto
-	opacity: 2
-	position: absolute
-	left: 92%
-	top: 25%
-
-.employee-position
-	position: relative
-
 .employee-select-avatar
 	background: #6200EE
 	color: #fff
@@ -568,28 +509,11 @@ export default {
 	top: 50%
 	right: 0
 	transform: translate(-50%, -50%)
-
-.add-employee-btn
-	color: #6200EE
-	border: 1px solid #E0E0E0
-	border-radius: 4px
-	height: 50px
 .scrolling
 	overflow: hidden !important
 
 .scroll-employees
 	overflow-x: scroll
-.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)

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="button primary" 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="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 = {
+				await this.$axios.post(`v1/tasks/${this.task.id}`, {...this.task, is_finished: true})
-					...this.task,
-					is_finished: true
-				}
-
-				await this.$axios.post(`v1/tasks/${task.id}`, task)
 				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="button primary" 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="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) {
+				if (task?.id) {
-				this.$toast.error(error)
+					const t = await this.$axios.get_auth_data(`v1/tasks/${task.id}`)
-			}
 
-			if (task?.id) {
+					this.selectedEmployeeId 	= t.employee.id
-				await this._load(task.id)
+					this.selectedMasterTaskId 	= t.master_task.id
-				this.editMode = editMode || !this.task?.id
+					this.task 					= t
-			} else {
+				} else {
-				const task = {
+					this.task = {master_task: {}}
-					project_code: null,
-					date: null,
-					team: {},
-					employee: null,
-					duration: null,
-					description: null,
-					files: [],
 				}
 
-				setTimeout(() => {
+				this.editMode = (editMode || !this.task.id)
-					this.task = task
+			} catch (error) {
-					this.editMode = editMode || !this.task.id
+				this.$toast.error(error)
-				})
 			}
 		},
 
-		async clickCompleteTask() {
+		closeModal() {
-			try {
+			this.visible = false
-				await this.$axios.delete(`v1/tasks/${this.task.id}`)
-				this.close()
-			} catch (error) {
-				this.$toast.error(error)
-			}
-			this.close()
 		},
 
 		async save() {
@@ -431,126 +418,43 @@ export default {
 
 			try {
 				if (this.task.id) {
-					await this._update()
+					await this.$axios.post_auth(`v1/master-tasks/${this.task.id}`)
-					this.close()
+				} else {
-				} else await this._create()
+					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() {
+		openDeleteTaskModal(task) {
-			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) {
 			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() {
+		selectedMasterTaskId(value) {
-			this.task.master_task = this.masterTasks.find(
+			if (!value || !this.task) return
-				(masterTask) => masterTask.id == this.selectedMasterTaskId
-			)
 
-			// Kravarik: Tu bude treba vymsliet logiku resetovania, ale ked dam toto sa to trigeruje aj pri otvarani existujuceho tasku a hned to vymaze
+			this.task.master_task = this.masterTasks.find(
-			// this.selectedEmployeeId 	= null
+				(masterTask) => masterTask.id == value
-			// this.task.employee 			= {}
+			)
 		},
 
-		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)
 

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

@@ -5,12 +5,12 @@
 				<h1>
 					Ste si istý, že chcete zmazať tím <b>{{ team.name }}</b>?
 				</h1>
-				<v-icon @click.stop="visible = false" icon="mdi-close" size="large"></v-icon>
+				<v-icon @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="deleteTeam()">ÁNO</v-btn>
+				<v-btn class="button primary" variant="flat" @click="deleteTeam()">ÁNO</v-btn>
-				<v-btn class="ml-7 cancel-btn" @click.stop="visible = false">ZRUŠIŤ</v-btn>
+				<v-btn class="ml-7 button cancel" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
@@ -23,7 +23,7 @@ export default {
 	data() {
 		return {
 			visible: false,
-			team: null,
+			team: null
 		}
 	},
 
@@ -33,6 +33,10 @@ export default {
 			this.visible = true
 		},
 
+		closeModal() {
+			this.visible = false
+		},
+
 		async deleteTeam() {
 			try {
 				await this.$axios.delete(`v1/teams/${this.team.id}`)

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

@@ -5,7 +5,7 @@
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ team.id ? 'Upraviť tím' : 'Vytvoriť tím' }}</h1>
 					<v-icon
-						@click.stop="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 					></v-icon>
@@ -26,7 +26,7 @@
 					></v-text-field>
 
 					<div
-						class="employee-position w-100"
+						class="relative w-100"
 						v-for="(employee, index) in team.employees"
 						:key="employee.id"
 					>
@@ -54,7 +54,7 @@
 					/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">{{ team.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
+				<v-btn class="button primary" @click="save()">{{ team.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
@@ -65,6 +65,7 @@ import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 import useVuelidate		from '@vuelidate/core'
 import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
+import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
 
 const atLeastOne = (value) => value.length
 
@@ -95,89 +96,49 @@ export default {
 	},
 
 	methods: {
-		async save() {
-			if (!(await this.v$.$validate()))
-				return
-
-			try {
-				if (this.team.id)
-					await this._edit()
-				else
-					await this._create()
-
-				this.close()
-			} catch (error) {
-				this.$toast(error)
-			}
-		},
-
 		async showModal(team = null) {
 			this.visible = true
 			this.team = null
 
 			try {
 				const allEmployees = await this.$axios.get_auth_data('v1/employees')
-				this.allEmployees = this._enrichEmployeesByFullName(allEmployees)
+				this.allEmployees = tmUtils.enrichEmployeesByFullName(allEmployees)
+
+				if (team?.id) {
+					const t = await this.$axios.get_auth_data(`v1/teams/${team.id}`)
+					this.team  = {...t, employees: tmUtils.enrichEmployeesByFullName(t.employees)}
+				} else {
+					this.team = {employees: []}
+				}
 			} catch (error) {
 				this.$toast.error(error)
 			}
-
-			if (team?.id) {
-				await this._load(team.id)
-			} else {
-				const team = {
-					name: '',
-					employees: []
-				}
-
-				setTimeout(() => {
-					this.team = team
-				})
-			}
 		},
 
-		close() {
+		closeModal() {
 			this.visible = false
 			this.$emit('close', this.team)
 		},
 
-		async _create() {
+		async save() {
-			try {
+			if (!(await this.v$.$validate()))
-				await this.$axios.post_auth(`v1/teams`, this.team)
+				return
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
 
-		async _edit() {
 			try {
-				await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
+				if (this.team.id)
-			} catch (error) {
+					await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
-				this.$toast.error(error)
+				else
-			}
+					await this.$axios.post_auth(`v1/teams`, this.team)
-		},
 
-		async _load(id) {
+				this.closeModal()
-			try {
-				const team 		= await this.$axios.get_auth_data(`v1/teams/${id}`)
-				team.employees 	= this._enrichEmployeesByFullName(team.employees)
-
-				this.team = team
 			} catch (error) {
-				this.$toast.error(error)
+				this.$toast(error)
 			}
 		},
 
 		employeeSelected(selectedOption) {
 			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
 			this.team.employees.push(employee)
-		},
-
-		_enrichEmployeesByFullName(employees) {
-			return employees.map(employee => {
-				employee._fullName = `${employee.name} ${employee.surname}`
-				return employee
-			})
 		}
 	},
 
@@ -199,32 +160,4 @@ export default {
 		}
 	}
 }
-</script>
+</script>
-
-<style lang="sass" scoped>
-.modal-input
-	width: 100%
-	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
-
-.remove-input
-	pointer-events: auto
-	opacity: 2
-	position: absolute
-	left: 92%
-	top: 25%
-
-.employee-position
-	position: relative
-</style>

app/src/plugins/tm@profile/profile/my-profile.vue

@@ -58,7 +58,7 @@
 		></v-text-field>
 	</div>
 	<div class="py-5 px-5">
-		<v-btn class="z-btn" @click="updateUserInfo()">ULOŽIŤ ZMENY</v-btn>
+		<v-btn class="button primary" @click="updateUserInfo()">ULOŽIŤ ZMENY</v-btn>
 	</div>
 </template>