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

app/src/plugins/tm@modal/master-task/_mixins/selects.mixin.ts

@@ -33,6 +33,7 @@ export default {
 
 		onEmployeeSelected(id) {
 			const employee = this.enrichedEmployees.find(employee => employee.id == id)
+			console.log('add employee', employee)
 			this.mastertask.employees.push(employee)
 			this.showAddEmployeeInput = false
 		},

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

@@ -0,0 +1,94 @@
+<template>
+	<v-dialog v-model="visible" max-width="500" >
+		<v-card>
+        <h1 class="text-h5">
+          Chcete túto osobu odstrániť z tímu?
+        </h1>
+		<v-card-text>{{ member.name + ' ' + member.surname }} bude odstránený/á z teamu.</v-card-text>
+        <v-card-actions>
+          <v-btn
+            class="button primary"
+            variant="text"
+            @click="closeModal()"
+          >
+            Zrušiť
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+            class="button primary"
+            variant="text"
+            @click="deleteMember()"
+          >
+            Áno
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+	</v-dialog>
+</template>
+
+<script>
+import tmUtils from '@/plugins/tm@_utils/tm.utils'
+
+export default {
+	data() {
+		return {
+			visible: false,
+			member: null,
+			allMembers: null,
+			teamId: null,
+			team: null
+		}
+	},
+
+	methods: {
+		async showModal({ member, team }) {
+			this.member = member
+			this.allMembers = team.employees
+			this.teamId = team.id
+			this.team = team
+			this.visible = true
+		},
+
+		closeModal() {
+			this.visible = false
+		},
+
+		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()
+			}
+		},
+
+		async deleteMember() {
+			const filteredMembers = this.allMembers.filter(obj => obj !== this.member)
+			this.team.employees = filteredMembers
+		
+			try {
+				if (this.teamId) {
+					const { team } = await this.$axios.put_auth(`v1/teams/${this.teamId}`, this.team)
+					this.$store.commit('tm/update_team', team)
+				} else {
+					const { team } = await this.$axios.post_auth(`v1/teams`, this.team)
+					this.$store.commit('tm/save_team', team)
+				}
+
+				this.$events.emit('memberDeleted', { filteredMembers })
+				this.closeModal()
+			} catch (error) {
+				this.$toast.error(error)
+			}
+		},
+
+		_enrichTeam(team) {
+			team.employees = tmUtils.enrichEmployees(team.employees)
+			return team
+		}
+	}
+}
+</script>

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

@@ -12,17 +12,33 @@
 
 					<v-text-field v-model="mastertask.name" @focus="onInputFocus" class="modal-input" label="Názov mastertasku" variant="solo" :class="{ error: v$.mastertask.name.$errors.length }" :hint="v$.mastertask.name.$errors ? errorUtils.parseErrors(v$.mastertask.name.$errors) : null"></v-text-field>
 
-					<Datepicker v-model="mastertask.deadline" @focus="onDateFocus" :min-date="new Date()" class="modal-input" format="dd.MM.yyyy, HH:mm" locale="sk" :class="{ error: v$.mastertask.deadline.$errors.length }" select-text="Vybrať" cancel-text="Zrušiť" placeholder="Deadline" />
+					<div class="splitted-inputs">
+						<!-- TODO: Bialko validacie -->
+						<Datepicker @open="editDatepicker('date')" v-model="mastertask.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$.mastertask.deadline.$errors?.length }" :validations="v$.mastertask.deadline" />
 
-					<v-text-field v-model="mastertask.duration" @focus="onInputFocus" class="modal-input mt-5" variant="solo" type="number" disabled :label="`${mastertask.duration} h`"></v-text-field>
+						<v-text-field class="modal-input right" variant="solo" v-model="mastertask._deadline_time" label="Čas" append-inner-icon="mdi-clock-outline" type="time"  @focus="onInputFocus" 
+						:class="{ error: v$.mastertask._deadline_time.$errors.length }" :hint="v$.mastertask._deadline_time.$errors ? errorUtils.parseErrors(v$.mastertask._deadline_time.$errors) : null" />
+					</div>
 
