mountain-ui 1.0.110 → 1.0.112

package/src/lib/registry/widgetGroupRegistry/components/WidgetGroup.svelte

@@ -0,0 +1,39 @@
+<script>
+	import { handlers } from 'svelte/legacy';
+	import EmptySlot from './EmptySlot.svelte';
+	import CreateWidgetDialog from '../../widgetTypeRegistry/components/CreateWidgetDialog.svelte';
+	import { sendRequest, toast } from 'hamzus-ui';
+	import { registerWidgetGroups } from '../registerWidgetGroups';
+	import { widgetGroupRegistry } from '../registry.svelte';
+	import Widget from '../../widgetTypeRegistry/components/Widget.svelte';
+
+	let { id = null, numberOfColumn = 1, children = [] } = $props();
+
+    const group = $derived(widgetGroupRegistry.get(id))
+</script>
+
+{#if group && group.children && group.children.length > 0}    
+    <div class="group-container" style="grid-template-columns:repeat({numberOfColumn}, minmax(0, 1fr));">
+        {#each Array.from({ length: numberOfColumn }) as column, index}
+            {const child = group.getChild(index + 1)}
+            {#if child}
+                <Widget type={child.type} {...child.props}></Widget>
+            {:else}
+                <div class="empty">
+
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}
+
+<style>
+	.group-container {
+		width: 100%;
+		display: grid;
+		padding: var(--pad-xl);
+		column-gap: var(--pad-m);
+		min-height: 150px;
+		transition: border 0.2s ease-out;
+	}
+</style>

package/src/lib/registry/widgetGroupRegistry/createWidget.js

@@ -0,0 +1,17 @@
+
+
+export function createWidget(config = {}) {
+    const widget = {
+        id: null,
+        group_id:null,
+        position:1,
+        type:null,
+        title:"",
+        props:{},
+    };
+
+    Object.assign(widget, config);
+
+
+    return widget;
+}

package/src/lib/registry/widgetGroupRegistry/createWidgetGroup.js

@@ -0,0 +1,19 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetGroupRegistry } from "./registry.svelte";
+
+export function createWidgetGroup(config = {}) {
+    const widgetGroup = {
+        id: null,
+        column_number:1,
+        position:1,
+        children:[],
+    };
+
+    Object.assign(widgetGroup, config);
+
+    widgetGroup.getChild = (position) =>{
+        return widgetGroup.children.find(c=>c.position === position)
+    }
+
+    return widgetGroup;
+}

package/src/lib/registry/widgetGroupRegistry/registerWidgetGroups.js

@@ -0,0 +1,37 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetGroupRegistry } from "./registry.svelte";
+import { createWidgetGroup } from "./createWidgetGroup";
+import { createWidget } from "./createWidget";
+
+
+export async function registerWidgetGroups() {
+
+    widgetGroupRegistry.unregisterAll()
+
+    const request = await sendRequest({
+        path:"/get-all-widget-groups",
+    })
+    
+    for (const group of request.data) {
+        let config = {
+            id: group.id,
+            column_number:group.column_number,
+            position:group.position,
+            children:[]
+        }
+
+        for (const child of group.children) {
+            config.children.push(createWidget({
+                id:child.id,
+                group_id:child.group_id,
+                position:child.position,
+                type:child.type,
+                title:child.title,
+                props:child.props,
+            }))
+            
+        }
+        widgetGroupRegistry.register(createWidgetGroup(config))
+
+    }
+}

package/src/lib/registry/widgetGroupRegistry/registry.svelte.js

@@ -0,0 +1,47 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createWidgetGroupRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($widgetGroups) => Object.values($widgetGroups));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(widgetGroup) {
+			store.update((widgetGroups) => ({
+				...widgetGroups,
+				[widgetGroup.id]: widgetGroup
+			}));
+		},
+
+		unregisterAll() {
+			store.update((widgetGroups) => {
+				return {};
+			});
+		},
+		unregister(id) {
+			store.update((widgetGroups) => {
+				const copy = { ...widgetGroups };
+
+				delete copy[id];
+
+				return copy;
+			});
+		},
+
+		get(id) {
+			return get(store)[id];
+		},
+
+		select(id) {
+			return derived(store, ($widgetGroups) => $widgetGroups[id]);
+		},
+
+		getAll() {
+			return all;
+		},
+	};
+}
+
+export const widgetGroupRegistry = createWidgetGroupRegistry();

