fix: show only differing days in scheduled hours change section

Replace unreactive @const with for the changed-days filter. Normalize PostgreSQL microsecond times before comparing (TIME::text produces '17:00:00.000000' but staged hours are '17:00'). Change header text to 'These opening hours will change from' when fewer than 7 days differ.
2026-08-22 00:34:49 +01:00
parent aa31b19f1c
commit a991642157
1 changed files with 18 additions and 3 deletions
@@ -47,6 +47,21 @@
 		hours: Array<{ weekday: number; startTime: string; endTime: string; isOpen: boolean }>;
 	};

+	let scheduledChangeDays = $derived(
+		scheduledChange
+			? scheduledChange.hours.filter((h) => {
+					const current = defaultHours.find((dh) => dh.weekday === h.weekday);
+					if (!current) return true;
+					if (h.isOpen !== current.isOpen) return true;
+					// Normalize time strings before comparing — the current hours
+					// may include microsecond precision ("17:00:00.000000") from
+					// PostgreSQL's ::text cast, while staged hours are plain "17:00".
+					const norm = (t: string) => t.replace(/\.\d+$/, '').replace(/^(\d{2}:\d{2}).*$/, '$1');
+					return norm(h.startTime) !== norm(current.startTime) || norm(h.endTime) !== norm(current.endTime);
+				})
+			: []
+	);
+
 	let loading = $state(true);
 	let error = $state(false);

@@ -290,10 +305,10 @@
 				{/if}
 			</div>

-			{#if scheduledChange}
+			{#if scheduledChange && scheduledChangeDays.length > 0}
 				<hr class="my-2 border-gray-200" />
 				<p class="mb-2 text-center text-xs font-medium text-amber-600">
-					Opening hours will change from
+					{scheduledChangeDays.length === 7 ? 'Opening hours will change from' : 'These opening hours will change from'}
 					{new Date(scheduledChange.effective_date + 'T00:00:00').toLocaleDateString('en-GB', {
 						day: 'numeric',
 						month: 'short',
@@ -301,7 +316,7 @@
 						timeZone: 'UTC'
 					})}
 				</p>
-				{#each scheduledChange.hours as h}
+				{#each scheduledChangeDays as h (h.weekday)}
 					<div class="flex items-center justify-between text-sm">
 						<span class="font-medium text-gray-700">
 							{['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'][