-					<v-select v-model="mastertask.team_id" @focus="onInputFocus" class="modal-input border-select" :class="{ error: v$.mastertask.team_id.$errors.length }" label="Tím" variant="solo" :items="teams" item-value="id" item-title="name"></v-select>
+					<v-text-field v-model="mastertask.duration" @focus="onInputFocus" class="modal-input" variant="solo" type="number" :label="`${mastertask.duration} h`"></v-text-field>
+
+					<v-select v-model="mastertask.team_id" @focus="onInputFocus" class="modal-input border-select" :class="{ error: v$.mastertask.employees.$errors.length }" label="Tím" variant="solo" :items="teams" item-value="id" item-title="name"></v-select>
 
 					<template v-if="!mastertask.id && mastertask.team_id">
-						<v-text-field v-for="(employee, index) in mastertask.employees" :key="employee.id" @focus="onInputFocus" :class="{ error: !mastertask.employees[index].duration }" class="modal-input" :label="`${employee.name} ${employee.surname}`" variant="solo" placeholder="h" v-model="mastertask.employees[index].duration" type="number" min="1" @input="onEmployeeDurationChanged">
+						<v-text-field v-for="(employee, index) in mastertask.employees" :key="employee.id" @focus="onInputFocus" class="modal-input" :label="`${employee.name} ${employee.surname}`" variant="solo" placeholder="h" v-model="mastertask.employees[index].duration" type="number" min="1" @input="onEmployeeDurationChanged">
 							<p class="employee-select-avatar d-flex justify-center align-center">
-								{{ employee.name.charAt(0) + employee.surname.charAt(0) }}
+								{{ employee?.name.charAt(0) + employee?.surname.charAt(0) }}
 							</p>
+							<v-icon @click.stop="removeMemberAlert(employee)" class="remove-input" icon="mdi-close" size="small"></v-icon>
+						</v-text-field>
+					</template>
+					<template v-if="!mastertask.id && !mastertask.team_id && mastertask.employees">
+						<v-text-field v-for="(employee, index) in mastertask.employees" :key="employee.id" @focus="onInputFocus" class="modal-input" :label="`${employee.name} ${employee.surname}`" variant="solo" placeholder="h" v-model="mastertask.employees[index].duration" type="number" min="1" @input="onEmployeeDurationChanged">
+							<p class="employee-select-avatar d-flex justify-center align-center">
+								{{ employee?.name.charAt(0) + employee?.surname.charAt(0) }}
+							</p>
+							<!-- <v-icon @click.stop="removeMemberAlert(employee)" class="remove-input" icon="mdi-close" size="small"></v-icon> -->
 						</v-text-field>
 					</template>
 
@@ -30,7 +46,7 @@
 
 					<!-- <Z-autocomplete label="Vyhľadať zamestnanca"  :options="employeesOptions" class="modal-input" @option-selected="onEmployeeSelected" /> -->
 
-					<v-btn class="w-100 mb-5 button secondary" :disabled="!mastertask.team?.id" @click="showAddEmployeeInput = true"> <v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca </v-btn>
+					<v-btn class="w-100 mb-5 button secondary" :class="{error: v$.mastertask.project_id.$errors.length}" @click="showAddEmployeeInput = true"> <v-icon class="mx-1" icon="mdi-plus" />Pridať zamestnanca </v-btn>
 
 					<div class="w-100 modal-input" :class="{ error: v$.mastertask.description.$errors.length }">
 						<QuillEditor ref="description" v-model="mastertask.description" placeholder="Popis" theme="snow" class="rich-text-editor" @input="mastertask.description = $event.srcElement.innerHTML" />
