mountain-ui 1.0.36 → 1.0.38

package/src/routes/+page.svelte

@@ -15,8 +15,8 @@
 	import FieldTypeTableView from '$lib/registry/fieldTypeRegistry/components/FieldTypeTableView.svelte';
 	import FieldTypeView from '$lib/registry/fieldTypeRegistry/components/FieldTypeView.svelte';
 	import { fieldTypeRegistry } from '$lib/registry/fieldTypeRegistry/registry.svelte';
-	import ViewTypeComponent from '$lib/registry/viewTypeRegistry/components/ViewTypeComponent.svelte';
-	import { viewTypeRegistry } from '$lib/registry/viewTypeRegistry/registry.svelte';
+	import ViewTypeComponent from '$lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeComponent.svelte';
+	import { viewTypeRegistry } from '$lib/registry/viewEntriesTypeRegistry/registry.svelte';
 	import { onMount } from 'svelte';
 
 	const entities = entityRegistry.getAll();
@@ -121,7 +121,7 @@
 <h3>Vues</h3>
 <div class="view">
     <h3>{tableView.name}</h3>
-    <!-- <ViewTypeComponent type="table" entityId={82}></ViewTypeComponent> -->
+    <ViewTypeComponent type="table" entityId={82}></ViewTypeComponent>
 </div>
 <h3>Entré</h3>
 <div class="entry">

package/src/routes/exemple/+layout.svelte

@@ -0,0 +1,44 @@
+<script>
+	import { page } from '$app/stores';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import ProjectDropdown from '$lib/registry/projectRegistry/components/ProjectDropdown.svelte';
+	import { projectRegistry } from '$lib/registry/projectRegistry/registry.svelte';
+
+    let {children} = $props()
+
+    
+
+    function getHref(project) {
+        return "/exemple/" + project.normalized_name + "/home"
+    }
+    function isActive(project) {
+        return project.normalized_name === $page.params.project_normalized_name
+    }
+
+</script>
+
+<nav class="top-bar">
+    <h3>Mountain UI</h3>
+	<div class="project-selector">
+		<ProjectDropdown projectId={projectRegistry.getFromNormalizedName($page.params.project_normalized_name)?.id ?? null} hubHref="/exemple" {getHref} {isActive}></ProjectDropdown>
+	</div>
+    
+</nav>
+{@render children()}
+
+<style>
+	.top-bar {
+		position: sticky;
+		top: 0px;
+		width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+		padding: var(--pad-s);
+		border-bottom: 1px solid var(--stroke);
+	}
+	.project-selector {
+		width: min(100%, 300px);
+	}
+</style>

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

