From e1d9e6302f2469d7c9f02c90d2f97ed922f4139b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <glasnak@wezeo.com>
Date: Tue, 6 Dec 2022 19:08:06 +0100
Subject: [PATCH] [Modals] Refactoring

---
 .../app/_components/a-delete-task-modal.vue   |  43 ----
 .../app/_components/a-delete-team-modal.vue   |  42 ----
 .../app/_components/a-team-form-modal.vue     | 220 ------------------
 .../app/_layout/app/_components/a-header.vue  |  26 +--
 .../z-autocomplete.vue}                       |   0
 .../z-files-upload.vue}                       |  16 +-
 .../blocker/z-blocker-modal.vue}              | 126 ++++++----
 .../bloker/_components/a-blocker-form.vue     |   0
 app/src/plugins/tm@modal/bloker/blokers.vue   |   0
 .../master-task/z-master-task-modal.vue}      |  20 +-
 .../tm@modal/task/z-delete-task-modal.vue     |  60 +++++
 .../tm@modal/team/z-delete-team-modal.vue     |  59 +++++
 .../team/z-team-modal.vue}                    |  88 ++++---
 .../_components/a-ongoing-table.vue           |  17 +-
 .../_components/a-unscheduled-table.vue       |  17 +-
 .../teams/_components/a-teams-table.vue       |  23 +-
 .../profile/_components/a-profile-form.vue    |   0
 .../profile/my-profile.vue                    |   0
 18 files changed, 292 insertions(+), 465 deletions(-)
 delete mode 100644 app/src/plugins/app/_components/a-delete-task-modal.vue
 delete mode 100644 app/src/plugins/app/_components/a-delete-team-modal.vue
 delete mode 100644 app/src/plugins/app/_components/a-team-form-modal.vue
 rename app/src/plugins/{app/_components/w-autocomplete.vue => tm@_components/z-autocomplete.vue} (100%)
 rename app/src/plugins/{app/_components/a-files-upload.vue => tm@_components/z-files-upload.vue} (86%)
 rename app/src/plugins/{app/_components/a-bloker-modal.vue => tm@modal/blocker/z-blocker-modal.vue} (56%)
 delete mode 100644 app/src/plugins/tm@modal/bloker/_components/a-blocker-form.vue
 delete mode 100644 app/src/plugins/tm@modal/bloker/blokers.vue
 rename app/src/plugins/{app/_components/a-master-task-modal.vue => tm@modal/master-task/z-master-task-modal.vue} (91%)
 create mode 100644 app/src/plugins/tm@modal/task/z-delete-task-modal.vue
 create mode 100644 app/src/plugins/tm@modal/team/z-delete-team-modal.vue
 rename app/src/plugins/{app/_components/a-team-modal.vue => tm@modal/team/z-team-modal.vue} (81%)
 rename app/src/plugins/{app@profile => tm@profile}/profile/_components/a-profile-form.vue (100%)
 rename app/src/plugins/{app@profile => tm@profile}/profile/my-profile.vue (100%)

