Add assigment of crew to events and shifts

components/ShiftScheduleTable.vue

@@ -10,6 +10,7 @@
 					<th>shift</th>
 					<th>s</th>
 					<th>role</th>
+					<th>assigned</th>
 					<th v-if="edit"></th>
 				</tr>
 			</thead>
@@ -53,6 +54,7 @@
 									>{{ role.name }}</option>
 								</select>
 							</td>
+							<td></td>
 							<td>
 								Add at
 								<button
@@ -108,6 +110,13 @@
 									>{{ role.name }}</option>
 								</select>
 							</td>
+							<td>
+								<AssignedCrew
+									:edit="true"
+									:modelValue="ss.assigned"
+									@update:modelValue="editShiftSlot(ss, { assigned: $event })"
+								/>
+							</td>
 							<td>
 								<button
 									:disabled="removed.has(ss.id)"
@@ -147,7 +156,7 @@
 									v-model="newShiftName"
 								>
 						</td>
-						<td colspan="2">
+						<td colspan="3">
 							<button
 								type="button"
 								@click="newShiftSlot()"
@@ -176,6 +185,7 @@
 							<td>{{ ss.name }}</td>
 							<td>{{ status(ss) }}</td>
 							<td>{{ ss.role }}</td>
+							<td><AssignedCrew :modelValue="ss.assigned" :edit="false" /></td>
 						</template>
 					</tr>
 				</template>
@@ -225,6 +235,7 @@ interface ShiftSlot {
 	origRole: string,
 	name: string,
 	role: string,
+	assigned: number[],
 	start: DateTime,
 	end: DateTime,
 }
@@ -299,6 +310,7 @@ function mergeSlot(shift: Shift, shiftSlot: ShiftSlot): Shift {
 	})) + 1;
 	const start = shiftSlot.start.toUTC().toISO({ suppressSeconds: true })!;
 	const end = shiftSlot.end.toUTC().toISO({ suppressSeconds: true })!;
+	const assigned = shiftSlot.assigned.length ? shiftSlot.assigned : undefined;
 
 	if (shift.role !== shiftSlot.role) {
 		console.warn(`Attempt to add slot id=${shiftSlot.id} role=${shiftSlot.role} to shift id=${shift.id} role=${shift.role}`);
@@ -308,7 +320,7 @@ function mergeSlot(shift: Shift, shiftSlot: ShiftSlot): Shift {
 	if (oldSlot && oldSlot.id === shiftSlot.id) {
 		return {
 			...shift,
-			slots: shift.slots.map(s => s.id !== oldSlot.id ? s : { ...s, start, end, }),
+			slots: shift.slots.map(s => s.id !== oldSlot.id ? s : { ...s, assigned, start, end, }),
 		};
 	}
 
@@ -317,6 +329,7 @@ function mergeSlot(shift: Shift, shiftSlot: ShiftSlot): Shift {
 		...shift,
 		slots: [...(oldSlot ? shift.slots.filter(s => s.id !== oldSlot.id) : shift.slots), {
 			id: oldSlot ? oldSlot.id : `${shift.id}-${nextId}`,
+			assigned,
 			start,
 			end,
 		}],
@@ -459,6 +472,7 @@ function editShiftSlot(
 		duration?: string,
 		name?: string,
 		role?: string,
+		assigned?: number[],
 	}
 ) {
 	if (edits.start) {
@@ -505,6 +519,12 @@ function editShiftSlot(
 		changes.value = changesCopy;
 		return;
 	}
+	if (edits.assigned !== undefined) {
+		shiftSlot = {
+			...shiftSlot,
+			assigned: edits.assigned,
+		};
+	}
 	const change = { op: "set" as const, data: shiftSlot };
 	changes.value = replaceChange(change, changes.value);
 }
@@ -551,6 +571,7 @@ function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
 			name,
 			origRole: role,
 			role,
+			assigned: [],
 			start,
 			end,
 		},
@@ -594,6 +615,7 @@ const shiftSlots = computed(() => {
 				slot,
 				name: shift.name,
 				role: shift.role,
+				assigned: slot.assigned ?? [],
 				origRole: shift.role,
 				start: DateTime.fromISO(slot.start, { zone: timezone.value }),
 				end: DateTime.fromISO(slot.end, { zone: timezone.value }),