mountain-ui 1.0.80 → 1.0.81

package/src/lib/registry/navigationRegistry/components/NewNavbarGroupDialog.svelte

@@ -0,0 +1,93 @@
+<script>
+	import ColorSelector from '../../../components/Colors/ColorSelector.svelte';
+	import Icon from '../../../components/Icons/Icon.svelte';
+	import IconSelector from '../../../components/Icons/IconSelector.svelte';
+	import { Button, Dialog, IconButton, Input } from 'hamzus-ui';
+
+	let { isOpen = $bindable(false), onCreate = async (icon, color, name) => {} } = $props();
+
+	let isCreating = $state(false);
+
+	let name = $state('');
+	let color = $state('var(--font-2)');
+	let icon = $state('Files|folder');
+
+	$effect(() => {
+		if (isOpen) return;
+
+		name = '';
+		color = 'var(--font-2)';
+		icon = 'Files|folder';
+	});
+
+	function handleChangeIcon(newIcon) {
+		icon = newIcon;
+	}
+
+	async function handleCreate() {
+		isCreating = true;
+		await onCreate(icon, color, name);
+		isCreating = false;
+		isOpen = false;
+	}
+</script>
+
+<Dialog bind:isOpen>
+	<div style="display:flex;row-gap:var(--pad-m);flex-direction:column;">
+		<h3>Nouveau groupe</h3>
+		<div class="icon-data">
+            <h5>Icon</h5>
+			<div class="right">
+                <ColorSelector
+				value={color}
+				onChange={(value) => {
+					color = value;
+				}}
+			></ColorSelector>
+			<IconSelector onClick={handleChangeIcon}>
+				<div class="icon" style="--icon-color:{color};">
+					<Icon value={icon}></Icon>
+				</div>
+			</IconSelector>
+            </div>
+		</div>
+		<Input bind:value={name} placeholder="nom du groupe" />
+		<Button loading={isCreating} onClick={handleCreate}>créer</Button>
+	</div>
+</Dialog>
+
+<style>
+	.icon-data {
+		display: flex;
+		align-items: center;
+        column-gap: var(--pad-m);
+        justify-content: space-between;
+        width: 100%;
+        padding: var(--pad-s) 0;
+        border-bottom: 1px solid var(--bg-2);
+	}
+
+    .right {
+		display: flex;
+		align-items: center;
+        column-gap: var(--pad-m);
+    }
+	.icon {
+		width: fit-content;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 35px;
+		min-height: 35px;
+		background-color: var(--bg-blur);
+		border-radius: var(--radius-m);
+        cursor: pointer;
+	}
+	.icon :global(svg path) {
+		fill: var(--icon-color);
+	}
+
+    .icon:hover {
+        background-color: var(--bg-2);
+    }
+</style>

package/src/lib/registry/navigationRegistry/createNavigation.js

@@ -0,0 +1,21 @@
+
+
+export function createNavigation(config = {}) {
+	const entity = {
+		id: null,
+		type:"group", // group | entity
+        name:null,
+        parent_id:null,
+        entity_id:null,
+        position:null,
+        icon:null,
+        color:null,
+	};
+
+	Object.assign(entity, config);
+
+	
+
+	return entity;
+}
+

package/src/lib/registry/navigationRegistry/registerNavigation.js

@@ -0,0 +1,63 @@
+import { sendRequest } from "hamzus-ui";
+import { navigationRegistry } from "./registry.svelte";
+import { createNavigation } from "./createNavigation";
+import { get } from "svelte/store";
+import { entityRegistry } from "../entityRegistry/registry.svelte";
+
+
+export async function registerNavigation() {
+    navigationRegistry.unregisterAll();
+
+    // recuperer les entités du projet
+    const request = await sendRequest({
+        path: '/get-navigation'
+    });
+
+    let addedEntityId = {}
+
+    for (const group of request.data.groups) {
+        navigationRegistry.register(createNavigation({
+            id: group.id,
+            type: "group",
+            name: group.name,
+            parent_id: null,
+            position: group.position,
+            icon: group.icon,
+            color: group.color,
+        }))
+
+        for (const child of group.children) {
+            const entity = entityRegistry.get(child.entity_id)
+            
+            if (!entity) {
+                continue;
+            }
+            
+            navigationRegistry.register(createNavigation({
+                id: child.id,
+                type: "entity",
+                name: entity.plural_name,
+                parent_id: group.id,
+                entity_id: child.entity_id,
+                position: child.position,
+            }))
+
+            addedEntityId[child.entity_id] = true
+        }
+    }
+
+    const allEntities = get(entityRegistry.getAll())
+
+    for (const entity of allEntities) {
+        if (addedEntityId[entity.id]) continue
+        
+        navigationRegistry.register(createNavigation({
+            id: "e_" + entity.id,
+            type: "entity",
+            name: entity.plural_name,
+            parent_id: null,
+            entity_id: entity.id,
+            position: null,
+        }))
+    }
+}

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