diff --git a/app/src/plugins/app/_components/a-delete-task-modal.vue b/app/src/plugins/app/_components/a-delete-task-modal.vue
deleted file mode 100644
index 5770634..0000000
--- a/app/src/plugins/app/_components/a-delete-task-modal.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<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="z-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>
\ 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
deleted file mode 100644
index 42e7431..0000000
--- a/app/src/plugins/app/_components/a-delete-team-modal.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<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ť tím <b>{{ team.name }}</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="z-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>
-</template>
-
-<script>
-export default {
-	emits: ['delete-team', 'close-modal'],
-
-	props: {
-		show: {
-			type: Boolean,
-			required: true
-		},
-
-		team: {
-			type: Object,
-			required: true
-		}
-	},
-
-	computed: {
-		showModal() {
-			return this.show
-		}
-	}
-}
-</script>
\ No newline at end of file
diff --git a/app/src/plugins/app/_components/a-team-form-modal.vue b/app/src/plugins/app/_components/a-team-form-modal.vue
deleted file mode 100644
index ec93593..0000000
--- a/app/src/plugins/app/_components/a-team-form-modal.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-	<v-dialog v-model="showModal" max-width="650" max-height="90%" height="700px">
-		<W-loadable :content="team" class="h-100">
-			<v-card v-if="employees" height="100%" class="d-flex flex-column">
-				<div class="d-flex justify-space-between align-center modal-header">
-					<h1>Editovať tím</h1>
-					<v-icon
-						@click.stop="$emit('close-modal')"
-						icon="mdi-close"
-						size="large"
-					></v-icon>
-				</div>
-
-				<v-card-actions class="d-flex flex-column modal-content">
-					<v-text-field
-						class="modal-input"
-						label="Názov tímu"
-						:class="{ error: v$.team.name.$errors.length }"
-						:hint="
-							v$.team.name.$errors
-								? errorUtils.parseErrors(v$.team.name.$errors)
-								: null
-						"
-						variant="solo"
-						v-model="team.name"
-					></v-text-field>
-
-					<div
-						class="employee-position w-100"
-						v-for="(employee, index) in team.employees"
-						:key="employee.id"
-					>
-						<v-text-field
-							class="modal-input"
-							disabled
-							label="Zamestanec"
-							variant="solo"
-							v-model="team.employees[index]._fullName"
-						>
-						</v-text-field>
-						<v-icon
-							class="remove-input"
-							@click="removeInput(index)"
-							icon="mdi-close"
-							size="small"
-						></v-icon>
-					</div>
-
-					<W-autocomplete
-						:options="employeesOptions"
-						class="modal-input"
-						@option-selected="employeeSelected"
-					/>
-				</v-card-actions>
-
-				<v-btn class="z-btn" @click="editTeam()">EDITOVAŤ</v-btn>
-			</v-card>
-		</W-loadable>
-	</v-dialog>
-</template>
-
-<script>
-import WAutocomplete 	from './w-autocomplete.vue'
-import useVuelidate 	from '@vuelidate/core'
-import { required } 	from '@vuelidate/validators'
-import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
-
-export default {
-	emits: ['close-modal'],
-
-	components: {
-		WAutocomplete,
-	},
-
-	props: {
-		show: {
-			type: Boolean,
-			required: true,
-		},
-
-		teamId: {
-			type: Number,
-			required: false,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			team: null,
-			selectedEmployees: [],
-			employees: null,
-			v$: useVuelidate(),
-			errorUtils,
-			teams: null,
-		}
-	},
-
-	validations() {
-		return {
-			team: {
-				name: { required },
-			},
-		}
-	},
-
-	async created() {
-		try {
-			this.employees = await this.$axios.get_auth_data('v1/employees')
-		} catch (error) {
-			console.log(error)
-		}
-
-		if (!this.teamId) {
-			return (this.team = {
-				name: '',
-				employees: [],
-			})
-		}
-
-		try {
-			const team = await this.$axios.get_auth_data(`v1/teams/${this.teamId}`)
-
-			team.employees = team.employees.map((employee) => {
-				employee._fullName = `${employee.name} ${employee.surname}`
-
-				return employee
-			})
-
-			this.team = team
-		} catch (error) {
-			console.log(error)
-		}
-	},
-
-	methods: {
-		removeInput(index) {
-			this.team.employees.splice(index, 1)
-		},
-
-		async _loadTeams() {
-			try {
-				this.teams = await this.$axios.get_auth_data('v1/teams')
-			} catch (error) {
-				this.teams = { error: error.data.error }
-				this.$toast.error(error.data.error)
-			}
-		},
-
-		employeeSelected(selectedOption) {
-			const employee = this.employees.find((empl) => empl.id == selectedOption.key)
-			employee._fullName = `${employee.name} ${employee.surname}`
-
-			this.team.employees.push(employee)
-		},
-
-		async editTeam() {
-			if (!(await this.v$.$validate())) return console.log(this.v$)
-
-			try {
-				await this.$axios.post_auth('v1/teams')
-				// do close modal listeneru pridaj ze ak pride true refreshne teamy
-				this.$emit('close-modal', true)
-				this._loadTeams()
-			} catch (error) {
-				this.$toast.error(error.response.data.error)
-			}
-		},
-	},
-
-	computed: {
-		employeesOptions() {
-			const unselectedEmployees = this.employees.filter((employee) =>
-				this.team.employees.find((e) => e.id == employee.id) ? false : true
-			)
-
-			console.log(unselectedEmployees)
-
-			return unselectedEmployees.map((employee) => {
-				return {
-					key: employee.id,
-					value: `${employee.name} ${employee.surname}`,
-				}
-			})
-		},
-
-		showModal() {
-			return this.show
-		},
-	},
-}
-</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>
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 fd949a2..0361383 100644
--- a/app/src/plugins/app/_layout/app/_components/a-header.vue
+++ b/app/src/plugins/app/_layout/app/_components/a-header.vue
@@ -20,7 +20,7 @@
 						<v-list-item class="cursor-pointer hover-background" @click="createMasterTaskDialog = true">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" @click="createBlokerDialog = true">BLOKER</v-list-item>
