mountain-ui 1.0.23 → 1.0.25

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "mountain-ui",
 	"private": false,
-	"version": "1.0.23",
+	"version": "1.0.25",
 	"description": "A comprehensive UI component library for ERP systems with field types, entities, and registry management built with Svelte",
 	"type": "module",
 	"module": "index.js",

package/src/lib/registry/entityRegistry/components/EntityForm.svelte

@@ -4,44 +4,83 @@
 	import FieldInput from './FieldInput.svelte';
 	import FormCtx from './FormCtx.svelte';
 
-	let { ctx = {}, entityId, onSubmit = ()=>{}, type = 'create' } = $props();
+	let { ctx = {}, entityId, onSubmit = () => {}, type = 'create' } = $props();
 
 	let detailsCtx = $state({});
 
 	const entity = entityRegistry.select(entityId);
 
-    function handleSubmit() {
-        onSubmit({...ctx})
-    }
+	function handleSubmit() {
+		onSubmit({ ...ctx });
+	}
+
+	let calculations = $state({});
+
+	function handleRegisterCalculation(config) {
+		calculations = {
+			...calculations,
+			[config.id]: config
+		};
+	}
+
+	function handleChange(fieldId, value) {
+		ctx[fieldId] = value;
+
+		recalculate(fieldId);
+
+		ctx = { ...ctx };
+	}
+	function handleChangeDetails(fieldId, value) {
+		detailsCtx[fieldId] = value;
+
+        // si c est un type lien alors on parcour ses champs enfant et on reagis
+        const field = entityRegistry.getField(fieldId, entity.id)
+        if (field.type === "link") {
+            const entity = entityRegistry.get(field.props.linkId)
+            for (const linkedFields of entity.fields) {
+                recalculate(linkedFields.id)
+            }
+        }
+
+		detailsCtx = { ...detailsCtx };
+	}
+
+	function recalculate(changedFieldId) {
+		// on parcour les calcules et on verifie si un depend du champs changé
+		for (const calc of Object.values(calculations)) {
+			if (!calc.dependsOn.includes(changedFieldId)) continue;
+
+			calc.calculate(ctx);
+		}
+	}
 </script>
 
 {#if $entity}
-		<div class="form">
-			<FormCtx bind:ctx bind:detailsCtx>
-				{#each $entity.fields as field}
-					<FieldInput
-						{detailsCtx}
-						{ctx}
-						onChangeDetails={(value) => {
-							detailsCtx[field.id] = value;
-							detailsCtx = { ...detailsCtx };
-						}}
-						onChange={(value) => {
-							ctx[field.id] = value;
-							ctx = { ...ctx };
-						}}
-						id={field.id}
-						entityId={$entity.id}
-                        value={ctx?.[field.id] ?? null}
-					></FieldInput>
-				{/each}
-				<div class="button">
-					<Button onClick={handleSubmit}>
-						<h4>{type === 'create' ? 'créer' : 'éditer'}</h4>
-					</Button>
-				</div>
-			</FormCtx>
-		</div>
+	<div class="form">
+		<FormCtx bind:ctx bind:detailsCtx>
+			{#each $entity.fields as field}
+				<FieldInput
+					{detailsCtx}
+					{ctx}
+					onChangeDetails={(value) => {
+						handleChangeDetails(field.id, value);
+					}}
+					onChange={(value) => {
+						handleChange(field.id, value);
+					}}
+					id={field.id}
+					entityId={$entity.id}
+					value={ctx?.[field.id] ?? null}
+					registerCalculation={handleRegisterCalculation}
+				></FieldInput>
+			{/each}
+			<div class="button">
+				<Button onClick={handleSubmit}>
+					<h4>{type === 'create' ? 'créer' : 'éditer'}</h4>
+				</Button>
+			</div>
+		</FormCtx>
+	</div>
 {/if}
 
 <style>

package/src/lib/registry/fieldTypeRegistry/fieldTypes/Lines/Input.svelte

@@ -19,36 +19,34 @@
 		...props
 	} = $props();
 
-
 	let table = $state([createLine()]);
 
-    onMount(()=>{
-        if (value === null) return
+	onMount(() => {
+		if (value === null) return;
 
-        const decodedValue = JSON.parse(value)
+		const decodedValue = JSON.parse(value);
 
-        let newLines = []
+		let newLines = [];
 
-        for (const line of decodedValue) {
-            const lineId = line.id
-            delete line.id
-            const newLine = createLine(lineId, line)
-            newLines.push(newLine) 
-        }
+		for (const line of decodedValue) {
+			const lineId = line.id;
+			delete line.id;
+			const newLine = createLine(lineId, line);
+			newLines.push(newLine);
+		}
 
-        table = [...newLines]
-    })
+		table = [...newLines];
+	});
 
 	function createLine(dbId = null, line = null) {
 		return {
 			id: crypto.randomUUID(),
-            dbId:dbId,
-			ctx: line??{},
+			dbId: dbId,
+			ctx: line ?? {},
 			detailsCtx: {}
 		};
 	}
 
-
 	function handleAddLine() {
 		table = [...table, createLine()];
 	}
@@ -57,32 +55,77 @@
 
 	function handleDeleteLine(lineIndex) {
 		table = table.filter((_, i) => i !== lineIndex);
-		handleChangeDetailsCtx();
+		onChangeDetails(table)
 		handleChange();
 	}
-	function handleChangeDetailsCtx() {
-		onChangeDetails(table);
+
+	let calculations = $state({});
+
+	function handleRegisterCalculation(lineIndex, config) {
+	if (!calculations[lineIndex]) {
+		calculations[lineIndex] = {};
 	}
-	function handleChange() {
-		const value = JSON.stringify(table.map((line) => {
-            const data = {
-                ...line.ctx,
-            }
 
-            if (line.dbId != null) {
-                data.id = line.dbId
-            }
+	calculations[lineIndex][config.id] = config;
+
+	calculations = {...calculations};
+}
 
-            return data
-        } ));
-        
+	function handleChange(lineIndex, fieldId, value) {
+		table[lineIndex].ctx[fieldId] = value;
 
-		onChange(value);
+		recalculate(lineIndex, fieldId);
+
+		table = [...table];
+
+		const newValue = JSON.stringify(
+			table.map((line) => {
+				const data = {
+					...line.ctx
+				};
+
+				if (line.dbId != null) {
+					data.id = line.dbId;
+				}
+
+				return data;
+			})
+		);
+
+		onChange(newValue);
+	}
+
+	function handleChangeDetails(lineIndex, fieldId, value) {
+		table[lineIndex].detailsCtx[fieldId] = value;
+
+		// si c est un type lien alors on parcour ses champs enfant et on reagis
+		const field = entityRegistry.getField(fieldId, entity.id);
+		if (field.type === 'link') {
+			const entity = entityRegistry.get(field.props.linkId);
+			for (const linkedFields of entity.fields) {
+				recalculate(lineIndex, linkedFields.id);
+			}
+		}
+
+		table = [...table];
+
+
+		onChangeDetails(table);
+	}
+
+	function recalculate(lineIndex, changedFieldId) {
+		// on parcour les calcules et on verifie si un depend du champs changé
+		for (const calc of Object.values(calculations)) {
+			console.log(changedFieldId);
+			if (!calc.dependsOn.includes(changedFieldId)) continue;
+
+			calc.calculate(table[lineIndex].ctx);
+		}
 	}
 </script>
 
 <div class="title">
-    <Label {label} {required} {secret} {unique}></Label>
+	<Label {label} {required} {secret} {unique}></Label>
 </div>
 <ResponsiveTable.Root let:ctx>
 	<ResponsiveTable.Header>
@@ -107,17 +150,16 @@
 									detailsCtx={table[lineIndex].detailsCtx}
 									ctx={table[lineIndex].ctx}
 									onChangeDetails={(value) => {
-										table[lineIndex].detailsCtx[row.fieldId] = value;
-										table = [...table];
-										handleChangeDetailsCtx();
+										handleChangeDetails(lineIndex, row.fieldId, value);
 									}}
 									onChange={(value) => {
-										table[lineIndex].ctx[row.fieldId] = value;
-										table = [...table];
-										handleChange();
+										handleChange(lineIndex, row.fieldId, value);
 									}}
 									id={row.fieldId}
 									value={table[lineIndex].ctx?.[row.fieldId] ?? null}
+									registerCalculation={(config)=>{
+                                        handleRegisterCalculation(lineIndex, config);
+                                    }}
 								></FieldInput>
 							{/each}
 							{#if columnIndex + 1 === columns.length}
@@ -167,17 +209,17 @@
 	</ResponsiveTable.Body>
 </ResponsiveTable.Root>
 <div class="title">
-    <Button onClick={handleAddLine}>
-        <h5>ajouter une rangée</h5>
-    </Button>
+	<Button onClick={handleAddLine}>
+		<h5>ajouter une rangée</h5>
+	</Button>
 </div>
 
 <style>
-.title {
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
+	.title {
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
 	:global(.table-container .line):has(.delete :global(.button):hover) {
 		background-color: var(--red-b);
 	}

package/src/lib/registry/fieldTypeRegistry/fieldTypes/calculation/CalculationColumn/Input.svelte

@@ -18,6 +18,7 @@
 		detailsCtx = {},
 		onChange = () => {},
 		onChangeDetails = () => {},
+		registerCalculation = () => {},
 		operator = '',
 		column1 = '',
 		column2 = '',
@@ -32,7 +33,7 @@
 	let previousValue1 = Symbol();
 	let previousValue2 = Symbol();
 
-	function getFieldValue(field) {
+	function getFieldValue(field, ctx) {
 		if (!field) return null;
 
 		// Champ local
@@ -68,18 +69,15 @@
 		return isNaN(v) ? 0 : v;
 	}
 
-	$effect(() => {
+	function calculate(ctx) {
 		if (!$field1 || !$field2) return;
 
-		const value1 = getFieldValue($field1);
-		const value2 = getFieldValue($field2);
+		const value1 = getFieldValue($field1, ctx);
+		const value2 = getFieldValue($field2, ctx);
 
 		if (value1 === null || value2 === null) return;
 
-		if (
-			value1 === previousValue1 &&
-			value2 === previousValue2
-		) {
+		if (value1 === previousValue1 && value2 === previousValue2) {
 			return;
 		}
 
@@ -110,10 +108,17 @@
 			value = result;
 			onChange(result);
 		}
-	});
+	};
 
 	onMount(() => {
 		isMounted = true;
+
+		// On donne notre calcul au parent
+		registerCalculation({
+			id,
+			calculate,
+			dependsOn:[column1, column2]
+		});
 	});
 </script>