From b0d5cdf791dde26c046c814dba0a8b55b8d04381 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Fri, 27 Jun 2025 18:59:23 +0200
Subject: [PATCH] Refactor slot editing to use searchable selections

Instead of having to type in exactly the name of events or shifts and
then hope you remembered it right, replace these interactions with the
custom select component that gives a complete list of the available
choices and allows quickly searching for the right one.
---
 components/TableScheduleEventSlots.vue | 165 +++++++++----------------
 components/TableScheduleEvents.vue     |   3 +-
 components/TableScheduleShiftSlots.vue | 146 +++++++++-------------
 components/TableScheduleShifts.vue     |  26 ++--
 4 files changed, 125 insertions(+), 215 deletions(-)

diff --git a/components/TableScheduleEventSlots.vue b/components/TableScheduleEventSlots.vue
index 8de0988..ea9bde9 100644
--- a/components/TableScheduleEventSlots.vue
+++ b/components/TableScheduleEventSlots.vue
@@ -7,7 +7,6 @@
 					<th>end</th>
 					<th>duration</th>
 					<th>event</th>
-					<th>s</th>
 					<th>location</th>
 					<th>assigned</th>
 					<th v-if="edit"></th>
@@ -19,7 +18,7 @@
 						v-for="es in eventSlots"
 						:key='es.slot?.id ?? es.start.toMillis()'
 						:class='{
-							removed: es.type === "slot" && es.deleted,
+							removed: es.type === "slot" && es.slot.deleted,
 							gap: es.type === "gap",
 						}'
 					>
@@ -35,23 +34,16 @@
 								>
 							</td>
 							<td>
-									<input
-										type="text"
-										v-model="newEventName"
-									>
+								<SelectSingleEntity
+									:entities="schedule.events"
+									v-model="newEventId"
+								/>
 							</td>
-							<td></td>
 							<td>
-								<select
-									v-model="newEventLocation"
-								>
-									<option
-										v-for="location in schedule.locations.values()"
-										:key="location.id"
-										:value="location.id"
-										:selected="location.id === newEventLocation"
-									>{{ location.name }}</option>
-								</select>
+								<SelectMultiEntity
+									:entities="schedule.locations"
+									v-model="newEventLocationIds"
+								/>
 							</td>
 							<td></td>
 							<td>
@@ -89,34 +81,27 @@
 								>
 							</td>
 							<td>
-								<input
-									type="text"
-									v-model="es.event.name"
-								>
-							</td>
-							<td>{{ status(es) }}</td>
-							<td>
-								<select
-									:value="es.locationId"
-									@change="editEventSlot(es, { locationId: parseInt(($event as any).target.value) })"
-								>
-									<option
-										v-for="location in schedule.locations.values()"
-										:key="location.id"
-										:value="location.id"
-										:selected="location.id === es.locationId"
-									>{{ location.name }}</option>
-								</select>
+								<SelectSingleEntity
+									:entities="schedule.events"
+									:modelValue="es.slot.eventId"
+									@update:modelValue="es.slot.setEventId($event)"
+								/>
 							</td>
 							<td>
-								<AssignedCrew
-									:edit="true"
+								<SelectMultiEntity
+									:entities="schedule.locations"
+									v-model="es.slot.locationIds"
+								/>
+							</td>
+							<td>
+								<SelectMultiEntity
+									:entities="usersStore.users"
 									v-model="es.slot.assigned"
 								/>
 							</td>
 							<td>
 								<button
-									:disabled="es.deleted"
+									:disabled="es.slot.deleted"
 									type="button"
 									@click="es.slot.deleted = true"
 								>Remove</button>
@@ -148,12 +133,17 @@
 							>
 						</td>
 						<td>
-								<input
-									type="text"
-									v-model="newEventName"
-								>
+							<SelectSingleEntity
+								:entities="schedule.events"
+								v-model="newEventId"
+							/>
+						</td>
+						<td>
+							<SelectMultiEntity
+								:entities="schedule.locations"
+								v-model="newEventLocationIds"
+							/>
 						</td>
