feat: update methods to reflect native picker

Signed-off-by: Grigory Vodyanov <[email protected]>

src/components/Editor/Properties/PropertyTitleTimePicker.vue

@@ -15,20 +15,23 @@
 			<div class="property-title-time-picker__time-pickers-from">
 				<DatePicker :date="startDate"
 					prefix="from"
-					@change="changeStart" />
-				<TimePicker :initial-date="startDate" />
+					@change="changeStartDate" />
+				<DatePicker :date="startDate"
+					type="time"
+					@change="changeStartTime" />
 				<NcTimezonePicker :value="startTimezone" @input="changeStartTimezone" />
 			</div>
 
 			<div class="property-title-time-picker__time-pickers-to">
 				<DatePicker :date="endDate"
 					prefix="from"
-					@change="changeEnd" />
-				<TimePicker :initial-date="endDate" />
+					@change="changeEndDate" />
+				<DatePicker :date="endDate"
+					type="time"
+					@change="changeEndTime" />
 				<NcTimezonePicker :value="endTimezone" @input="changeEndTimezone" />
 			</div>
 		</div>
-		<TimePicker :initial-date="startDate" />
 		<div v-if="isReadOnly"
 			class="property-title-time-picker__time-pickers property-title-time-picker__time-pickers--readonly">
 			<div class="property-title-time-picker-read-only-wrapper property-title-time-picker-read-only-wrapper--start-date">
@@ -232,9 +235,17 @@ export default {
 		 *
 		 * @param {Date} value The new start date
 		 */
-		changeStart(value) {
+		changeStartDate(value) {
 			this.$emit('update-start-date', value)
 		},
+		/**
+		 * Update the start time
+		 *
+		 * @param {Date} value The new start time
+		 */
+		changeStartTime(value) {
+			this.$emit('update-start-time', value)
+		},
 		/**
 		 * Updates the timezone of the start date
 		 *
@@ -253,9 +264,17 @@ export default {
 		 *
 		 * @param {Date} value The new end date
 		 */
-		changeEnd(value) {
+		changeEndDate(value) {
 			this.$emit('update-end-date', value)
 		},
+		/**
+		 * Update the end time
+		 *
+		 * @param {Date} value The new end time
+		 */
+		changeEndTime(value) {
+			this.$emit('update-end-time', value)
+		},
 		/**
 		 * Updates the timezone of the end date
 		 *

src/components/Shared/DatePicker.vue

@@ -8,8 +8,8 @@
 		:min="minimumDate"
 		:max="maximumDate"
 		:value="date"
+		:type="type"
 		label=""
-		type="date"
 		class="date-time-picker"
 		@input="change" />
 </template>
@@ -44,6 +44,10 @@ export default {
 			type: Date,
 			default: null,
 		},
+		type: {
+			type: String,
+			default: 'date',
+		},
 	},
 	computed: {
 		...mapStores(useDavRestrictionsStore),

src/mixins/EditorMixin.js

@@ -587,6 +587,18 @@ export default {
 				startDate,
 			})
 		},
+		/**
+		 * Updates the start time of this event
+		 *
+		 * @param {Date} startTime New start time
+		 */
+		updateStartTime(startTime) {
+			this.calendarObjectInstanceStore.changeStartDate({
+				calendarObjectInstance: this.calendarObjectInstance,
+				startTime,
+				onlyTime: true,
+			})
+		},
 		/**
 		 * Updates the timezone of this event's start date
 		 *
@@ -613,6 +625,18 @@ export default {
 				endDate,
 			})
 		},
+		/**
+		 * Updates the end time of this event
+		 *
+		 * @param {Date} endTime New end date
+		 */
+		updateEndTime(endTime) {
+			this.calendarObjectInstanceStore.changeEndDate({
+				calendarObjectInstance: this.calendarObjectInstance,
+				endTime,
+				onlyTime: true,
+			})
+		},
 		/**
 		 * Updates the timezone of this event's end date
 		 *

src/store/calendarObjectInstance.js

@@ -1513,14 +1513,26 @@ export default defineStore('calendarObjectInstance', {
 		 * @param {object} data The destructuring object for data
 		 * @param {object} data.calendarObjectInstance The calendarObjectInstance object
 		 * @param {Date} data.startDate The new start-date
+		 * @param {boolean} onlyTime Only update time
 		 */
 		changeStartDate({
 			calendarObjectInstance,
 			startDate,
+			onlyTime = false,
 		}) {
 			const difference = startDate.getTime() - calendarObjectInstance.startDate.getTime()
 			const endDate = new Date(calendarObjectInstance.endDate.getTime() + difference)
 
+			if (onlyTime) {
+				startDate.setFullYear(calendarObjectInstance.startDate.getFullYear(), calendarObjectInstance.startDate.getMonth(), calendarObjectInstance.startDate.getDate())
+				endDate.setFullYear(calendarObjectInstance.startDate.getFullYear(), calendarObjectInstance.startDate.getMonth(), calendarObjectInstance.startDate.getDate())
+			}
+
+			if (!onlyTime) {
+				startDate.setHours(calendarObjectInstance.startDate.getHours(), calendarObjectInstance.startDate.getMinutes(), calendarObjectInstance.startDate.getSeconds())
+				endDate.setHours(calendarObjectInstance.startDate.getHours(), calendarObjectInstance.startDate.getMinutes(), calendarObjectInstance.startDate.getSeconds())
+			}
+
 			this.changeStartDateMutation({
 				calendarObjectInstance,
 				startDate,
@@ -1555,6 +1567,32 @@ export default defineStore('calendarObjectInstance', {
 			})
 		},
 
+		/**
+		 *
+		 * @param {object} data The destructuring object for data
+		 * @param {object} data.calendarObjectInstance The calendarObjectInstance object
+		 * @param {Date} data.endDate The new end-date
+		 * @param {boolean} onlyTime Only update time
+		 */
+		changeEndDate({
+			calendarObjectInstance,
+			endDate,
+			onlyTime = false,
+		}) {
+			if (onlyTime) {
+				endDate.setFullYear(calendarObjectInstance.endDate.getFullYear(), calendarObjectInstance.endDate.getMonth(), calendarObjectInstance.endDate.getDate())
+			}
+
+			if (!onlyTime) {
+				endDate.setHours(calendarObjectInstance.endDate.getHours(), calendarObjectInstance.endDate.getMinutes(), calendarObjectInstance.endDate.getSeconds())
+			}
+
+			this.changeEndDateMutation({
+				calendarObjectInstance,
+				endDate,
+			})
+		},
+
 		/**
 		 * Change the timezone of the event's end
 		 *

src/views/EditSidebar.vue

@@ -76,8 +76,10 @@
 				:user-timezone="currentUserTimezone"
 				:append-to-body="true"
 				@update-start-date="updateStartDate"
+				@update-start-time="updateStartTime"
 				@update-start-timezone="updateStartTimezone"
 				@update-end-date="updateEndDate"
+				@update-end-time="updateEndTime"
 				@update-end-timezone="updateEndTimezone"
 				@toggle-all-day="toggleAllDay" />