popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: accept defaultHours prop in WeeklySchedule and TimeBlockers

Browse Source 
Add optional defaultHours prop to accept pre-fetched data from parent page. Standardise select element styling with shadow-xs, focus-visible ring, and consistent padding.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-07-05 22:26:18 +01:00
co-authored by Sisyphus
parent 56eda0ead5
commit b7fa22b018
2 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/admin/TimeBlockers.svelte
+17 -6
View File
@@ -53,9 +53,10 @@
openUserModal?: (userId: string) => void;
openBookingModal?: (bookingId: string) => void;
rescheduleVersion?: number;
defaultHours?: WorkingHourRow[];
}
const { openUserModal, openBookingModal, rescheduleVersion = 0 }: Props = $props();
const { openUserModal, openBookingModal, rescheduleVersion = 0, defaultHours: defaultHoursProp }: Props = $props();
const PAGE_SIZE = 5;
@@ -501,7 +502,17 @@
$effect(() => {
fetchBlockers();
fetchDefaultHours();
});
$effect(() => {
if (defaultHoursProp !== undefined) {
if (defaultHoursProp.length > 0) {
defaultHours = defaultHoursProp;
}
hoursLoading = false;
} else {
fetchDefaultHours();
}
});
$effect(() => {
@@ -763,7 +774,7 @@
</p>
{:else}
<select
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm"
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
bind:value={startSelectValue}
onchange={() => {
const p = parseSelectValue(startSelectValue);
@@ -797,9 +808,9 @@
{:else if availableEndOptions.length === 0}
<p class="text-sm text-gray-400">No available end time after selected start</p>
{:else}
<select
class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm"
bind:value={endSelectValue}
<select
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
bind:value={endSelectValue}
onchange={() => {
const p = parseSelectValue(endSelectValue);
endHour = p.hour;
frontend/src/lib/components/admin/WeeklySchedule.svelte
+24 -3
View File
@@ -13,6 +13,13 @@
const TIME15 = ['00', '15', '30', '45'];
// =============== Props ===============
interface Props {
defaultHours?: Array<{ weekday: number; startTime: string; endTime: string; isOpen: boolean }>;
}
let { defaultHours: defaultHoursProp }: Props = $props();
// =============== Types ===============
type WorkingHourRow = {
weekday: number;
@@ -192,7 +199,21 @@
// =============== Effects ===============
$effect(() => {
if (browser) {
if (defaultHoursProp !== undefined) {
// Parent provides data via prop — map camelCase to display format
if (defaultHoursProp.length > 0) {
defaultHours = defaultHoursProp.map(
(hour: { weekday: number; startTime: string; endTime: string; isOpen: boolean }) => ({
weekday: hour.weekday,
start_time: formatTime(hour.startTime),
end_time: formatTime(hour.endTime),
is_open: hour.isOpen
})
);
}
defaultHoursIsLoading = false;
} else if (browser) {
// Backward compatible: self-fetch
fetchDefaultHours();
}
});
@@ -485,7 +506,7 @@
<select
bind:value={row.start_time}
disabled={!row.is_open}
class="max-w-[70px] text-sm"
class="flex h-9 max-w-[70px] rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
>
{#each Array(24) as _, hour (hour)}
{#each TIME15 as min (min)}
@@ -500,7 +521,7 @@
<select
bind:value={row.end_time}
disabled={!row.is_open}
class="max-w-[70px] text-sm"
class="flex h-9 max-w-[70px] rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
>
{#each Array(24) as _, hour (hour)}
{#each TIME15 as min (min)}