[Teams] Autocomplete input component

app/src/locales/en.json

@@ -1,4 +0,0 @@
-{
-	"Chyba": "",
-	"Zadali ste neplatný email.": ""
-}

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ú"
 }

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>

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>

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,13 +40,15 @@
 						<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>
 
@@ -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: {

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>

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

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',

app/src/plugins/app/_theme/global.sass

@@ -19,3 +19,6 @@ th
 
 .v-card
 	padding: 35px !important
+
+.cursor-pointer:hover
+	cursor: pointer

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'
 

app/src/plugins/app/_theme/vuetify/v-dialog.sass

@@ -0,0 +1,4 @@
+.v-dialog
+	h1
+		font-size: 22px
+		font-weight: 300

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('. ')
 	}
 }

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)
 			}

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>

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>

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>