diff --git a/frontend/src/lib/components/ChangeInstanceUsername.svelte b/frontend/src/lib/components/ChangeInstanceUsername.svelte index 38ae001816..1fcd726cea 100644 --- a/frontend/src/lib/components/ChangeInstanceUsername.svelte +++ b/frontend/src/lib/components/ChangeInstanceUsername.svelte @@ -4,9 +4,13 @@ import { autoPlacement } from '@floating-ui/core' import ChangeInstanceUsernameInner from './ChangeInstanceUsernameInner.svelte' - export let email: string - export let username: string - export let isConflict = false + interface Props { + email: string + username: string + isConflict?: boolean + } + + let { email, username, isConflict = false }: Props = $props() - + {#snippet trigger()} - - + {/snippet} + {#snippet content()} close()} on:renamed /> - + {/snippet} diff --git a/frontend/src/lib/components/CronBuilder.svelte b/frontend/src/lib/components/CronBuilder.svelte index 89a4065b86..69b53463ff 100644 --- a/frontend/src/lib/components/CronBuilder.svelte +++ b/frontend/src/lib/components/CronBuilder.svelte @@ -3,19 +3,24 @@ import { Button } from './common' import { Clock } from 'lucide-svelte' import Popover from './meltComponents/Popover.svelte' + interface Props { + children?: import('svelte').Snippet<[any]> + } + + let { children }: Props = $props() - + {#snippet trigger()} - - + {/snippet} + {#snippet content({ close })}
- + {@render children?.({ close })}
- + {/snippet} diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte index 210e821c4d..a8bf9c7023 100644 --- a/frontend/src/lib/components/CronInput.svelte +++ b/frontend/src/lib/components/CronInput.svelte @@ -10,23 +10,35 @@ import Select from './select/Select.svelte' import MultiSelect from './select/MultiSelect.svelte' import { safeSelectItems } from './select/utils.svelte' + import { untrack } from 'svelte' - export let schedule: string - // export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60) - export let timezone: string // = Intl.DateTimeFormat().resolvedOptions().timeZone - export let disabled = false - export let validCRON = true - export let cronVersion: string = 'v2' + interface Props { + schedule: string + // export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60) + timezone: string // = Intl.DateTimeFormat().resolvedOptions().timeZone + disabled?: boolean + validCRON?: boolean + cronVersion?: string + } - let preview: string[] = [] + let { + schedule = $bindable(), + timezone = $bindable(), + disabled = false, + validCRON = $bindable(true), + cronVersion = $bindable('v2') + }: Props = $props() + + let preview: string[] = $state([]) // If the user has already entered a cron string, switching to the basic tab will override it. - let executeEvery: 'second' | 'minute' | 'hour' | 'day-month' | 'month' | 'day-week' = 'minute' + let executeEvery: 'second' | 'minute' | 'hour' | 'day-month' | 'month' | 'day-week' = + $state('minute') - let seconds = 30 - let minutes = 30 - let hours = 1 + let seconds = $state(30) + let minutes = $state(30) + let hours = $state(1) const daysOfMonthOptions: number[] = Array.from(Array(31).keys()).map((i) => i + 1) - let daysOfMonth: number[] = [] + let daysOfMonth: number[] = $state([]) // let lastDayOfMonth = false const monthsOfYearOptions: string[] = [ 'January', @@ -42,7 +54,7 @@ 'November', 'December' ] - let monthsOfYear: string[] = [] + let monthsOfYear: string[] = $state([]) const daysOfWeekOptions: string[] = [ 'Sunday', 'Monday', @@ -52,10 +64,8 @@ 'Friday', 'Saturday' ] - let daysOfWeek: string[] = [] - let UTCTime: string = '' - - $: !emptyString(schedule) && handleScheduleInput(schedule, timezone) + let daysOfWeek: string[] = $state([]) + let UTCTime: string = $state('') async function handleScheduleInput(input: string, timezone: string): Promise { try { @@ -73,9 +83,60 @@ } } - let nschedule = '' + let nschedule = $state('') - $: { + function formatDate(timezone) { + try { + return new Intl.DateTimeFormat('en-GB', { + weekday: 'short', + day: '2-digit', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + timeZone: timezone, + timeZoneName: 'short' + }).format + } catch (ee) { + sendUserToast( + `Invalid timezone: ${timezone}. Update your browser's timezone preference`, + true + ) + return new Intl.DateTimeFormat('en-GB', { + weekday: 'short', + day: '2-digit', + month: 'short', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + timeZone: 'Europe/Paris', + timeZoneName: 'short' + }).format + } + } + + const items = Object.keys(timezones) + .map((key) => { + return Object.keys(timezones[key]) + .map((subKey) => { + return { + value: subKey, + label: subKey, + group: timezones[key][subKey][1] as string + } + }) + .flat() + }) + .flat() + $effect(() => { + schedule + untrack(() => { + !emptyString(schedule) && handleScheduleInput(schedule, timezone) + }) + }) + $effect(() => { // CRON string format // sec min hour day of month month day of week year // 0 30 9,12,15 1,15 May-Aug Mon,Wed,Fri 2018/2 @@ -133,65 +194,18 @@ } else if (executeEvery === 'day-week') { nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} * * ${s_daysOfWeek}` } - } - - $: dateFormatter = formatDate(timezone) - - function formatDate(timezone) { - try { - return new Intl.DateTimeFormat('en-GB', { - weekday: 'short', - day: '2-digit', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', - timeZone: timezone, - timeZoneName: 'short' - }).format - } catch (ee) { - sendUserToast( - `Invalid timezone: ${timezone}. Update your browser's timezone preference`, - true - ) - return new Intl.DateTimeFormat('en-GB', { - weekday: 'short', - day: '2-digit', - month: 'short', - year: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', - timeZone: 'Europe/Paris', - timeZoneName: 'short' - }).format - } - } - - const items = Object.keys(timezones) - .map((key) => { - return Object.keys(timezones[key]) - .map((subKey) => { - return { - value: subKey, - label: subKey, - group: timezones[key][subKey][1] as string - } - }) - .flat() - }) - .flat() + }) + let dateFormatter = $derived(formatDate(timezone))