@@ -0,0 +1,100 @@
+<script>
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import EntityButton from '$lib/registry/entityRegistry/components/EntityButton.svelte';
+	import { createEntity } from '$lib/registry/entityRegistry/createEntity';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import { init, RotativeLoader, sendRequest } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+	let { children } = $props();
+
+	let loading = $state(true);
+
+	const entities = entityRegistry.getAll();
+
+	beforeNavigate((test) => {
+        if (test.from.params.project_normalized_name === test.to.params.project_normalized_name) return
+        
+		loading = true;
+	});
+
+	afterNavigate(getData);
+
+	onMount(getData);
+
+	async function getData() {
+        console.log(loading);
+        
+        if (loading === false) return
+		// set le projet
+		init({
+			requestWithCredentials: true,
+			on401: async () => {
+				const response = await sendRequest({
+					path: '/refresh-session'
+				});
+
+				if (!response || response.statusType === 'error') {
+					// si il est pas encore dans la page de login on redirige
+					const path = '/login';
+
+					window.location.href = defaultUnlogged;
+				}
+			},
+			replayAfter401: true,
+			addData: () => {
+				return {
+					__project_normalized_name: $page.params.project_normalized_name
+				};
+			}
+		});
+
+		entityRegistry.unregisterAll();
+
+		// recuperer les entités du projet
+		const requestStructures = await sendRequest({
+			path: '/get-all-entities'
+		});
+
+		for (const entity of requestStructures.data) {
+			entityRegistry.register(createEntity(entity));
+		}
+
+		loading = false;
+	}
+</script>
+
+<div class="entities">
+	{#each $entities as entity}
+		<EntityButton
+			id={entity.id}
+			href={entity.slug}
+			variant={entity.slug === $page.params.entity_slug ? 'secondary' : 'ghost'}
+		></EntityButton>
+	{/each}
+</div>
+{#if loading}
+	<div class="loader">
+		<RotativeLoader></RotativeLoader>
+	</div>
+{:else}
+	{@render children()}
+{/if}
+
+<style>
+	.entities {
+		width: 100%;
+		height: 40px;
+		position: sticky;
+		top: 43px;
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		padding: var(--pad-s);
+		border-bottom: 1px solid var(--stroke);
+		overflow-x: auto;
+        flex-shrink: 0;
+        background-color: var(--bg-1);
+	}
+</style>

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

@@ -0,0 +1,44 @@
+<script>
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import { RotativeLoader } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+    let {children} = $props()
+
+	let loading = $state(true);
+
+	let entityNotFound = $state(false);
+
+	beforeNavigate((page) => {
+        if (page.from.params.entity_slug === page.to.params.entity_slug) return
+        entityNotFound = false
+		loading = true;
+	});
+
+	afterNavigate(getData);
+
+	onMount(getData);
+
+	function getData() {
+        if (loading === false) return
+
+        if (!entityRegistry.getFromSlug($page.params.entity_slug)) entityNotFound = true
+
+		loading = false;
+	}
+</script>
+
+{#if loading}
+	<div class="loader">
+		<RotativeLoader></RotativeLoader>
+	</div>
+{:else if entityNotFound}
+    <div class="not-found">
+        <h3>Entité introuvable !</h3>
+        <p>L'entité n'a pas peu être trouvé !</p>
+    </div>
+{:else}
+{@render children()}
+{/if}

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

@@ -0,0 +1,182 @@
+<script>
+	import { beforeNavigate, goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+	import ViewEntriesProfilComponent from '$lib/registry/viewEntriesProfilRegistery/components/ViewEntriesProfilComponent.svelte';
+	import ViewEntriesProfilDropdown from '$lib/registry/viewEntriesProfilRegistery/components/ViewEntriesProfilDropdown.svelte';
+	import { createViewEntriesProfil } from '$lib/registry/viewEntriesProfilRegistery/createViewEntriesProfil';
+	import { registerDefaultViewProfil } from '$lib/registry/viewEntriesProfilRegistery/registerDefaultViewEntriesProfils';
+	import { viewEntriesProfilRegistry } from '$lib/registry/viewEntriesProfilRegistery/registry.svelte';
+	import ViewEntriesTypeDropdown from '$lib/registry/viewEntriesTypeRegistry/components/ViewEntriesTypeDropdown.svelte';
+	import { Button, DropdownMenu, IconButton, sendRequest } from 'hamzus-ui';
+	import { onMount } from 'svelte';
+
+	const targetEntity = $derived(entityRegistry.getFromSlug($page.params.entity_slug));
+
+	let targetViewId = $state(null);
+
+	let viewProps = $state({});
+
+	beforeNavigate(() => {
+		targetViewId = null;
+	});
+
+	onMount(loadAllViewEntriesProfil);
+
+	async function loadAllViewEntriesProfil() {
+		viewEntriesProfilRegistry.unregisterAll();
+
+		registerDefaultViewProfil();
+
+		const request = await sendRequest({
+			path: '/get-all-views-from-entity-id',
+			data: {
+				entityId: targetEntity.id
+			}
+		});
+
+		let defaultView = 0;
+
+		for (const viewProfil of request.data) {
+			console.log(viewProfil);
+
+			if (viewProfil.is_default) {
+				defaultView = viewProfil.id;
+			}
+
+			viewEntriesProfilRegistry.register(
+				createViewEntriesProfil({
+					id: viewProfil.id,
+					is_default: viewProfil.is_default,
+					name: viewProfil.name,
+					type: 'table',
+					props: viewProfil.props
+				})
+			);
+		}
+
+		targetViewId = defaultView;
+	}
+
+	function onChange(id) {
+		targetViewId = id;
+	}
+
+	function handleClick(data) {
+		console.log();
+		goto(
+			`/exemple/${$page.params.project_normalized_name}/${$page.params.entity_slug}/${data.id.props.value.flat}`
+		);
+	}
+
+	function onChangeProps(props) {
+		viewProps = props;
+	}
+
+	async function handleCreateViewProfil(name) {
+		console.log(viewProps);
+
+		const request = await sendRequest({
+			path: '/create-view',
+			data: {
+				entityId: targetEntity.id,
+				defaultProps: JSON.stringify(viewProps),
+				name
+			}
+		});
+	}
+	async function handleDesableDefault() {
+		const request = await sendRequest({
+			path: '/desable-default-view',
+			data: {
+				entityId: targetEntity.id
+			}
+		});
+
+		loadAllViewEntriesProfil();
+	}
+	async function handleDeleteViewProfil(id) {
+		const request = await sendRequest({
+			path: '/delete-view',
+			data: {
+				viewId: id
+			}
+		});
+
+		loadAllViewEntriesProfil();
+	}
+
+	async function handleSetAsDefaultViewProfil(id) {
+		const request = await sendRequest({
+			path: '/set-as-default-view',
+			data: {
+				viewId: id
+			}
+		});
+
+		loadAllViewEntriesProfil();
+	}
+</script>
+
+<div class="top-bar">
+	<h4>{targetEntity.plural_name}</h4>
+	<div class="view-profil-selector">
+		<ViewEntriesProfilDropdown
+			{onChange}
+			id={targetViewId}
+			onCreate={handleCreateViewProfil}
+			onDesableAsDefault={handleDesableDefault}
+			onSetAsDefault={handleSetAsDefaultViewProfil}
+			onDelete={handleDeleteViewProfil}
+		></ViewEntriesProfilDropdown>
+	</div>
+</div>
+{#if targetViewId !== null && targetEntity}
+	<ViewEntriesProfilComponent
+		id={targetViewId}
+		entityId={targetEntity.id}
+		onClick={handleClick}
+		{onChangeProps}
+	>
+		<div slot="actions">
+			<DropdownMenu.Root direction="bottom">
+				<DropdownMenu.Trigger slot="trigger">
+					<IconButton size="26px" variant="outline"
+						><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>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content slot="content" width="250px">
+					<Button href="/exemple/{$page.params.project_normalized_name}/{$page.params.entity_slug}/create" variant="ghost" style="width:100%;">
+						<h5>créer</h5>
+					</Button>
+					<Button variant="ghost" style="width:100%;">
+						<h5>importer</h5>
+					</Button>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	</ViewEntriesProfilComponent>
+{/if}
+
+<style>
+	.top-bar {
+		position: sticky;
+		top: 0px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--pad-s);
+		border-bottom: 1px solid var(--stroke);
+	}
+</style>

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

@@ -0,0 +1,25 @@
+<script>
+	import { page } from "$app/stores";
+	import EntityPage from "$lib/registry/entityRegistry/components/EntityPage.svelte";
+	import { entityRegistry } from "$lib/registry/entityRegistry/registry.svelte";
+
+
+    const entity = $derived(entityRegistry.getFromSlug($page.params.entity_slug))
+</script>
+
+{#if entity}
+    <div class="page">
+        <EntityPage entityId={entity.id} entryId={$page.params.entry_id}></EntityPage>
+    </div>
+{/if}
+
+<style>
+
+    .page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        padding: 60px var(--pad-m);
+    }
+</style>

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

@@ -0,0 +1,45 @@
+<script>
+	import { page } from "$app/stores";
+	import EntityForm from "$lib/registry/entityRegistry/components/EntityForm.svelte";
+	import { entityRegistry } from "$lib/registry/entityRegistry/registry.svelte";
+	import { sendRequest, toast } from "hamzus-ui";
+	import path from "path";
+
+
+    const entity = $derived(entityRegistry.getFromSlug($page.params.entity_slug))
+
+    async function handleSubmit(ctx) {
+        const request = await sendRequest({
+            path:"/create-entry",
+            data:{
+                ...ctx,
+                entity_id:entity.id
+            }
+        })
+
+        if (request.statusType === "error") {
+            toast.error({
+                title:"Erreur !",
+                description:request.message
+            })
+            return
+        }
+    }
+</script>
+
+{#if entity}
+    <div class="page">
+        <EntityForm onSubmit={handleSubmit} entityId={entity.id}></EntityForm>
+    </div>
+{/if}
+
+<style>
+
+    .page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        padding: 60px var(--pad-m);
+    }
+</style>

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

@@ -0,0 +1 @@
+<h3>home</h3>

package/src/lib/registry/viewTypeRegistry/createViewType.js

@@ -1,17 +0,0 @@
-export function createViewType(config = {}) {
-	const viewType = {
-		type:"",
-		name:"",
-		description:"",
-        components : {
-            component:null,
-            icon:null,
-        }
-	};
-
-	Object.assign(viewType, config);
-
-	// viewType.get = () => "test";
-
-	return viewType;
-}

package/src/lib/registry/viewTypeRegistry/registerDefaultViewTypes.js

@@ -1,7 +0,0 @@
-import { viewTypeRegistry } from './registry.svelte';
-import Table from './viewTypes/Table';
-
-
-export function registerDefaultViewTypes() {
-	viewTypeRegistry.register(Table)
-}

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

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

package/src/lib/registry/viewTypeRegistry/viewTypes/Table/component/Component copy.svelte

@@ -1,11 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-	import { Button, DropdownMenu, IconButton } from 'hamzus-ui';
-	import StructureTable from './StructureTable.svelte';
-
-	let { structureId = 0, columns = [], defaultProps = null, ...props } = $props();
-</script>
-
-<StructureTable bind:defaultProps structureColumns={columns} {structureId} {...props}>
-	<slot slot="actions" name="actions"></slot>
-</StructureTable>

package/src/lib/registry/viewTypeRegistry/viewTypes/Table/index.js

@@ -1,14 +0,0 @@
-import { createViewType } from '../../createViewType';
-
-import Icon from '../Table/Icon.svelte';
-import Component from '../Table/component/Component.svelte';
-
-export default createViewType({
-    type: "table",
-    name: "Tableau",
-    description: "",
-    components: {
-        component: Component,
-        icon: Icon,
-    },
-});