mountain-ui 1.0.110 → 1.0.111

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">

package/src/routes/exemple/[project_normalized_name]/home/+page.svelte

@@ -1 +1,61 @@
-<h3>home</h3>
+<script>
+	import WidgetGroup from '$lib/registry/widgetGroupRegistry/components/WidgetGroup.svelte';
+	import { registerWidgetGroups } from '$lib/registry/widgetGroupRegistry/registerWidgetGroups';
+	import { widgetGroupRegistry } from '$lib/registry/widgetGroupRegistry/registry.svelte';
+	import { IconButton, sendRequest, toast } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+	const allWidgetGroup = widgetGroupRegistry.getAll();
+
+	onMount(() => {
+		registerWidgetGroups();
+	});
+
+</script>
+
+<div class="content">
+	<div class="container">
+		<div class="title">
+			<h3>Accueil</h3>
+		</div>
+		<div class="rows">
+			{#each $allWidgetGroup as widgetGroup}
+				<WidgetGroup id={widgetGroup.id} numberOfColumn={widgetGroup.column_number}></WidgetGroup>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 60px var(--pad-m);
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: min(100%, 1000px);
+	}
+
+	.title {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--pad-s);
+		border-bottom: 1px solid var(--bg-2);
+	}
+
+	.rows {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		row-gap: var(--pad-s);
+		padding: var(--pad-s);
+	}
+</style>

package/src/routes/exemple/[project_normalized_name]/navigation/+page.svelte

@@ -16,6 +16,7 @@
 
 	let newGroupIsOpen = $state(false);
 
+
 	function handleChangeDragedElement(id) {
 		dragedElementEntityId = id;
 	}
@@ -54,6 +55,31 @@
 
 		await registerNavigation();
 	}
+
+    async function handleEditGroup(id, icon, color, name) {
+        const request = await sendRequest({
+			path: '/edit-group-navigation',
+			data: {
+				id,
+				icon,
+				color,
+				name
+			}
+		});
+
+		await registerNavigation();
+
+    }
+    async function handleDeleteGroup(id) {
+        const request = await sendRequest({
+			path: '/delete-group-navigation',
+			data: {
+				groupId:id,
+			}
+		});
+
+		await registerNavigation();
+    }
 </script>
 
 <NewNavbarGroupDialog onCreate={handleCreate} bind:isOpen={newGroupIsOpen}></NewNavbarGroupDialog>
@@ -93,6 +119,8 @@
 						groupIsOpen[group.id] = value;
 						console.log(value);
 					}}
+                    onEdit={handleEditGroup}
+                    onDelete={handleDeleteGroup}
 					activeDrag={dragedElementEntityId}
 					onDrop={handleDropElementOnGroup}
 					id={group.id}

package/src/routes/exemple/[project_normalized_name]/widgets/+page.svelte

@@ -0,0 +1,92 @@
+<script>
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import NavigationGroupRow from '$lib/registry/navigationRegistry/components/NavigationGroupRow.svelte';
+	import NavigationRow from '$lib/registry/navigationRegistry/components/NavigationRow.svelte';
+	import NewNavbarGroupDialog from '$lib/registry/navigationRegistry/components/NewNavbarGroupDialog.svelte';
+	import { registerNavigation } from '$lib/registry/navigationRegistry/registerNavigation';
+	import { navigationRegistry } from '$lib/registry/navigationRegistry/registry.svelte';
+	import GroupPreview from '$lib/registry/widgetGroupRegistry/components/GroupPreview.svelte';
+	import NewWidgetGroup from '$lib/registry/widgetGroupRegistry/components/NewWidgetGroup.svelte';
+	import { registerWidgetGroups } from '$lib/registry/widgetGroupRegistry/registerWidgetGroups';
+	import { widgetGroupRegistry } from '$lib/registry/widgetGroupRegistry/registry.svelte';
+	import { IconButton, sendRequest, toast } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+	const allWidgetGroup = widgetGroupRegistry.getAll();
+
+	onMount(() => {
+		registerWidgetGroups();
+	});
+
+	async function handleCreate(numberOfColumns) {
+		const request = await sendRequest({
+			path: '/create-group-widget',
+			data: {
+				numberOfColumns
+			}
+		});
+
+		if (request.statusType === 'error') {
+			toast.error({
+				title: 'Erreur !',
+				description: request.message
+			});
+			return;
+		}
+
+		toast.success({
+			title: 'Succès !',
+			description: request.message
+		});
+
+        registerWidgetGroups()
+	}
+</script>
+
+<div class="content">
+	<div class="container">
+		<div class="title">
+			<h3>Accueil</h3>
+		</div>
+		<div class="rows">
+			{#each $allWidgetGroup as widgetGroup}
+				<GroupPreview id={widgetGroup.id} numberOfColumn={widgetGroup.column_number}></GroupPreview>
+			{/each}
+			<NewWidgetGroup onCreate={handleCreate}></NewWidgetGroup>
+		</div>
+	</div>
+</div>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 60px var(--pad-m);
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: min(100%, 1000px);
+	}
+
+	.title {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--pad-s);
+		border-bottom: 1px solid var(--bg-2);
+	}
+
+	.rows {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		row-gap: var(--pad-s);
+		padding: var(--pad-s);
+	}
+</style>