fix(appointments): add date to booking detail view

Signed-off-by: Anna Larch <anna@nextcloud.com>

src/components/Appointments/AppointmentDetails.vue

@@ -15,7 +15,7 @@
 					{{ config.name }}
 				</h2>
 				<div class="booking__time">
-					{{ startTime }} - {{ endTime }}
+					{{date}} {{ startTime }} - {{ endTime }}
 				</div>
 				<!-- Description needs to stay inline due to its whitespace -->
 				<span class="booking__description">{{ config.description }}</span>
@@ -81,7 +81,7 @@ import {
 } from '@nextcloud/vue'
 import autosize from '../../directives/autosize.js'
 
-import { timeStampToLocaleTime } from '../../utils/localeTime.js'
+import { timeStampToLocaleTime, timeStampToLocaleDate } from '../../utils/localeTime.js'
 
 export default {
 	name: 'AppointmentDetails',
@@ -144,6 +144,9 @@ export default {
 		endTime() {
 			return timeStampToLocaleTime(this.timeSlot.end, this.timeZoneId)
 		},
+		date() {
+			return timeStampToLocaleDate(this.timeSlot.start, this.timeZoneId)
+		}
 	},
 	methods: {
 		 save() {

src/utils/localeTime.js

@@ -46,3 +46,16 @@ export function timeStampToLocaleTime(timeStamp, timeZoneId) {
 		minute: 'numeric',
 	})
 }
+
+/**
+ * Format a time stamp as local date
+ *
+ * @param timeStamp {Number} unix times stamp in seconds
+ * @param timeZoneId {string} IANA time zone identifier
+ * @return {string} the formatted date
+ */
+export function timeStampToLocaleDate(timeStamp, timeZoneId) {
+	return (new Date(timeStamp * 1000)).toLocaleDateString(locale, {
+		timeZone: timeZoneId,
+	})
+}