Add override for the event name in timetable

Add timetableName field to events that override which name is shown in
the timetable in order to allow using a custom condensed title in the
timetable for short events.

components/DiffScheduleEvent.vue

@@ -11,6 +11,12 @@
 			:after="event.name"
 			:state
 		/>
+		<DiffFieldString
+			title="Timetable Name"
+			:before="event.serverTimetableName"
+			:after="event.timetableName"
+			:state
+		/>
 		<DiffFieldString
 			title="Host"
 			:before="event.serverHost"

components/TableScheduleEvents.vue

@@ -9,6 +9,7 @@
 				<tr>
 					<th>id</th>
 					<th>name</th>
+					<th>timetableName</th>
 					<th>host</th>
 					<th>notice</th>
 					<th>description</th>
@@ -32,6 +33,13 @@
 								v-model="event.name"
 							>
 						</td>
+						<td>
+							<input
+								type="text"
+								:disabled="!canEdit(event)"
+								v-model="event.timetableName"
+							>
+						</td>
 						<td>
 							<input
 								type="text"
@@ -83,6 +91,12 @@
 								v-model="newEventName"
 							>
 						</td>
+						<td>
+							<input
+								type="text"
+								v-model="newEventShortName"
+							>
+						</td>
 						<td>
 							<input
 								type="text"
@@ -129,6 +143,7 @@
 					>
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
+						<td>{{ event.timetableName }}</td>
 						<td>{{ event.host }}</td>
 						<td class="preWrap">{{ event.notice }}</td>
 						<td class="preWrap">{{ event.description }}</td>
@@ -157,6 +172,7 @@ function canEdit(event: ClientScheduleEvent) {
 }
 
 const newEventName = ref("");
+const newEventShortName = ref("");
 const newEventHost = ref("");
 const newEventNotice = ref("");
 const newEventDescription = ref("");
@@ -178,6 +194,7 @@ function newEvent() {
 		schedule.value,
 		schedule.value.nextClientId--,
 		newEventName.value,
+		newEventShortName.value,
 		!newEventPublic.value,
 		newEventHost.value,
 		false,
@@ -189,6 +206,7 @@ function newEvent() {
 	);
 	schedule.value.events.add(event);
 	newEventName.value = "";
+	newEventShortName.value = "";
 	newEventHost.value = "";
 	newEventNotice.value = "";
 	newEventDescription.value = "";

components/Timetable.vue

@@ -106,7 +106,7 @@
 							:title="cell.event?.name"
 						>
 							{{ cell.event?.notice ? "⚠️" : undefined }}
-							{{ cell.event?.name }}
+							{{ cell.event?.timetableName || cell.event?.name }}
 						</td>
 					</tr>
 				</template>

shared/types/api.ts

@@ -89,6 +89,7 @@ export type ApiScheduleEventSlot = z.infer<typeof apiScheduleEventSlotSchema>;
 
 export const apiScheduleEventSchema = defineApiEntity({
 	name: z.string(),
+	timetableName: z.optional(z.string()),
 	crew: z.optional(z.boolean()),
 	host: z.optional(z.string()),
 	cancelled: z.optional(z.boolean()),

utils/client-schedule.nuxt.test.ts

@@ -21,10 +21,10 @@ function fixtureClientSchedule(multiSlot = false) {
 
 	const events = [
 		new ClientScheduleEvent(
-			1, now, false, "Up", false, "", false, "", "What's Up?", 0, new Set(multiSlot ? [1, 2] : [1]),
+			1, now, false, "Up", "", false, "", false, "", "What's Up?", 0, new Set(multiSlot ? [1, 2] : [1]),
 		),
 		new ClientScheduleEvent(
-			2, now, false, "Down", false, "", false, "", "", 0, new Set(multiSlot ? [] : [2]),
+			2, now, false, "Down", "", false, "", false, "", "", 0, new Set(multiSlot ? [] : [2]),
 		),
 	];
 	const eventSlots = idMap([

utils/client-schedule.ts

@@ -133,6 +133,7 @@ export class ClientScheduleLocation extends ClientEntity<ApiScheduleLocation> {
 export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 	schedule!: ClientSchedule;
 	serverName: string;
+	serverTimetableName: string;
 	serverCrew: boolean;
 	serverHost: string;
 	serverCancelled: boolean;
@@ -146,6 +147,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		updatedAt: DateTime,
 		deleted: boolean,
 		public name: string,
+		public timetableName: string,
 		public crew: boolean,
 		public host: string,
 		public cancelled: boolean,
@@ -156,6 +158,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 	) {
 		super(id, updatedAt, deleted);
 		this.serverName = name;
+		this.serverTimetableName = timetableName;
 		this.serverCrew = crew;
 		this.serverHost = host;
 		this.serverCancelled = cancelled;
@@ -173,6 +176,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		return (
 			super.isModified()
 			|| this.name !== this.serverName
+			|| this.timetableName !== this.serverTimetableName
 			|| this.crew !== this.serverCrew
 			|| this.host !== this.serverHost
 			|| this.cancelled !== this.serverCancelled
@@ -191,6 +195,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		this.updatedAt = this.serverUpdatedAt;;
 		this.deleted = this.serverDeleted;;
 		this.name = this.serverName;
+		this.timetableName = this.serverTimetableName;
 		this.crew = this.serverCrew;
 		this.host = this.serverHost;
 		this.cancelled = this.serverCancelled;
@@ -210,6 +215,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		schedule: ClientSchedule,
 		id: Id,
 		name: string,
+		timetableName: string,
 		crew: boolean,
 		host: string,
 		cancelled: boolean,
@@ -224,6 +230,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			DateTime.fromMillis(ClientEntity.newEntityMillis, opts),
 			false,
 			name,
+			timetableName,
 			crew,
 			host,
 			cancelled,
@@ -245,6 +252,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			DateTime.fromISO(api.updatedAt, opts),
 			api.deleted ?? false,
 			api.name,
+			api.timetableName ?? "",
 			api.crew ?? false,
 			api.host ?? "",
 			api.cancelled ?? false,
@@ -263,6 +271,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 		this.serverUpdatedAt = DateTime.fromISO(api.updatedAt, opts);
 		this.serverDeleted = false;
 		this.serverName = api.name;
+		this.serverTimetableName = api.timetableName ?? "";
 		this.serverCrew = api.crew ?? false;
 		this.serverHost = api.host ?? "";
 		this.serverCancelled = api.cancelled ?? false;
@@ -287,6 +296,7 @@ export class ClientScheduleEvent extends ClientEntity<ApiScheduleEvent> {
 			id: this.id,
 			updatedAt: toIso(this.updatedAt),
 			name: this.name,
+			timetableName: this.timetableName || undefined,
 			crew: this.crew || undefined,
 			host: this.host || undefined,
 			cancelled: this.cancelled || undefined,