mountain-ui 1.0.109 → 1.0.111

package/src/lib/registry/widgetTypeRegistry/widgetTypes/KPI/ConfigKPI.svelte

@@ -0,0 +1,201 @@
+<script>
+	import { Button, DropdownMenu, Input, sendRequest } from 'hamzus-ui';
+	import { frequencyText, frequencyTextForConfig } from './text';
+	import { entityRegistry } from '$lib/registry/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 = $state('count'); // count | sum | avg | min | max
+	const operations = ['count', 'sum', 'avg', 'min', 'max'];
+
+	let size = $state('4/1');
+	const sizes = ['4/1', '6/1', '8/1', '12/1'];
+
+	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,
+			size
+		});
+	}
+</script>
+
+<div class="config">
+	<Input label="titre" bind:value={title} placeholder="exemple"></Input>
+	<h5>opération</h5>
+	<DropdownMenu.Root direction="bottom">
+		<DropdownMenu.Trigger slot="trigger">
+			<Button variant="secondary">
+				<h5>{operation ?? 'choisissez une opération'}</h5>
+			</Button>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content slot="content" width="250px">
+			{#each operations as operationEl}
+				<Button
+					onClick={() => {
+						operation = operationEl;
+					}}
+					variant="ghost"
+					style="width:100%;"><h5>{operationEl}</h5></Button
+				>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+	<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)
+		)}
+		{#if operation !== 'count'}
+			<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>
+		{/if}
+		<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/KPI/KPI.svelte

@@ -0,0 +1,118 @@
+<script>
+	import { sendRequest, Skeleton } from 'hamzus-ui';
+	import { frequencyText, operationText } from './text';
+	import { onMount } from 'svelte';
+
+    let {
+        id = '',
+        title = '',
+        entityId = '',
+        frequency = '',
+        valueFieldId = '',
+        dateFieldId = '',
+        operation = '',
+    } = $props()
+
+	let total = $state(null);
+	let previousTotal = $state(null);
+
+	onMount(async () => {
+		const request = await sendRequest({
+			path: '/get-widget-data',
+			data: {
+				widgetLinkId: id
+			}
+		});
+
+		total = request.data[0];
+		previousTotal = request.data[1];
+	});
+
+	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 total === null}
+			<Skeleton style="width:{getRandomSizes()}px;height:32px;"></Skeleton>
+		{:else}
+			<h3>{total}</h3>
+		{/if}
+		<div class="bottom">
+			<h5>{frequencyText[frequency] ?? '-'} | {operationText[operation] ?? '-'}</h5>
+			<div class="right">
+				{#if total === null}
+					<h4 style="color: var(--green);">+</h4>
+					<Skeleton style="width:24px;height:16px;" />
+					<h4 style="color: var(--green);">%</h4>
+				{:else}
+					{@const percent = getPercent()}
+					{#if percent !== null}
+						<h4 style="color: var(--green);">+{getPercent()} %</h4>
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								opacity="0.4"
+								d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+								fill="#34C759"
+							/>
+							<path
+								d="M15.5295 10.9699L12.5295 7.96994C12.2395 7.67994 11.7595 7.67994 11.4695 7.96994L8.46945 10.9699C8.17945 11.2599 8.17945 11.7399 8.46945 12.0299C8.75945 12.3199 9.23945 12.3199 9.52945 12.0299L11.2495 10.3099V15.4999C11.2495 15.9099 11.5895 16.2499 11.9995 16.2499C12.4095 16.2499 12.7495 15.9099 12.7495 15.4999V10.3099L14.4695 12.0299C14.6195 12.1799 14.8095 12.2499 14.9995 12.2499C15.1895 12.2499 15.3795 12.1799 15.5295 12.0299C15.8195 11.7399 15.8195 11.2599 15.5295 10.9699Z"
+								fill="#34C759"
+							/>
+						</svg>
+					{/if}
+				{/if}
+			</div>
+		</div>
+	</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/KPI/index.js

@@ -0,0 +1,12 @@
+import ConfigKPI from "./ConfigKPI.svelte";
+import KPI from "./KPI.svelte";
+import { createWidgetType } from "../../createWidgetType";
+
+export default createWidgetType({
+    type: "KPI",
+    name: "KPI",
+    components: {
+        config: ConfigKPI,
+        component: KPI,
+    }
+})

package/src/lib/registry/widgetTypeRegistry/widgetTypes/KPI/text.js

@@ -0,0 +1,22 @@
+
+
+export const frequencyText = {
+    'day': 'aujourd\'hui',
+    'month': 'ce mois-ci',
+    'year': 'cette année'
+}
+
+export const frequencyTextForConfig = {
+    'day': 'par jour',
+    'month': 'par mois',
+    'year': 'par an'
+}
+
+
+export const operationText = {
+    'count': 'nombre d\'entrée',
+    'sum': 'somme',
+    'avg': 'moyenne',
+    'min': "min",
+    'max': "max"
+}

package/src/lib/registry/widgetTypeRegistry/widgetTypes/List/ConfigList.svelte

@@ -0,0 +1,199 @@
+<script>
+	import { Button, DropdownMenu, Input, sendRequest } from 'hamzus-ui';
+	import { entityRegistry } from '$lib/registry/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 valueFieldId = $state(null);
+	const valueField = $derived(entityRegistry.getField(valueFieldId));
+	let selectedValueOfValueField = $state(null);
+
+	let sortFieldId = $state(null);
+	const dateField = $derived(entityRegistry.getField(sortFieldId));
+	const dateFieldTypes = ['time-created_at', 'time-datetime', 'time-updated_at', 'primary'];
+
+	let operation = $state('count'); // count | sum | avg | min | max
+	const operations = ['count', 'sum', 'avg', 'min', 'max'];
+
+	let size = $state('12/2');
+	const sizes = ['8/2', '12/2'];
+
+	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)) {
+				sortFieldId = field.id;
+			}
+		}
+	}
+
+	async function handleSave() {
+		save({
+			id,
+			title,
+			entityId,
+			valueFieldId,
+            selectedValueOfValueField,
+			sortFieldId,
+			operation,
+			size
+		});
+	}
+</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 === 'list-radio')}
+		{@const availedDateFields = entity.fields.filter((field) =>
+			dateFieldTypes.includes(field.type)
+		)}
+		<h5>Précisé un status</h5>
+		<DropdownMenu.Root direction="bottom">
+			<DropdownMenu.Trigger slot="trigger">
+				<Button variant="secondary">
+					<h5>{valueField?.name ?? 'choisissez un champ pour status'}</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 status disponible</h3>
+						<p>
+							L'entité {entity?.plural_name} ne contient pas de champs nombre, permettant les calculs.
+						</p>
+					</div>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+		{#if valueField}
+            <h5>status</h5>
+			<DropdownMenu.Root direction="bottom">
+				<DropdownMenu.Trigger slot="trigger">
+					<Button variant="secondary">
+						<h5>{selectedValueOfValueField ?? 'choisissez un status'}</h5>
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content slot="content" width="250px">
+					{#if valueField.props.choices.length > 0}
+                    <Button
+								onClick={() => {
+									selectedValueOfValueField = null;
+								}}
+								variant="ghost"
+								style="width:100%;">aucun</Button
+							>
+						{#each valueField.props.choices as choice}
+							<Button
+								onClick={() => {
+									selectedValueOfValueField = choice.value;
+								}}
+								variant="ghost"
+								style="width:100%;">
+                                <h5 style="color: var({choice.color});">{choice.value}</h5></Button
+							>
+						{/each}
+					{:else}
+						<div class="nothing">
+							<h3>Aucun champs de status disponible</h3>
+							<p>
+								L'entité {entity?.plural_name} ne contient pas de champs nombre, permettant les calculs.
+							</p>
+						</div>
+					{/if}
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{/if}
+		<h5>Trié par</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={() => {
+								sortFieldId = 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>
+	{/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/List/List.svelte

@@ -0,0 +1,97 @@
+<script>
+	import { ChartLine, sendRequest, Skeleton } from 'hamzus-ui';
+	import { frequencyText, operationText } from './text';
+	import { onMount } from 'svelte';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import ViewEntriesTypeComponent from '$lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeComponent.svelte';
+
+	let {
+		id = '',
+		title = '',
+		entityId = '',
+		valueFieldId = '',
+		selectedValueOfValueField = '',
+		sortFieldId = '',
+		size = ''
+	} = $props();
+
+	let entity = $state(null);
+	let filters = $state(null);
+
+	onMount(async () => {
+		entity = entityRegistry.get(entityId);
+
+		let newFilters = {};
+		if (valueFieldId) {
+			const filterFieldName = entityRegistry.getField(valueFieldId);
+			newFilters = {
+				[filterFieldName.normalized_name]: selectedValueOfValueField
+			};
+		}
+		filters = { ...newFilters };
+	});
+
+	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">
+		{#if filters}
+			<ViewEntriesTypeComponent invisibleFilters={filters} type="table" entityId={82}>
+				<h4 slot="actions">{title}</h4>
+			</ViewEntriesTypeComponent>
+		{:else}
+			<div class="title">
+				<h4>{title}</h4>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.kpi-container {
+		width: 100%;
+		height: 100%;
+		min-height: 250px;
+	}
+
+	.kpi {
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--pad-m);
+		padding-bottom: var(--pad-m);
+		width: 100%;
+		height: 100%;
+		border: 1px solid var(--stroke);
+		border-radius: var(--radius-m);
+		overflow: auto;
+	}
+
+	.title {
+		padding: var(--pad-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/List/index.js

@@ -0,0 +1,12 @@
+import ConfigList from "./ConfigList.svelte";
+import List from "./List.svelte";
+import { createWidgetType } from "../../createWidgetType";
+
+export default createWidgetType({
+    type: "List",
+    name: "Liste d'entrée",
+    components: {
+        config: ConfigList,
+        component: List,
+    }
+})

package/src/lib/registry/widgetTypeRegistry/widgetTypes/List/text.js

@@ -0,0 +1,21 @@
+
+
+export const frequencyText = {
+    'day': 'aujourd\'hui',
+    'month': 'ce mois-ci',
+    'year': 'cette année'
+}
+
+export const frequencyTextForConfig = {
+    'day': 'par jour',
+    'month': 'par mois',
+    'year': 'par an'
+}
+
+export const operationText = {
+    'count': 'nombre d\'entrée',
+    'sum': 'somme',
+    'avg': 'moyenne',
+    'min': "min",
+    'max': "max"
+}

package/src/routes/exemple/[project_normalized_name]/+layout.svelte

@@ -85,7 +85,7 @@
 		<NavbarBtn href="{$targetProjectHref}/navigation" text="Navigation">
 			<NavbarIcon slot="endContent" color="var(--font-2)" icon="Grid|grid-4"></NavbarIcon>
 		</NavbarBtn>
-		<NavbarBtn text="Accueil">
+		<NavbarBtn href="{$targetProjectHref}/widgets" text="Accueil">
 			<NavbarIcon slot="endContent" color="var(--font-2)" icon="Essetionnal|home-2"></NavbarIcon>
 		</NavbarBtn>
 		<NavbarBtn text="Constantes">