[Modals] Refactoring

app/src/plugins/tm@modal/master-task/z-master-task-modal.vue

@@ -0,0 +1,162 @@
+<template>
+	<v-dialog v-model="show" max-width="650" max-height="90%" height="700px">
+		<v-card height="100%" class="d-flex flex-column">
+			<div class="d-flex justify-space-between align-center modal-header">
+				<h1>Vytvoriť master task</h1>
+				<v-icon
+					@click.stop="show = false"
+					icon="mdi-close"
+					size="large"
+				></v-icon>
+			</div>
+
+			<v-card-actions class="d-flex flex-column modal-content">
+				<v-text-field
+					@focus="onInputFocus"
+					class="modal-input"
+					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="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"
+					label="Celkový odhad"
+					variant="solo"
+					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
+					label="Popis"
+					class="modal-input"
+					variant="solo"
+				></v-textarea>
+				<Z-files-upload @files-uploaded="filesUploaded"/>
+			</v-card-actions>
+
+			<v-btn class="z-btn" @click="createMasterTask()">VYTVORIŤ</v-btn>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+import Datepicker 	from '@vuepic/vue-datepicker'
+import ZFilesUpload from '@/plugins/tm@_components/z-files-upload.vue'
+
+export default {
+	components: {
+		Datepicker,
+		ZFilesUpload
+	},
+
+	props: {
+		visible: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			date: '',
+			preventInputFocus: false
+		}
+	},
+
+	methods: {
+		async createMasterTask() {
+			try {
+				await this.$axios.post_auth('v1/master-tasks')
+				this.$router.push({ name: 'Dashboard - Tasks' })
+				this.show = false
+			} catch (error) {
+				this.$toast.error(error.response.data.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
+			}
+		},
+
+		filesUploaded(files) {
+			console.log(files.length)
+		}
+	},
+
+	computed: {
+		show: {
+			get() {
+				return this.visible
+			},
+
+			set(value) {
+				if (!value) this.$emit('close')
+			}
+		},
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.modal-input
+	width: 100% !important
+	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>