@@ -114,6 +130,7 @@ export default {
 
 	data() {
 		return {
+			deadline: null,
 			editMode: false,
 			visible: false,
 			errorUtils,
@@ -153,15 +170,21 @@ export default {
 		return {
 			mastertask: {
 				project_id: { required },
-				team_id: { required },
+				employees: { required },
 				name: { required },
 				description: { required },
-				deadline: { required }
+				deadline: { required },
+				_deadline_time: { required }
 			}
 		}
 	},
 
 	mounted() {
+		this.$events.on('memberDeleted', (filteredMembers) => {
+			console.log()
+			//this.mastertask.employees = filteredMembers
+		}),
+
 		this.$events.on('on-mastertask-deleted', (mastertask) => {
 			if (mastertask?.id == this.mastertask?.id) this.closeModal()
 		})
@@ -189,11 +212,30 @@ export default {
 	},
 
 	methods: {
+		removeMemberAlert(member) {
+			const team = this.mastertask.team
+			this.$events.emit('show-delete-team-member-modal', { member, team })
+		},
+
+		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()
+			}
+		},
+
 		async showModal({mastertask, editMode = false}) {
 			this.editMode 	= null
 			this.visible 	= true
 			this.mastertask = null
-			this.$nextTick(() => this.v$.$reset())
+			this.$nextTick(() => {
+				this.v$.$reset()
+			})
 
 			try {
 				if (mastertask?.id) {
@@ -206,7 +248,7 @@ export default {
 
 					// this.mastertask.project_code 	= project.code
 				} else {
-					this.mastertask = { employees: [], duration: 0 }
+					this.mastertask = { employees: [], duration: 0, _deadline_time: '17:00' }
 				}
 
 				this.editMode = editMode || !this.mastertask.id
@@ -226,6 +268,8 @@ export default {
 			if (this.$refs['description'])
 				this.mastertask.description = this.$refs['description'].getHTML()
 
+			this._mergeDeadlineTimeDate()
+
 			try {
 				this.mastertask.deadline = moment(this.mastertask.deadline).format('YYYY-MM-DD HH:MM:SS')
 
@@ -253,6 +297,15 @@ export default {
 
 		addTask() {
 			this.$events.emit('show-subtask-modal', { subtask: null, editMode: false, mastertask: this.mastertask })
+		},
+
+		_mergeDeadlineTimeDate() {
+			const date = new Date(this.mastertask.deadline);
+			const timeParts = this.mastertask._deadline_time.split(':');
+			date.setHours(parseInt(timeParts[0]));
+			date.setMinutes(parseInt(timeParts[1]));
+
+			this.mastertask.deadline = date
 		}
 	},
 
@@ -260,6 +313,14 @@ export default {
 		editMode() {
 			this.$nextTick(() => {
 				this.$refs['description']?.setHTML(this.mastertask.description || '')
+
+				if (!this.mastertask) return
+
+				const date = new Date(this.mastertask.deadline)
+				const hours = date.getHours()
+				const minutes = date.getMinutes()
+
+				this.mastertask._deadline_time = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
 			})
 		}
 	}
@@ -267,6 +328,15 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.date-wrap
+	display: flex
+	flex-flow: row
+	width: 100%
+	gap: 20px
+
+	.dp__main
+		width: calc(50% - 10px) !important
+
 .employee-select-avatar
 	background: #6200EE
 	color: #fff
@@ -278,14 +348,20 @@ export default {
 	position: absolute
 	top: 50%
 	right: 0
-	transform: translate(-50%, -50%)
+	transform: translate(-120%, -50%)
+
+.remove-input
+	position: absolute
+	top: 50%
+	transform: translate(120%, -50%)
+	cursor: pointer
+
 .scrolling
 	overflow: hidden !important
 
 .border-bottom
 	border-bottom: 1px solid rgba(0,0,0,.1)
 
-
 .subtask-btn
 	border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)) !important
 	color: #7f39fb !important