mountain-ui 1.0.28 → 1.0.30

package/src/lib/registry/fieldTypeRegistry/fieldTypes/time/formatDate.js

@@ -0,0 +1,155 @@
+
+export function formatDateFromTimestamp(timestamp) {
+    // Créer une instance Date à partir du timestamp
+    const date = new Date(timestamp);
+
+    // Utiliser Intl.DateTimeFormat pour formater la date
+    const formatter = new Intl.DateTimeFormat('fr-FR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false // Utiliser l'heure au format 24 heures
+    });
+
+    // Formatage de la date avec Intl.DateTimeFormat
+    const parts = formatter.formatToParts(date);
+    
+    // Extraire les différentes parties de la date
+    const year = parts.find(part => part.type === 'year').value;
+    const month = parts.find(part => part.type === 'month').value;
+    const day = parts.find(part => part.type === 'day').value;
+    const hour = parts.find(part => part.type === 'hour').value;
+    const minute = parts.find(part => part.type === 'minute').value;
+    const second = parts.find(part => part.type === 'second').value;
+
+    // Formater la date selon le format souhaité
+    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+}
+
+export function formatDate(dateOrigine) {
+    dateOrigine = new Date(dateOrigine);
+
+    // Extraction des composants de la date
+    let annee = dateOrigine.getFullYear();
+    let mois = dateOrigine.getMonth() + 1; // Les mois commencent à 0, donc ajoutez 1
+    let jour = dateOrigine.getDate();
+    
+    // Formatage des composants de la date
+    let dateFormatee = (jour < 10 ? '0' : '') + jour + '/' +
+                       (mois < 10 ? '0' : '') + mois + '/' +
+                       annee 
+    return dateFormatee;
+}
+
+export function formatDateTime(dateOrigine) {
+    dateOrigine = new Date(convertToLocalDateTime(dateOrigine));
+
+    // Extraction des composants de la date
+    let annee = dateOrigine.getFullYear();
+    let mois = dateOrigine.getMonth() + 1; // Les mois commencent à 0, donc ajoutez 1
+    let jour = dateOrigine.getDate();
+    let heures = dateOrigine.getHours();
+    let minutes = dateOrigine.getMinutes();
+    let secondes = dateOrigine.getSeconds();
+    
+    // Formatage des composants de la date
+    let dateFormatee = (jour < 10 ? '0' : '') + jour + '/' +
+                       (mois < 10 ? '0' : '') + mois + '/' +
+                       annee + ' à ' +
+                       (heures < 10 ? '0' : '') + heures + ':' +
+                       (minutes < 10 ? '0' : '') + minutes + ":" +
+                       (secondes < 10 ? '0' : '') + secondes;
+    return dateFormatee;
+}
+export function formatTime(dateOrigine) {
+    dateOrigine = new Date(convertToLocalDateTime(dateOrigine));
+
+    let heures = dateOrigine.getHours();
+    let minutes = dateOrigine.getMinutes();
+    
+    // Formatage des composants de la date
+    let dateFormatee = (heures < 10 ? '0' : '') + heures + 'h' +
+                       (minutes < 10 ? '0' : '') + minutes;
+    return dateFormatee;
+}
+export function convertirSec(secondes) {
+    const heures = Math.floor(secondes / 3600);
+    let minutes = Math.floor((secondes % 3600) / 60);
+    if (heures !== 0) {
+        minutes = minutes.toString().length == 1 ? '0' + minutes : minutes
+
+        return `${heures}h${minutes}`;
+    }else{
+        return `${minutes}min`;
+    }
+}
+
+export function formatMonth(dateString) {
+    const date = new Date(dateString);
+
+    // Formatage en "mois année" (par exemple, "octobre 2024" en français)
+    const options = { year: 'numeric', month: 'long' };
+    return new Intl.DateTimeFormat('fr-FR', options).format(date);
+}
+export function timeSince(date) {
+    const now = new Date();
+    const past = new Date(convertToLocalDateTime(date));
+    const diffMs = now - past; // en millisecondes
+
+    const seconds = Math.floor(diffMs / 1000);
+    const minutes = Math.floor(diffMs / (1000 * 60));
+    const hours = Math.floor(diffMs / (1000 * 60 * 60));
+    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+    if (seconds < 60) {
+        return `il y a ${seconds} sec`;
+    } else if (minutes < 60) {
+        return `il y a ${minutes} min`;
+    } else if (hours < 24) {
+        return `il y a ${hours} h`;
+    } else {
+        return `il y a ${days} j`;
+    }
+}
+
+export function convertToLocalDateTime(Datetime) {
+    // Convertir la chaîne en objet Date UTC
+    const utcDate = new Date(Datetime.replace(' ', 'T') + 'Z');
+    
+    // Extraire les composants de la date locale
+    const year = utcDate.getFullYear();
+    const month = String(utcDate.getMonth() + 1).padStart(2, '0'); // Mois de 0 à 11, on ajoute donc 1
+    const day = String(utcDate.getDate()).padStart(2, '0');
+    
+    // Extraire les composants de l'heure locale
+    const hours = String(utcDate.getHours()).padStart(2, '0');
+    const minutes = String(utcDate.getMinutes()).padStart(2, '0');
+    const seconds = String(utcDate.getSeconds()).padStart(2, '0');
+    
+    // Formater la date et l'heure en YYYY-MM-DD HH:mm:SS
+    const localDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    
+    return localDateTime;
+}
+export function convertToLocalDateTimeForDateTime(Datetime) {
+    // Convertir la chaîne en objet Date UTC
+    const utcDate = new Date(Datetime.replace(' ', 'T') + 'Z');
+    
+    // Extraire les composants de la date locale
+    const year = utcDate.getFullYear();
+    const month = String(utcDate.getMonth() + 1).padStart(2, '0'); // Mois de 0 à 11, on ajoute donc 1
+    const day = String(utcDate.getDate()).padStart(2, '0');
+    
+    // Extraire les composants de l'heure locale
+    const hours = String(utcDate.getHours()).padStart(2, '0');
+    const minutes = String(utcDate.getMinutes()).padStart(2, '0');
+    
+    // Formater la date et l'heure en YYYY-MM-DD HH:mm:SS
+    const localDateTime = `${year}-${month}-${day} ${hours}:${minutes}`;
+    
+    return localDateTime;
+}
+