package/src/lib/registry/widgetTypeRegistry/components/CreateWidgetDialog.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { AlertCard, Button, Dialog } from "hamzus-ui";
+	import WidgetTypeSelector from "./WidgetTypeSelector.svelte";
+	import WidgetConfig from "./WidgetConfig.svelte";
+
+    let {isOpen = $bindable(false), save = ()=>{}, ...props} = $props()
+
+    let type = $state(null)
+
+    async function handleSave(data) {
+        await save(data)
+
+        isOpen = false
+    }
+</script>
+
+<Dialog bind:isOpen>
+    <div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
+        <h3>Créer un nouveau widget</h3>
+        <WidgetTypeSelector onChange={(newType)=>{type = newType}}></WidgetTypeSelector>
+        {#if type}
+            <WidgetConfig save={handleSave} {type}></WidgetConfig>
+        {/if}
+    </div>
+</Dialog>

package/src/lib/registry/widgetTypeRegistry/components/Widget.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { widgetTypeRegistry } from "../registry.svelte";
+
+    let {type, ...props} = $props()
+
+    const widgetType = $derived(widgetTypeRegistry.get(type))
+</script>
+
+<div class="widget-case">
+    <svelte:component this={widgetType.components.component} {...props}></svelte:component>
+</div>
+
+<style>
+    .widget-case {
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/src/lib/registry/widgetTypeRegistry/components/WidgetConfig.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { widgetTypeRegistry } from "../registry.svelte";
+
+    let {type, save = (data)=>{}, ...props} = $props()
+
+    const widgetType = $derived(widgetTypeRegistry.get(type))
+
+    function handleSave(data) {
+        save({
+            ...data,
+            type:widgetType.type
+        })
+    }
+</script>
+
+<svelte:component this={widgetType.components.config} save={handleSave}  {...props}></svelte:component>

package/src/lib/registry/widgetTypeRegistry/components/WidgetPreview.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { IconButton } from 'hamzus-ui';
+	import { widgetTypeRegistry } from '../registry.svelte';
+
+	let { type, onDelete = () => {}, ...props } = $props();
+
+	const widgetType = $derived(widgetTypeRegistry.get(type));
+</script>
+
+<div class="widget-case">
+	<svelte:component this={widgetType.components.component} {...props}></svelte:component>
+	<div class="btn">
+		<IconButton variant="secondary" onClick={onDelete}>
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M20.9997 6.72998C20.9797 6.72998 20.9497 6.72998 20.9197 6.72998C15.6297 6.19998 10.3497 5.99998 5.11967 6.52998L3.07967 6.72998C2.65967 6.76998 2.28967 6.46998 2.24967 6.04998C2.20967 5.62998 2.50967 5.26998 2.91967 5.22998L4.95967 5.02998C10.2797 4.48998 15.6697 4.69998 21.0697 5.22998C21.4797 5.26998 21.7797 5.63998 21.7397 6.04998C21.7097 6.43998 21.3797 6.72998 20.9997 6.72998Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M8.50074 5.72C8.46074 5.72 8.42074 5.72 8.37074 5.71C7.97074 5.64 7.69074 5.25 7.76074 4.85L7.98074 3.54C8.14074 2.58 8.36074 1.25 10.6907 1.25H13.3107C15.6507 1.25 15.8707 2.63 16.0207 3.55L16.2407 4.85C16.3107 5.26 16.0307 5.65 15.6307 5.71C15.2207 5.78 14.8307 5.5 14.7707 5.1L14.5507 3.8C14.4107 2.93 14.3807 2.76 13.3207 2.76H10.7007C9.64074 2.76 9.62074 2.9 9.47074 3.79L9.24074 5.09C9.18074 5.46 8.86074 5.72 8.50074 5.72Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M15.2104 22.7501H8.79039C5.30039 22.7501 5.16039 20.8201 5.05039 19.2601L4.40039 9.19007C4.37039 8.78007 4.69039 8.42008 5.10039 8.39008C5.52039 8.37008 5.87039 8.68008 5.90039 9.09008L6.55039 19.1601C6.66039 20.6801 6.70039 21.2501 8.79039 21.2501H15.2104C17.3104 21.2501 17.3504 20.6801 17.4504 19.1601L18.1004 9.09008C18.1304 8.68008 18.4904 8.37008 18.9004 8.39008C19.3104 8.42008 19.6304 8.77007 19.6004 9.19007L18.9504 19.2601C18.8404 20.8201 18.7004 22.7501 15.2104 22.7501Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M13.6601 17.25H10.3301C9.92008 17.25 9.58008 16.91 9.58008 16.5C9.58008 16.09 9.92008 15.75 10.3301 15.75H13.6601C14.0701 15.75 14.4101 16.09 14.4101 16.5C14.4101 16.91 14.0701 17.25 13.6601 17.25Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M14.5 13.25H9.5C9.09 13.25 8.75 12.91 8.75 12.5C8.75 12.09 9.09 11.75 9.5 11.75H14.5C14.91 11.75 15.25 12.09 15.25 12.5C15.25 12.91 14.91 13.25 14.5 13.25Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+	</div>
+</div>
+
+<style>
+	.widget-case {
+		width: 100%;
+		height: 100%;
+        position: relative;
+	}
+
+    .btn {
+        position: absolute;
+        top: var(--pad-s);
+        right: var(--pad-s);
+        z-index: 3;
+    }
+</style>

package/src/lib/registry/widgetTypeRegistry/components/WidgetTypeButton.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { Button } from "hamzus-ui";
+	import { widgetTypeRegistry } from "../registry.svelte";
+
+    let {
+        type="",
+        style="",
+        variant="ghost",
+        ...props
+    } = $props()
+
+    const widgetType = $derived(widgetTypeRegistry.get(type))
+</script>
+
+
+<Button {variant} style="width:100%;{style}" {...props}>
+    <h5>{widgetType.name}</h5>
+</Button>
+
+

package/src/lib/registry/widgetTypeRegistry/components/WidgetTypeSelector.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { Button, DropdownMenu } from 'hamzus-ui';
+	import { widgetTypeRegistry } from '../registry.svelte';
+	import WidgetTypeButton from './WidgetTypeButton.svelte';
+
+	let { value = $bindable(null), onChange = (type) => {} } = $props();
+
+	const widgetTypes = widgetTypeRegistry.getAll();
+
+	function handleClick(type) {
+		value = type;
+		onChange(type);
+	}
+</script>
+
+<DropdownMenu.Root direction="bottom">
+	<DropdownMenu.Trigger slot="trigger">
+		<Button variant="secondary">
+			{#if value}
+				{@const widgetType = widgetTypeRegistry.get(value)}
+				<h5>{widgetType.name}</h5>
+			{:else}
+				<h5>séléctionner</h5>
+			{/if}
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content slot="content" width="250px">
+		{#each $widgetTypes as widgetType}
+			<WidgetTypeButton type={widgetType.type} onClick={() => {handleClick(widgetType.type)}}></WidgetTypeButton>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/lib/registry/widgetTypeRegistry/createWidgetType.js

@@ -0,0 +1,20 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetTypeRegistry } from "./registry.svelte";
+
+export function createWidgetType(config = {}) {
+    const widgetType = {
+        type: null,
+        name: null,
+        default_props:{},
+        components:{
+            config:null,
+            preview:null,
+            component:null,
+        }
+    };
+
+    Object.assign(widgetType, config);
+
+
+    return widgetType;
+}

package/src/lib/registry/widgetTypeRegistry/registerWidgetTypes.js

@@ -0,0 +1,14 @@
+import { sendRequest } from "hamzus-ui";
+import { widgetTypeRegistry } from "./registry.svelte";
+import Bar from "./widgetTypes/Bar";
+import Evolution from "./widgetTypes/Evolution";
+import KPI from "./widgetTypes/KPI";
+import List from "./widgetTypes/List";
+
+
+export async function registerWidgetTypes() {
+    widgetTypeRegistry.register(Bar)
+    widgetTypeRegistry.register(Evolution)
+    widgetTypeRegistry.register(KPI)
+    widgetTypeRegistry.register(List)
+}

package/src/lib/registry/widgetTypeRegistry/registry.svelte.js

@@ -0,0 +1,43 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createWidgetTypeRegistry() {
+	const store = writable({});
+
+	const all = derived(store, ($widgetTypes) => Object.values($widgetTypes));
+
+	return {
+		subscribe: store.subscribe,
+
+		register(widgetGroup) {
+			store.update((widgetTypes) => ({
+				...widgetTypes,
+				[widgetGroup.type]: widgetGroup
+			}));
+		},
+
+		unregister(type) {
+			store.update((widgetTypes) => {
+				const copy = { ...widgetTypes };
+
+				delete copy[type];
+
+				return copy;
+			});
+		},
+
+		get(type) {
+			return get(store)[type];
+		},
+
+		select(type) {
+			return derived(store, ($widgetTypes) => $widgetTypes[type]);
+		},
+
+		getAll() {
+			return all;
+		},
+
+	};
+}
+
+export const widgetTypeRegistry = createWidgetTypeRegistry();

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/Bar.svelte

@@ -0,0 +1,79 @@
+<script>
+	import { ChartBar, ChartLine, sendRequest, Skeleton } from 'hamzus-ui';
+	import { frequencyText, operationText } from './text';
+	import { onMount } from 'svelte';
+
+    let {id = '', title = '', entityId = '', frequency = '', valueFieldId = '', dateFieldId = '', operation = ''} = $props()
+
+	let data = $state(null);
+	let previousTotal = $state(null);
+
+	onMount(async () => {
+		const request = await sendRequest({
+			path: '/get-widget-data',
+			data: {
+				widgetLinkId: id
+			}
+		});
+
+
+        data = request.data
+	});
+
+	function getRandomSizes() {
+		const sizes = [60, 120, 80];
+
+		return sizes[Math.floor(Math.random() * sizes.length)];
+	}
+
+	function getPercent() {
+		if (previousTotal === 0) {
+			if (total === 0) return 0;
+			return null; // augmentation non calculable
+		}
+		return ((total - previousTotal) / previousTotal) * 100;
+	}
+</script>
+
+<div class="kpi-container">
+	<div class="kpi">
+		<h4>{title}</h4>
+		{#if data === null}
+			<Skeleton style="width:{getRandomSizes()}px;height:32px;"></Skeleton>
+		{:else}
+            <ChartBar {data}
+            ></ChartBar>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.kpi-container {
+		width: 100%;
+		height: 100%;
+		padding: var(--pad-m);
+	}
+
+	.kpi {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-xxl);
+		width: 100%;
+		height: 100%;
+		background-color: var(--bg-blur);
+		border-radius: var(--radius-m);
+	}
+
+	.bottom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+	}
+</style>

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/ConfigBar.svelte

@@ -0,0 +1,176 @@
+<script>
+	import { Button, DropdownMenu, Input, sendRequest } from 'hamzus-ui';
+	import { frequencyText, frequencyTextForConfig } from './text';
+	import { entityRegistry } from '../../entityRegistry/registry.svelte';
+
+    let {id = null, save = () => {}} = $props()
+
+	let title = $state('');
+
+    const entities = entityRegistry.getAll()
+
+	let entityId = $state(null);
+	const entity = $derived(entityRegistry.get(entityId));
+
+	let frequency = $state('month'); // day | month | year
+	const frequencies = ['day', 'month', 'year'];
+
+	let valueFieldId = $state(null);
+	const valueField = $derived(entityRegistry.getField(valueFieldId));
+
+	let dateFieldId = $state(null);
+	const dateField = $derived(entityRegistry.getField(dateFieldId));
+	const dateFieldTypes = ['time-created_at', 'time-datetime', 'time-updated_at'];
+
+	let operation = 'count'; // count | sum | avg | min | max
+	const operations = ['count', 'sum', 'avg', 'min', 'max'];
+
+	function handleSelectEntity(entity) {
+		entityId = entity.id;
+
+		// parcourir les fields pour set auto le field de value et de date
+		for (const field of entity.fields) {
+			if (field.type.startsWith('number-') || field.type.startsWith('calculation-')) {
+				valueFieldId = field.id;
+			}
+			if (dateFieldTypes.includes(field.type)) {
+				dateFieldId = field.id;
+			}
+		}
+	}
+
+	async function handleSave() {
+		save({
+			id,
+			title,
+			entityId,
+			frequency,
+			valueFieldId,
+			dateFieldId,
+			operation
+		});
+	}
+</script>
+
+<div class="config">
+	<Input label="titre" bind:value={title} placeholder="exemple"></Input>
+	<h5>Entité</h5>
+	<DropdownMenu.Root direction="bottom">
+		<DropdownMenu.Trigger slot="trigger">
+			<Button variant="secondary">
+				<h5>{entity?.plural_name ?? 'choisissez une entité'}</h5>
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content slot="content" width="250px">
+			{#each $entities as entity}
+				<Button
+					onClick={() => {
+						handleSelectEntity(entity);
+					}}
+					variant="ghost"
+					style="width:100%;"><h5>{entity.plural_name}</h5></Button
+				>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+	{#if entity}
+		{@const availedValueFields = entity.fields.filter(
+			(field) => field.type.startsWith('number-') || field.type.startsWith('calculation-')
+		)}
+		{@const availedDateFields = entity.fields.filter((field) =>
+			dateFieldTypes.includes(field.type)
+		)}
+         <h5>Champs pour valeurs</h5>
+            <DropdownMenu.Root direction="bottom">
+                <DropdownMenu.Trigger slot="trigger">
+                    <Button variant="secondary">
+                        <h5>{valueField?.name ?? 'choisissez un champ pour valeur'}</h5>
+                    </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content slot="content" width="250px">
+                    {#if availedValueFields.length > 0}
+                        {#each availedValueFields as field}
+                            <Button
+                                onClick={() => {
+                                    valueFieldId = field.id;
+                                }}
+                                variant="ghost"
+                                style="width:100%;"><h5>{field.name}</h5></Button
+                            >
+                        {/each}
+                    {:else}
+                        <div class="nothing">
+                            <h3>Aucun champs de valeur disponible</h3>
+                            <p>
+                                L'entité {entity?.plural_name} ne contient pas de champs nombre, permettant les calculs.
+                            </p>
+                        </div>
+                    {/if}
+                </DropdownMenu.Content>
+            </DropdownMenu.Root>
+		<h5>Champs pour date</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{dateField?.name ?? 'choisissez un champ pour date'}</h5>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="250px">
+				{#if availedDateFields.length > 0}
+					{#each availedDateFields as field}
+						<Button
+							onClick={() => {
+								dateFieldId = field.id;
+							}}
+							variant="ghost"
+							style="width:100%;"><h5>{field.name}</h5></Button
+						>
+					{/each}
+				{:else}
+					<div class="nothing">
+						<h3>Aucun champs de date disponible</h3>
+						<p>L'entité {entity?.plural_name} ne contient pas de champs de date.</p>
+					</div>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+		<h5>fréquence</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{frequency ? frequencyTextForConfig[frequency] : 'choisissez une fréquence'}</h5>
+				</Button>
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content slot="content" width="250px">
+				{#each frequencies as frequencyEl}
+					<Button
+						onClick={() => {
+							frequency = frequencyEl;
+						}}
+						variant="ghost"
+						style="width:100%;"><h5>{frequencyTextForConfig[frequencyEl]}</h5></Button
+					>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	{/if}
+
+    <Button onClick={handleSave}>
+        <h5>enregistrer</h5>
+    </Button>
+</div>
+
+<style>
+	.config {
+		display: flex;
+		flex-direction: column;
+        row-gap: var(--pad-m);
+	}
+
+	.nothing {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding: var(--pad-m);
+	}
+</style>

package/src/lib/registry/widgetTypeRegistry/widgetTypes/Bar/index.js

@@ -0,0 +1,13 @@
+import ConfigBar from "./ConfigBar.svelte";
+import Bar from "./Bar.svelte";
+import { createWidgetType } from "../../createWidgetType";
+
+
+export default createWidgetType({
+    type:"Bar",
+    name:"Graphique en bar",
+    components:{
+        config:ConfigBar,
+        component:Bar,
+    }
+})