fronting history improvements

src/components/frontingEntry/FrontingEntryLabel.vue

@@ -7,11 +7,13 @@
 	import dayjs from "dayjs";
 	import RelativeTime from "dayjs/plugin/relativeTime";
 	import LocalizedFormat from "dayjs/plugin/localizedFormat";
+	import Duration from "dayjs/plugin/duration";
 	import { onMounted, onUnmounted, ref } from "vue";
 	import { formatWrittenTime } from "../../lib/util/misc";
 	import { appConfig } from "../../lib/config";
 	dayjs.extend(RelativeTime);
 	dayjs.extend(LocalizedFormat);
+	dayjs.extend(Duration);
 
 	const props = defineProps<{
 		entry: FrontingEntryComplete,
@@ -26,8 +28,16 @@
 
 	const intervalRef = ref();
 
-	function format(time: Date){
-		return dayjs(time).format(`LL, ${twelveHour ? 'hh:mm A' : "HH:mm"}`)
+	function format(startTime: Date, endTime?: Date){
+		const start = dayjs(startTime);
+
+		if(!endTime) return start.format(`LL, ${twelveHour ? 'hh:mm A' : "HH:mm"}`);
+		const end = dayjs(endTime);
+
+		if(end.valueOf() - start.endOf('day').valueOf() <= 0) // next day
+			return start.format(`LL, ${twelveHour ? 'hh:mm A' : "HH:mm"}`) + "~" + end.format(twelveHour ? 'hh:mm A' : "HH:mm");
+		
+		return start.format(`LL, ${twelveHour ? 'hh:mm A' : "HH:mm"}`) + " - " + end.format(`LL, ${twelveHour ? 'hh:mm A' : "HH:mm"}`);
 	}
 
 	onMounted(() => {
@@ -49,19 +59,14 @@
 		<h3 style="float: right">
 			{{ interval }}
 		</h3>
-		<h3>
-			{{ format(props.entry.startTime) }}
-			{{
-				props.entry.endTime
-				? " - " + format(props.entry.endTime)
-				: ""
-			}}
-		</h3>
 		<h2>
 			{{ props.entry.member.name }}
 		</h2>
-		<p v-if="props.entry.customStatus">
+		<p v-if="props.entry.customStatus" style="color: inherit;">
 			{{ props.entry.customStatus }}
 		</p>
+		<p>
+			{{ format(props.entry.startTime, props.entry.endTime) }}
+		</p>
 	</IonLabel>
 </template>

src/modals/FrontingEntryEdit.vue

@@ -43,7 +43,6 @@
 	const twelveHourClock = appConfig.locale.twelveHourClock;
 	const firstWeekOfDayIsSunday = appConfig.locale.firstWeekOfDayIsSunday;
 
-	const isOpen = inject<Ref<boolean>>("isOpen")!;
 	const frontingEntry = inject<Ref<FrontingEntryComplete>>("frontingEntry")!;
 
 	const memberSelectModal = ref();
@@ -56,11 +55,6 @@
 
 	const watchStopHandles: WatchStopHandle[] = [];
 
-	function dismiss(){
-		if(isOpen)
-			isOpen.value = false;
-	}
-
 	async function save(){
 		if(!frontingEntry.value) return;
 
@@ -127,7 +121,7 @@
 </script>
 
 <template>
-	<IonModal class="fronting-entry-edit-modal" :isOpen @willPresent="present" @didPresent="didPresent" @didDismiss="dismiss" :breakpoints="[0,1]" initialBreakpoint="1">
+	<IonModal class="fronting-entry-edit-modal" @willPresent="present" @didPresent="didPresent" :breakpoints="[0,1]" initialBreakpoint="1">
 		<IonHeader>
 			<IonToolbar>
 				<IonTitle>{{ $t("options:frontHistory.edit.header") }}</IonTitle>

src/views/options/FrontHistory.vue

@@ -1,22 +1,37 @@
 <script setup lang="ts">
-	import { IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonItem} from '@ionic/vue';
+	import { IonContent, IonHeader, IonList, IonPage, IonTitle, IonLabel, IonToolbar, IonBackButton, IonItem, IonItemDivider} from '@ionic/vue';
 	import { inject, provide, ref } from 'vue';
 	import FrontingEntryAvatar from "../../components/frontingEntry/FrontingEntryAvatar.vue";
 	import FrontingEntryLabel from "../../components/frontingEntry/FrontingEntryLabel.vue";
 	import { frontingEntries, FrontingEntryComplete } from '../../lib/db/entities/frontingEntries';
 	import FrontingEntryEdit from "../../modals/FrontingEntryEdit.vue";
+	import dayjs from 'dayjs';
 
 	const isIOS = inject<boolean>("isIOS");
+	const frontingEntryModal = ref();
 
 	const frontingEntry = ref();
 	provide("frontingEntry", frontingEntry);
 
-	const isOpen = ref(false);
-	provide("isOpen", isOpen);
-
-	function showModal(clickedFrontingEntry: FrontingEntryComplete){
+	async function showModal(clickedFrontingEntry: FrontingEntryComplete){
 		frontingEntry.value = {...clickedFrontingEntry};
-		isOpen.value = true;
+		await frontingEntryModal.value.$el.present();
+	}
+
+	function getGrouped(entries: FrontingEntryComplete[]){
+		const map = new Map<string, FrontingEntryComplete[]>();
+
+		for(const entry of entries.sort((a, b) => b.startTime.getTime() - a.startTime.getTime())){
+			const key = entry.endTime ? dayjs(entry.startTime).startOf('day').toISOString() : "currentlyFronting";
+			
+			const collection = map.get(key);
+			if(!collection)
+				map.set(key, [entry])
+			else
+				collection.push(entry)
+		}
+
+		return map;
 	}
 </script>
 
@@ -33,13 +48,22 @@
 
 		<IonContent>
 			<IonList :inset="isIOS">
-				<IonItem button v-for="entry in frontingEntries.sort((a, b) => b.startTime.getTime() - a.startTime.getTime())" @click="showModal(entry)" >
-					<FrontingEntryAvatar slot="start" :entry />
-					<FrontingEntryLabel :entry />
-				</IonItem>
+				<template v-for="tuple in getGrouped(frontingEntries)" >
+					<IonItemDivider>
+						<IonLabel>{{
+							tuple[0] === "currentlyFronting"
+								? $t("options:frontHistory.currentlyFronting")
+								: dayjs(tuple[0]).format("LL")
+						}}</IonLabel>
+					</IonItemDivider>
+					<IonItem button v-for="entry in tuple[1]" @click="showModal(entry)" >
+						<FrontingEntryAvatar slot="start" :entry />
+						<FrontingEntryLabel :entry />
+					</IonItem>
+				</template>
 			</IonList>
 		</IonContent>
 
-		<FrontingEntryEdit />
+		<FrontingEntryEdit ref="frontingEntryModal"/>
 	</IonPage>
 </template>

translations/en/options.json

@@ -10,6 +10,7 @@
 	},
 	"frontHistory": {
 		"header": "Front history",
+		"currentlyFronting": "Currently fronting",
 		"edit": {
 			"header": "Edit fronting entry",
 			"member": "Edit fronting member",