package/src/lib/registry/fieldTypeRegistry/registerDefaultFieldTypes.js

@@ -6,6 +6,7 @@ import NumberFloatDefault from './fieldTypes/number/float/NumberFloatDefault';
 import NumberFloatPrice from './fieldTypes/number/float/NumberFloatPrice';
 import NumberFloatPercent from './fieldTypes/number/float/NumberFloatPercent';
 import CalculationColumn from './fieldTypes/calculation/CalculationColumn';
+import CalculationLine from './fieldTypes/calculation/CalculationLine';
 import TextTextarea from './fieldTypes/text/TextTextarea';
 import TextVarcharDefault from './fieldTypes/text/varchar/TextVarcharDefault';
 import TextVarcharEmail from './fieldTypes/text/varchar/TextVarcharEmail';
@@ -35,6 +36,7 @@ export function registerDefaultFieldTypes() {
 	fieldTypeRegistry.register(NumberFloatPercent);
 	// calculation
 	fieldTypeRegistry.register(CalculationColumn);
+	fieldTypeRegistry.register(CalculationLine);
 	// text
 	fieldTypeRegistry.register(TextTextarea);
 

package/src/lib/registry/viewTypeRegistry/components/ViewTypeButton.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { Button } from 'hamzus-ui';
+	import { viewTypeRegistry } from '../registry.svelte';
+
+	let { type, variant = 'ghost', ...props } = $props();
+
+	const viewType = viewTypeRegistry.get(type);
+</script>
+
+{#if viewType}
+	<Button {...props} {variant} style="padding:var(--pad-s) var(--pad-l) var(--pad-s) var(--pad-s);width:100%;">
+        <div class="ico">
+            <svelte:component this={viewType.components.icon}></svelte:component>
+        </div>
+		<h5>{viewType.name}</h5>
+	</Button>
+{/if}
+
+<style>
+    .ico {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/src/lib/registry/viewTypeRegistry/components/ViewTypeComponent.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { Button, RotativeLoader } from 'hamzus-ui';
+	import { viewTypeRegistry } from '../registry.svelte';
+
+	let { type, ...props } = $props();
+
+	const viewType = viewTypeRegistry.get(type);
+
+    console.log(viewType);
+    
+</script>
+
+{#if viewType}
+	<svelte:component this={viewType.components.component} {...props}></svelte:component>
+{:else}
+<div class="loader">
+    <RotativeLoader></RotativeLoader>
+</div>
+{/if}
+
+<style>
+
+    .loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 60px var(--pad-m);
+    }
+</style>
+

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

@@ -0,0 +1,17 @@
+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

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

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

@@ -0,0 +1,44 @@
+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/Icon.svelte

@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M4.1 11L19.9 11C21.4 11 22 10.36 22 8.77L22 4.73C22 3.14 21.4 2.5 19.9 2.5L4.1 2.5C2.6 2.5 2 3.14 2 4.73L2 8.77C2 10.36 2.6 11 4.1 11Z"
+		fill="#00C0E8"
+	/>
+	<path
+		opacity="0.4"
+		d="M13.1 21.5L19.9 21.5C21.4 21.5 22 20.86 22 19.27L22 15.23C22 13.64 21.4 13 19.9 13L13.1 13C11.6 13 11 13.64 11 15.23L11 19.27C11 20.86 11.6 21.5 13.1 21.5Z"
+		fill="#00C0E8"
+	/>
+	<path
+		opacity="0.4"
+		d="M4.1 21.5L6.9 21.5C8.4 21.5 9 20.86 9 19.27L9 15.23C9 13.64 8.4 13 6.9 13L4.1 13C2.6 13 2 13.64 2 15.23L2 19.27C2 20.86 2.6 21.5 4.1 21.5Z"
+		fill="#00C0E8"
+	/>
+</svg>

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

@@ -0,0 +1,11 @@
+<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/component/Component.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { page } from '$app/stores';
+	import { Button, DropdownMenu, IconButton } from 'hamzus-ui';
+	import StructureTable from './StructureTable.svelte';
+
+	let { entityId, ...props } = $props();
+
+</script>
+
+<StructureTable {entityId} {...props}>
+	<slot slot="actions" name="actions"></slot>
+</StructureTable>

package/src/lib/registry/viewTypeRegistry/viewTypes/Table/component/StructureTable.svelte

@@ -0,0 +1,287 @@
+<script>
+	// import
+	import { RotativeLoader, sendRequest, TableV2 } from 'hamzus-ui';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { fieldTypeRegistry } from '$lib/registry/fieldTypeRegistry/registry.svelte';
+	import { entityRegistry } from '$lib/registry/entityRegistry/registry.svelte';
+
+	let {
+		entityId = null,
+		path = '/get-all-entries',
+		data = {},
+		slug = null,
+		onChange = () => {},
+		invisibleFilters = {},
+		structureColumns = [],
+		defaultColumns = {},
+		defaultProps = {},
+		...props
+	} = $props();
+
+	const entity = entityRegistry.select(entityId);
+
+	let error = $state(null);
+
+	let mounted = false;
+
+	let columns = $state([]);
+
+	$effect(() => {
+		getColumnsFromStructureColumns($entity);
+	});
+
+	onMount(() => {
+		mounted = true;
+		getColumnsFromStructureColumns($entity);
+	});
+
+	// function
+	function getColumnsFromStructureColumns(entity) {
+		// on evite d'executé coté serveur
+		if (!mounted) {
+			return;
+		}
+
+		// parcourir les colonne et generer l objet columns pour le composant table
+		let columnsList = [];
+
+		for (const field of entity.fields) {
+			if (field.is_hidden) {
+				continue;
+			}
+
+			let additionalData = {};
+
+			const fieldType = fieldTypeRegistry.get(field.type);
+
+			if (fieldType.tableAttributes) {
+				if (typeof fieldType.tableAttributes === 'function') {
+					additionalData = fieldType.tableAttributes(field.props);
+				} else {
+					additionalData = fieldType.tableAttributes;
+				}
+			}
+
+			// si il y a un composent de visualisation on l ajoute
+			if (fieldType.components.tableView) {
+				additionalData = {
+					...additionalData,
+					componentForVisualisation: fieldType.components.tableView
+				};
+			}
+
+			if (defaultColumns?.[field.normalized_name]?.skipLine) additionalData.skipLine = true;
+			if (defaultColumns?.[field.normalized_name]?.width)
+				additionalData.width = defaultColumns[field.normalized_name].width;
+			if (defaultColumns?.[field.normalized_name]?.hidden) additionalData.hidden = true;
+
+			columnsList.push({
+				name: field.normalized_name,
+				label: field.name,
+				initialWidth: field.width ?? 50,
+				isSearchable: true,
+				isSortable: true,
+				...additionalData
+			});
+		}
+
+		columns = columnsList;
+	}
+
+	async function getRows(filters, sort, limit, offset) {
+		// convertir les filter en post data
+		let postFilter = {};
+		let index = 0;
+		for (const columnName in filters) {
+			postFilter = {
+				...postFilter,
+				[`filters[${columnName}]`]: filters[columnName]
+			};
+
+			index++;
+		}
+		for (const columnName in invisibleFilters) {
+			postFilter = {
+				...postFilter,
+				[`filters[${columnName}]`]: invisibleFilters[columnName]
+			};
+
+			index++;
+		}
+		// convertir sort en post data
+		let postSort = {};
+		if (sort.direction) {
+			postSort = {
+				[`sort[${sort.columnName}]`]: sort.direction
+			};
+		}
+
+		const request = await sendRequest({
+			path: path,
+			data: {
+				entityId: entityId,
+				limit: limit,
+				offset,
+				...postFilter,
+				...postSort,
+				...data
+			}
+		});
+
+		if (request.statusType === 'error') {
+			if (request.statusCode === 403) {
+				error = 403;
+			} else {
+				error === 'error';
+			}
+			return;
+		}
+
+		const requestData = request.data;
+
+		let returnedData = {
+			rows: [],
+			totalOfRows: requestData.totalOfRows
+		};
+		for (const row of requestData.rows) {
+			let newRow = {};
+
+			for (const column of columns) {
+				// composent
+				if (column.componentForVisualisation) {
+					newRow[`${column.name}`] = {
+						component: column.componentForVisualisation,
+						props: {
+							// injecter la valeur
+							value: row[column.name],
+							// injecter les props de colonne
+							...column.componentPropsForVisualisation
+						}
+					};
+					continue;
+				}
+				// function de formatage
+				if (column.functionForVisualisation) {
+					newRow[`${column.name}`] = column.functionForVisualisation(row[column.name]);
+					continue;
+				}
+
+				newRow[`${column.name}`] = row[column.name].flat;
+			}
+
+			returnedData.rows.push(newRow);
+		}
+
+		return returnedData;
+	}
+
+	function handleChange(table) {
+		// copier les filtres
+		let defaultFilters = { ...table.filters };
+		let defaultColumns = null;
+
+		for (const column of table.columns) {
+			if (!column.hidden && !column.width && !column.skipLine) continue;
+
+			if (defaultColumns === null) defaultColumns = {};
+
+			let newColumn = {
+				name: column.name
+			};
+
+			// push les données
+			if (column.hidden) newColumn.hidden = true;
+			if (column.width) newColumn.width = column.width;
+			if (column.skipLine) newColumn.skipLine = true;
+
+			defaultColumns[column.name] = newColumn;
+		}
+
+		defaultProps = {
+			defaultFilters: defaultFilters,
+			defaultColumns: defaultColumns
+		};
+	}
+
+	function onClick(rowData) {
+		// rediriger vers
+		goto(`/${$page.params.projet_slug}/${$page.params.origin}/${slug ?? $page.params.structure_slug}/${rowData.id}`);
+	}
+</script>
+
+{#if error === 403}
+	<div class="error">
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				opacity="0.4"
+				d="M10.9608 2.10989L5.46078 4.16989C4.41078 4.56989 3.55078 5.80989 3.55078 6.93989V15.0399C3.55078 15.8499 4.08078 16.9199 4.73078 17.3999L10.2308 21.5099C11.2008 22.2399 12.7908 22.2399 13.7608 21.5099L19.2608 17.3999C19.9108 16.9099 20.4408 15.8499 20.4408 15.0399V6.93989C20.4408 5.81989 19.5808 4.56988 18.5308 4.17988L13.0308 2.11989C12.4708 1.89989 11.5308 1.89989 10.9608 2.10989Z"
+				fill="#292D32"
+			/>
+			<path
+				d="M14.5 10.5C14.5 9.12 13.38 8 12 8C10.62 8 9.5 9.12 9.5 10.5C9.5 11.62 10.24 12.55 11.25 12.87V15.5C11.25 15.91 11.59 16.25 12 16.25C12.41 16.25 12.75 15.91 12.75 15.5V12.87C13.76 12.55 14.5 11.62 14.5 10.5Z"
+				fill="#292D32"
+			/>
+		</svg>
+
+		<h3>Vous n'avez pas accès a cet ressource</h3>
+		<p>Vous ne pouvez pas consulté les element lié a cette entité !</p>
+	</div>
+{:else if error === 'error'}
+	<div class="error">
+		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				opacity="0.4"
+				d="M21.7605 15.92L15.3605 4.4C14.5005 2.85 13.3105 2 12.0005 2C10.6905 2 9.50047 2.85 8.64047 4.4L2.24047 15.92C1.43047 17.39 1.34047 18.8 1.99047 19.91C2.64047 21.02 3.92047 21.63 5.60047 21.63H18.4005C20.0805 21.63 21.3605 21.02 22.0105 19.91C22.6605 18.8 22.5705 17.38 21.7605 15.92Z"
+				fill="#292D32"
+			/>
+			<path
+				d="M12 14.75C11.59 14.75 11.25 14.41 11.25 14V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V14C12.75 14.41 12.41 14.75 12 14.75Z"
+				fill="#292D32"
+			/>
+			<path
+				d="M12 18.0001C11.94 18.0001 11.87 17.9901 11.8 17.9801C11.74 17.9701 11.68 17.9501 11.62 17.9201C11.56 17.9001 11.5 17.8701 11.44 17.8301C11.39 17.7901 11.34 17.7501 11.29 17.7101C11.11 17.5201 11 17.2601 11 17.0001C11 16.7401 11.11 16.4801 11.29 16.2901C11.34 16.2501 11.39 16.2101 11.44 16.1701C11.5 16.1301 11.56 16.1001 11.62 16.0801C11.68 16.0501 11.74 16.0301 11.8 16.0201C11.93 15.9901 12.07 15.9901 12.19 16.0201C12.26 16.0301 12.32 16.0501 12.38 16.0801C12.44 16.1001 12.5 16.1301 12.56 16.1701C12.61 16.2101 12.66 16.2501 12.71 16.2901C12.89 16.4801 13 16.7401 13 17.0001C13 17.2601 12.89 17.5201 12.71 17.7101C12.66 17.7501 12.61 17.7901 12.56 17.8301C12.5 17.8701 12.44 17.9001 12.38 17.9201C12.32 17.9501 12.26 17.9701 12.19 17.9801C12.13 17.9901 12.06 18.0001 12 18.0001Z"
+				fill="#292D32"
+			/>
+		</svg>
+
+		<h3>Une erreur est survenue !</h3>
+		<p>Impossible de récuperer l'entrée !</p>
+	</div>
+{:else if columns.length > 0}
+	<TableV2.Root {getRows} onChange={handleChange} {onClick} {columns} {...props}>
+		<TableV2.ActionsBar slot="actions-bar"
+			><slot name="actions" slot="actions" /></TableV2.ActionsBar
+		>
+		<TableV2.Header slot="header"></TableV2.Header>
+		<TableV2.Content slot="content"></TableV2.Content>
+	</TableV2.Root>
+{:else}
+	<div class="loader">
+		<RotativeLoader></RotativeLoader>
+	</div>
+{/if}
+
+<style>
+	.loader {
+		padding: 60px var(--pad-m);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.error {
+		padding: 60px var(--pad-m);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		row-gap: var(--pad-m);
+	}
+	.error > svg {
+		width: 60px;
+		height: auto;
+	}
+	.error > svg path {
+		fill: var(--red);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+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,
+    },
+});