[Blockers] Added blockers in tasks view

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

@@ -27,18 +27,21 @@
 					></v-text-field>
 					<v-select v-model="blocker.employee_id" ref="employee-select" @focus="onInputFocus" class="modal-input border-select" label="Priradený" :class="{ error: v$.blocker.employee_id.$errors.length }" variant="solo" :items="enrichedEmployees" item-value="id" item-title="_fullName"></v-select>
 					<Datepicker
-						class="modal-input"
-						v-model="startEndDate"
-						format="dd.MM.yyyy, HH:mm"
+						class="modal-input mb-5"
+						v-model="datepicker"
+						format="dd.MM.yyyy"
 						locale="sk"
-						:class="{ error: v$.blocker.start.$errors.length || v$.blocker.end.$errors.length }"
-						:validations="v$.blocker.employees"
+						:class="{ error: v$.datepicker.$errors?.length }"
+						:validations="v$.datepicker"
 						select-text="Vybrať"
 						cancel-text="Zrušiť"
-						placeholder="Trvanie od - do"
-						range
+						placeholder="Dátum"
+						:enable-time-picker="false" 
 						ref="datepicker"
 					/>
+
+					<v-text-field v-model="starts_at_time" type="time" variant="solo" bg-color="white" :hint="v$.starts_at_time.$errors ? errorUtils.parseErrors(v$.starts_at_time.$errors) : null" :class="{ error: v$.starts_at_time.$errors.length }" class="mb-1 modal-input" label="Začiatok" />
+					<v-text-field v-model="ends_at_time" 	type="time" variant="solo" bg-color="white" :hint="v$.ends_at_time.$errors ? errorUtils.parseErrors(v$.ends_at_time.$errors) : null" :class="{ error: v$.ends_at_time.$errors.length }" class="modal-input" label="Koniec" />
 				</v-card-actions>
 
 				<v-btn class="button primary" @click="save()">{{ blocker.id ? 'UPRAVIŤ' : 'VYTVORIŤ'}}</v-btn>
@@ -55,6 +58,7 @@ 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'
 import { mapGetters } from 'vuex'
+import moment from 'moment'
 
 export default {
 	mixins: [VuetifyFixFocusMixin],
@@ -71,7 +75,9 @@ export default {
 			v$: useVuelidate(),
 			errorUtils,
 			blocker: null,
-			startEndDate: null
+			datepicker: null,
+			starts_at_time: null,
+			ends_at_time: null
 		}
 	},
 
@@ -92,22 +98,33 @@ export default {
 				start: { required },
 				end: { required },
 				employee_id: { required }
-			}
+			},
+
+			starts_at_time: { required },
+			ends_at_time: { required },
+			datepicker: { required }
 		}
 	},
 
 	methods: {
 		async showModal({ blocker }) {
-			this.visible = true
-			this.blocker = null
-			this.startEndDate = null
+			this.visible 			= true
+			this.blocker 			= null
+			this.datepicker 		= null
+			this.starts_at_time 	= null
+			this.ends_at_time 		= null
+
 			this.$nextTick(() => this.v$.$reset())
 
 			try {
 				if (blocker?.id) {
 					blocker = await this.$axios.get_auth_data(`v1/blockers/${blocker.id}`)
 					blocker.employee_id = blocker.employee.id
-					this.startEndDate = [new Date(blocker.start), new Date(blocker.end)]
+					
+					this.starts_at_time = moment(blocker.start).format('HH:mm')
+					this.ends_at_time 	= moment(blocker.end).format('HH:mm')
+					this.datepicker 	= new Date(blocker.start)
+
 					this.blocker = blocker
 				} else {
 					this.blocker  = {start: null}
@@ -122,14 +139,18 @@ export default {
 				return
 
 			try {
-				if (this.blocker.id)
-					await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
-				else
-					await this.$axios.post_auth('v1/blockers', this.blocker)
+				if (this.blocker.id) {
+					const { blocker } = await this.$axios.put_auth(`v1/blockers/${this.blocker.id}`, this.blocker)
+					this.blocker = blocker
+				} else {
+					const { blocker } = await this.$axios.post_auth('v1/blockers', this.blocker)
+					this.blocker = blocker
+				}
 
+				this.$events.emit("on-blocker-edited", this.blocker)
 				this.closeModal()
 			} catch (error) {
-				this.$toast(error)
+				this.$toast.error(error)
 			}
 		},
 
@@ -137,23 +158,31 @@ export default {
 			this.$refs['datepicker'].clearValue()
 			this.visible = false
 			this.$emit('close', this.blocker)
+		},
+
+		_syncDatesTimes() {
+			if (!this.starts_at_time || !this.ends_at_time || !this.datepicker)
+				return
+
+			const splittedStart = this.starts_at_time.split(':')
+			const splittedEnd 	= this.ends_at_time.split(':')
+
+			this.blocker.start 	= moment(this.datepicker).set({hours: parseInt(splittedStart[0]), minutes: parseInt(splittedStart[1])}).format('YYYY-MM-DD HH:mm')
+			this.blocker.end 	= moment(this.datepicker).set({hours: parseInt(splittedEnd[0]), minutes: parseInt(splittedEnd[1])}).format('YYYY-MM-DD HH:mm')
 		}
 	},
 
 	watch: {
-		startEndDate(value) {
-			if (!value || !value[1])
-				return
+		ends_at_time() {
+			this._syncDatesTimes()
+		},
 
-			this.startEndDate[0] = this.startEndDate[0].setHours(this.user.work_start, 0, 0, 0)
-			this.startEndDate[1] = this.startEndDate[1].setHours(this.user.work_end, 0, 0, 0)
+		starts_at_time() {
+			this._syncDatesTimes()
+		},
 
-
-			this.blocker = {
-				...this.blocker,
-				start: tmUtils.formatDateTimeForBackend(this.startEndDate[0]),
-				end: tmUtils.formatDateTimeForBackend(this.startEndDate[1]),
-			}
+		datepicker() {
+			this._syncDatesTimes()
 		}
 	}
 }

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

@@ -0,0 +1,55 @@
+<template>
+	<v-dialog v-model="visible" max-width="750">
+		<v-card>
+			<div class="d-flex justify-space-between align-center">
+				<h1>Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b>?</h1>
+
+				<v-icon
+					@click.stop="closeModal()"
+					icon="mdi-close"
+					size="large"
+					class="mb-15"
+				></v-icon>
+			</div>
+			<v-card-actions class="mt-10 d-flex justify-start align-center">
+				<v-btn class="button primary half" variant="flat" @click="deleteBlocker()">ÁNO</v-btn>
+				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
+			</v-card-actions>
+		</v-card>
+	</v-dialog>
+</template>
+
+<script>
+export default {
+	emits: ['on-blocker-deleted'],
+
+	data() {
+		return {
+			visible: false,
+			blocker: null
+		}
+	},
+
+	methods: {
+		async showModal({ blocker }) {
+			this.blocker = blocker
+			this.visible = true
+		},
+
+		closeModal() {
+			this.visible = false
+		},
+
+		async deleteBlocker() {
+			try {
+				await this.$axios.delete_auth(`v1/blockers/${this.blocker.id}`)
+				
+				this.$emit('on-blocker-deleted', this.blocker)
+				this.closeModal()
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		}
+	}
+}
+</script>