[sub-task-detail-modal] multiple dates

app/public/mock/v1/tasks/(id).GET.json

@@ -7,7 +7,18 @@
 		"duration": 5400000,
 		"spent_time": 3000000,
 		"is_finished": false,
-		"dates": [],
+		"timeblocks": [
+			{
+				"id": 43,
+				"start": "2023-01-31 04:02:17",
+				"end": "2023-01-31 08:23:05"
+			},
+			{
+				"id": 52,
+				"start": "2023-09-26 01:01:17",
+				"end": "2024-02-11 08:23:05"
+			}
+		],
 		"master_task": {
 			"id": 1,
 			"name": "Master task 1",

app/src/plugins/app/_theme/global.sass

@@ -34,6 +34,21 @@
 	height: 24px
 	width: 24px
 
+.remove-date
+	border: 1px solid rgba(0, 0, 0, 0.2)
+	border-radius: 50%
+	padding: 13px
+	height: 24px
+	width: 24px
+
+.add-date
+	color: white
+	border-radius: 50%
+	background: #6200EE
+	padding: 13px
+	height: 24px
+	width: 24px
+
 th
 	font-size: 16px !important
 

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

@@ -277,15 +277,14 @@
 									<td class="w-25">{{ task.master_task }}</td>
 									<td class="d-flex align-center">
 										<p class="employee-selected-avatar d-flex justify-center align-center">
-											<!-- {{ task.name.charAt(0) + employee.surname.charAt(0) }} -->IN 
+											{{ getFullNameByEmployeeId(task.employee_id).initials }}
 										</p>
-										<!-- <p class="ml-2" v-html="`${masterTask.task[index].name} ${masterTask.task[index].surname}`" /> -->
+										<p>{{ getFullNameByEmployeeId(task.employee_id).fullName }}</p>
-										<p>Meno zamestnanca</p>
 									</td>
 									<td class="task-action">
 										<div class="d-flex justify-start">
-											<img class="pencil-icon" :src="require('@/plugins/tm@dashboard/_components/_img/checkmark.svg')" alt="checkmark-icon" :style="{opacity: 0.3}">
+											<img @click="getFullNameByEmployeeId(employee_id).fullName" class="pencil-icon" :src="require('@/plugins/tm@dashboard/_components/_img/checkmark.svg')" alt="checkmark-icon" :style="{opacity: 0.3}">
-											<img class="pencil-icon ml-2" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" :style="{opacity: 0.3}">
+											<img @click="getFullNameByEmployeeId(employee_id).initials" class="pencil-icon ml-2" :src="require('@/plugins/tm@overview/_img/pencil-icon.svg')" alt="pencil-icon" :style="{opacity: 0.3}">
 											<img class="trash-icon" :src="require('@/plugins/tm@overview/_img/trash-icon.svg')" alt="trash-icon" :style="{opacity: 0.3}">
 										</div>
 									</td>
@@ -369,6 +368,23 @@ export default {
 			console.log(x)
 		},
 
+		getFullNameByEmployeeId(employee_id) {
+			let fullName = ''
+			let initials = ''
+			this.employees.forEach(employee => {
+			if (employee.id === employee_id) {
+					fullName = `${employee.name} ${employee.surname}`
+					initials = employee.name.charAt(0) + employee.surname.charAt(0)
+				}
+			})
+			return {
+				fullName,
+				initials
+			}
+			
+		},
+
+
 		async showModal(masterTask, editMode = false) {
 			this.visible 		= true
 			this.masterTask 	= null

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

@@ -165,9 +165,9 @@
 								</v-sheet>
 							</v-col>
 						</v-row>
-						<v-row no-gutters class="align-center">
+						<v-row no-gutters>
 							<v-col cols="5">
-								<v-sheet class="pa-2 ma-2">
+								<v-sheet class="pa-2 ma-2 pt-5">
 									<div class="d-flex align-center">
 										<v-icon
 											icon="mdi-calendar-week"
@@ -179,11 +179,52 @@
 							</v-col>
 							<v-col cols="7">
 								<v-sheet class="ma-2">
-									<p
+									<div v-for="date in task.timeblocks" :key="date.id">
-										v-html="
+										<div class="d-flex align-center m-5">
-											`${tmUtils.formatDateTime(task.starts_at)} - ${tmUtils.formatDateTime(task.ends_at)}`
+											<v-icon 
-										"
+												@click.stop="removeDate(index)"
+												class="remove-date cursor-pointer mr-2" icon="mdi-minus" size="medium" 
+											/>
+											<p
+												class="task-badge px-4 py-2 rounded-pill mt-2"
+												v-html="
+													`${tmUtils.formatDateTime(date.start)} - ${tmUtils.formatDateTime(date.end)}`
+												"
+											/>
+										</div>
+									</div>
+									<v-icon 
+										@click="showDatePicker = true"
+										class="add-date cursor-pointer mt-5" icon="mdi-plus" size="medium" 
 									/>
+									<v-dialog max-width="650" v-model="showDatePicker">
+										<v-card>
+											<div class="d-flex justify-space-between align-center">
+												<h1>Pridať dátum</h1>
+
+												<v-icon
+													@click.stop="showDatePicker = false"
+													icon="mdi-close"
+													size="large"
+												></v-icon>
+											</div>
+											<v-card-actions class="mt-10 d-flex justify-start align-center">
+												<Datepicker
+													v-model="selectedNewDate"
+													:class="{ error: v$.selectedNewDate.$errors.length }"
+													:validations="v$.selectedNewDate"
+													class="modal-input"
+													format="dd.MM.yyyy, HH:mm"
+													locale="sk"
+													select-text="Vybrať"
+													cancel-text="Zrušiť"
+													placeholder="Trvanie od - do"
+													range
+												/>
+											</v-card-actions>
+											<v-btn @click="addNewDate()" class="button primary mt-5">Potvrdiť</v-btn>
+										</v-card>
+									</v-dialog>
 								</v-sheet>
 							</v-col>
 						</v-row>
@@ -355,7 +396,9 @@ export default {
 			preventInputFocus: false,
 			masterTasks: [],
 			masterTaskIdSelect: null,
-			employeeIdSelect: null
+			employeeIdSelect: null,
+			showDatePicker: false,
+			selectedNewDate: []
 		}
 	},
 
@@ -377,6 +420,7 @@ export default {
 				duration: { required },
 				employee: { required },
 			},
+			selectedNewDate: { required }
 		}
 	},
 
@@ -431,6 +475,21 @@ export default {
 			}
 		},
 
+		async addNewDate() {
+			if (this.selectedNewDate) {
+				this.task.timeblocks.push({
+					start: this.selectedNewDate[0],
+					end: this.selectedNewDate[1]
+				})
+				this.showDatePicker = false
+				this.selectedNewDate = []
+			}
+		},
+
+		removeDate(index) {
+			this.task.timeblocks.splice(index, 1)
+		},
+
 		openDeleteTaskModal(task) {
 			this.$events.emit('show-delete-task-modal', { task })
 		},