From da9d338175d8ddde0c00db67235e7044ef66abf3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 29 Nov 2022 20:17:51 +0100
Subject: [PATCH 1/4] [Teams] Autocomplete input component

---
 app/src/locales/en.json                       |  4 -
 app/src/locales/sk.json                       |  9 +-
 .../app/_components/a-delete-task-modal.vue   | 54 +++++++++++
 .../app/_components/a-delete-team-modal.vue   | 50 ++++------
 .../plugins/app/_components/a-team-modal.vue  | 32 +++++--
 .../app/_components/w-autocomplete.vue        | 91 +++++++++++++++++++
 app/src/plugins/app/_config/main.ts           | 16 ++--
 app/src/plugins/app/_config/router.ts         |  4 +-
 app/src/plugins/app/_theme/global.sass        |  5 +-
 app/src/plugins/app/_theme/index.sass         |  2 +
 .../plugins/app/_theme/vuetify/v-dialog.sass  |  4 +
 .../plugins/lib@auth/_utils/error.utils.ts    |  3 +-
 .../_components/a-reset-password-form.vue     |  4 +-
 .../_components/a-ongoing-table.vue           | 27 +++++-
 .../_components/a-unscheduled-table.vue       | 27 +++++-
 .../teams/_components/a-teams-table.vue       | 49 +++++-----
 app/src/plugins/w/i18n/index.ts               |  2 +-
 17 files changed, 293 insertions(+), 90 deletions(-)
 delete mode 100644 app/src/locales/en.json
 create mode 100644 app/src/plugins/app/_components/a-delete-task-modal.vue
 create mode 100644 app/src/plugins/app/_components/w-autocomplete.vue
 create mode 100644 app/src/plugins/app/_theme/vuetify/v-dialog.sass

diff --git a/app/src/locales/en.json b/app/src/locales/en.json
deleted file mode 100644
index b7ae363..0000000
--- a/app/src/locales/en.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-	"Chyba": "",
-	"Zadali ste neplatný email.": ""
-}
\ No newline at end of file
diff --git a/app/src/locales/sk.json b/app/src/locales/sk.json
index f93594f..1a3a939 100644
--- a/app/src/locales/sk.json
+++ b/app/src/locales/sk.json
@@ -1,4 +1,9 @@
 {
-	"Value is not a valid email address": "Zadali ste neplatný email.",
-	"error": "chyba"
+	"Value is not a valid email address": "Zadali ste neplatný email",
+	"error": "chyba",
+	"Value is required": "Pole je povinné",
+	"This field should be at least 8 characters long": "Pole musí obsahovať aspoň 8 znakov",
+	"This field should be at least 6 characters long": "Pole musí obsahovať aspoň 6 znakov",
+	"This maximum length allowed is 6": "Pole musí obsahovať 6 znakov",
+	"The value must be equal to the other value": "Heslá sa nezhodujú"
 }
\ No newline at end of file
diff --git a/app/src/plugins/app/_components/a-delete-task-modal.vue b/app/src/plugins/app/_components/a-delete-task-modal.vue
new file mode 100644
index 0000000..c1911f5
--- /dev/null
+++ b/app/src/plugins/app/_components/a-delete-task-modal.vue
@@ -0,0 +1,54 @@
+<template>
+	<v-dialog v-model="showModal" max-width="650">
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Ste si istý, že chcete zmazať <b>{{ task.title }}</b>?</h1>
+
+				<v-icon
+					@click.stop="$emit('close-modal')"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+			<v-card-actions class="mt-10 d-flex justify-start align-center">
+				<v-btn class="create-btn" variant="flat" @click="$emit('delete-task', task.id)">ÁNO</v-btn>
+				<v-btn class="ml-7 cancel-btn" @click.stop="$emit('close-modal')">ZRUŠIŤ</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	emits: ['delete-task', 'close-modal'],
+
+	props: {
+		show: {
+			type: Boolean,
+			required: true
+		},
+
+		task: {
+			type: Object,
+			required: true
+		}
+	},
+
+	computed: {
+		showModal() {
+			return this.show
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.cancel-btn
+	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity))
+	color: #7f39fb
+
+.create-btn
+	background: #7f39fb
+	border-radius: 4px
+	color: #fff
+</style>
\ No newline at end of file
diff --git a/app/src/plugins/app/_components/a-delete-team-modal.vue b/app/src/plugins/app/_components/a-delete-team-modal.vue
index 1c32920..827e5aa 100644
--- a/app/src/plugins/app/_components/a-delete-team-modal.vue
+++ b/app/src/plugins/app/_components/a-delete-team-modal.vue
@@ -1,17 +1,17 @@
 <template>
