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

app/src/plugins/app/_components/a-create-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="Vyhľadať"
 						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: {

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/w-autocomplete.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class="wrapper">
+		<v-text-field
+			label="Vyhľadať zamestnanca"
+			variant="outlined"
+			v-model="search"
+			@keydown.enter="optionSelected()"
+		/>
+
+		<div class="suggestion" v-if="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 null
+
+			const filteredOptions = this.options.filter(option => {
+				const normalizedValue = this._normalize(option.value)
+
+				return normalizedSearch == normalizedValue.slice(0, normalizedSearch.length)
+			})
+
+			if (!filteredOptions[0])
+				return null
+
+			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() {
+			if (!this.suggestion)
+				return
+
+			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

@@ -45,33 +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')
 					}
 				]

app/src/plugins/app/_layout/app/_components/a-header.vue

@@ -1,116 +1,75 @@
 <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.meta.title }}</h1>
 
-			<div class="d-flex justify-center align-center">
-				<div class="d-flex justify-center align-center pos-col">
-						<img
-							class="search-icon"
-							:src="
-								require('@/plugins/app/_layout/app/_img/search-icon.svg')
-							"
-							alt="search-icon"
-						/>
-						<input
-							class="search-input"
-							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-create-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 }">
-										<div>
-											<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>
-										</div>
-									</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 class="dropdown-hover">
-											<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 ACreateTeamModal from '../../../_components/a-create-team-modal.vue'
+import ATeamModal from '@/plugins/app/_components/a-team-modal.vue'
 
 export default {
 	components: {
-		ACreateTeamModal
+		ATeamModal
 	},
 
 	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)
 		}
@@ -119,77 +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
-	margin-right: 30px
+	.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
-	margin-left: 10px
-	margin-right: 5px
-
-.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
-</style>
+		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>

app/src/plugins/app/_layout/app/_components/a-sidemenu.vue

@@ -33,33 +33,30 @@
 export default {
 	data() {
 		return {
-			unscheduledTasksLength: null,
-			pages: [
-				{
-					title: "Úlohy",
-					pageName: "Dashboard - Tasks",
-				},
-				{
-					title: "Tímove zobrazenie",
-					pageName: "Dashboard - Teams",
-				},
-				{
-					title: "Projektové zobrazenie",
-					pageName: "Dashboard - Projects",
-				},
-				{
-					title: "Nenaplánované úlohy",
-					pageName: "Overview - Unscheduled tasks",
-				},
-				{
-					title: "Ongoing tasky",
-					pageName: "Overview - Ongoing tasks",
-				},
-				{
-					title: "Tímy",
-					pageName: "Overview - Teams",
-				},
-			],
+			pages: [{
+				title: 'Úlohy',
+				pageName: 'Dashboard - Tasks'
+			},
+			{
+				title: 'Tímove zobrazenie',
+				pageName: 'Dashboard - Teams'
+			},
+			{
+				title: 'Projektové zobrazenie',
+				pageName: 'Dashboard - Projects'
+			},
+			{
+				title: 'Nenaplánované úlohy',
+				pageName: 'Overview - Unscheduled tasks'
+			},
+			{
+				title: 'Prebiehajúce úlohy',
+				pageName: 'Overview - Ongoing tasks'
+			},
+			{
+				title: 'Tímy',
+				pageName: 'Overview - Teams'
+			}]
 		}
 	},
 

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

@@ -18,4 +18,10 @@ th
 	width: 50%
 
 .v-card
-	padding: 35px !important
+	padding: 35px !important
+
+.cursor-pointer:hover
+	cursor: pointer
+
+.hover-background:hover
+	background-color: rgba(0, 0, 0, var(--v-hover-opacity))

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,24 +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"
-							@click.stop="editTeam=true"
-						/>
-						<A-edit-team-modal :visible="editTeam" @close="editTeam=false" />
-						<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>
@@ -38,27 +24,35 @@
 </template>
 
 <script>
-import ADeleteTeamModal from '../../../app/_components/a-delete-team-modal.vue'
-import AEditTeamModal from '../../../app/_components/a-edit-team-modal.vue'
+import ADeleteTeamModal from '@/plugins/app/_components/a-delete-team-modal.vue'
 
 export default {
 	components: {
-		ADeleteTeamModal,
-		AEditTeamModal
-	},
-
-	data() {
-		return {
-			dialog: false,
-			editTeam: false
-		}
+		ADeleteTeamModal
 	},
 
 	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>

app/src/plugins/w/i18n/index.ts

@@ -19,4 +19,4 @@ export default {
 		app.use(i18n.vendorI18n)
 		app.config.globalProperties.$w18n = i18n
 	}
-}
+}