refactor: accept defaultHours prop in WeeklySchedule and TimeBlockers
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:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user