[CHR WIP] CHR10, CHR12, CHR13, CHR14, CHR15, CHR17 - WIP not validated

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

@@ -13,6 +13,27 @@
 					<v-autocomplete v-model="subtask.master_task_id" label="Master task" :class="{error: v$.subtask.master_task_id.$errors.length}" :items="mastertasks" item-title="name" item-value="id" variant="solo" class="modal-input" clearable />
 					
 					<v-text-field v-model="subtask.title" @focus="onInputFocus" class="modal-input" label="Názov subtasku" variant="solo"></v-text-field>
+
+					<div class="splitted-inputs">
+						<!-- TODO: Bialko validacie -->
+						<Datepicker @open="editDatepicker('date')" v-model="subtask.deadline" @focus="onDateFocus" :min-date="new Date()" class="modal-input left" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" 
+							:class="{ error: v$.subtask.deadline.$errors?.length }" :validations="v$.subtask.deadline" />
+
+						<v-text-field class="modal-input right" variant="solo" v-model="subtask._deadline_time" label="Čas" append-inner-icon="mdi-clock-outline" type="time"  @focus="onInputFocus" 
+						:class="{ error: v$.subtask._deadline_time.$errors.length }" :hint="v$.subtask._deadline_time.$errors ? errorUtils.parseErrors(v$.subtask._deadline_time.$errors) : null" />
+					</div>
+					
+					<!-- TODO: Toto tu nema byt ci? -->
+					<!-- <div class="w-full">
+						<A-task-timeblocks 
+							class="w-full" 
+							:timeblocks="subtask.timeblocks" 
+							:subtask="subtask" 
+							@update-subtask="$emit('update-subtask')"
+							@update-unfinished-subtask="subtask = $event"
+							@delete-timeblock="deleteTimeblock($event)"
+						/>
+					</div> -->
 					
 					<template v-if="subtask.id">
 						<v-autocomplete v-model="subtask.employee_id" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input" :class="{ error: employeeValidations[0]?.employee }" 
@@ -22,10 +43,10 @@
 					</template>
 
 					<template v-else>
-						<div v-for="(employee, index) in subtask.employees" :key="`employee-${index}`" class="multiple-employee-select">
-							<v-autocomplete v-model="employee.id" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input employee" :class="{ error: employeeValidations[index]?.employee }" 
+						<div v-for="(employee, index) in subtask.employees" :key="`employee-${index}`" class="splitted-inputs">
+							<v-autocomplete v-model="employee.id" label="Priradený" :items="enrichedEmployees" item-title="_fullName" item-value="id" variant="solo" class="modal-input left" :class="{ error: employeeValidations[index]?.employee }" 
 								@update:model-value="employeeValidations[index] ? employeeValidations[index].employee = false : null" />
-							<v-text-field v-model="employee.duration" class="modal-input duration" variant="solo" type="number" label="Časový odhad" append-inner-icon="mdi-clock-outline" :class="{ error: employeeValidations[index]?.duration }" @focus="onInputFocus" 
+							<v-text-field v-model="employee.duration" class="modal-input right" variant="solo" type="number" label="Časový odhad" append-inner-icon="mdi-clock-outline" :class="{ error: employeeValidations[index]?.duration }" @focus="onInputFocus" 
 								@update:model-value="employeeValidations[index] ? employeeValidations[index].duration = false : null" />
 						</div>
 					</template>
@@ -60,6 +81,13 @@
 				<v-card-actions class="d-flex flex-column modal-content">
 					<div class="w-100">
 						<Z-task-readonly-info :subtask="subtask" @close-modal="closeModal" @update-subtask="updateSubtask" />
+						<!-- <div class="mt-10">
+							<p>Termín</p>
+							<div class="date-wrap">
+								<Datepicker @open="editDatepicker('date')" v-model="subtask.deadline" @focus="onDateFocus" :min-date="new Date()" class="modal-input" format="dd.MM.yyyy" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Dátum" />
+								<Datepicker @open="editDatepicker('time')" v-model="subtask.deadline" @focus="onDateFocus" :min-date="new Date()" class="modal-input" format="HH:mm" locale="sk" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Čas" />
+							</div>
+						</div> -->
 
 						<div class="d-flex justify-start align-center mt-8">
 							<v-btn class="done-btn" v-if="!subtask.is_finished" @click.stop="showCompleteTaskModal()">Dokončiť</v-btn>
@@ -74,7 +102,9 @@
 </template>
 
 <script>
