[sub-task-detail-modal] multiple dates

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
-										v-html="
-											`${tmUtils.formatDateTime(task.starts_at)} - ${tmUtils.formatDateTime(task.ends_at)}`
-										"
+									<div v-for="date in task.timeblocks" :key="date.id">
+										<div class="d-flex align-center m-5">
+											<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 })
 		},