-						<td></td>
 						<td></td>
 						<td colspan="2">
 							<button
@@ -181,10 +171,9 @@
 							<td>{{ es.start.toFormat("yyyy-LL-dd HH:mm") }}</td>
 							<td>{{ es.end.toFormat("HH:mm") }}</td>
 							<td>{{ es.end.diff(es.start).toFormat('hh:mm') }}</td>
-							<td>{{ es.name }}</td>
-							<td>{{ status(es) }}</td>
-							<td>{{ es.locationId }}</td>
-							<td><AssignedCrew :modelValue="es.assigned" :edit="false" /></td>
+							<td>{{ es.event?.name }}</td>
+							<td></td>
+							<td><AssignedCrew :modelValue="es.slot.assigned" :edit="false" /></td>
 						</template>
 					</tr>
 				</template>
@@ -206,40 +195,23 @@ const props = defineProps<{
 
 interface EventSlot {
 	type: "slot",
-	id: Id,
-	deleted?: boolean,
-	event: ClientScheduleEvent,
+	event?: ClientScheduleEvent,
 	slot: ClientScheduleEventSlot,
-	name: string,
-	locationId: Id,
-	assigned: Set<Id>,
 	start: DateTime,
 	end: DateTime,
 }
 
 interface Gap {
 	type: "gap",
-	id?: undefined,
 	event?: undefined,
 	slot?: undefined,
-	name?: undefined,
-	locationId?: number,
 	start: DateTime,
 	end: DateTime,
 }
 
-function status(eventSlot: EventSlot) {
-	if (
-		!eventSlot.event
-		|| eventSlot.event.name !== eventSlot.name
-	) {
-		const event = [...schedule.value.events.values()].find(event => event.name === eventSlot.name);
-		return event ? "L" : "N";
-	}
-	return eventSlot.event.slots.size === 1 ? "" : eventSlot.event.slots.size;
-}
-
 const accountStore = useAccountStore();
+const usersStore = useUsersStore();
+await usersStore.fetch();
 const schedule = await useSchedule();
 
 const oneDayMs = 24 * 60 * 60 * 1000;
@@ -268,9 +240,9 @@ const newEventEnd = computed({
 		newEventDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
 	},
 });
-const newEventLocation = ref(props.locationId);
+const newEventLocationIds = ref(new Set(props.locationId === undefined ? undefined : [props.locationId]));
 watch(() => props.locationId, () => {
-	newEventLocation.value = props.locationId;
+	newEventLocationIds.value = new Set(props.locationId === undefined ? undefined : [props.locationId]);
 });
 
 function endFromTime(start: DateTime, time: string) {
@@ -287,7 +259,7 @@ function durationFromTime(time: string) {
 	}
 	return duration;
 }
-const newEventName = ref("");
+const newEventId = ref<Id>();
 
 function editEventSlot(
 	eventSlot: EventSlot,
@@ -295,7 +267,6 @@ function editEventSlot(
 		start?: string,
 		end?: string,
 		duration?: string,
-		locationId?: Id,
 	}
 ) {
 	if (edits.start) {
@@ -309,22 +280,13 @@ function editEventSlot(
 	if (edits.duration !== undefined) {
 		eventSlot.slot.end = eventSlot.start.plus(durationFromTime(edits.duration));
 	}
-	if (edits.locationId !== undefined) {
-		eventSlot.slot.locationIds = new Set([edits.locationId]);
-	}
 }
 function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
-	const name = newEventName.value;
-	const nameId = toId(name);
-	const event = [...schedule.value.events.values()].find(event => toId(event.name) === nameId);
+	const event = schedule.value.events.get(newEventId.value!);
 	if (!event) {
 		alert("Invalid event");
 		return;
 	}
-	if (newEventLocation.value === undefined) {
-		alert("Invalid location");
-		return;
-	}
 	let start;
 	let end;
 	const duration = durationFromTime(newEventDuration.value);
@@ -352,13 +314,13 @@ function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 		event.id,
 		start,
 		end,
-		new Set([newEventLocation.value]),
+		new Set(newEventLocationIds.value),
 		new Set(),
 		0,
 	);
 	schedule.value.eventSlots.set(slot.id, slot);
 	event.slotIds.add(slot.id);
-	newEventName.value = "";
+	newEventId.value = undefined;
 }
 
 const oneHourMs = 60 * 60 * 1000;