@@ -0,0 +1,100 @@
+import { writable, derived, get } from 'svelte/store';
+
+function createNavigationRegistry() {
+    const store = writable({});
+
+    const tinyWidth = 50
+    const bigWidth = 255
+
+    const navbarState = writable({
+        isOpen: false,
+        width: 0,
+    })
+
+    const all = derived(store, ($navigation_element) => Object.values($navigation_element));
+
+    return {
+        subscribe: store.subscribe,
+
+        register(entity) {
+            store.update((navigation_element) => ({
+                ...navigation_element,
+                [entity.id]: entity
+            }));
+        },
+
+        unregister(id) {
+            store.update((navigation_element) => {
+                const copy = { ...navigation_element };
+
+                delete copy[id];
+
+                return copy;
+            });
+        },
+
+        unregisterAll(id) {
+            store.update((navigation_element) => {
+                return {};
+            });
+        },
+
+        get(id) {
+            return get(store)[id];
+        },
+
+        select(id) {
+            return derived(store, ($navigation_element) => $navigation_element[id]);
+        },
+
+
+
+        getAll() {
+            return all;
+        },
+        getAllGroup() {
+            return derived(store, ($navigation_element) => Object.values($navigation_element).filter(ne => ne.type === "group"));
+        },
+        getAllWithNoGroup() {
+            return derived(store, ($navigation_element) => Object.values($navigation_element).filter(ne => ne.parent_id === null && ne.type !== "group"));
+        },
+        getAllFromGroup(groupId) {
+            return Object.values(get(store))
+                .filter(ne => ne.parent_id === groupId)
+                .sort((a, b) => a.position - b.position);
+        },
+
+        selectNavbarState() {
+            return navbarState;
+        },
+        enableNavbar() {
+            navbarState.update((navState) => {
+                navState.width = tinyWidth
+                navState.isOpen = false
+                return navState
+            })
+        },
+        desableNavbar() {
+            navbarState.update((navState) => {
+                navState.width = 0
+                navState.isOpen = false
+
+                return navState
+            })
+        },
+        toggleNavbar() {
+            navbarState.update((navState) => {
+                navState.isOpen = !navState.isOpen
+                if (navState.isOpen) {
+                    navState.width = bigWidth
+                } else {
+                    navState.width = tinyWidth
+                }
+
+                return navState
+            })
+        }
+    };
+}
+
+export const navigationRegistry = createNavigationRegistry();

package/src/lib/registry/projectRegistry/components/ProjectButton.svelte

