From 37edf122a138e75c676d735c84af6b8ab4b9414a Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sat, 6 Sep 2025 18:52:47 +0200
Subject: [PATCH] Support multiline descriptions for entities

Use a textarea for editing the description and preserve linebreaks
when it's displayed in the UI using a new preWrap class for this
purpose.
---
 assets/global.css                     |  4 ++++
 components/CardEvent.vue              |  2 +-
 components/CardShift.vue              |  2 +-
 components/TableScheduleEvents.vue    | 14 +++++++-------
 components/TableScheduleLocations.vue | 14 +++++++-------
 components/TableScheduleRoles.vue     | 14 +++++++-------
 components/TableScheduleShifts.vue    | 14 +++++++-------
 server/generate-demo-schedule.ts      | 15 +++++++++------
 8 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/assets/global.css b/assets/global.css
index 5ac8620..3d4e0c0 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -83,3 +83,7 @@ label>* {
 label + label {
 	margin-block-start: 0.5rem;
 }
+
+.preWrap {
+	white-space: pre-wrap;
+}
diff --git a/components/CardEvent.vue b/components/CardEvent.vue
index 6a4d5a0..4082abc 100644
--- a/components/CardEvent.vue
+++ b/components/CardEvent.vue
@@ -8,7 +8,7 @@
 		<p v-if=event.host>
 			Host: {{ event.host }}
 		</p>
-		<p>{{ event.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ event.description ?? "No description provided" }}</p>
 		<p v-if="event.interested">
 			{{ event.interested }} interested
 		</p>
diff --git a/components/CardShift.vue b/components/CardShift.vue
index ac5c4e9..333be36 100644
--- a/components/CardShift.vue
+++ b/components/CardShift.vue
@@ -5,7 +5,7 @@
 <template>
 	<section class="shift">
 		<h3>{{ shift.name }}</h3>
-		<p>{{ shift.description ?? "No description provided" }}</p>
+		<p class="preWrap">{{ shift.description ?? "No description provided" }}</p>
 
 		<h4>Timeslots</h4>
 		<ul>
diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 3377ae1..7555bf3 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -39,11 +39,11 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								:disabled="!canEdit(event)"
 								v-model="event.description"
-							>
+							/>
 						</td>
 						<td>
 							<input
@@ -82,10 +82,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newEventDescription"
-							>
+							/>
 						</td>
 						<td>
 							<input
@@ -116,7 +116,7 @@
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.host }}</td>
-						<td>{{ event.description }}</td>
+						<td class="preWrap">{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 					</tr>
diff --git a/components/TableScheduleLocations.vue b/components/TableScheduleLocations.vue
index dc08ac9..d4053f6 100644
--- a/components/TableScheduleLocations.vue
+++ b/components/TableScheduleLocations.vue
@@ -28,10 +28,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="location.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -49,7 +49,7 @@
 					<template v-else>
 						<td>{{ location.id }}</td>
 						<td>{{ location.name }}</td>
-						<td>{{ location.description }}</td>
+						<td class="preWrap">{{ location.description }}</td>
 					</template>
 				</tr>
 				<tr v-if='edit'>
@@ -63,10 +63,10 @@
 							>
 					</td>
 					<td>
-						<input
-							type="text"
+						<textarea
+							rows="1"
 							v-model="newLocationDescription"
-						>
+						/>
 					</td>
 					<td colspan="1">
 						<button
diff --git a/components/TableScheduleRoles.vue b/components/TableScheduleRoles.vue
index 3825242..08e031a 100644
--- a/components/TableScheduleRoles.vue
+++ b/components/TableScheduleRoles.vue
@@ -28,10 +28,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="role.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -55,10 +55,10 @@
 							>
 						</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newRoleDescription"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -80,7 +80,7 @@
 					>
 						<td>{{ role.id }}</td>
 						<td>{{ role.name }}</td>
-						<td>{{ role.description }}</td>
+						<td class="preWrap">{{ role.description }}</td>
 					</tr>
 				</template>
 			</tbody>
diff --git a/components/TableScheduleShifts.vue b/components/TableScheduleShifts.vue
index afe4c36..531f07e 100644
--- a/components/TableScheduleShifts.vue
+++ b/components/TableScheduleShifts.vue
@@ -37,10 +37,10 @@
 						</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="shift.description"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -71,10 +71,10 @@
 						</td>
 						<td></td>
 						<td>
-							<input
-								type="text"
+							<textarea
+								rows="1"
 								v-model="newShiftDescription"
-							>
+							/>
 						</td>
 						<td>
 							<button
@@ -98,7 +98,7 @@
 						<td>{{ shift.name }}</td>
 						<td>{{ shift.roleId }}</td>
 						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
-						<td>{{ shift.description }}</td>
+						<td class="preWrap">{{ shift.description }}</td>
 					</tr>
 				</template>
 			</tbody>
diff --git a/server/generate-demo-schedule.ts b/server/generate-demo-schedule.ts
index 101b710..dd32003 100644
--- a/server/generate-demo-schedule.ts
+++ b/server/generate-demo-schedule.ts
@@ -9,7 +9,7 @@ const locations = [
 	{
 		id: 1,
 		name: "Stage",
-		description: "Inside the main building.",
+		description: "Inside the main building.\n\nMind the gap.",
 		updatedAt: "d-1 18:21",
 	},
 	{
@@ -43,7 +43,7 @@ let eventId = 1;
 const events = [
 	{
 		name: "Arcade",
-		description: "Play retro games!",
+		description: "Play retro games!\n\nWe have anything from C64 to PS5.",
 		slots: [
 			"d1 12:00 4h clubhouse",
 			"d2 12:00 4h clubhouse",
@@ -158,13 +158,14 @@ const events = [
 const idMedic = 1;
 const idSecurity = 2;
 const roles = [
-	{ id: idMedic, name: "Medic", updatedAt: "d-2 12:34" },
-	{ id: idSecurity, name: "Security", updatedAt: "d-2 12:39" },
+	{ id: idMedic, name: "Medic", description: "Helping those in need.\n\nAsk lead if in doubt.", updatedAt: "d-2 12:34" },
+	{ id: idSecurity, name: "Security", description: "Keeping the con safe", updatedAt: "d-2 12:39" },
 ]
 
 const shifts = [
 	{
 		name: "Medic Early",
+		description: "Not much happens early.\n\nPrefer strolling outside to be visible.",
 		roleId: idMedic,
 		slots: [
 			"d1 12:00 4h",
@@ -357,16 +358,18 @@ export function generateDemoSchedule(): ApiSchedule {
 			})
 		),
 		roles: roles.map(
-			({ id, name, updatedAt }) => ({
+			({ id, name, description, updatedAt }) => ({
 				id,
 				name,
+				description,
 				updatedAt: toIso(toDate(origin, ...(updatedAt.split(" ")) as [string, string])),
 			})
 		),
 		shifts: shifts.map(
-			({ id, name, roleId, slots }) => ({
+			({ id, name, description, roleId, slots }) => ({
 				id,
 				name,
+				description,
 				roleId,
 				slots: slots.map(shorthand => toShift(origin, shorthand, shiftSlotIdToAssigned)),
 				updatedAt: toIso(toDate(origin, "d-1", "13:23")),