[Task modal] Refactored task modal

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

@@ -19,7 +19,7 @@
 					<v-list>
 						<v-list-item class="cursor-pointer hover-background" @click="createMasterTaskDialog = true">MASTER TASK</v-list-item>
 						<v-list-item class="cursor-pointer hover-background" @click="createSubTaskDialog = true">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="createTeamModal()">TÍM</v-list-item>
 						<v-list-item class="cursor-pointer hover-background" @click="createBlockerDialog = true">BLOCKER</v-list-item>
 					</v-list>
 				</v-menu>
@@ -53,7 +53,7 @@
 		<Z-master-task-modal 	:visible="createMasterTaskDialog ? true : false" 	@close="createMasterTaskDialog = false"/>
 		<Z-sub-task-modal 		:visible="createSubTaskDialog ? true : false" 		@close="createSubTaskDialog = false"/>
 		<Z-blocker-modal 		:visible="createBlockerDialog ? true : false" 		@close="createBlockerDialog = false" />
-		<Z-team-modal 			:visible="createTeamDialog ? true : false" 			@close="createTeamDialog = false" />
+		<Z-team-modal ref="z-team-modal" />
 	</v-app-bar>
 </template>
 
@@ -74,7 +74,6 @@ export default {
 	data() {
 		return {
 			user: null,
-			createTeamDialog: false,
 			createBlockerDialog: false,
 			createMasterTaskDialog: false,
 			createSubTaskDialog: false
@@ -98,6 +97,10 @@ export default {
 			} catch (error) {
 				this.$toast.error(error.data.error)
 			}
+		},
+
+		createTeamModal() {
+			this.$refs['z-team-modal'].create()
 		}
 	}
 }

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

@@ -1,11 +1,11 @@
 <template>
-	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
+	<v-dialog v-model="visible" max-width="650" max-height="90%" height="700px">
-		<W-loadable :content="allEmployees" class="h-100">
+		<W-loadable :content="team && 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>{{ team.id ? 'Upraviť tím' : 'Vytvoriť tím' }}</h1>
 					<v-icon
-						@click.stop="show = false"
+						@click.stop="close()"
 						icon="mdi-close"
 						size="large"
 					></v-icon>
@@ -69,32 +69,19 @@ import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
 const atLeastOne = (value) => value.length
 
 export default {
+	emits: ['close'],
+
 	components: {
 		ZAutocomplete,
 	},
 
-	props: {
-		visible: {
-			type: Boolean,
-			required: true
-		},
-
-		teamId: {
-			type: Number || null,
-			required: false,
-			default: null
-		}
-	},
-
 	data() {
 		return {
+			visible: false,
 			allEmployees: null,
 			v$: useVuelidate(),
 			errorUtils,
-			team: {
+			team: null
-				name: '',
-				employees: []
-			},
 		}
 	},
 
@@ -108,9 +95,6 @@ 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)
@@ -120,8 +104,23 @@ export default {
 	},
 
 	methods: {
+		async create(team = null) {
+			if (team) {
+				this.team = team
+				await this._load()
+			} else {
+				this.team = {
+					name: '',
+					employees: []
+				}
+			}
+
+			this.visible = true
+		},
+
 		async save() {
-			if (!(await this.v$.$validate())) return console.log(this.v$)
+			if (!(await this.v$.$validate()))
+				return
 
 			try {
 				if (this.team.id)
@@ -129,18 +128,23 @@ export default {
 				else
 					await this._create()
 
-				this.$router.push({ name: 'Overview - Teams' })
+				this.close()
-				this.show = false
 			} catch (error) {
 				console.log(error)
 			}
 		},
 
+		close() {
+			this.visible = false
+			this.$emit('close', this.team)
+			this.team 	 = null
+		},
+
 		async _create() {
 			try {
 				await this.$axios.post_auth('v1/teams', this.team)
 			} catch (error) {
-				this.$toast.error(error.response.data.error)
+				this.$toast.error(error)
 			}
 		},
 
@@ -148,14 +152,14 @@ export default {
 			try {
 				await this.$axios.post_auth(`v1/teams/${this.team.id}`, this.team)
 			} catch (error) {
-				this.$toast.error(error.response.data.error)
+				this.$toast.error(error)
 			}
 		},
 
 		async _load() {
 			try {
-				const team = await this.$axios.get_auth_data(`v1/teams/${this.teamId}`)
+				const team 		= await this.$axios.get_auth_data(`v1/teams/${this.team.id}`)
-				team.employees = this._enrichEmployeesByFullName(team.employees)
+				team.employees 	= this._enrichEmployeesByFullName(team.employees)
 
 				this.team = team
 			} catch (error) {
@@ -191,17 +195,7 @@ export default {
 					value: `${employee.name} ${employee.surname}`,
 				}
 			})
-		},
+		}
-
-		show: {
-			get() {
-				return this.visible
-			},
-
-			set(value) {
-				if (!value) this.$emit('close')
-			}
-		},
 	}
 }
 </script>

app/src/plugins/tm@overview/teams/_components/a-teams-table.vue

@@ -13,7 +13,7 @@
 					<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="editModal = { team }" />
+							<img class="pencil-icon" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" @click.stop="editTeam(team)" />
 							<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" @click.stop="deleteModal = { team }" />
 						</div>
 					</td>
@@ -21,7 +21,7 @@
 			</tbody>
 		</v-table>
 
-		<Z-team-modal 			v-if="editModal" 	:visible="editModal ? true : false" 	:teamId="editModal.team.id" @close="(editModal = null)" />
+		<Z-team-modal ref="z-team-modal" />
 		<Z-delete-team-modal 	v-if="deleteModal" 	:visible="deleteModal ? true : false" 	:team="deleteModal.team" 	@close="(deleteModal = null)" />
 	</div>
 </template>
@@ -48,6 +48,12 @@ export default {
 			editModal: null,
 			deleteModal: null
 		}
+	},
+
+	methods: {
+		editTeam(team) {
+			this.$refs['z-team-modal'].create(team)
+		}
 	}
 }
 </script>