updating add rules

apps/console/src/lib/api/index.ts

@@ -0,0 +1 @@
+export { loadOptions } from './svelte_select_fetches';

apps/console/src/lib/components/form/Checkbox.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	/**
+	 * <div class="flex justify-start">
+	 *   <Checkbox field={keys.active} class="toggle toggle-secondary" labelPosition="before" disabled={editMode}>Active</Checkbox>
+	 *   <Checkbox field={keys.active} class="toggle toggle-secondary" disabled={editMode}>Active</Checkbox>
+	 *   <Checkbox field={keys.active} class="w-4 h-4" disabled={editMode}>Active</Checkbox>
+	 * </div>
+	 */
+	import { clsx } from 'clsx';
+	import { Helper } from 'flowbite-svelte';
+	import type { Writable } from 'svelte/store';
+	import type { FormPathLeaves } from 'sveltekit-superforms';
+	import { formFieldProxy } from 'sveltekit-superforms/client';
+	import type { AnyZodObject, z } from 'zod';
+	import { getFormContext } from './forms';
+
+	// eslint-disable-next-line no-undef
+	type T = $$Generic<AnyZodObject>;
+	export let field: FormPathLeaves<z.infer<T>>;
+	export let labelClasses = '';
+	export let labelPosition: 'before' | 'after' = 'after';
+
+	const defaultLabelClasses = 'label cursor-pointer';
+	const { superform } = getFormContext();
+	const { path, value, errors, constraints } = formFieldProxy(superform, field);
+	$: checked = value as Writable<boolean>;
+</script>
+
+<label class={clsx(defaultLabelClasses, labelClasses)}>
+	{#if labelPosition == 'before'}
+		<span class:text-error={$errors} class="label-text pr-2"><slot /></span>
+	{/if}
+	<input
+		type="checkbox"
+		name={field}
+		bind:checked={$checked}
+		data-invalid={$errors}
+		aria-invalid={Boolean($errors)}
+		aria-errormessage={Array($errors).join('. ')}
+		aria-required={$constraints?.required}
+		{...$constraints}
+		{...$$restProps}
+	/>
+	{#if labelPosition == 'after'}
+		<span class:text-error={$errors} class="label-text pl-2"><slot /></span>
+	{/if}
+</label>
+{#if $errors}
+	<Helper class="mt-2" color="red">{$errors}</Helper>
+{/if}

apps/console/src/lib/components/form/CheckboxFB.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+</script>
+
+<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
+<script lang="ts">
+	import { Checkbox, Helper } from 'flowbite-svelte';
+	import type { Writable } from 'svelte/store';
+	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
+	import { formFieldProxy } from 'sveltekit-superforms/client';
+	import { getFormContext } from './forms';
+
+	export let form: SuperForm<T, unknown>;
+	export let field: FormPathLeaves<T>;
+
+	const { superform } = getFormContext();
+	const { path, value, errors, constraints } = formFieldProxy(superform, field);
+	$: checked = value as Writable<boolean>;
+</script>
+
+<Checkbox
+	name={field}
+	color={$errors ? 'red' : 'green'}
+	bind:checked={$checked}
+	data-invalid={$errors}
+	aria-invalid={Boolean($errors)}
+	aria-errormessage={Array($errors).join('. ')}
+	aria-required={$constraints?.required}
+	{...$constraints}
+	{...$$restProps}
+>
+	<span class:text-error={$errors} class="label-text"><slot /></span>
+</Checkbox>
+{#if $errors}
+	<Helper class="mt-2" color="red">{$errors}</Helper>
+{/if}

apps/console/src/lib/components/form/DateInput.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+</script>
+
+<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
+<script lang="ts">
+	import type { Writable } from 'svelte/store';
+	import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+	import type { SuperForm, FormPathLeaves } from 'sveltekit-superforms';
+	import { dateProxy, formFieldProxy } from 'sveltekit-superforms';
+	import { getFormContext } from './forms';
+
+	export let form: SuperForm<T, unknown>;
+	export let field: FormPathLeaves<T>;
+	export let label = '';
+	export let type: 'date' | 'datetime-local' = 'date';
+	export let size: 'small' | 'default' = 'default';
+	export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
+
+	const { superform } = getFormContext();
+	const { path, value, errors, constraints } = formFieldProxy(superform, field);
+	let proxy: Writable<string> | undefined;
+	if (type === 'date') {
+		proxy = dateProxy(superform.form, field, { format: 'date', empty: 'null' });
+	} else if (type === 'datetime-local') {
+		// proxy = dateProxy(superform.form, field, { format: 'datetime-utc', empty: 'null' });
+		proxy = dateProxy(superform.form, field, { format: 'datetime-local', empty: 'null' });
+	}
+	// $: console.log('date proxy----', path, $proxy)
+	// $: console.log('date value----', path, $value)
+</script>
+
+<FloatingLabelInput
+	{type}
+	{style}
+	{size}
+	{label}
+	name={field}
+	bind:value={$proxy}
+	data-invalid={$errors}
+	class="input input-bordered"
+	color={$errors ? 'red' : 'base'}
+	aria-describedby={`${path}_help`}
+	aria-invalid={Boolean($errors)}
+	aria-errormessage={Array($errors).join('. ')}
+	aria-required="{$constraints?.required},"
+	{...$constraints}
+	{...$$restProps}
+/>
+{#if $errors}
+	<Helper class="mt-2" color="red">{$errors}</Helper>
+{/if}
+
+<style lang="postcss">
+	[data-invalid],
+	.invalid {
+		color: red;
+	}
+</style>

apps/console/src/lib/components/form/DateInput.svelte.bak

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { format } from 'date-fns';
+	import { createField } from 'felte';
+	import { FloatingLabelInput } from 'flowbite-svelte';
+
+	const DATE_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS";
+	// timestampz (ISO 8601 time zone) format, reset to UTC (e.g., 2018-04-25T14:05:15.953Z)
+	export let value: string | null | undefined = null; // isoStr
+	export let name: string;
+	export let label: string;
+	export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
+	export let error: string | undefined;
+
+	// yyyy-MM-dd'T'HH:mm:ss.SSSX       >>>  2018-04-25T14:05:15.953Z
+	// yyyy-MM-dd'T'HH:mm:ss.SSSXX      >>>  2001-07-04T12:08:56.235-0700
+	// yyyy-MM-dd'T'HH:mm:ss.SSSXXX     >>>  2001-07-04T12:08:56.235-07:00 // (ISO 8601 time zone)
+	// yyyy-MM-dd'T'HH:mm:ss.SSSSXXX    >>>  2014-12-03T10:05:59.5646+08:00
+	// yyyy-MM-dd'T'HH:mm:ss.SSSSSSXXX  >>>  2022-12-14T21:33:47.453082+00:00
+	let internal = value ? format(new Date(value), DATE_FORMAT) : undefined;
+
+	const input = (value: string | null | undefined) =>
+		(internal = value ? format(new Date(value), DATE_FORMAT) : undefined);
+	const output = (internal: string | undefined) =>
+		(value = internal ? new Date(internal).toISOString() : null);
+
+	$: input(value);
+	$: output(internal);
+
+	const { field, onInput, onBlur } = createField({
+		name,
+		defaultValue: value,
+		touchOnChange: true
+	});
+	$: onInput(value); // 2022-12-14T16:11:35.915Z // check null
+</script>
+
+<div use:field on:blur={onBlur} role="textbox">
+	<FloatingLabelInput
+		type="datetime-local"
+		step="0.001"
+		{style}
+		class="input-bordered input"
+		bind:value={internal}
+		{...$$restProps}
+		color={error ? 'red' : null}
+		aria-describedby={`${name}_help`}
+		{label}
+	/>
+	{#if error}
+		<p id={`${name}_help`} class="mt-2 text-xs font-normal text-red-700 dark:text-red-500">
+			<span class="font-medium">Oh, snapp!</span> {error}</p
+		>
+	{/if}
+</div>

apps/console/src/lib/components/form/DeleteForm.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { TrashBinOutline } from 'flowbite-svelte-icons';
+
+	export let id: string;
+</script>
+
+<form method="POST" action="?/delete" use:enhance>
+	<input type="hidden" name="id" hidden value={id} />
+	<!-- <button type="submit" on:click={(e) => !confirm('Are you sure?') && e.preventDefault()}> -->
+	<button type="submit">
+		<TrashBinOutline class="text-red-500 dark:text-blue-400" />
+	</button>
+</form>
+
+<!-- <script lang="ts">
+	// Paired with this form action
+	import { DeleteRuleStore } from '$houdini';
+	import { ToastLevel } from '$lib/components/toast';
+	import { ruleDeleteSchema as schema } from '$lib/models/schema';
+	import { Logger } from '$lib/utils';
+	import { fail } from '@sveltejs/kit';
+	import type { GraphQLError } from 'graphql';
+	import { redirect } from 'sveltekit-flash-message/server';
+	import { setError, setMessage, superValidate } from 'sveltekit-superforms/server';
+
+	const log = new Logger('rule.action.server');
+
+	const deleteRuleStore = new DeleteRuleStore();
+	export const actions = {
+		delete: async (event) => {
+			const { request, locals } = event;
+			const session = await locals.auth();
+			if (session?.user == undefined) {
+				throw redirect(307, '/auth/signin?callbackUrl=/dashboard/rules');
+			}
+
+			const form = await superValidate(request,zod(schema));
+			log.debug({ form });
+
+			// superform validation
+			if (!form.valid) return fail(400, { form });
+
+			const variables = { id: form.data.id, deletedAt: new Date() };
+			log.debug('DELETE action variables:', variables);
+			const { errors, data } = await deleteRuleStore.mutate(variables, {
+				metadata: { logResult: true },
+				event
+			});
+			if (errors) {
+				errors.forEach((error) => {
+					log.error('delete rule gql error', error);
+					setError(form, '', (error as GraphQLError).message);
+				});
+				return setMessage(form, 'Delete rule failed');
+			}
+
+			const result = data?.update_rules_by_pk;
+			if (!result) return setMessage(form, 'Delete rule failed: responce empty', { status: 404 });
+			const message = {
+				message: `Rule: ${result.displayName} deleted`,
+				dismissible: true,
+				duration: 10000,
+				type: ToastLevel.Success
+			} as const;
+			throw redirect(302, '/dashboard/rules', message, event);
+		}
+	};
+</script> -->

apps/console/src/lib/components/form/ErrorMessage.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge';
+	export let error: string | undefined;
+</script>
+
+{#if error}
+	<p
+		{...$$restProps}
+		class={twMerge('mt-2 text-xs font-normal text-red-700 dark:text-red-500', $$props.class)}
+	>
+		<span class="font-medium">Oh, snapp!</span>
+		{error}
+	</p>
+{/if}

apps/console/src/lib/components/form/Fieldset.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let name: string;
+	export let labelBg = 'bg-surface-50-900-token';
+</script>
+
+<div class="border-surface-300-600-token relative space-y-4 rounded-lg border p-4">
+	<h6 class="absolute top-[-12px] text-sm {labelBg} text-surface-600-300-token px-2">{name}</h6>
+	<slot />
+</div>

apps/console/src/lib/components/form/FloatingTextInput.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" context="module">
+	type T = Record<string, unknown>;
+</script>
+
+<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
+<script lang="ts">
+	import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+	import type { InputType } from 'flowbite-svelte';
+	import type { FormPathLeaves } from 'sveltekit-superforms';
+	import type { SuperForm } from 'sveltekit-superforms';
+	import { formFieldProxy } from 'sveltekit-superforms';
+	import { getFormContext } from './forms';
+
+	export let form: SuperForm<T, unknown>;
+	export let field: FormPathLeaves<T>;
+	export let label = '';
+	export let type: InputType = 'text';
+	export let size: 'small' | 'default' = 'default';
+	export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
+
+	const { superform } = getFormContext();
+	const { path, value, errors, constraints } = formFieldProxy(superform, field);
+</script>
+
+<FloatingLabelInput
+	{type}
+	{style}
+	{size}
+	name={field}
+	bind:value={$value}
+	data-invalid={$errors}
+	color={$errors ? 'red' : 'base'}
+	aria-describedby={`${path}_help`}
+	aria-invalid={Boolean($errors)}
+	aria-errormessage={Array($errors).join('. ')}
+	aria-required="{$constraints?.required},"
+	{...$constraints}
+	{...$$restProps}
+>
+	{label}
+</FloatingLabelInput>
+{#if $errors}
+	<Helper class="mt-2" color="red">{$errors}</Helper>
+{/if}