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

@@ -83,3 +83,7 @@ label>* {
 label + label {
 	margin-block-start: 0.5rem;
 }
+
+.preWrap {
+	white-space: pre-wrap;
+}

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>

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>

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>

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

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>

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>

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")),