Skip to content

Commit 7b37cca

Browse files
hari-manupatihari-manupati
committed
updating add rules
1 parent 856dc44 commit 7b37cca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2411
-433
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { loadOptions } from './svelte_select_fetches';

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script lang="ts">
2+
/**
3+
* <div class="flex justify-start">
4+
* <Checkbox field={keys.active} class="toggle toggle-secondary" labelPosition="before" disabled={editMode}>Active</Checkbox>
5+
* <Checkbox field={keys.active} class="toggle toggle-secondary" disabled={editMode}>Active</Checkbox>
6+
* <Checkbox field={keys.active} class="w-4 h-4" disabled={editMode}>Active</Checkbox>
7+
* </div>
8+
*/
9+
import { clsx } from 'clsx';
10+
import { Helper } from 'flowbite-svelte';
11+
import type { Writable } from 'svelte/store';
12+
import type { FormPathLeaves } from 'sveltekit-superforms';
13+
import { formFieldProxy } from 'sveltekit-superforms/client';
14+
import type { AnyZodObject, z } from 'zod';
15+
import { getFormContext } from './forms';
16+
17+
// eslint-disable-next-line no-undef
18+
type T = $$Generic<AnyZodObject>;
19+
export let field: FormPathLeaves<z.infer<T>>;
20+
export let labelClasses = '';
21+
export let labelPosition: 'before' | 'after' = 'after';
22+
23+
const defaultLabelClasses = 'label cursor-pointer';
24+
const { superform } = getFormContext();
25+
const { path, value, errors, constraints } = formFieldProxy(superform, field);
26+
$: checked = value as Writable<boolean>;
27+
</script>
28+
29+
<label class={clsx(defaultLabelClasses, labelClasses)}>
30+
{#if labelPosition == 'before'}
31+
<span class:text-error={$errors} class="label-text pr-2"><slot /></span>
32+
{/if}
33+
<input
34+
type="checkbox"
35+
name={field}
36+
bind:checked={$checked}
37+
data-invalid={$errors}
38+
aria-invalid={Boolean($errors)}
39+
aria-errormessage={Array($errors).join('. ')}
40+
aria-required={$constraints?.required}
41+
{...$constraints}
42+
{...$$restProps}
43+
/>
44+
{#if labelPosition == 'after'}
45+
<span class:text-error={$errors} class="label-text pl-2"><slot /></span>
46+
{/if}
47+
</label>
48+
{#if $errors}
49+
<Helper class="mt-2" color="red">{$errors}</Helper>
50+
{/if}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts" context="module">
2+
type T = Record<string, unknown>;
3+
</script>
4+
5+
<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
6+
<script lang="ts">
7+
import { Checkbox, Helper } from 'flowbite-svelte';
8+
import type { Writable } from 'svelte/store';
9+
import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
10+
import { formFieldProxy } from 'sveltekit-superforms/client';
11+
import { getFormContext } from './forms';
12+
13+
export let form: SuperForm<T, unknown>;
14+
export let field: FormPathLeaves<T>;
15+
16+
const { superform } = getFormContext();
17+
const { path, value, errors, constraints } = formFieldProxy(superform, field);
18+
$: checked = value as Writable<boolean>;
19+
</script>
20+
21+
<Checkbox
22+
name={field}
23+
color={$errors ? 'red' : 'green'}
24+
bind:checked={$checked}
25+
data-invalid={$errors}
26+
aria-invalid={Boolean($errors)}
27+
aria-errormessage={Array($errors).join('. ')}
28+
aria-required={$constraints?.required}
29+
{...$constraints}
30+
{...$$restProps}
31+
>
32+
<span class:text-error={$errors} class="label-text"><slot /></span>
33+
</Checkbox>
34+
{#if $errors}
35+
<Helper class="mt-2" color="red">{$errors}</Helper>
36+
{/if}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script lang="ts" context="module">
2+
type T = Record<string, unknown>;
3+
</script>
4+
5+
<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
6+
<script lang="ts">
7+
import type { Writable } from 'svelte/store';
8+
import { FloatingLabelInput, Helper } from 'flowbite-svelte';
9+
import type { SuperForm, FormPathLeaves } from 'sveltekit-superforms';
10+
import { dateProxy, formFieldProxy } from 'sveltekit-superforms';
11+
import { getFormContext } from './forms';
12+
13+
export let form: SuperForm<T, unknown>;
14+
export let field: FormPathLeaves<T>;
15+
export let label = '';
16+
export let type: 'date' | 'datetime-local' = 'date';
17+
export let size: 'small' | 'default' = 'default';
18+
export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
19+
20+
const { superform } = getFormContext();
21+
const { path, value, errors, constraints } = formFieldProxy(superform, field);
22+
let proxy: Writable<string> | undefined;
23+
if (type === 'date') {
24+
proxy = dateProxy(superform.form, field, { format: 'date', empty: 'null' });
25+
} else if (type === 'datetime-local') {
26+
// proxy = dateProxy(superform.form, field, { format: 'datetime-utc', empty: 'null' });
27+
proxy = dateProxy(superform.form, field, { format: 'datetime-local', empty: 'null' });
28+
}
29+
// $: console.log('date proxy----', path, $proxy)
30+
// $: console.log('date value----', path, $value)
31+
</script>
32+
33+
<FloatingLabelInput
34+
{type}
35+
{style}
36+
{size}
37+
{label}
38+
name={field}
39+
bind:value={$proxy}
40+
data-invalid={$errors}
41+
class="input input-bordered"
42+
color={$errors ? 'red' : 'base'}
43+
aria-describedby={`${path}_help`}
44+
aria-invalid={Boolean($errors)}
45+
aria-errormessage={Array($errors).join('. ')}
46+
aria-required="{$constraints?.required},"
47+
{...$constraints}
48+
{...$$restProps}
49+
/>
50+
{#if $errors}
51+
<Helper class="mt-2" color="red">{$errors}</Helper>
52+
{/if}
53+
54+
<style lang="postcss">
55+
[data-invalid],
56+
.invalid {
57+
color: red;
58+
}
59+
</style>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script lang="ts">
2+
import { format } from 'date-fns';
3+
import { createField } from 'felte';
4+
import { FloatingLabelInput } from 'flowbite-svelte';
5+
6+
const DATE_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSS";
7+
// timestampz (ISO 8601 time zone) format, reset to UTC (e.g., 2018-04-25T14:05:15.953Z)
8+
export let value: string | null | undefined = null; // isoStr
9+
export let name: string;
10+
export let label: string;
11+
export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
12+
export let error: string | undefined;
13+
14+
// yyyy-MM-dd'T'HH:mm:ss.SSSX >>> 2018-04-25T14:05:15.953Z
15+
// yyyy-MM-dd'T'HH:mm:ss.SSSXX >>> 2001-07-04T12:08:56.235-0700
16+
// yyyy-MM-dd'T'HH:mm:ss.SSSXXX >>> 2001-07-04T12:08:56.235-07:00 // (ISO 8601 time zone)
17+
// yyyy-MM-dd'T'HH:mm:ss.SSSSXXX >>> 2014-12-03T10:05:59.5646+08:00
18+
// yyyy-MM-dd'T'HH:mm:ss.SSSSSSXXX >>> 2022-12-14T21:33:47.453082+00:00
19+
let internal = value ? format(new Date(value), DATE_FORMAT) : undefined;
20+
21+
const input = (value: string | null | undefined) =>
22+
(internal = value ? format(new Date(value), DATE_FORMAT) : undefined);
23+
const output = (internal: string | undefined) =>
24+
(value = internal ? new Date(internal).toISOString() : null);
25+
26+
$: input(value);
27+
$: output(internal);
28+
29+
const { field, onInput, onBlur } = createField({
30+
name,
31+
defaultValue: value,
32+
touchOnChange: true
33+
});
34+
$: onInput(value); // 2022-12-14T16:11:35.915Z // check null
35+
</script>
36+
37+
<div use:field on:blur={onBlur} role="textbox">
38+
<FloatingLabelInput
39+
type="datetime-local"
40+
step="0.001"
41+
{style}
42+
class="input-bordered input"
43+
bind:value={internal}
44+
{...$$restProps}
45+
color={error ? 'red' : null}
46+
aria-describedby={`${name}_help`}
47+
{label}
48+
/>
49+
{#if error}
50+
<p id={`${name}_help`} class="mt-2 text-xs font-normal text-red-700 dark:text-red-500">
51+
<span class="font-medium">Oh, snapp!</span> {error}</p
52+
>
53+
{/if}
54+
</div>

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script lang="ts">
2+
import { enhance } from '$app/forms';
3+
import { TrashBinOutline } from 'flowbite-svelte-icons';
4+
5+
export let id: string;
6+
</script>
7+
8+
<form method="POST" action="?/delete" use:enhance>
9+
<input type="hidden" name="id" hidden value={id} />
10+
<!-- <button type="submit" on:click={(e) => !confirm('Are you sure?') && e.preventDefault()}> -->
11+
<button type="submit">
12+
<TrashBinOutline class="text-red-500 dark:text-blue-400" />
13+
</button>
14+
</form>
15+
16+
<!-- <script lang="ts">
17+
// Paired with this form action
18+
import { DeleteRuleStore } from '$houdini';
19+
import { ToastLevel } from '$lib/components/toast';
20+
import { ruleDeleteSchema as schema } from '$lib/models/schema';
21+
import { Logger } from '$lib/utils';
22+
import { fail } from '@sveltejs/kit';
23+
import type { GraphQLError } from 'graphql';
24+
import { redirect } from 'sveltekit-flash-message/server';
25+
import { setError, setMessage, superValidate } from 'sveltekit-superforms/server';
26+
27+
const log = new Logger('rule.action.server');
28+
29+
const deleteRuleStore = new DeleteRuleStore();
30+
export const actions = {
31+
delete: async (event) => {
32+
const { request, locals } = event;
33+
const session = await locals.auth();
34+
if (session?.user == undefined) {
35+
throw redirect(307, '/auth/signin?callbackUrl=/dashboard/rules');
36+
}
37+
38+
const form = await superValidate(request,zod(schema));
39+
log.debug({ form });
40+
41+
// superform validation
42+
if (!form.valid) return fail(400, { form });
43+
44+
const variables = { id: form.data.id, deletedAt: new Date() };
45+
log.debug('DELETE action variables:', variables);
46+
const { errors, data } = await deleteRuleStore.mutate(variables, {
47+
metadata: { logResult: true },
48+
event
49+
});
50+
if (errors) {
51+
errors.forEach((error) => {
52+
log.error('delete rule gql error', error);
53+
setError(form, '', (error as GraphQLError).message);
54+
});
55+
return setMessage(form, 'Delete rule failed');
56+
}
57+
58+
const result = data?.update_rules_by_pk;
59+
if (!result) return setMessage(form, 'Delete rule failed: responce empty', { status: 404 });
60+
const message = {
61+
message: `Rule: ${result.displayName} deleted`,
62+
dismissible: true,
63+
duration: 10000,
64+
type: ToastLevel.Success
65+
} as const;
66+
throw redirect(302, '/dashboard/rules', message, event);
67+
}
68+
};
69+
</script> -->

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script lang="ts">
2+
import { twMerge } from 'tailwind-merge';
3+
export let error: string | undefined;
4+
</script>
5+
6+
{#if error}
7+
<p
8+
{...$$restProps}
9+
class={twMerge('mt-2 text-xs font-normal text-red-700 dark:text-red-500', $$props.class)}
10+
>
11+
<span class="font-medium">Oh, snapp!</span>
12+
{error}
13+
</p>
14+
{/if}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
export let name: string;
3+
export let labelBg = 'bg-surface-50-900-token';
4+
</script>
5+
6+
<div class="border-surface-300-600-token relative space-y-4 rounded-lg border p-4">
7+
<h6 class="absolute top-[-12px] text-sm {labelBg} text-surface-600-300-token px-2">{name}</h6>
8+
<slot />
9+
</div>

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script lang="ts" context="module">
2+
type T = Record<string, unknown>;
3+
</script>
4+
5+
<!-- <script lang="ts" generics="T extends Record<string, unknown>"> -->
6+
<script lang="ts">
7+
import { FloatingLabelInput, Helper } from 'flowbite-svelte';
8+
import type { InputType } from 'flowbite-svelte';
9+
import type { FormPathLeaves } from 'sveltekit-superforms';
10+
import type { SuperForm } from 'sveltekit-superforms';
11+
import { formFieldProxy } from 'sveltekit-superforms';
12+
import { getFormContext } from './forms';
13+
14+
export let form: SuperForm<T, unknown>;
15+
export let field: FormPathLeaves<T>;
16+
export let label = '';
17+
export let type: InputType = 'text';
18+
export let size: 'small' | 'default' = 'default';
19+
export let style: 'filled' | 'outlined' | 'standard' = 'outlined';
20+
21+
const { superform } = getFormContext();
22+
const { path, value, errors, constraints } = formFieldProxy(superform, field);
23+
</script>
24+
25+
<FloatingLabelInput
26+
{type}
27+
{style}
28+
{size}
29+
name={field}
30+
bind:value={$value}
31+
data-invalid={$errors}
32+
color={$errors ? 'red' : 'base'}
33+
aria-describedby={`${path}_help`}
34+
aria-invalid={Boolean($errors)}
35+
aria-errormessage={Array($errors).join('. ')}
36+
aria-required="{$constraints?.required},"
37+
{...$constraints}
38+
{...$$restProps}
39+
>
40+
{label}
41+
</FloatingLabelInput>
42+
{#if $errors}
43+
<Helper class="mt-2" color="red">{$errors}</Helper>
44+
{/if}

0 commit comments

Comments
 (0)