@@ -373,29 +335,21 @@ function gapFormat(gap: Gap) {
 
 const eventSlots = computed(() => {
 	const data: (EventSlot | Gap)[] = [];
-	for (const event of schedule.value.events.values()) {
-		if (event.deleted)
+	for (const slot of schedule.value.eventSlots.values()) {
+		const event = schedule.value.events.get(slot.eventId!);
+		if (event?.deleted)
 			continue;
-		for (const slot of event.slots.values()) {
-			if (props.eventSlotFilter && !props.eventSlotFilter(slot))
-				continue;
-			for (const locationId of slot.locationIds) {
-				if (props.locationId !== undefined && locationId !== props.locationId)
-					continue;
-				data.push({
-					type: "slot",
-					id: slot.id,
-					deleted: slot.deleted || event.deleted,
-					event,
-					slot,
-					name: event.name,
-					locationId,
-					assigned: slot.assigned ?? [],
-					start: slot.start,
-					end: slot.end,
-				});
-			}
-		}
+		if (props.eventSlotFilter && !props.eventSlotFilter(slot))
+			continue;
+		if (props.locationId !== undefined && !slot.locationIds.has(props.locationId))
+			continue;
+		data.push({
+			type: "slot",
+			event,
+			slot,
+			start: slot.start,
+			end: slot.end,
+		});
 	}
 	data.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
 
@@ -407,7 +361,6 @@ const eventSlots = computed(() => {
 		if (maxEnd < second.start.toMillis()) {
 			gaps.push([index, {
 				type: "gap",
-				locationId: props.locationId,
 				start: DateTime.fromMillis(maxEnd, { locale: accountStore.activeLocale }),
 				end: second.start,
 			}]);
diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 546150c..f8a3d43 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -37,9 +37,8 @@
 							<input
 								type="checkbox"
 								:disabled="!accountStore.canEditPublic"
-								:value="!event.crew"
 								:checked="!event.crew"
-								@change="event.crew = !($event.target as HTMLInputElement).value"
+								@change="event.crew = !event.crew"
 							>
 						</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
diff --git a/components/TableScheduleShiftSlots.vue b/components/TableScheduleShiftSlots.vue
index dddb5e2..38ef730 100644
--- a/components/TableScheduleShiftSlots.vue
+++ b/components/TableScheduleShiftSlots.vue
@@ -7,7 +7,6 @@
 					<th>end</th>
 					<th>duration</th>
 					<th>shift</th>
-					<th>s</th>
 					<th>role</th>
 					<th>assigned</th>
 					<th v-if="edit"></th>
@@ -35,24 +34,16 @@
 								>
 							</td>
 							<td>
-								<input
-									type="text"
-									v-model="newShiftName"
-								>
+								<SelectSingleEntity
+									:entities="schedule.shifts"
+									v-model="newShiftId"
+								/>
 							</td>
-							<td></td>
 							<td>
-								<select
+								<SelectSingleEntity
+									:entities="schedule.roles"
 									v-model="newShiftRoleId"
-								>
-									<option
-										v-for="role in schedule.roles.values()"
-										:key="role.id"
-										:value="role.id"
-										:disabled="role.deleted"
-										:selected="role.id === newShiftRoleId"
-									>{{ role.name }}</option>
-								</select>
+								/>
 							</td>
 							<td></td>
 							<td>
@@ -90,34 +81,28 @@
 								>
 							</td>
 							<td>
-								<input
-									type="text"
-									v-model="ss.name"
-								>
+								<SelectSingleEntity
+									:entities="schedule.shifts"
+									:modelValue="ss.slot.shiftId"
+									@update:modelValue="ss.slot.setShiftId($event)"
+								/>
 							</td>
-							<td>{{ status(ss) }}</td>
 							<td>
-								<select
+								<SelectSingleEntity
+									v-if="ss.shift"
+									:entities="schedule.roles"
 									v-model="ss.shift.roleId"
-								>
-									<option
-										v-for="role in schedule.roles.values()"
-										:key="role.id"
-										:value="role.id"
-										:disabled="role.deleted"
-										:selected="role.id === ss.shift.roleId"
-									>{{ role.name }}</option>
-								</select>
+								/>
 							</td>
 							<td>
-								<AssignedCrew
-									:edit="true"
+								<SelectMultiEntity
+									:entities="usersStore.users"
 									v-model="ss.slot.assigned"
 								/>
 							</td>
 							<td>
 								<button
-									:disabled="ss.deleted"
+									:disabled="ss.slot.deleted"
 									type="button"
 									@click="ss.slot.deleted = true"
 								>Remove</button>
@@ -149,12 +134,18 @@
 							>
 						</td>
 						<td>
-								<input
-									type="text"
-									v-model="newShiftName"
-								>
+							<SelectSingleEntity
+								:entities="schedule.shifts"
+								v-model="newShiftId"
+							/>
 						</td>
-						<td colspan="3">
+						<td>
+							<SelectSingleEntity
+								:entities="schedule.roles"
+								v-model="newShiftRoleId"
+							/>
+						</td>
+						<td colspan="2">
 							<button
 								type="button"
 								@click="newShiftSlot()"
@@ -180,10 +171,11 @@
 							<td>{{ ss.start.toFormat("yyyy-LL-dd HH:mm") }}</td>
 							<td>{{ ss.end.toFormat("HH:mm") }}</td>
 							<td>{{ ss.end.diff(ss.start).toFormat('hh:mm') }}</td>
-							<td>{{ ss.name }}</td>
-							<td>{{ status(ss) }}</td>
-							<td>{{ ss.roleId }}</td>
-							<td><AssignedCrew :modelValue="ss.assigned" :edit="false" /></td>
+							<td>{{ ss.shift?.name }}</td>
+							<td>{{ ss.shift?.roleId }}</td>
+							<td>
+								<AssignedCrew :modelValue="ss.slot.assigned" :edit="false" />
+							</td>
 						</template>
 					</tr>
 				</template>
@@ -206,12 +198,8 @@ const props = defineProps<{
 interface ShiftSlot {
 	type: "slot",
 	id: Id,
-	deleted: boolean,
-	shift: ClientScheduleShift,
+	shift?: ClientScheduleShift,
 	slot: ClientScheduleShiftSlot,
-	name: string,
-	roleId: Id,
-	assigned: Set<Id>,
 	start: DateTime,
 	end: DateTime,
 }
@@ -221,24 +209,13 @@ interface Gap {
 	id?: undefined,
 	shift?: undefined,
 	slot?: undefined,
-	name?: undefined,
-	role?: undefined,
 	start: DateTime,
 	end: DateTime,
 }
 
-function status(shiftSlot: ShiftSlot) {
-	if (
-		!shiftSlot.shift
-		|| shiftSlot.shift.name !== shiftSlot.name
-	) {
-		const shift = [...schedule.value.shifts.values()].find(shift => !shift.deleted && shift.name === shiftSlot.name);
-		return shift ? "L" : "N";
-	}
-	return shiftSlot.shift.slots.size === 1 ? "" : shiftSlot.shift.slots.size;
-}
-
 const accountStore = useAccountStore();
+const usersStore = useUsersStore();
+await usersStore.fetch();
 const schedule = await useSchedule();
 
 const oneDayMs = 24 * 60 * 60 * 1000;
@@ -286,7 +263,7 @@ function durationFromTime(time: string) {
 	}
 	return duration;
 }
-const newShiftName = ref("");
+const newShiftId = ref<Id>();
 
 function editShiftSlot(
 	shiftSlot: ShiftSlot,
@@ -298,20 +275,18 @@ function editShiftSlot(
 ) {
 	if (edits.start) {
 		const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
-		shiftSlot.start = start;
-		shiftSlot.end = start.plus(shiftSlot.slot.end.diff(shiftSlot.slot.start));
+		shiftSlot.slot.start = start;
+		shiftSlot.slot.end = start.plus(shiftSlot.slot.end.diff(shiftSlot.slot.start));
 	}
 	if (edits.end !== undefined) {
-		shiftSlot.end = endFromTime(shiftSlot.start, edits.end);
+		shiftSlot.slot.end = endFromTime(shiftSlot.slot.start, edits.end);
 	}
 	if (edits.duration !== undefined) {
-		shiftSlot.end = shiftSlot.start.plus(durationFromTime(edits.duration));
+		shiftSlot.slot.end = shiftSlot.slot.start.plus(durationFromTime(edits.duration));
 	}
 }
 function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
-	const name = newShiftName.value;
-	const nameId = toId(name);
-	const shift = [...schedule.value.shifts.values()].find(shift => toId(shift.name) === nameId);
+	const shift = schedule.value.shifts.get(newShiftId.value!);
 	if (!shift) {
 		alert("Invalid shift");
 		return;
@@ -352,7 +327,7 @@ function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 	);
 	schedule.value.shiftSlots.set(slot.id, slot);
 	shift.slotIds.add(slot.id);
-	newShiftName.value = "";
+	newShiftId.value = undefined;
 }
 
 const oneHourMs = 60 * 60 * 1000;
@@ -367,25 +342,20 @@ function gapFormat(gap: Gap) {
 
 const shiftSlots = computed(() => {
 	const data: (ShiftSlot | Gap)[] = [];
-	for (const shift of schedule.value.shifts.values()) {
-		if (props.roleId !== undefined && shift.roleId !== props.roleId)
+	for (const slot of schedule.value.shiftSlots.values()) {
+		const shift = schedule.value.shifts.get(slot.shiftId!);
+		if (shift && props.roleId !== undefined && shift.roleId !== props.roleId)
 			continue;
-		for (const slot of shift.slots.values()) {
-			if (props.shiftSlotFilter && !props.shiftSlotFilter(slot))
-				continue;
-			data.push({
-				type: "slot",
-				id: slot.id,
-				deleted: slot.deleted || shift.deleted,
-				shift,
-				slot,
-				name: shift.name,
-				roleId: shift.roleId,
-				assigned: slot.assigned,
-				start: slot.start,
-				end: slot.end,
-			});
-		}
+		if (props.shiftSlotFilter && !props.shiftSlotFilter(slot))
+			continue;
+		data.push({
+			type: "slot",
+			id: slot.id,
+			shift,
+			slot,
+			start: slot.start,
+			end: slot.end,
+		});
 	}
 	const byTime = (a: DateTime, b: DateTime) => a.toMillis() - b.toMillis();
 	data.sort((a, b) => byTime(a.start, b.start) || byTime(a.end, b.end));
diff --git a/components/TableScheduleShifts.vue b/components/TableScheduleShifts.vue
index dc1d3b3..8204199 100644
--- a/components/TableScheduleShifts.vue
+++ b/components/TableScheduleShifts.vue
@@ -26,17 +26,10 @@
 							>
 						</td>
 						<td>
-							<select
+							<SelectSingleEntity
+								:entities="schedule.roles"
 								v-model="shift.roleId"
-							>
-								<option
-									v-for="role in schedule.roles.values()"
-									:key="role.id"
-									:value="role.id"
-									:disabled="shift.deleted"
-									:selected="shift.roleId === role.id"
-								>{{ role.name }}</option>
-							</select>
+							/>
 						</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>
@@ -67,15 +60,10 @@
 							>
 						</td>
 						<td>
-							<select v-model="newShiftRoleId">
-								<option
-									v-for="role in schedule.roles.values()"
-									:key="role.id"
-									:value="role.id"
-									:disabled="role.deleted"
-									:selected="role.id === newShiftRoleId"
-								>{{ role.name }}</option>
-							</select>
+							<SelectSingleEntity
+								:entities="schedule.roles"
+								v-model="newShiftRoleId"
+							/>
 						</td>
 						<td></td>
 						<td>