+import Datepicker from '@vuepic/vue-datepicker'
 import ZFilesUpload from "@/plugins/tm@_components/z-files-upload.vue"
+import ATaskTimeblocks from '@/plugins/tm@modal/task/_components/_components/a-task-timeblocks.vue'
 import useVuelidate from "@vuelidate/core"
 import { required } from "@vuelidate/validators"
 import errorUtils from "@/plugins/lib@auth/_utils/error.utils"
@@ -95,6 +125,8 @@ export default {
 	components: {
 		ZTaskReadonlyInfo,
 		ZFilesUpload,
+		Datepicker,
+		// ATaskTimeblocks,
 		QuillEditor
 	},
 
@@ -124,12 +156,21 @@ export default {
 		return {
 			subtask: {
 				master_task_id: { required },
-				// title: { required }
+				deadline: { required },
+				_deadline_time: { required }
+				// description: { required }
 			}
 		}
 	},
 
 	mounted() {
+		this.$events.on("add-timeblock", (timeblock) => {
+			if (!this.subtask?.timeblocks) { this.subtask.timeblocks = [] }
+			if (!this.subtask?.timesheets) { this.subtask.timesheets = [] }
+			if (!this.subtask?.is_finished) { this.subtask.is_finished = 0 }
+			this.subtask.timeblocks.push(timeblock)
+		})
+
 		this.$events.on("on-subtask-edited", (subtask) => {
 			if (subtask?.id == this.subtask?.id)
 				this.subtask = this._enrichTask(subtask)
@@ -154,15 +195,30 @@ export default {
 					const data = await this.$axios.get_auth_data(`v1/subtasks/${subtask.id}`)
 					this.subtask = this._enrichTask(data)
 				} else {
-					this.subtask = { master_task: mastertask, employees: [{}] }
+					this.subtask = { master_task: mastertask, employees: [{}], _deadline_time: '17:00' }
 				}
-
 				this.editMode = editMode || !this.subtask.id
 			} catch (error) {
 				this.$toast.error(error)
 			}
 		},
 
+		deleteTimeblock(i) {
+			this.subtask.timeblocks.splice(i, 1)
+		},
+
+		editDatepicker(type) {
+			const calendarElement = document.getElementsByClassName('dp__instance_calendar')[0]
+			const switchBtn = calendarElement.lastChild.querySelectorAll('.dp__button')[0]
+			if (!calendarElement) return
+			if (type == 'date') {
+				calendarElement.lastChild.remove()
+			} else if (type == 'time') {
+				switchBtn.click()
+				//calendarElement.lastChild.remove()
+			}
+		},
+
 		closeModal() {
 			this.visible = false
 			this.$router.replace({name: this.$route.name})
@@ -171,10 +227,11 @@ export default {
 		async save() {
 			const employeesValid = await this._validateEmployees()
 
-			if (!(await this.v$.$validate()) || !employeesValid)
-				return
+			if (!(await this.v$.$validate())) return
+			if (!employeesValid) return
 
 			this.subtask.description = this.$refs['description'].getHTML()
+			this._mergeDeadlineTimeDate()
 
 			try {
 				if (this.subtask?.id) {
@@ -194,6 +251,7 @@ export default {
 
 				this.closeModal()
 			} catch (error) {
+				console.error(error)
 				this.$toast.error(error)
 			}
 		},
@@ -224,6 +282,15 @@ export default {
 			this.subtask = subtask
 		},
 
+		_mergeDeadlineTimeDate() {
+			const date = new Date(this.subtask.deadline);
+			const timeParts = this.subtask._deadline_time.split(':');
+			date.setHours(parseInt(timeParts[0]));
+			date.setMinutes(parseInt(timeParts[1]));
+
+			this.subtask.deadline = date
+		},
+
 		_validateEmployees() {
 			return new Promise((resolve) => {
 				this.employeeValidations = []
@@ -308,6 +375,19 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.w-full
+	width: 100%
+
+.date-wrap
+	display: flex
+	flex-flow: row
+	width: 100%
+	gap: 20px
+	margin-bottom: 20px
+
+	.dp__main
+		width: calc(50% - 10px) !important
+
 .scrolling
 	overflow: hidden !important
 
@@ -324,17 +404,4 @@ export default {
 @media screen and (max-width: 522px)
 	.files
 		margin-top: 104px !important
-
-.multiple-employee-select
-	width: 100%
-
-	.modal-input
-		display: inline-block
-
-	.employee
-		width: 70% !important
-
-	.duration
-		width: 25% !important
-		margin-left: 5%
 </style>