+						<v-list-item class="cursor-pointer hover-background" @click="createBlockerDialog = true">BLOCKER</v-list-item>
 					</v-list>
 				</v-menu>
 
@@ -50,29 +50,29 @@
 			</div>
 		</div>
 
-		<A-master-task-modal :visible="createMasterTaskDialog" @close="createMasterTaskDialog = false"/>
-		<A-bloker-modal :visible="createBlokerDialog" @close="createBlokerDialog = false" />
-		<A-team-modal :visible="createTeamDialog" @close="createTeamDialog = false" />
+		<Z-master-task-modal 	:visible="createMasterTaskDialog ? true : false" 	@close="createMasterTaskDialog = false"/>
+		<Z-blocker-modal 		:visible="createBlockerDialog ? true : false" 		@close="createBlockerDialog = false" />
+		<Z-team-modal 			:visible="createTeamDialog ? true : false" 			@close="createTeamDialog = false" />
 	</v-app-bar>
 </template>
 
 <script>
-import ATeamModal 		from '@/plugins/app/_components/a-team-modal.vue'
-import ABlokerModal 	from  '@/plugins/app/_components/a-bloker-modal.vue'
-import AMasterTaskModal from '@/plugins/app/_components/a-master-task-modal.vue'
+import ZTeamModal 		from '@/plugins/tm@modal/team/z-team-modal.vue'
+import ZBlockerModal 	from  '@/plugins/tm@modal/blocker/z-blocker-modal.vue'
+import ZMasterTaskModal from '@/plugins/tm@modal/master-task/z-master-task-modal.vue'
 
 export default {
 	components: {
-		ATeamModal,
-		ABlokerModal,
-		AMasterTaskModal
+		ZTeamModal,
+		ZBlockerModal,
+		ZMasterTaskModal
 	},
 
 	data() {
 		return {
 			user: null,
 			createTeamDialog: false,
-			createBlokerDialog: false,
+			createBlockerDialog: false,
 			createMasterTaskDialog: false
 		}
 	},
@@ -141,8 +141,8 @@ export default {
 
 @media (max-width: 1173px)
 	.employee-name
-		display: none	
-	
+		display: none
+
 @media (max-width: 991px)
 	.menu-icon
 		display: block !important
diff --git a/app/src/plugins/app/_components/w-autocomplete.vue b/app/src/plugins/tm@_components/z-autocomplete.vue
similarity index 100%
rename from app/src/plugins/app/_components/w-autocomplete.vue
rename to app/src/plugins/tm@_components/z-autocomplete.vue
diff --git a/app/src/plugins/app/_components/a-files-upload.vue b/app/src/plugins/tm@_components/z-files-upload.vue
similarity index 86%
rename from app/src/plugins/app/_components/a-files-upload.vue
rename to app/src/plugins/tm@_components/z-files-upload.vue
index 96ec693..62b3c45 100644
--- a/app/src/plugins/app/_components/a-files-upload.vue
+++ b/app/src/plugins/tm@_components/z-files-upload.vue
@@ -1,25 +1,19 @@
 <template>
     <div>
-		<input
-			type="file"
-			multiple
-			name="file"
-			id="fileInput"
-			class="hidden-input"
-			@change="onChange"
-			ref="fileUpload"
-			accept="*"
+		<input type="file" multiple name="file" id="fileInput" class="hidden-input" accept="*"
+			@change="onChange" ref="fileUpload"
 		/>
 
 		<v-btn class="upload-btn" @click="$refs.fileUpload.click()">
 			<v-icon class="mx-1" icon="mdi-cloud-upload-outline"></v-icon>NAHRAŤ
 		</v-btn>
+
 		<div v-if="files.length">
 			<div
 				v-for="file in files"
 				:key="file.name"
 			>
-				<v-chip> 	
+				<v-chip>
 					{{ file.name }}
 					<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
 					<v-icon size="small" icon="mdi-close" @click.stop="remove(files.indexOf(file))"></v-icon>
@@ -32,7 +26,7 @@
 <script>
 export default {
 	emit: ['files-uploaded'],
-	
+
     data() {
         return {
             files: [],
diff --git a/app/src/plugins/app/_components/a-bloker-modal.vue b/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
similarity index 56%
rename from app/src/plugins/app/_components/a-bloker-modal.vue
rename to app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
index d93a14c..ceb842f 100644
--- a/app/src/plugins/app/_components/a-bloker-modal.vue
+++ b/app/src/plugins/tm@modal/blocker/z-blocker-modal.vue
@@ -1,9 +1,9 @@
 <template>
 	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
-		<W-loadable :content="employees" class="h-100">
-			<v-card v-if="employees" height="100%" class="d-flex flex-column">
+		<W-loadable :content="allEmployees" class="h-100">
+			<v-card height="100%" class="d-flex flex-column">
 				<div class="d-flex justify-space-between align-center modal-header">
-					<h1>Vytvoriť bloker</h1>
+					<h1>Vytvoriť blocker</h1>
 					<v-icon
 						@click.stop="show = false"
 						icon="mdi-close"
@@ -15,12 +15,13 @@
 					<v-text-field
 						@focus="onInputFocus"
 						class="modal-input"
-						label="Názov blokeru"
+						label="Názov blocker"
+						v-model="blocker.name"
 						variant="solo"
 					></v-text-field>
 					<div
 						class="employee-position w-100"
-						v-for="(employee, index) in selectedEmployees"
+						v-for="(employee, index) in blocker.employees"
 						:key="employee.id"
 					>
 						<v-text-field
@@ -28,25 +29,25 @@
 							disabled
 							label="Zamestanec"
 							variant="outlined"
-							v-model="selectedEmployees[index]._fullName"
+							v-model="blocker.employees[index]._fullName"
 						>
 						</v-text-field>
 						<v-icon
 							class="remove-input"
-							@click.stop="removeInput(index)"
+							@click.stop="blocker.employees.splice(index, 1)"
 							icon="mdi-close"
 							size="small"
 						></v-icon>
 					</div>
-					<W-autocomplete
+					<Z-autocomplete
 						:options="employeesOptions"
 						class="modal-input"
 						@option-selected="employeeSelected"
 					/>
 					<Datepicker
 						class="modal-input"
-						v-model="date"
-						:format="dateFormat"
+						v-model="blocker.date"
+						format="dd.MM.yyyy, HH:mm"
 						locale="sk"
 						@focus="onDateFocus"
 						select-text="Vybrať"
@@ -56,19 +57,19 @@
 					/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="createBloker()">VYTVORIŤ</v-btn>
+				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
 </template>
 
 <script>
-import WAutocomplete 	from './w-autocomplete.vue'
+import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 import Datepicker	 	from '@vuepic/vue-datepicker'
 
 export default {
 	components: {
-		WAutocomplete,
+		ZAutocomplete,
 		Datepicker,
 	},
 
@@ -76,46 +77,82 @@ export default {
 		visible: {
 			type: Boolean,
 			required: true
+		},
+
+		blockerId: {
+			type: Number || null,
+			required: false,
+			default: null
 		}
 	},
 
 	data() {
 		return {
-			selectedEmployee: '',
-			selectedEmployees: [],
-			employees: null,
-			date: '',
-			dateFormat: 'dd.MM.yyyy, HH:mm'
+			allEmployees: null,
+			blocker: {
+				name: '',
+				data: null,
+				employees: []
+			}
 		}
 	},
 
 	async created() {
+		if (this.blockerId)
+			await this._load()
+
 		try {
-			this.employees = await this.$axios.get_auth_data('v1/employees')
+			const allEmployees = await this.$axios.get_auth_data('v1/employees')
+			this.allEmployees  = this._enrichEmployeesByFullName(allEmployees)
 		} catch (error) {
-			console.log(error)
+			this.$toast.error(error)
 		}
 	},
 
 	methods: {
-		removeInput(index) {
-			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)
+			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
+			this.blocker.employees.push(employee)
 		},
 
-		async createBloker() {
+		async save() {
 			try {
-				await this.$axios.post_auth('v1/blockers')
+				if (this.blocker.id)
+					await this._edit()
+				else
+					await this._create()
+
 				this.$router.push({ name: 'Dashboard - Tasks' })
 				this.show = false
 			} catch (error) {
-				this.$toast.error(error.response.data.error)
+				console.log(error)
+			}
+		},
+
+		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.blockerId}`)
+				blocker.employees 	= this._enrichEmployeesByFullName(blocker.employees)
+
+				this.blocker = blocker
+			} catch (error) {
+				this.$toast.error(error)
 			}
 		},
 
@@ -131,15 +168,22 @@ export default {
 				$event.target.blur()
 				this.preventInputFocus = false
 			}
+		},
+
+		_enrichEmployeesByFullName(employees) {
+			return employees.map(employee => {
+				employee._fullName = `${employee.name} ${employee.surname}`
+				return employee
+			})
 		}
 	},
 
 	computed: {
 		employeesOptions() {
-			const selectedEmployeesIds = this.selectedEmployees.map(
+			const selectedEmployeesIds = this.blocker.employees.map(
 				(employee) => employee.id
 			)
-			const employees = this.employees.filter(
+			const employees = this.allEmployees.filter(
 				(employee) => !selectedEmployeesIds.includes(employee.id)
 			)
 
@@ -158,21 +202,9 @@ export default {
 
 			set(value) {
 				if (!value) this.$emit('close')
-			},
+			}
 		},
-	},
-
-	watch: {
-		selectedEmployee() {
-			const selectedEmployee = this.selectedEmployee.split(' ')
-
-			const employee = this.employees.find(
-				(e) => e.name == selectedEmployee[0] && e.surname == selectedEmployee[1]
-			)
-
-			this.selectedEmployees.push(JSON.parse(JSON.stringify(employee)))
-		},
-	},
+	}
 }
 </script>
 
diff --git a/app/src/plugins/tm@modal/bloker/_components/a-blocker-form.vue b/app/src/plugins/tm@modal/bloker/_components/a-blocker-form.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/app/src/plugins/tm@modal/bloker/blokers.vue b/app/src/plugins/tm@modal/bloker/blokers.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/app/src/plugins/app/_components/a-master-task-modal.vue b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
similarity index 91%
rename from app/src/plugins/app/_components/a-master-task-modal.vue
rename to app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
index 8dee4ae..7f2ac8b 100644
--- a/app/src/plugins/app/_components/a-master-task-modal.vue
+++ b/app/src/plugins/tm@modal/master-task/z-master-task-modal.vue
@@ -17,22 +17,25 @@
 					label="Kód projektu"
 					variant="solo"
 				></v-text-field>
+
 				<v-text-field
 					@focus="onInputFocus"
 					class="modal-input"
 					label="Názov mastertasku"
 					variant="solo"
 				></v-text-field>
+
 				<Datepicker
 					@focus="onDateFocus"
 					class="modal-input"
 					v-model="date"
-					:format="dateFormat"
+					format="dd.MM.yyyy, HH:mm"
 					locale="sk"
 					select-text="Vybrať"
 					cancel-text="Zrušiť"
 					placeholder="Deadline"
 				/>
+
 				<v-text-field
 					@focus="onInputFocus"
 					class="modal-input mt-5"
@@ -41,18 +44,20 @@
 					type="number"
 					placeholder="h"
 				></v-text-field>
+
 				<v-select
 					@focus="onInputFocus"
 					class="modal-input border-select"
 					label="Tím"
 					variant="solo"
 				></v-select>
-				<v-textarea 
+
+				<v-textarea
 					label="Popis"
-					class="modal-input" 
+					class="modal-input"
 					variant="solo"
 				></v-textarea>
-				<A-files-upload @files-uploaded="filesUploaded"/>
+				<Z-files-upload @files-uploaded="filesUploaded"/>
 			</v-card-actions>
 
 			<v-btn class="z-btn" @click="createMasterTask()">VYTVORIŤ</v-btn>
@@ -62,12 +67,12 @@
 
 <script>
 import Datepicker 	from '@vuepic/vue-datepicker'
-import AFilesUpload from '@/plugins/app/_components/a-files-upload.vue'
+import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue'
 
 export default {
 	components: {
 		Datepicker,
-		AFilesUpload
+		ZFilesUpload
 	},
 
 	props: {
@@ -80,7 +85,6 @@ export default {
 	data() {
 		return {
 			date: '',
-			dateFormat: 'dd.MM.yyyy, HH:mm',
 			preventInputFocus: false
 		}
 	},
@@ -123,7 +127,7 @@ export default {
 
 			set(value) {
 				if (!value) this.$emit('close')
-			},
+			}
 		},
 	}
 }
diff --git a/app/src/plugins/tm@modal/task/z-delete-task-modal.vue b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
new file mode 100644
index 0000000..ba2ad83
--- /dev/null
+++ b/app/src/plugins/tm@modal/task/z-delete-task-modal.vue
@@ -0,0 +1,60 @@
+<template>
+	<v-dialog v-model="show" 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="show = false"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+			<v-card-actions class="mt-10 d-flex justify-start align-center">
+				<v-btn class="z-btn" variant="flat" @click="deleteTask()">ÁNO</v-btn>
+				<v-btn class="ml-7 cancel-btn" @click.stop="show = false">ZRUŠIŤ</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	emits: ['close'],
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		},
+
+		task: {
+			type: Object,
+			required: true
+		}
+	},
+
+	methods: {
+		async deleteTask() {
+			try {
+				await this.$axios.delete(`v1/teams/${this.task.id}`)
+				this.show = false
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
+	},
+
+	computed: {
+		show: {
+			get() {
+				return this.visible
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			}
+		},
+	}
+}
+</script>
\ No newline at end of file
diff --git a/app/src/plugins/tm@modal/team/z-delete-team-modal.vue b/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
new file mode 100644
index 0000000..25308b3
--- /dev/null
+++ b/app/src/plugins/tm@modal/team/z-delete-team-modal.vue
@@ -0,0 +1,59 @@
+<template>
+	<v-dialog v-model="show" max-width="650">
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Ste si istý, že chcete zmazať tím <b>{{ team.name }}</b>?</h1>
+				<v-icon
+					@click.stop="show = false"
+					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="ml-7 cancel-btn" @click.stop="show = false">ZRUŠIŤ</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	emits: ['delete-team', 'close'],
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		},
+
+		team: {
+			type: Object,
+			required: true
+		}
+	},
+
+	methods: {
+		async deleteTeam() {
+			try {
+				await this.$axios.delete(`v1/teams/${this.team.id}`)
+				this.show = false
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
+	},
+
+	computed: {
+		show: {
+			get() {
+				return this.visible
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			}
+		},
+	}
+}
+</script>
\ No newline at end of file
diff --git a/app/src/plugins/app/_components/a-team-modal.vue b/app/src/plugins/tm@modal/team/z-team-modal.vue
similarity index 81%
rename from app/src/plugins/app/_components/a-team-modal.vue
rename to app/src/plugins/tm@modal/team/z-team-modal.vue
index 2ee375b..0cdd7aa 100644
--- a/app/src/plugins/app/_components/a-team-modal.vue
+++ b/app/src/plugins/tm@modal/team/z-team-modal.vue
@@ -40,13 +40,13 @@
 						</v-text-field>
 						<v-icon
 							class="remove-input"
-							@click.stop="removeInput(index)"
+							@click.stop="team.employees.splice(index, 1)"
 							icon="mdi-close"
 							size="small"
 						></v-icon>
 					</div>
 
-					<W-autocomplete
+					<Z-autocomplete
 						:options="employeesOptions"
 						:validations="v$.team.employees"
 						class="modal-input"
@@ -54,23 +54,23 @@
 					/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="createTeam()">VYTVORIŤ</v-btn>
+				<v-btn class="z-btn" @click="save()">VYTVORIŤ</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
 </template>
 
 <script>
-import WAutocomplete 	from './w-autocomplete.vue'
+import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
 import useVuelidate		from '@vuelidate/core'
-import { required, minLength } 	from '@vuelidate/validators'
+import { required } 	from '@vuelidate/validators'
 import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
 
 const atLeastOne = (value) => value.length
 
 export default {
 	components: {
-		WAutocomplete,
+		ZAutocomplete,
 	},
 
 	props: {
@@ -108,30 +108,59 @@ export default {
 	},
 
 	async created() {
+		if (this.teamId)
+			await this._load()
+
 		try {
 			const allEmployees = await this.$axios.get_auth_data('v1/employees')
 			this.allEmployees = this._enrichEmployeesByFullName(allEmployees)
 		} catch (error) {
-			console.log(error)
-		}
-
-		if (this.teamId) {
-			try {
-				const team = await this.$axios.get_auth_data(`v1/teams/${this.teamId}`)
-				team.employees = this._enrichEmployeesByFullName(this.team.employees)
-
-				this.team = team
-
-			} catch (error) {
-				console.log(error)
-			}
-
+			this.$toast.error(error)
 		}
 	},
 
 	methods: {
-		removeInput(index) {
-			this.team.employees.splice(index, 1)
+		async save() {
+			if (!(await this.v$.$validate())) return console.log(this.v$)
+
+			try {
+				if (this.team.id)
+					await this._edit()
+				else
+					await this._create()
+
+				this.$router.push({ name: 'Overview - Teams' })
+				this.show = false
+			} catch (error) {
+				console.log(error)
+			}
+		},
+
+		async _create() {
+			try {
+				await this.$axios.post_auth('v1/teams', this.team)
+			} catch (error) {
+				this.$toast.error(error.response.data.error)
+			}
+		},
+
+		async _edit() {
+			try {
+				await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
+			} catch (error) {
+				this.$toast.error(error.response.data.error)
+			}
+		},
+
+		async _load() {
+			try {
+				const team = await this.$axios.get_auth_data(`v1/teams/${this.teamId}`)
+				team.employees = this._enrichEmployeesByFullName(team.employees)
+
+				this.team = team
+			} catch (error) {
+				this.$toast.error(error)
+			}
 		},
 
 		employeeSelected(selectedOption) {
@@ -139,19 +168,6 @@ export default {
 			this.team.employees.push(employee)
 		},
 
-		async createTeam() {
-			console.log(this.team)
-			if (!(await this.v$.$validate())) return console.log(this.v$)
-
-			try {
-				await this.$axios.post_auth('v1/teams')
-				this.$router.push({ name: 'Overview - Teams' })
-				this.show = false
-			} catch (error) {
-				this.$toast.error(error.response.data.error)
-			}
-		},
-
 		_enrichEmployeesByFullName(employees) {
 			return employees.map(employee => {
 				employee._fullName = `${employee.name} ${employee.surname}`
@@ -184,7 +200,7 @@ export default {
 
 			set(value) {
 				if (!value) this.$emit('close')
-			},
+			}
 		},
 	}
 }
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 8df10b2..334fec9 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
@@ -21,7 +21,7 @@
 						<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 = { task }" />
 
-						<A-delete-task-modal v-if="showDeleteModal" :show="showDeleteModal" :task="showDeleteModal.task" @delete-task="deleteTask(showDeleteModal.task.id)" @close-modal="(showDeleteModal = null)" />
+						<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @close="showDeleteModal = null" />
 					</div>
 				</td>
 			</tr>
@@ -30,11 +30,11 @@
 </template>
 
 <script>
-import ADeleteTaskModal from '@/plugins/app/_components/a-delete-task-modal.vue'
+import ZDeleteTaskModal from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
 
 export default {
 	components: {
-		ADeleteTaskModal
+		ZDeleteTaskModal
 	},
 
 	props: {
@@ -48,17 +48,6 @@ export default {
 		return {
 			showDeleteModal: null
 		}
-	},
-
-	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 c5fb0cd..5a9fd19 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
@@ -19,7 +19,7 @@
 						<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 = { task }">
 
-						<A-delete-task-modal v-if="showDeleteModal" :show="showDeleteModal" :task="showDeleteModal.task" @delete-task="deleteTask(showDeleteModal.task.id)" @close-modal="(showDeleteModal = null)" />
+						<Z-delete-task-modal v-if="showDeleteModal" :visible="showDeleteModal ? true : false" :task="showDeleteModal.task" @close="showDeleteModal = null" />
 					</div>
 				</td>
 			</tr>
@@ -28,11 +28,11 @@
 </template>
 
 <script>
-import ADeleteTaskModal from '@/plugins/app/_components/a-delete-task-modal.vue'
+import ZDeleteTaskModal from '@/plugins/tm@modal/task/z-delete-task-modal.vue'
 
 export default {
 	components: {
-		ADeleteTaskModal
+		ZDeleteTaskModal
 	},
 
 	props: {
@@ -46,17 +46,6 @@ export default {
 		return {
 			showDeleteModal: null
 		}
-	},
-
-	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 b2e5ad5..bddc8e6 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
@@ -21,19 +21,19 @@
 			</tbody>
 		</v-table>
 
-		<A-team-form-modal 		v-if="editModal" :show="editModal" :teamId="editModal.team.id" @close-modal="(editModal = null)" />
-		<A-delete-team-modal 	v-if="deleteModal" :show="deleteModal" :team="deleteModal.team" @delete-team="deleteTeam" @close-modal="(deleteModal = null)" />
+		<Z-team-modal 			v-if="editModal" 	:visible="editModal ? true : false" 	:teamId="editModal.team.id" @close="(editModal = null)" />
+		<Z-delete-team-modal 	v-if="deleteModal" 	:visible="deleteModal ? true : false" 	:team="deleteModal.team" 	@close="(deleteModal = null)" />
 	</div>
 </template>
 
 <script>
-import ADeleteTeamModal from '@/plugins/app/_components/a-delete-team-modal.vue'
-import ATeamFormModal	from '@/plugins/app/_components/a-team-form-modal.vue'
+import ZDeleteTeamModal from '@/plugins/tm@modal/team/z-delete-team-modal.vue'
+import ZTeamModal		from '@/plugins/tm@modal/team/z-team-modal.vue'
 
 export default {
 	components: {
-		ADeleteTeamModal,
-		ATeamFormModal
+		ZDeleteTeamModal,
+		ZTeamModal
 	},
 
 	props: {
@@ -48,17 +48,6 @@ export default {
 			editModal: null,
 			deleteModal: null
 		}
-	},
-
-	methods: {
-		async deleteTeam(id) {
-			try {
-				await this.$axios.delete(`v1/teams/${id}`)
-				this.deleteModal = null
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		}
 	}
 }
 </script>
diff --git a/app/src/plugins/app@profile/profile/_components/a-profile-form.vue b/app/src/plugins/tm@profile/profile/_components/a-profile-form.vue
similarity index 100%
rename from app/src/plugins/app@profile/profile/_components/a-profile-form.vue
rename to app/src/plugins/tm@profile/profile/_components/a-profile-form.vue
diff --git a/app/src/plugins/app@profile/profile/my-profile.vue b/app/src/plugins/tm@profile/profile/my-profile.vue
similarity index 100%
rename from app/src/plugins/app@profile/profile/my-profile.vue
rename to app/src/plugins/tm@profile/profile/my-profile.vue