[tm@modals] Refactoring

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

@@ -5,7 +5,7 @@
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ blocker.id ? 'Upraviť' : 'Vytvoriť'}} blocker</h1>
 					<v-icon
-						@click.stop="close()"
+						@click.stop="closeModal()"
 						icon="mdi-close"
 						size="large"
 					></v-icon>
@@ -26,7 +26,7 @@
 						variant="solo"
 					></v-text-field>
 					<div
-						class="employee-position w-100"
+						class="relative w-100"
 						v-for="(employee, index) in blocker.employees"
 						:key="employee.id"
 					>
@@ -66,22 +66,26 @@
 					/>
 				</v-card-actions>
 
-				<v-btn class="z-btn" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
+				<v-btn class="button primary" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
 			</v-card>
 		</W-loadable>
 	</v-dialog>
 </template>
 
 <script>
-import ZAutocomplete 	from '@/plugins/tm@_components/z-autocomplete.vue'
-import Datepicker	 	from '@vuepic/vue-datepicker'
-import useVuelidate 	from '@vuelidate/core'
-import { required } 	from '@vuelidate/validators'
-import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
+import ZAutocomplete 		from '@/plugins/tm@_components/z-autocomplete.vue'
+import Datepicker	 		from '@vuepic/vue-datepicker'
+import useVuelidate 		from '@vuelidate/core'
+import { required } 		from '@vuelidate/validators'
+import errorUtils 			from '@/plugins/lib@auth/_utils/error.utils'
+import VuetifyFixFocusMixin from  '@/plugins/tm@modal/_mixins/vuetify-fix-focus'
+import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
 
 const atLeastOne = (value) => value.length
 
 export default {
+	mixins: [VuetifyFixFocusMixin],
+
 	emits: ['close'],
 
 	components: {
@@ -92,7 +96,7 @@ export default {
 	data() {
 		return {
 			visible: false,
-			allEmployees: null,
+			employees: null,
 			v$: useVuelidate(),
 			errorUtils,
 			blocker: null
@@ -104,7 +108,7 @@ export default {
 			const selectedEmployeesIds = this.blocker.employees.map(
 				(employee) => employee.id
 			)
-			const employees = this.allEmployees.filter(
+			const employees = this.employees.filter(
 				(employee) => !selectedEmployeesIds.includes(employee.id)
 			)
 
@@ -133,29 +137,22 @@ export default {
 			this.blocker = null
 
 			try {
-				const allEmployees = await this.$axios.get_auth_data('v1/employees')
-				this.allEmployees  = this._enrichEmployeesByFullName(allEmployees)
+				const employees = await this.$axios.get_auth_data('v1/employees')
+				this.employees 	= tmUtils.enrichEmployeesByFullName(employees)
+
+				if (blocker?.id) {
+					const b 	  = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
+					this.blocker  = {...b, employees: tmUtils.enrichEmployeesByFullName(b.employees)}
+				} else {
+					this.blocker  = {employees: []}
+				}
 			} catch (error) {
 				this.$toast.error(error)
 			}
-
-			if (blocker?.id) {
-				await this._load(blocker.id)
-			} else {
-				const blocker = {
-					name: '',
-					date: null,
-					employees: []
-				}
-
-				setTimeout(() => {
-					this.blocker = blocker
-				})
-			}
 		},
 
 		employeeSelected(selectedOption) {
-			const employee = this.allEmployees.find((empl) => empl.id == selectedOption.key)
+			const employee = this.employees.find((empl) => empl.id == selectedOption.key)
 			this.blocker.employees.push(employee)
 		},
 
@@ -165,97 +162,23 @@ export default {
 
 			try {
 				if (this.blocker.id)
-					await this._edit()
+					await this.$axios.post_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
 				else
-					await this._create()
+					await this.$axios.post_auth('v1/blockers', this.blocker)
 
-				this.close()
+				this.closeModal()
+
+				// Kravarik: Toto tu ma byt?
 				this.$router.push({ name: 'Dashboard - Tasks' })
 			} catch (error) {
 				this.$toast(error)
 			}
 		},
 
-		close() {
+		closeModal() {
 			this.visible = false
 			this.$emit('close', this.blocker)
-		},
-
-		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.blocker.id}`)
-				blocker.employees 	= this._enrichEmployeesByFullName(blocker.employees)
-
-				this.blocker = blocker
-			} catch (error) {
-				this.$toast.error(error)
-			}
-		},
-
-		// Vuetify input was automatically focus after date input was clicked. This will prevent this unwanted behavior
-		onDateFocus($event) {
-			if ($event == undefined) {
-				this.preventInputFocus = true
-			}
-		},
-
-		onInputFocus($event) {
-			if (this.preventInputFocus) {
-				$event.target.blur()
-				this.preventInputFocus = false
-			}
-		},
-
-		_enrichEmployeesByFullName(employees) {
-			return employees.map(employee => {
-				employee._fullName = `${employee.name} ${employee.surname}`
-				return employee
-			})
 		}
 	}
 }
-</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>
+</script>