@medyll/idae-machine 0.87.0

package/dist/form/CollectionList.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type MenuListProps } from '@medyll/idae-slotui-svelte';
+import { type Snippet } from 'svelte';
+import type { Where } from '@medyll/idae-idbql';
+declare class __sveltets_Render<COL = Record<string, any>> {
+    props(): {
+        collection: string;
+        target?: string;
+        data?: COL | undefined;
+        menuListProps?: MenuListProps;
+        style?: string;
+        displayMode?: "line" | "grid";
+        where?: Where<COL> | undefined;
+        children?: Snippet;
+        onclick?: ((data: COL, index: number | string) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <COL = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<COL>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<COL>['props']>, ReturnType<__sveltets_Render<COL>['events']>, ReturnType<__sveltets_Render<COL>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<COL>['bindings']>;
+    } & ReturnType<__sveltets_Render<COL>['exports']>;
+    <COL = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<COL>['props']> & {}): ReturnType<__sveltets_Render<COL>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CollectionList: $$IsomorphicComponent;
+type CollectionList<COL = Record<string, any>> = InstanceType<typeof CollectionList<COL>>;
+export default CollectionList;

package/dist/form/CollectionListMenu.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" generics="COL = Record<string,any>">
+	import { type MenuListProps, Button, MenuList, MenuListItem, openWindow, type Props } from '@medyll/idae-slotui-svelte';
+	import CreateUpdate from '$components/form/CreateUpdate.svelte';
+	import { idbqlState } from '../db/dbSchema';
+	import { IDbCollections, IDbCollectionValues } from '../db/dbFields';
+	import { hydrate } from 'svelte';
+	import type { Where } from '@medyll/idae-idbql';
+
+	interface DataListMenuProps {
+		collection:     string;
+		target?:        string; // html target
+		data?:          COL;
+		menuListProps?: MenuListProps;
+		style?:         string;
+		where?:         Where<COL>;
+		onclick?:       (event: CustomEvent, index: number) => void;
+	}
+
+	let { collection, target, data, menuListProps, onclick, style, where }: DataListMenuProps = $props();
+
+	let test = new IDbCollections();
+	let fieldValues = new IDbCollectionValues(collection);
+	let index = test.getIndexName(collection);
+
+	let qy = $derived(where ? idbqlState[collection].where(where) : idbqlState[collection].getAll());
+
+	function load(event: CustomEvent, indexV: number) {
+		openCrud(event[index]);
+	}
+
+	function openCrud(id: any) {
+		// mount on target, returns component
+		let mounted = hydrate(CreateUpdate, {
+			target: document.querySelector(`[data-target-zone="${target}"]`),
+			props:  { collection: collection, dataId: id, mode: 'update' }
+		});
+
+		return mounted;
+	}
+</script>
+
+<MenuList {style} onclick={onclick ?? load} data={qy} {...menuListProps}>
+	{#snippet children({ item })}
+		<MenuListItem data={item}>{fieldValues.presentation(item)}</MenuListItem>
+	{/snippet}
+</MenuList>

package/dist/form/CollectionListMenu.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type MenuListProps } from '@medyll/idae-slotui-svelte';
+import type { Where } from '@medyll/idae-idbql';
+declare class __sveltets_Render<COL = Record<string, any>> {
+    props(): {
+        collection: string;
+        target?: string;
+        data?: COL | undefined;
+        menuListProps?: MenuListProps;
+        style?: string;
+        where?: Where<COL> | undefined;
+        onclick?: ((event: CustomEvent, index: number) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <COL = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<COL>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<COL>['props']>, ReturnType<__sveltets_Render<COL>['events']>, ReturnType<__sveltets_Render<COL>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<COL>['bindings']>;
+    } & ReturnType<__sveltets_Render<COL>['exports']>;
+    <COL = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<COL>['props']> & {}): ReturnType<__sveltets_Render<COL>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CollectionListMenu: $$IsomorphicComponent;
+type CollectionListMenu<COL = Record<string, any>> = InstanceType<typeof CollectionListMenu<COL>>;
+export default CollectionListMenu;

package/dist/form/CollectionReverseFks.svelte

@@ -0,0 +1,56 @@
+<!-- 
+    Component CollectionReverseFks.svelte :  to display a list of reverse foreign keys for a specific collection.
+    D:\boulot\python\wollama\src\components\form\CollectionReverseFks.svelte
+
+    (alias) type Tpl<T = TplCollectionFields> = {
+    index: string;
+    presentation: string | number | symbol;
+    fields: { [K in keyof T]: TplFieldRules; };
+    fks: { [K in TplCollectionName]?: {
+        code: K;
+        multiple: boolean;
+        rules: CombinedArgs;
+    }; };
+    } 
+ -->
+<script lang="ts">
+	import { IDbCollections } from '../db/dbFields';
+	import { schemeModel, idbqlState } from '../db/dbSchema';
+	import type { Tpl, TplCollectionName, Where } from '@medyll/idae-idbql';
+	import { Looper } from '@medyll/idae-slotui-svelte';
+	import type { Snippet, SvelteComponent } from 'svelte';
+
+	type CollectionFksProps = {
+		collection:      TplCollectionName;
+		collectionId?:   any;
+		where?:          Where;
+		children:        Snippet<[{ collection: string; template: Tpl }]>;
+		showTitle?:      boolean | string;
+		component?:      typeof SvelteComponent;
+		componentProps?: Record<string, any>;
+	};
+	let { collection, children: child, showTitle = false, component, componentProps = {} }: CollectionFksProps = $props();
+	const dbFields = new IDbCollections(schemeModel);
+	const fks = $derived(dbFields.reverseFks(collection));
+
+	function getTitle() {
+		if (typeof showTitle === 'string') return showTitle;
+		return showTitle ? `Related ${collection}` : '';
+	}
+</script>
+
+<Looper data={Object.entries(fks)}>
+	{#snippet children({ item })}
+		{#if showTitle}
+			<div class="p2 font-bold">{item?.[0]}</div>
+		{/if}
+		{#if component}
+			<svelte:component this={component} collection={item[0]} template={item[1]} {...componentProps} />
+		{:else}
+			{@render child({
+				collection: item[0],
+				template: item[1]
+			})}
+		{/if}
+	{/snippet}
+</Looper>

package/dist/form/CollectionReverseFks.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Tpl, TplCollectionName, Where } from '@medyll/idae-idbql';
+import type { Snippet } from 'svelte';
+type CollectionFksProps = {
+    collection: TplCollectionName;
+    collectionId?: any;
+    where?: Where;
+    children: Snippet<[{
+        collection: string;
+        template: Tpl;
+    }]>;
+    showTitle?: boolean | string;
+    component?: typeof SvelteComponent;
+    componentProps?: Record<string, any>;
+};
+declare const CollectionReverseFks: import("svelte").Component<CollectionFksProps, {}, "">;
+type CollectionReverseFks = ReturnType<typeof CollectionReverseFks>;
+export default CollectionReverseFks;

package/dist/form/CreateUpdate.svelte

@@ -0,0 +1,191 @@
+<!-- 
+    Component CreateUpdate :  to open a CreateUpdateShow window for a specific collection.
+    Button validate and cancel is in the Window component.
+ -->
+
+<script lang="ts" generics="COL = Record<string,any>">
+	import { IDbCollections as DbFields, IDbFormValidate } from '../db/dbFields';
+	import { idbql, idbqlState, schemeModel } from '../db/dbSchema';
+	import type { CreateUpdateProps } from './types';
+	import CollectionReverseFks from './CollectionReverseFks.svelte';
+	import FieldInput from './FieldValue.svelte';
+
+	let {
+		collection,
+		data = {},
+		dataId,
+		mode = 'show',
+		withData,
+		showFields,
+		inPlaceEdit,
+		displayMode = 'wrap',
+		afterCreate,
+		showFks = false
+	}: CreateUpdateProps = $props();
+	let inputForm = `form-${String(collection)}-${mode}`;
+	let dbFields = new DbFields(schemeModel);
+	let indexName = dbFields.getIndexName(collection);
+	let formFields = showFields
+		? Object.fromEntries(
+				Object.entries(dbFields.parseRawCollection(collection) ?? {}).filter(([key]) => showFields.includes(key))
+			)
+		: (dbFields.parseRawCollection(collection) ?? {});
+
+	let qy: any = $derived(dataId && indexName ? idbqlState[collection].where({ [indexName]: { eq: dataId } }) : {});
+
+	let formData = $state<Record<string, any>>({ ...data, ...withData, ...$state.snapshot(qy)[0] });
+
+	$effect.pre(() => {
+		setFormDataDefaultFieldValues();
+	});
+	let ds = Object.keys(data).length > 0 ? data : qy[0];
+
+	let formValidator = new IDbFormValidate(collection);
+	let validationErrors: Record<string, string> = {};
+
+	const validateFormData = (formData: Record<string, any> = {}) => {
+		const { isValid, errors } = formValidator.validateForm(formData, {
+			ignoreFields: mode == 'create' ? [indexName] : undefined
+		});
+		validationErrors = errors;
+
+		return isValid;
+	};
+
+	export const submit = async (event: FormDataEvent) => {
+		if (!validateFormData($state.snapshot(formData))) {
+			Object.entries(validationErrors).forEach(([fieldName, errorMessage]) => {
+				// Trouver l'élément input correspondant dans le formulaire
+				const inputElement = document.querySelector(
+					`[name="${fieldName}"][form="${inputForm}"]`
+				) as HTMLInputElement | null;
+				console.log({ inputElement });
+
+				if (inputElement) {
+					// Ajouter une classe d'erreur à l'élément input
+					inputElement.classList.add('input-error');
+
+					// Créer ou mettre à jour un message d'erreur
+					let errorElement = inputElement.nextElementSibling as HTMLElement;
+					if (!errorElement || !errorElement.classList.contains('error-message')) {
+						errorElement = document.createElement('div');
+						errorElement.classList.add('error-message');
+						inputElement.parentNode?.insertBefore(errorElement, inputElement.nextSibling);
+					}
+					errorElement.textContent = errorMessage;
+
+					// Optionnel : Ajouter un attribut aria pour l'accessibilité
+					inputElement.setAttribute('aria-invalid', 'true');
+					inputElement.setAttribute('aria-describedby', `error-${fieldName}`);
+					errorElement.id = `error-${fieldName}`;
+				}
+			});
+			return;
+		}
+		let datadb = $state.snapshot(formData);
+		switch (mode) {
+			case 'create':
+				if (!dataId) {
+					await idbql[collection].add({ ...datadb, ...withData });
+					mode = 'show';
+				}
+				break;
+			case 'update':
+				if (dataId) {
+					await idbqlState[collection].update(dataId, datadb);
+				}
+				break;
+		}
+	};
+
+	function setFormDataDefaultFieldValues() {
+		Object.entries(formFields).forEach(([fieldName, field]) => {
+			if (formData[fieldName] === undefined && getDefaultValue(field?.fieldType)) {
+				formData[fieldName] = getDefaultValue(field?.fieldType);
+			}
+		});
+	}
+
+	// déplacer qqpart ?
+	function getDefaultValue(fieldType?: string) {
+		if (mode !== 'create') return undefined;
+		switch (fieldType) {
+			case 'timestamp':
+				return Date.now();
+			case 'date':
+				return new Date().toISOString().split('T')[0];
+			case 'datetime':
+				return new Date().toISOString();
+			case 'time':
+				return new Date().toISOString().split('T')[1].split('.')[0];
+		}
+	}
+</script>
+
+<form
+	id={inputForm}
+	name={inputForm}
+	onchange={(event) => {
+		console.log('Form changed', event);
+	}}
+	onsubmit={(event) => {
+		event.preventDefault();
+		// onSubmit(event);
+	}}
+></form>
+
+<div style="width:750px;display:flex;">
+	<div class="crud {displayMode}">
+		{#each Object.entries(formFields) as [fieldName, fieldInfo]}
+			<FieldInput
+				{collection}
+				{fieldName}
+				{mode}
+				editInPlace={inPlaceEdit === true || (Array.isArray(inPlaceEdit) && inPlaceEdit.includes(fieldName))}
+				bind:data={formData}
+				{inputForm}
+			/>
+		{/each}
+	</div>
+	{#if showFks && (mode === 'show' || mode === 'update')}
+		<div>
+			<CollectionReverseFks showTitle={true} {collection} collectionId={dataId}>
+				{#snippet children({ collection, template })}
+					<div class="p2">presentation</div>
+				{/snippet}
+			</CollectionReverseFks>
+		</div>
+	{/if}
+</div>
+
+<style>
+	@reference "../../styles/references.css";
+
+	:global(.crud) {
+		min-width: 32rem;
+		padding: 2rem;
+
+		&.wrap {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.5rem;
+		}
+
+		&.inline {
+			display: flex;
+			flex-direction: row;
+			gap: 1rem;
+		}
+	}
+
+	[aria-invalid='true'] {
+		background-color: #ffeeee;
+		border-color: red;
+	}
+
+	.error-message {
+		color: red;
+		font-size: 0.8em;
+		margin-top: 0.2em;
+	}
+</style>

package/dist/form/CreateUpdate.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { CreateUpdateProps } from './types';
+declare class __sveltets_Render<COL = Record<string, any>> {
+    props(): CreateUpdateProps<string>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {
+        submit: (event: FormDataEvent) => Promise<void>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <COL = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<COL>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<COL>['props']>, ReturnType<__sveltets_Render<COL>['events']>, ReturnType<__sveltets_Render<COL>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<COL>['bindings']>;
+    } & ReturnType<__sveltets_Render<COL>['exports']>;
+    <COL = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<COL>['props']> & {}): ReturnType<__sveltets_Render<COL>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CreateUpdate: $$IsomorphicComponent;
+type CreateUpdate<COL = Record<string, any>> = InstanceType<typeof CreateUpdate<COL>>;
+export default CreateUpdate;

package/dist/form/CrudZone.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" generics="T = Record<string, any>">
+	import { Button, openWindow, type Props } from '@medyll/idae-slotui-svelte';
+	import CreateUpdate from '$components/form/CreateUpdate.svelte';
+	import { idbqlState } from '../db/dbSchema';
+	import CrudDataList from './DataListMenu.svelte';
+
+	interface CrudZoneProps {
+		collection: string;
+		data?:      Record<string, any>;
+		style?:     ElementCSSInlineStyle;
+	}
+
+	let { collection, style }: CrudZoneProps = $props();
+
+	let qy = idbqlState[collection].getAll();
+</script>
+
+<div style="max-height:100%;height:350px;min-width:750px; {style}" class="flex border">
+	<div class="w-48 border">
+		<CrudDataList {collection} target="red" />
+	</div>
+	<div data-target-zone="red">ss</div>
+</div>

package/dist/form/CrudZone.svelte.d.ts

@@ -0,0 +1,22 @@
+interface CrudZoneProps {
+    collection: string;
+    data?: Record<string, any>;
+    style?: ElementCSSInlineStyle;
+}
+declare class __sveltets_Render<T = Record<string, any>> {
+    props(): CrudZoneProps;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = Record<string, any>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const CrudZone: $$IsomorphicComponent;
+type CrudZone<T = Record<string, any>> = InstanceType<typeof CrudZone<T>>;
+export default CrudZone;

package/dist/form/DataProvider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+
+	interface PROPS {
+		collection: string;
+		data:       Record<string, any>[];
+		children:   Snippet;
+	}
+
+	let { collection, children, data = $bindable() }: PROPS = $props();
+	let _data = $derived(data);
+
+	setContext('collection', collection);
+
+	setContext('data', data);
+	$inspect('data.provider', _data); // Corrected to reference others.data directly
+</script>
+
+{@render children?.()}

package/dist/form/DataProvider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface PROPS {
+    collection: string;
+    data: Record<string, any>[];
+    children: Snippet;
+}
+declare const DataProvider: import("svelte").Component<PROPS, {}, "data">;
+type DataProvider = ReturnType<typeof DataProvider>;
+export default DataProvider;

package/dist/form/FieldInPlace.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Icon } from '@medyll/idae-slotui-svelte';
+
+	interface FieldInPProps {
+		collection: string;
+		field:      string;
+		validate:   Function;
+		message?:   string | undefined;
+		initial?:   import('svelte').Snippet;
+		children?:  import('svelte').Snippet;
+	}
+
+	let { validate, message = undefined, initial, children }: FieldInPProps = $props();
+
+	let status = $state('default');
+</script>
+
+<div class="line-gap-2 w-full">
+	{@render initial?.()}
+	{#if status === 'default'}
+		<button
+			class="line-gap-2"
+			hidden={status !== 'default'}
+			onclick={() => {
+				status = 'show_confirm';
+			}}
+		>
+			{@render children?.()}
+		</button>
+	{/if}
+	{#if status === 'show_confirm'}
+		<button
+			onclick={() => {
+				validate?.();
+				status = 'default';
+			}}
+		>
+			{message ?? ''}
+			<Icon class="color-success md text-green-800" icon="mdi:done" />
+		</button>
+		<button
+			onclick={() => {
+				status = 'default';
+			}}
+		>
+			<Icon icon="typcn:cancel" style="color: red" class="md fill-red-800 " />
+		</button>
+	{/if}
+</div>

package/dist/form/FieldInPlace.svelte.d.ts

@@ -0,0 +1,11 @@
+interface FieldInPProps {
+    collection: string;
+    field: string;
+    validate: Function;
+    message?: string | undefined;
+    initial?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const FieldInPlace: import("svelte").Component<FieldInPProps, {}, "">;
+type FieldInPlace = ReturnType<typeof FieldInPlace>;
+export default FieldInPlace;