-	<v-dialog v-model="show" max-width="650">
+	<v-dialog v-model="showModal" max-width="650">
 		<v-card>
 			<div class="d-flex justify-space-between align-center">
-				<h1>Ste si istý, že chcete zmazať tento tím?</h1>
+				<h1>Ste si istý, že chcete zmazať tím <b>{{ team.name }}</b>?</h1>
 				<v-icon
-					@click.stop="show = false"
+					@click.stop="$emit('close-modal')"
 					icon="mdi-close"
 					size="large"
 				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center">
-				<v-btn class="create-btn" variant="flat" @click="deleteTeam()">ÁNO</v-btn>
-				<v-btn class="ml-7 cancel-btn" @click.stop="show = false">ZRUŠIŤ</v-btn>
+				<v-btn class="create-btn" variant="flat" @click="$emit('delete-team', team.id)">ÁNO</v-btn>
+				<v-btn class="ml-7 cancel-btn" @click.stop="$emit('close-modal')">ZRUŠIŤ</v-btn>
 			</v-card-actions>
 		</v-card>
 	</v-dialog>
@@ -19,40 +19,24 @@
 
 <script>
 export default {
-	props: [
-		'visible'
-	],
+	emits: ['delete-team', 'close-modal'],
 
-	data() {
-		return {
-			selectedEmployee: "",
-			selectedEmployees: [],
-			employees: null,
-		};
-	},
+	props: {
+		show: {
+			type: Boolean,
+			required: true
+		},
 
-	methods: {
-		async deleteTeam(id) {
-			try{
-				await this.$axios.delete(`v1/teams/${id}`)
-				this.$router.push({ name: 'Overview - Teams' })
-				this.show = false
-			} catch (error) {
-				this.$toast.error(error.response.data.error)
-			}
+		team: {
+			type: Object,
+			required: true
 		}
 	},
 
 	computed: {
-		show: {
-			get() {
-				return this.visible;
-			},
-
-			set(value) {
-				if (!value) this.$emit('close')
-			},
-		},
+		showModal() {
+			return this.show
+		}
 	}
 }
 </script>
diff --git a/app/src/plugins/app/_components/a-team-modal.vue b/app/src/plugins/app/_components/a-team-modal.vue
index e9ce7da..87fe684 100644
--- a/app/src/plugins/app/_components/a-team-modal.vue
+++ b/app/src/plugins/app/_components/a-team-modal.vue
@@ -24,7 +24,7 @@
 							disabled
 							label="Zamestanec"
 							variant="outlined"
-							v-model="selectedEmployees[index].surname"
+							v-model="selectedEmployees[index]._fullName"
 						>
 						</v-text-field>
 						<v-icon
@@ -40,16 +40,18 @@
 						<v-icon icon="mdi-plus" size="large"></v-icon>PRIDAŤ
 						ZAMESTNANCA</v-btn
 					> -->
-					<v-autocomplete
+					<!-- <v-autocomplete
 						class="modal-input"
 						label="Vyhladat"
 						variant="outlined"
 						:items="employeesOptions"
 						v-model="selectedEmployee"
-					></v-autocomplete>
+					></v-autocomplete> -->
+
+					<W-autocomplete :options="employeesOptions" class="modal-input" @option-selected="employeeSelected" />
 
 				</v-card-actions>
-				
+
 				<v-btn class="create-btn" @click="createTeam()">VYTVORIŤ</v-btn>
 			</v-card>
 		</W-loadable>
@@ -57,7 +59,13 @@
 </template>
 
 <script>
+import WAutocomplete from './w-autocomplete.vue'
+
 export default {
+	components: {
+		WAutocomplete
+	},
+
 	props: [
 		'visible'
 	],
@@ -83,6 +91,13 @@ export default {
 			this.selectedEmployees.splice(index, 1)
 		},
 
+		employeeSelected(selectedOption) {
+			const employee 		= this.employees.find(empl => empl.id == selectedOption.key)
+			employee._fullName 	= `${employee.name} ${employee.surname}`
+
+			this.selectedEmployees.push(employee)
+		},
+
 		async createTeam() {
 			try{
 				await this.$axios.post_auth('v1/teams')
@@ -103,9 +118,12 @@ export default {
 				(employee) => !selectedEmployeesIds.includes(employee.id)
 			);
 
-			return employees.map(
-				(employee) => `${employee.name} ${employee.surname}`
-			);
+			return employees.map(employee => {
+				return {
+					key: employee.id,
+					value: `${employee.name} ${employee.surname}`
+				}
+			})
 		},
 
 		show: {
diff --git a/app/src/plugins/app/_components/w-autocomplete.vue b/app/src/plugins/app/_components/w-autocomplete.vue
new file mode 100644
index 0000000..608a4cb
--- /dev/null
+++ b/app/src/plugins/app/_components/w-autocomplete.vue
@@ -0,0 +1,91 @@
+<template>
+	<div class="wrapper">
+		<v-text-field
+			label="Vyhľadať zamestnanca"
+			variant="outlined"
+			v-model="search"
+			@keydown.enter="optionSelected()"
+		/>
+
+		<div class="suggestion">
+			<span class="hidden-part">{{ suggestion._suggestionHiddenPart }}</span>
+			<span>{{ suggestion._suggestionShownPart }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	emits: ['option-selected'],
+
+	props: {
+		options: {
+			type: Array,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			search: ''
+		}
+	},
+
+	computed: {
+		suggestion() {
+			const normalizedSearch = this._normalize(this.search)
+
+			if (!normalizedSearch.length || !this.options.length)
+				return ''
+
+			const filteredOptions = this.options.filter(option => {
+				const normalizedValue = this._normalize(option.value)
+
+				return normalizedSearch == normalizedValue.slice(0, normalizedSearch.length)
+			})
+
+			if (!filteredOptions[0])
+				return ''
+
+			const suggestion = {
+				...filteredOptions[0],
+				_suggestionHiddenPart: filteredOptions[0].value.slice(0, normalizedSearch.length),
+				_suggestionShownPart: filteredOptions[0].value.slice(normalizedSearch.length, filteredOptions[0].value.length)
+
+			}
+
+			return suggestion
+		}
+	},
+
+	methods: {
+		optionSelected() {
+			this.$emit('option-selected', this.suggestion)
+			this.search = ''
+		},
+
+		_normalize(value) {
+			return value
+				.trim()
+				.toLowerCase()
+				.normalize("NFD")
+				.replace(/[\u0300-\u036f]/g, "")
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+	position: relative
+
+	.suggestion
+		position: absolute
+		top: 15.5px
+		left: 15.5px
+		opacity: 0.5
+		letter-spacing: 0.009375em
+
+		.hidden-part
+			opacity: 0
+</style>
\ No newline at end of file
diff --git a/app/src/plugins/app/_config/main.ts b/app/src/plugins/app/_config/main.ts
index dc3289d..ba0b7de 100644
--- a/app/src/plugins/app/_config/main.ts
+++ b/app/src/plugins/app/_config/main.ts
@@ -38,15 +38,8 @@ const options: Options = {
 	ionic: {
 		disabled: false
 	},
-	toast: {
-		disabled: true
-	},
 	i18n: {
-		disabled: true,
 		languages: [
-			{
-				title: 'English', flag: 'en', value: 'en'
-			},
 			{
 				title: "Slovenský", flag: "sk", value: "sk"
 			}
@@ -57,6 +50,7 @@ const options: Options = {
 		routes: {
 			'GET v1/auth/info': true,
 			'POST v1/auth/forgot': true,
+			'POST v1/auth/reset': true,
 			'POST v1/auth/info': true,
 			'POST v1/auth/invalidate': true,
 			'POST v1/auth/login': true,
@@ -89,17 +83,19 @@ const options: Options = {
 	}
 }
 
-createApp(App)
+const app = createApp(App)
 	.use(router)
 	.use(store)
 	.use(w, options)
 	.use(IonicVue)
 	.use(vuetify)
-	.use(wToast)
-	.use(i18n, options)
+	// .use(wToast)
 	.use(VueCal)
 	.use(loader, {
 		color: '#6200EE'
 	})
 	.use(vueCal)
 	.mount('#app')
+
+// @ts-expect-error
+export const $t = app.$i18n.t
diff --git a/app/src/plugins/app/_config/router.ts b/app/src/plugins/app/_config/router.ts
index fed166d..1a60f22 100644
--- a/app/src/plugins/app/_config/router.ts
+++ b/app/src/plugins/app/_config/router.ts
@@ -61,12 +61,12 @@ const routes: Array<RouteRecordRaw> = [
 					{
 						path: '/app/overview/unscheduled',
 						name: 'Overview - Unscheduled tasks',
-						component: () => import('@/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue')
+						component: () => import('@/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue')
 					},
 					{
 						path: '/app/overview/ongoing',
 						name: 'Overview - Ongoing tasks',
-						component: () => import('@/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue')
+						component: () => import('@/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue')
 					},
 					{
 						path: '/app/overview/teams',
diff --git a/app/src/plugins/app/_theme/global.sass b/app/src/plugins/app/_theme/global.sass
index 85c450a..4dd4d99 100644
--- a/app/src/plugins/app/_theme/global.sass
+++ b/app/src/plugins/app/_theme/global.sass
@@ -18,4 +18,7 @@ th
 	width: 50%
 
 .v-card
-	padding: 35px !important
\ No newline at end of file
+	padding: 35px !important
+
+.cursor-pointer:hover
+	cursor: pointer
\ No newline at end of file
diff --git a/app/src/plugins/app/_theme/index.sass b/app/src/plugins/app/_theme/index.sass
index 5965790..32fdbc2 100644
--- a/app/src/plugins/app/_theme/index.sass
+++ b/app/src/plugins/app/_theme/index.sass
@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap')
 
+@import './vuetify/v-dialog'
+
 @import './global'
 @import '@/plugins/lib@auth/_theme/auth.theme'
 
diff --git a/app/src/plugins/app/_theme/vuetify/v-dialog.sass b/app/src/plugins/app/_theme/vuetify/v-dialog.sass
new file mode 100644
index 0000000..e727cf4
--- /dev/null
+++ b/app/src/plugins/app/_theme/vuetify/v-dialog.sass
@@ -0,0 +1,4 @@
+.v-dialog
+	h1
+		font-size: 22px
+		font-weight: 300
\ No newline at end of file
diff --git a/app/src/plugins/lib@auth/_utils/error.utils.ts b/app/src/plugins/lib@auth/_utils/error.utils.ts
index aadad2c..e334f02 100644
--- a/app/src/plugins/lib@auth/_utils/error.utils.ts
+++ b/app/src/plugins/lib@auth/_utils/error.utils.ts
@@ -1,7 +1,8 @@
+import { $t } from '@/plugins/app/_config/main'
 
 export default {
 	parseErrors(errors) {
 		// @ts-expect-error
-		return Object.values(errors).map(error => error?.$message).join(', ')
+		return Object.values(errors).map(error => $t(error?.$message)).join('. ')
 	}
 }
\ No newline at end of file
diff --git a/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue b/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue
index 2ab6f3f..1b66e74 100644
--- a/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue
+++ b/app/src/plugins/lib@auth/reset-password/_components/a-reset-password-form.vue
@@ -46,8 +46,8 @@ export default {
 			if (!(await this.v$.$validate())) return console.log(this.v$)
 
 			try {
-				await this.$axios.post_data('v1/auth/forgot', this.form)
-				this.$router.push({ name: 'Reset password' })
+				await this.$axios.post_data('v1/auth/reset', this.form)
+				this.$router.push({ name: 'Login' })
 			} catch (error) {
 				this.$toast.error(error.data.error)
 			}
diff --git a/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue b/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
index cef65fe..a2bff42 100644
--- a/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
+++ b/app/src/plugins/tm@overview/tasks-ongoing/_components/a-ongoing-table.vue
@@ -19,7 +19,9 @@
 				<td class="task-action">
 					<div class="d-flex justify-start">
 						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" />
-						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" />
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="showDeleteModal = true" />
+
+						<A-delete-task-modal :show="showDeleteModal" :task="task" @delete-task="deleteTask" @close-modal="showDeleteModal = false" />
 					</div>
 				</td>
 			</tr>
@@ -28,12 +30,35 @@
 </template>
 
 <script>
+import ADeleteTaskModal from '@/plugins/app/_components/a-delete-task-modal.vue'
+
 export default {
+	components: {
+		ADeleteTaskModal
+	},
+
 	props: {
 		tasks: {
 			type: Array,
 			required: true
 		}
+	},
+
+	data() {
+		return {
+			showDeleteModal: false
+		}
+	},
+
+	methods: {
+		async deleteTask(id) {
+			try {
+				await this.$axios.delete(`v1/teams/${id}`)
+				this.showDeleteModal = false
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
 	}
 }
 </script>
diff --git a/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue b/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
index 2c6398b..a9eb9ec 100644
--- a/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
+++ b/app/src/plugins/tm@overview/tasks-unscheduled/_components/a-unscheduled-table.vue
@@ -17,7 +17,9 @@
 				<td class="task-action">
 					<div class="d-flex justify-start">
 						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon">
-						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon">
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="showDeleteModal = true">
+
+						<A-delete-task-modal :show="showDeleteModal" :task="task" @delete-task="deleteTask" @close-modal="showDeleteModal = false" />
 					</div>
 				</td>
 			</tr>
@@ -26,12 +28,35 @@
 </template>
 
 <script>
+import ADeleteTaskModal from '@/plugins/app/_components/a-delete-task-modal.vue'
+
 export default {
+	components: {
+		ADeleteTaskModal
+	},
+
 	props: {
 		tasks: {
 			type: Array,
 			required: true
 		}
+	},
+
+	data() {
+		return {
+			showDeleteModal: false
+		}
+	},
+
+	methods: {
+		async deleteTask(id) {
+			try {
+				await this.$axios.delete(`v1/teams/${id}`)
+				this.showDeleteModal = false
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
 	}
 }
 </script>
diff --git a/app/src/plugins/tm@overview/teams/_components/a-teams-table.vue b/app/src/plugins/tm@overview/teams/_components/a-teams-table.vue
index 6babc53..c6998a2 100644
--- a/app/src/plugins/tm@overview/teams/_components/a-teams-table.vue
+++ b/app/src/plugins/tm@overview/teams/_components/a-teams-table.vue
@@ -12,22 +12,10 @@
 				<td>{{ team.name }}</td>
 				<td class="task-action">
 					<div class="d-flex justify-start">
-						<img
-							class="pencil-icon"
-							:src="
-								require('@/plugins/tm@overview/_img/pencil-icon.svg')
-							"
-							alt="pencil-icon"
-						/>
-						<img
-							class="trash-icon"
-							:src="
-								require('@/plugins/tm@overview/_img/trash-icon.svg')
-							"
-							alt="trash-icon"
-							@click.stop="dialog=true"
-						/>
-						<A-delete-team-modal :visible="dialog" @close="dialog=false" />
+						<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" />
+						<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="showDeleteModal = true" />
+
+						<A-delete-team-modal :show="showDeleteModal" :team="team" @delete-team="deleteTeam" @close-modal="showDeleteModal = false" />
 					</div>
 				</td>
 			</tr>
@@ -36,24 +24,35 @@
 </template>
 
 <script>
-import ADeleteTeamModal from '../../../app/_components/a-delete-team-modal.vue'
+import ADeleteTeamModal from '@/plugins/app/_components/a-delete-team-modal.vue'
 
 export default {
 	components: {
 		ADeleteTeamModal
 	},
 
-	data() {
-		return {
-			dialog: false
-		}
-	},
-
 	props: {
 		teams: {
 			type: Array,
-			required: true,
-		},
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			showDeleteModal: false
+		}
+	},
+
+	methods: {
+		async deleteTeam(id) {
+			try {
+				await this.$axios.delete(`v1/teams/${id}`)
+				this.showDeleteModal = false
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
 	}
 }
 </script>
diff --git a/app/src/plugins/w/i18n/index.ts b/app/src/plugins/w/i18n/index.ts
index 2c50ec7..a00f928 100644
--- a/app/src/plugins/w/i18n/index.ts
+++ b/app/src/plugins/w/i18n/index.ts
@@ -19,4 +19,4 @@ export default {
 		app.use(i18n.vendorI18n)
 		app.config.globalProperties.$w18n = i18n
 	}
-}
+}
\ No newline at end of file

From e881020f86004af2926107261a8b3067c0c20cb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 29 Nov 2022 20:28:34 +0100
Subject: [PATCH 2/4] [Teams] Autocomplete input component

---
 app/src/plugins/app/_components/w-autocomplete.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/src/plugins/app/_components/w-autocomplete.vue b/app/src/plugins/app/_components/w-autocomplete.vue
index 608a4cb..e5f1c63 100644
--- a/app/src/plugins/app/_components/w-autocomplete.vue
+++ b/app/src/plugins/app/_components/w-autocomplete.vue
@@ -7,7 +7,7 @@
 			@keydown.enter="optionSelected()"
 		/>
 
-		<div class="suggestion">
+		<div class="suggestion" v-if="suggestion">
 			<span class="hidden-part">{{ suggestion._suggestionHiddenPart }}</span>
 			<span>{{ suggestion._suggestionShownPart }}</span>
 		</div>
@@ -36,7 +36,7 @@ export default {
 			const normalizedSearch = this._normalize(this.search)
 
 			if (!normalizedSearch.length || !this.options.length)
-				return ''
+				return null
 
 			const filteredOptions = this.options.filter(option => {
 				const normalizedValue = this._normalize(option.value)
@@ -45,7 +45,7 @@ export default {
 			})
 
 			if (!filteredOptions[0])
-				return ''
+				return null
 
 			const suggestion = {
 				...filteredOptions[0],
@@ -60,6 +60,9 @@ export default {
 
 	methods: {
 		optionSelected() {
+			if (!this.suggestion)
+				return
+
 			this.$emit('option-selected', this.suggestion)
 			this.search = ''
 		},

From 7a336d5d1f644ae70798e1084260cad69c75d342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 29 Nov 2022 21:21:49 +0100
Subject: [PATCH 3/4] [Header] Refactoring

---
 .../app/_layout/app/_components/a-header.vue  | 217 +++++++-----------
 app/src/plugins/app/_theme/global.sass        |   5 +-
 2 files changed, 82 insertions(+), 140 deletions(-)

diff --git a/app/src/plugins/app/_layout/app/_components/a-header.vue b/app/src/plugins/app/_layout/app/_components/a-header.vue
index e7dd618..63c6832 100644
--- a/app/src/plugins/app/_layout/app/_components/a-header.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-header.vue
@@ -1,98 +1,59 @@
 <template>
 	<v-app-bar class="header">
-		<v-app-bar-nav-icon autoHide @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
+		<v-app-bar-nav-icon @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
 
-		<div class="d-flex align-center justify-space-between w-100 responsive-position">
-			<h1 class="mr-md-4 route-name mb-5">{{ $route.name }}</h1>
+		<div class="d-flex justify-space-between align-center w-100">
+			<h1>{{ $route.name }}</h1>
 
-			<div class="d-flex justify-center align-center">
-				<div class="d-flex justify-center align-center pos-col">
-						<img
-							class="search-icon mx-3"
-							:src="
-								require('@/plugins/app/_layout/app/_img/search-icon.svg')
-							"
-							alt="search-icon"
-						/>
-						<input
-							class="search-input mx-2"
-							type="text"
-							placeholder="Vyhľadávanie"
-						/>
-						<v-menu open-on-hover>
-							<template v-slot:activator="{ props }">
-								<v-btn v-bind="props" class="create-btn"
-									>+<span class="responsive-btn"
-										>Vytvoriť</span
-									></v-btn
-								>
-							</template>
+			<div class="d-flex justify-end align-center w-100">
+				<img class="search-icon mx-3" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
+				<input class="search-input mx-2" type="text" placeholder="Vyhľadávanie" />
 
-							<v-list class="text-left">
-								<v-list-item class="dropdown-hover">
-									MASTER TASK
-								</v-list-item>
-								<v-list-item class="dropdown-hover">
-									SUB TASK
-								</v-list-item>
-								<v-list-item class="dropdown-hover" @click.stop="dialog=true" >
-									TÍM
-								<A-team-modal :visible="dialog" @close="dialog=false" />
-								</v-list-item>
-								<v-list-item class="dropdown-hover">
-									BLOKER
-								</v-list-item>
-							</v-list>
-						</v-menu>
-						<div
-							class="d-flex justify-center align-center employee-section mx-1"
-						>
-							<p v-if="user" class="employee-select">
-								{{
-									user.user.name.charAt(0) +
-									user.user.surname.charAt(0)
-								}}
-							</p>
-							<div class="text-center">
-								<v-menu open-on-hover>
-									<template v-slot:activator="{ props }">
-										<v-btn
-											class="text-transform"
-											v-if="user"
-											v-bind="props"
-										>
-											{{
-												`${user.user.name} ${user.user.surname}`
-											}}
-											<v-icon
-												class="pl-5"
-												icon="mdi-chevron-down"
-												size="x-small"
-											></v-icon>
-										</v-btn>
-									</template>
+				<v-menu>
+					<template v-slot:activator="{ props }">
+						<v-btn v-bind="props" class="button mr-5">+<span class="responsive-btn">Vytvoriť</span></v-btn>
+					</template>
 
-									<v-list class="text-center">
-										<v-list-item class="dropdown-hover">
-											Working hours
-										</v-list-item>
-										<v-list-item>
-											<v-btn class="logout-btn"
-												>Odhlásiť sa</v-btn
-											>
-										</v-list-item>
-									</v-list>
-								</v-menu>
+					<v-list>
+						<v-list-item class="cursor-pointer hover-background">MASTER TASK</v-list-item>
+						<v-list-item class="cursor-pointer hover-background">SUB TASK</v-list-item>
+						<v-list-item class="cursor-pointer hover-background" @click="createTeamDialog = true">TÍM</v-list-item>
+						<v-list-item class="cursor-pointer hover-background">BLOKER</v-list-item>
+					</v-list>
+				</v-menu>
+
+				<v-menu v-if="user">
+					<template v-slot:activator="{ props }">
+						<v-btn class="menu-dropdown" v-bind="props">
+							<div class="d-flex justify-between align-center">
+								<p class="employee-select-avatar d-flex justify-center align-center">
+									{{ user.user.name.charAt(0) + user.user.surname.charAt(0) }}
+								</p>
+
+								<div>
+									<span class="employee-name ml-4">{{ `${user.user.name} ${user.user.surname}` }}</span>
+									<v-icon class="ml-3" icon="mdi-chevron-down" size="x-small"></v-icon>
+								</div>
 							</div>
-						</div>
-					</div>
+						</v-btn>
+					</template>
+
+					<v-list class="text-center">
+						<v-list-item class="cursor-pointer hover-background">Working hours </v-list-item>
+						<v-list-item>
+							<v-btn class="button">Odhlásiť sa</v-btn>
+						</v-list-item>
+					</v-list>
+				</v-menu>
 			</div>
 		</div>
+
+		<A-team-modal :visible="createTeamDialog" @close="createTeamDialog = false" />
 	</v-app-bar>
 </template>
 
 <script>
-import ATeamModal from '../../../_components/a-team-modal.vue'
+import ATeamModal from '@/plugins/app/_components/a-team-modal.vue'
 
 export default {
 	components: {
@@ -102,13 +63,13 @@ export default {
 	data() {
 		return {
 			user: null,
-			dialog: false
+			createTeamDialog: false
 		}
 	},
 
 	async created() {
 		try {
-			this.user = await this.$axios.get_auth_data("v1/auth/info");
+			this.user = await this.$axios.get_auth_data('v1/auth/info')
 		} catch (error) {
 			console.log(error)
 		}
@@ -117,75 +78,53 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.route-name
-	font-size: 22px
-
 .header
 	position: relative !important
 	box-shadow: none !important
 	border-bottom: 1px solid rgba(0, 0, 0, 0.2)
 	padding: 25px 15px
 
-@media (min-width: 992px)
+	.button
+		background: #7f39fb
+		border-radius: 4px
+		color: #fff
+
 	.menu-icon
 		display: none
 
-.create-btn
-	background: #7f39fb
-	border-radius: 4px
-	color: #fff
+	.search-input
+		outline: none
 
-.logout-btn
-	background: #7f39fb
-	border-radius: 4px
-	color: #fff
+	.search-icon
+		border: 2px solid #e0e0e0
+		padding: 6px
+		border-radius: 6px
 
-.text-transform
-	text-transform: capitalize
 
-.search-input
-	outline: none
-
-.search-icon
-	border: 2px solid #e0e0e0
-	padding: 6px
-	border-radius: 6px
-
-.employee-section
-	border: 1px solid rgba(33, 33, 33, 0.08)
+.menu-dropdown
+	border: 1px solid rgba(33, 33, 33, 0.08) !important
 	border-radius: 16px
 	height: 70px
 
-.employee-select
-	background: #6200EE
-	color: #fff
-	border-radius: 50%
-	padding: 13px
-	margin-left: 10px
-
-@media screen and (max-width: 772px)
-	.route-name, .search-icon
-		display: none
-
-@media screen and (max-width: 617px)
-	.responsive-position
-		justify-content: center !important
-	.pos-col
-		display: flex
-		flex-direction: column-reverse
-		justify-content: center
-		margin: auto
-
-		.employee-section, .create-btn, .search-input
-			margin-top: 20px
-
-	.header
-		padding: 75px 0
-
-.dropdown-hover
-	cursor: pointer !important
+	.employee-select-avatar
+		background: #6200EE
+		color: #fff
+		border-radius: 50%
+		padding: 13px
+		height: 42px
+		width: 42px
 
 	&:hover
-		background: #F2E7FE
-		font-weight: bolder
-</style>
\ No newline at end of file
+		background-color: rgba(0, 0, 0, var(--v-hover-opacity))
+		cursor: pointer
+
+@media (max-width: 991px)
+	.menu-icon
+		display: block !important
+
+	h1
+		display: none
+
+	.employee-name
+		display: none
+</style>
diff --git a/app/src/plugins/app/_theme/global.sass b/app/src/plugins/app/_theme/global.sass
index 4dd4d99..b56899d 100644
--- a/app/src/plugins/app/_theme/global.sass
+++ b/app/src/plugins/app/_theme/global.sass
@@ -21,4 +21,7 @@ th
 	padding: 35px !important
 
 .cursor-pointer:hover
-	cursor: pointer
\ No newline at end of file
+	cursor: pointer
+
+.hover-background:hover
+	background-color: rgba(0, 0, 0, var(--v-hover-opacity))

From 7dee1c8283afe3e5d798ceb9d3eb5d45719c360e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 29 Nov 2022 21:30:29 +0100
Subject: [PATCH 4/4] .

---
 app/src/plugins/app/_config/router.ts                      | 6 ++++++
 app/src/plugins/app/_layout/app/_components/a-header.vue   | 2 +-
 app/src/plugins/app/_layout/app/_components/a-sidemenu.vue | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/src/plugins/app/_config/router.ts b/app/src/plugins/app/_config/router.ts
index 1a60f22..5e516fa 100644
--- a/app/src/plugins/app/_config/router.ts
+++ b/app/src/plugins/app/_config/router.ts
@@ -45,32 +45,38 @@ const routes: Array<RouteRecordRaw> = [
 					{
 						path: '/app/dashboard/tasks',
 						name: 'Dashboard - Tasks',
+						meta: { title: 'Úlohy' },
 						component: () => import('@/plugins/tm@dashboard/tasks/tasks.vue')
 					},
 					{
 						path: '/app/dashboard/teams',
 						name: 'Dashboard - Teams',
+						meta: { title: 'Tímové zobrazenie' },
 						component: () => import('@/plugins/tm@dashboard/teams/teams.vue')
 					},
 					{
 						path: '/app/dashboard/projects',
 						name: 'Dashboard - Projects',
+						meta: { title: 'Projektové zobrazenie' },
 						component: () => import('@/plugins/tm@dashboard/projects/projects.vue')
 					},
 
 					{
 						path: '/app/overview/unscheduled',
 						name: 'Overview - Unscheduled tasks',
+						meta: { title: 'Nenaplánované úlohy' },
 						component: () => import('@/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue')
 					},
 					{
 						path: '/app/overview/ongoing',
 						name: 'Overview - Ongoing tasks',
+						meta: { title: 'Prebiehajúce úlohy' },
 						component: () => import('@/plugins/tm@overview/tasks-ongoing/tasks-ongoing.vue')
 					},
 					{
 						path: '/app/overview/teams',
 						name: 'Overview - Teams',
+						meta: { title: 'Tímy' },
 						component: () => import('@/plugins/tm@overview/teams/teams.vue')
 					}
 				]
diff --git a/app/src/plugins/app/_layout/app/_components/a-header.vue b/app/src/plugins/app/_layout/app/_components/a-header.vue
index 63c6832..d3da875 100644
--- a/app/src/plugins/app/_layout/app/_components/a-header.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-header.vue
@@ -3,7 +3,7 @@
 		<v-app-bar-nav-icon @click="eventBus.emit('toggle-menu')" class="menu-icon"></v-app-bar-nav-icon>
 
 		<div class="d-flex justify-space-between align-center w-100">
-			<h1>{{ $route.name }}</h1>
+			<h1>{{ $route.meta.title }}</h1>
 
 			<div class="d-flex justify-end align-center w-100">
 				<img class="search-icon mx-3" :src="require('@/plugins/app/_layout/app/_img/search-icon.svg')" alt="search-icon" />
diff --git a/app/src/plugins/app/_layout/app/_components/a-sidemenu.vue b/app/src/plugins/app/_layout/app/_components/a-sidemenu.vue
index b3c0884..5884e0f 100644
--- a/app/src/plugins/app/_layout/app/_components/a-sidemenu.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-sidemenu.vue
@@ -34,7 +34,7 @@ export default {
 				pageName: 'Overview - Unscheduled tasks'
 			},
 			{
-				title: 'Ongoing tasky',
+				title: 'Prebiehajúce úlohy',
 				pageName: 'Overview - Ongoing tasks'
 			},
 			{