refactor: small fixes and style tweaks

fix: prevent reflow on editing images

fix: schedule overview

fix: report on all events

refactor: over-under time colours

fix: prevent edit on delete

apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.module.scss

@@ -1,7 +1,7 @@
 th.over {
-  color: $ontime-delay-text;
+  color: $playback-over;
 }
 
 th.under {
-  color: $playback-ahead;
+  color: $playback-under;
 }

apps/client/src/features/app-settings/panel/feature-panel/ReportSettings.tsx

@@ -29,8 +29,8 @@ export default function ReportSettings() {
   };
 
   const combinedReport = useMemo(() => {
-    return getCombinedReport(reportData, data.entries, data.order);
-  }, [reportData, data.entries, data.order]);
+    return getCombinedReport(reportData, data.entries, data.flatOrder);
+  }, [reportData, data.entries, data.flatOrder]);
 
   return (
     <Panel.Section>
@@ -82,7 +82,7 @@ export default function ReportSettings() {
                   return 'over';
                 })();
                 return (
-                  <tr key={entry.index}>
+                  <tr key={entry.id}>
                     <th>{entry.index}</th>
                     <th>{entry.cue}</th>
                     <th>{entry.title}</th>

apps/client/src/features/app-settings/panel/feature-panel/reportSettings.utils.ts

@@ -4,6 +4,7 @@ import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
 import { formatTime } from '../../../../common/utils/time';
 
 export type CombinedReport = {
+  id: EntryId;
   index: number;
   title: string;
   cue: string;
@@ -16,24 +17,48 @@ export type CombinedReport = {
 /**
  * Creates a combined report with the rundown data
  */
-export function getCombinedReport(report: OntimeReport, rundown: RundownEntries, order: EntryId[]): CombinedReport[] {
+export function getCombinedReport(
+  report: OntimeReport,
+  rundown: RundownEntries,
+  flatOrder: EntryId[],
+): CombinedReport[] {
   if (Object.keys(report).length === 0) return [];
-  if (order.length === 0) return [];
+  if (flatOrder.length === 0) return [];
 
   const combinedReport: CombinedReport[] = [];
 
-  for (const [key, value] of Object.entries(report)) {
-    if (!rundown[key] || !isOntimeEvent(rundown[key])) continue;
+  let index = 1;
+  for (let i = 0; i < flatOrder.length; i++) {
+    const id = flatOrder[i];
+    const entry = rundown[id];
+    if (!entry || !isOntimeEvent(entry)) continue;
 
-    combinedReport.push({
-      index: order.findIndex((id) => id === key),
-      title: rundown[key].title,
-      cue: rundown[key].cue,
-      scheduledStart: rundown[key].timeStart,
-      actualEnd: value.endedAt,
-      scheduledEnd: rundown[key].timeEnd,
-      actualStart: value.startedAt,
-    });
+    if (!(id in report)) {
+      combinedReport.push({
+        id: id,
+        index: index,
+        title: entry.title,
+        cue: entry.cue,
+        scheduledStart: entry.timeStart,
+        actualEnd: null,
+        scheduledEnd: entry.timeEnd,
+        actualStart: null,
+      });
+    }
+
+    if (id in report) {
+      combinedReport.push({
+        id: id,
+        index: index,
+        title: entry.title,
+        cue: entry.cue,
+        scheduledStart: entry.timeStart,
+        actualEnd: report[id].endedAt,
+        scheduledEnd: entry.timeEnd,
+        actualStart: report[id].startedAt,
+      });
+    }
+    index++;
   }
 
   return combinedReport;