@@ -10,5 +10,6 @@
 {#if project}
 	<Button {...props} {variant}>
 		<h5>{project.name}</h5>
+        <slot name="endContent"/>
 	</Button>
 {/if}

package/src/lib/registry/projectRegistry/components/TargetProjectSubscriptionCard.svelte

@@ -0,0 +1,283 @@
+<script>
+	import { IconButton } from 'hamzus-ui';
+	import { projectRegistry } from '../registry.svelte';
+	import ProjectButton from './ProjectButton.svelte';
+
+	let {
+		getProjectHref = (p) => {
+			return `/exemple/${p.normalized_name}/home`;
+		}
+	} = $props();
+
+	const allProject = $derived(projectRegistry.getAll());
+
+	const targetProject = $derived(projectRegistry.selectTargetProject());
+	const targetProjectPercent = $derived($targetProject?.getPercent() ?? null);
+	const targetProjectPercentDetails = $derived($targetProject?.getPercentDetails() ?? null);
+
+	const text = {
+		users: 'Utilisateurs',
+		fields: 'Champs',
+		constants: 'Constantes',
+		workflow_nodes: 'Workflow node',
+		emails: 'Emails',
+		pdfs: 'Pdfs'
+	};
+
+	let animatedProgress = $state(0);
+
+	let changeProjectIsOpen = $state(false);
+	let detailsIsOpen = $state(false);
+
+	$effect(() => {
+		if (targetProjectPercent === null) {
+			animatedProgress = 0;
+			return;
+		}
+
+		const duration = 1000;
+		const startTime = performance.now();
+
+		function animate(currentTime) {
+			const elapsed = currentTime - startTime;
+			const percentage = Math.min(elapsed / duration, 1);
+
+			animatedProgress = targetProjectPercent * percentage;
+
+			if (percentage < 1) {
+				requestAnimationFrame(animate);
+			}
+		}
+
+		requestAnimationFrame(animate);
+	});
+</script>
+
+<div class="target-project">
+	<div class="progress" style="--progress: {animatedProgress}%">
+		<div class="top-project">
+			<div class="project">
+				<div class="left">
+					<h5>Projet actuel</h5>
+					<h4 style="color:var(--font-1);">{$targetProject?.name ?? 'aucun projet selectionné'}</h4>
+				</div>
+				<div class="right">
+					<IconButton
+						onClick={() => {
+							changeProjectIsOpen = !changeProjectIsOpen;
+						}}
+						variant="ghost"
+						size="24px"
+					>
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M15.4897 20.7599C15.2997 20.7599 15.1097 20.6899 14.9597 20.5399C14.6697 20.2499 14.6697 19.7699 14.9597 19.4799L19.9697 14.4699C20.2597 14.1799 20.7397 14.1799 21.0297 14.4699C21.3197 14.7599 21.3197 15.2399 21.0297 15.5299L16.0197 20.5399C15.8697 20.6799 15.6797 20.7599 15.4897 20.7599Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M20.5 15.7402H3.5C3.09 15.7402 2.75 15.4002 2.75 14.9902C2.75 14.5802 3.09 14.2402 3.5 14.2402H20.5C20.91 14.2402 21.25 14.5802 21.25 14.9902C21.25 15.4002 20.91 15.7402 20.5 15.7402Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M3.49945 9.75994C3.30945 9.75994 3.11945 9.68994 2.96945 9.53994C2.67945 9.24994 2.67945 8.76994 2.96945 8.47994L7.97945 3.46994C8.26945 3.17994 8.74945 3.17994 9.03945 3.46994C9.32945 3.75994 9.32945 4.23994 9.03945 4.52994L4.02945 9.53994C3.88945 9.67994 3.68945 9.75994 3.49945 9.75994Z"
+								fill="#292D32"
+							/>
+							<path
+								d="M20.5 9.75977H3.5C3.09 9.75977 2.75 9.41977 2.75 9.00977C2.75 8.59977 3.09 8.25977 3.5 8.25977H20.5C20.91 8.25977 21.25 8.59977 21.25 9.00977C21.25 9.41977 20.91 9.75977 20.5 9.75977Z"
+								fill="#292D32"
+							/>
+						</svg>
+					</IconButton>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="progress">
+		{#if changeProjectIsOpen}
+			<div class="all-project">
+				{#each $allProject as project}
+					<ProjectButton
+                        variant={project.id === $targetProject?.id ? "secondary" : "ghost"}
+						style="width:100%;justify-content:space-between;align-items:center;"
+						href={getProjectHref(project)}
+						id={project.id}
+					>
+						<div slot="endContent" class="project-arrow">
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M14.4291 18.8201C14.2391 18.8201 14.0491 18.7501 13.8991 18.6001C13.6091 18.3101 13.6091 17.8301 13.8991 17.5401L19.4391 12.0001L13.8991 6.46012C13.6091 6.17012 13.6091 5.69012 13.8991 5.40012C14.1891 5.11012 14.6691 5.11012 14.9591 5.40012L21.0291 11.4701C21.3191 11.7601 21.3191 12.2401 21.0291 12.5301L14.9591 18.6001C14.8091 18.7501 14.6191 18.8201 14.4291 18.8201Z"
+									fill="#292D32"
+								/>
+								<path
+									d="M20.33 12.75H3.5C3.09 12.75 2.75 12.41 2.75 12C2.75 11.59 3.09 11.25 3.5 11.25H20.33C20.74 11.25 21.08 11.59 21.08 12C21.08 12.41 20.74 12.75 20.33 12.75Z"
+									fill="#292D32"
+								/>
+							</svg>
+						</div>
+					</ProjectButton>
+				{/each}
+			</div>
+		{/if}
+	</div>
+	{#if $targetProject}
+		<div class="line">
+			<div>
+				<h5>
+					Plan <span style="color:var(--font-1);">{$targetProject.active_subscription.name}</span>
+				</h5>
+				<h5>
+					{targetProjectPercent.toFixed(2) ?? '-'} <span style="color: var(--font-3);">%</span>
+				</h5>
+			</div>
+			<IconButton
+				onClick={() => {
+					detailsIsOpen = !detailsIsOpen;
+				}}
+				variant="ghost"
+				size="24px"
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M11.9995 16.8001C11.2995 16.8001 10.5995 16.5301 10.0695 16.0001L3.54953 9.48014C3.25953 9.19014 3.25953 8.71014 3.54953 8.42014C3.83953 8.13014 4.31953 8.13014 4.60953 8.42014L11.1295 14.9401C11.6095 15.4201 12.3895 15.4201 12.8695 14.9401L19.3895 8.42014C19.6795 8.13014 20.1595 8.13014 20.4495 8.42014C20.7395 8.71014 20.7395 9.19014 20.4495 9.48014L13.9295 16.0001C13.3995 16.5301 12.6995 16.8001 11.9995 16.8001Z"
+						fill="#292D32"
+					/>
+				</svg>
+			</IconButton>
+		</div>
+	{/if}
+</div>
+<div class="details" class:active={detailsIsOpen}>
+	{#if targetProjectPercentDetails}
+		{#each Object.entries(text) as [key, text]}
+			<div class="details-line" style="--width:{targetProjectPercentDetails[key].percent}%;">
+				<h5>{text}</h5>
+				<h6>
+					{targetProjectPercentDetails[key].number} / {targetProjectPercentDetails[key].max_number}
+				</h6>
+				<span class="fill-line"></span>
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.target-project {
+		position: relative;
+		padding: var(--pad-xs);
+		background-color: var(--bg-blur);
+		border-top: 1px solid var(--bg-2);
+	}
+
+	.progress {
+		padding: 2px;
+		background: var(--bg-2);
+		border-radius: var(--radius-l);
+        transition: background .2s ease-out;
+	}
+	:global(body > .content-container) .progress {
+		background: conic-gradient(var(--accent) 0% var(--progress), var(--bg-2) var(--progress) 100%);
+	}
+
+	.project {
+		display: flex;
+		justify-content: space-between;
+		padding: var(--pad-s);
+		border-radius: var(--radius-m);
+		border: 1px solid var(--stroke);
+		background-color: var(--bg-1);
+	}
+
+	.all-project {
+		margin-top: var(--pad-xs);
+		padding: var(--pad-xs);
+		background-color: var(--bg-1);
+		border-radius: var(--radius-m);
+	}
+
+	.project-arrow {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.project-arrow :global(svg) {
+		width: 16px;
+		height: auto;
+	}
+	.project-arrow :global(svg path) {
+		fill: var(--font-2);
+	}
+
+	.line {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 var(--pad-s);
+	}
+
+	.details {
+		display: none;
+		flex-direction: column;
+		width: 100%;
+		background-color: var(--bg-blur);
+	}
+
+	.details.active {
+		display: flex;
+	}
+
+	.details-line {
+		position: relative;
+		width: 100%;
+		padding: var(--pad-xs);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		overflow: clip;
+	}
+	.details-line * {
+		z-index: 1;
+	}
+	.details-line .fill-line {
+		animation: fill-line 0.2s ease-out;
+		height: 100%;
+		width: var(--width);
+		position: absolute;
+		left: 0px;
+		background-color: var(--accent-b);
+		opacity: 0;
+		user-select: none;
+		pointer-events: none;
+        transition: width .2s ease-out;
+	}
+
+	:global(body > .content-container) .fill-line {
+		opacity: 1;
+	}
+
+	@keyframes fill-line {
+		from {
+			width: 0px;
+		}
+		to {
+			width: var(--width);
+		}
+	}
+</style>