hamzus-ui 0.0.194 → 0.0.196

package/src/components/hamzus-ui/Calendar/FilterDropdown.svelte

@@ -0,0 +1,331 @@
+<script>
+	import Button from '../Button/Button.svelte';
+	import * as DropdownMenu from '../DropdownMenu';
+	import IconButton from '../IconButton/IconButton.svelte';
+	import Switch from '../Switch/Switch.svelte';
+	import * as Popover from '../Popover';
+	import { tableData } from './table';
+	import MonthPicker from '../MonthOfYearPicker/MonthOfYearPicker.svelte';
+	import DatePicker from '../DatePicker/DatePicker.svelte';
+	import Input from '../Input/Input.svelte';
+	import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
+
+	export let tableId;
+
+	function handleChangeSkipLine(columnName, newValue) {
+		tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				const element = actualValue[tableId].columns[i];
+				if (element.name === columnName) {
+					actualValue[tableId].columns[i].skipLine = newValue;
+					break;
+				}
+			}
+
+			return actualValue;
+		});
+
+		document.dispatchEvent(new Event('saveTableData'));
+	}
+	function handleFilter(columnName, newValue, position) {
+
+		let foundedColumn = false;
+		tableData.update((actualValue) => {
+			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
+				const element = actualValue[tableId].columns[i];
+				if (element.name === columnName) {
+					if (newValue === null || newValue === undefined || newValue === '') {
+						actualValue[tableId].columns[i].filter = newValue;
+						actualValue[tableId].columns[i].filterAfter = newValue;
+						actualValue[tableId].columns[i].filterBefore = newValue;
+						delete actualValue[tableId].filters[columnName];
+						foundedColumn = true;
+						break;
+					}
+
+					switch (position) {
+						case 'after':
+							// filtre datetime apres le
+							actualValue[tableId].columns[i].filterAfter = newValue;
+
+							break;
+						case 'before':
+							// filtre datetime apres le
+							actualValue[tableId].columns[i].filterBefore = newValue;
+							break;
+
+						default:
+							// filtre standart (recherche textuelle)
+							actualValue[tableId].columns[i].filter = newValue;
+							break;
+					}
+
+					actualValue[tableId].offset = 0;
+					actualValue[tableId].filters[columnName] = newValue;
+					foundedColumn = true;
+					break;
+				}
+			}
+
+			return actualValue;
+		});
+
+		if (foundedColumn) {
+			// emmetre un event
+			document.dispatchEvent(new Event('updateTableResult'));
+		}
+	}
+	function handleSort(columnName) {
+		tableData.update((actualValue) => {
+			const actualSort = actualValue[tableId].sort;
+
+			// si la colonne est different alors on set la direction en desc
+			let newDirection = '';
+			if (actualSort.columnName != columnName) {
+				newDirection = 'DESC';
+			} else {
+				// modifier la direction
+				switch (actualSort.direction) {
+					case '':
+						newDirection = 'DESC';
+						break;
+					case 'DESC':
+						newDirection = 'ASC';
+						break;
+					default:
+						// if "ASC" -> remove filter
+						newDirection = '';
+						break;
+				}
+			}
+
+			actualValue[tableId].sort = {
+				columnName: columnName,
+				direction: newDirection
+			};
+
+			return actualValue;
+		});
+		document.dispatchEvent(new Event('updateTableResult'));
+	}
+	function focusInput(columnName) {
+		// selectionner l input si il y en a
+
+		if (document.querySelector(`.input-column-hamzus-${columnName}`)) {
+			document.querySelector(`.input-column-hamzus-${columnName} input`).focus();
+		}
+	}
+	function unfocusInput() {
+		// selectionner l input si il y en a
+
+		if (document.querySelector(`input:focus`)) {
+			document.querySelector(`input:focus`).blur();
+		}
+	}
+	function handleSelectAll() {
+		tableData.update((actualValue) => {
+			if (actualValue[tableId].selection.length !== actualValue[tableId].rows.length) {
+				let allRows = actualValue[tableId].rows;
+				actualValue[tableId].selection = allRows;
+				return actualValue;
+			}
+
+			actualValue[tableId].selection = [];
+
+			return actualValue;
+		});
+	}
+</script>
+
+{#if $tableData[tableId].actions.length > 0}
+	<div
+		style="--width:50px"
+		class="selector column {$tableData[tableId].selection.length > 0 ? 'active' : ''}"
+	>
+		<Checkbox
+			size={24}
+			checked={$tableData[tableId].selection.length === $tableData[tableId].rows.length}
+			onChange={handleSelectAll}
+		></Checkbox>
+	</div>
+{/if}
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger slot="trigger">
+		<IconButton variant="outline" style="margin:7px 0px;">
+			<svg
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M10.9308 22.75C10.4508 22.75 9.97082 22.63 9.53082 22.39C8.64082 21.89 8.11078 21 8.11078 19.99V14.64C8.11078 14.13 7.78076 13.38 7.47076 12.99L3.67078 9.00003C3.04078 8.37003 2.55078 7.27002 2.55078 6.46002V4.14005C2.55078 2.53005 3.7708 1.27002 5.3208 1.27002H18.6608C20.1908 1.27002 21.4308 2.51004 21.4308 4.04004V6.26004C21.4308 7.31004 20.8008 8.52002 20.2008 9.11002C19.9108 9.40002 19.4308 9.40002 19.1408 9.11002C18.8508 8.82002 18.8508 8.34002 19.1408 8.05002C19.5108 7.68002 19.9308 6.85004 19.9308 6.26004V4.04004C19.9308 3.34004 19.3608 2.77002 18.6608 2.77002H5.3208C4.6108 2.77002 4.05078 3.37005 4.05078 4.14005V6.46002C4.05078 6.83002 4.35078 7.56004 4.74078 7.95004L8.59082 12C9.10082 12.63 9.60077 13.69 9.60077 14.64V19.99C9.60077 20.65 10.0508 20.97 10.2508 21.08C10.6808 21.32 11.1908 21.31 11.5908 21.07L12.9908 20.17C13.2808 20 13.5608 19.45 13.5608 19.08C13.5608 18.67 13.9008 18.33 14.3108 18.33C14.7208 18.33 15.0608 18.67 15.0608 19.08C15.0608 19.98 14.5008 21.01 13.7908 21.44L12.4008 22.34C11.9508 22.61 11.4408 22.75 10.9308 22.75Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M16.0711 17.2701C13.8911 17.2701 12.1211 15.5001 12.1211 13.3201C12.1211 11.1401 13.8911 9.37012 16.0711 9.37012C18.2511 9.37012 20.0211 11.1401 20.0211 13.3201C20.0211 15.5001 18.2511 17.2701 16.0711 17.2701ZM16.0711 10.8701C14.7211 10.8701 13.6211 11.9701 13.6211 13.3201C13.6211 14.6701 14.7211 15.7701 16.0711 15.7701C17.4211 15.7701 18.5211 14.6701 18.5211 13.3201C18.5211 11.9701 17.4211 10.8701 16.0711 10.8701Z"
+					fill="#292D32"
+				/>
+				<path
+					d="M19.8705 17.8701C19.6805 17.8701 19.4905 17.8001 19.3405 17.6501L18.3405 16.6501C18.0505 16.3601 18.0505 15.8801 18.3405 15.5901C18.6305 15.3001 19.1105 15.3001 19.4005 15.5901L20.4005 16.5901C20.6905 16.8801 20.6905 17.3601 20.4005 17.6501C20.2605 17.7901 20.0605 17.8701 19.8705 17.8701Z"
+					fill="#292D32"
+				/>
+			</svg>
+		</IconButton>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content slot="content">
+		{#each $tableData[tableId].columns as column, index}
+			{#if !column.hidden}
+				{#if column.isSearchable}
+					<DropdownMenu.Root
+						triggerFullWidth
+						onOpen={() => {
+							focusInput(column.name);
+						}}
+						onClose={unfocusInput}
+					>
+						<DropdownMenu.Trigger slot="trigger">
+							<Button style="width:100%;" avoidRipple={!column.isSearchable} variant="ghost">
+								<h4>{column.label}</h4>
+								<h4>
+									{$tableData[tableId].sort &&
+									$tableData[tableId].sort.columnName === column.name &&
+									$tableData[tableId].sort.direction !== ''
+										? $tableData[tableId].sort.direction === 'DESC'
+											? '⬇️'
+											: '⬆️'
+										: ''}
+								</h4>
+								<h4>
+									{$tableData[tableId].filters &&
+									($tableData[tableId].filters[column.name] != '') &
+										($tableData[tableId].filters[column.name] != undefined)
+										? '🔍'
+										: ''}
+								</h4>
+							</Button>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content slot="content">
+							<DropdownMenu.Label>{column.label}</DropdownMenu.Label>
+							{#if !column.searchChoices}
+								{#if column.monthPicker}
+									<div class="input-column-hamzus-{column.name}">
+										<MonthPicker
+											label="mois"
+											value={column.filter ?? ''}
+											onChange={(newValue) => {
+												handleFilter(column.name, newValue);
+											}}
+										></MonthPicker>
+									</div>
+								{:else if column.datePicker}
+									<div class="input-column-hamzus-{column.name}">
+										<DatePicker
+											label="à partir du"
+											value={column.filterAfter ?? ''}
+											onChange={(newValue) => {
+												handleFilter(column.name, newValue, 'after');
+											}}
+										></DatePicker>
+										<DatePicker
+											label="jusqu'au"
+											value={column.filterBefore ?? ''}
+											onChange={(newValue) => {
+												handleFilter(column.name, newValue, 'before');
+											}}
+										></DatePicker>
+									</div>
+								{:else}
+									<div class="input-column-hamzus-{column.name}">
+										<Input
+											placeholder="filtre"
+											value={column.filter ?? ''}
+											onChange={(newValue) => {
+												handleFilter(column.name, newValue);
+											}}
+										></Input>
+									</div>
+								{/if}
+							{:else}
+								<Popover.Root direction="right" triggerFullWidth>
+									<Popover.Trigger slot="trigger">
+										<Button style="width:100%;justify-content:space-between;" variant="ghost">
+											<h4>filtre</h4>
+											<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>
+										</Button>
+									</Popover.Trigger>
+									<Popover.Content slot="content">
+										<Popover.Button
+											label="aucun"
+											onClick={() => {
+												handleFilter(column.name, null);
+											}}
+										></Popover.Button>
+										{#each column.searchChoices as choice}
+											<Popover.Button
+												label={choice.label}
+												onClick={() => {
+													handleFilter(column.name, choice.value);
+												}}
+											></Popover.Button>
+										{/each}
+									</Popover.Content>
+								</Popover.Root>
+							{/if}
+							<DropdownMenu.Separator></DropdownMenu.Separator>
+							<DropdownMenu.Button variant="ghost" style="padding:0;">
+								<label
+									style="display:flex;align-items:center;justify-content:space-between;width:100%;padding:3px 7px;"
+								>
+									<h4>ne pas passer a la ligne</h4>
+									<Switch
+										checked={column.skipLine}
+										onChange={(newValue) => {
+											handleChangeSkipLine(column.name, newValue);
+										}}
+										size={16}
+									></Switch>
+								</label>
+							</DropdownMenu.Button>
+							{#if column.isSortable !== false}
+								<DropdownMenu.Separator></DropdownMenu.Separator>
+								<DropdownMenu.Button
+									onClick={() => {
+										handleSort(column.name);
+									}}
+									variant="ghost"
+									label="trier"
+								></DropdownMenu.Button>
+							{/if}
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				{:else}
+					<div style="width:100%;">
+						<Button
+							style="width:100%;"
+							avoidRipple={!column.isSearchable}
+							variant="ghost"
+							label={column.label}
+						></Button>
+					</div>
+				{/if}
+			{/if}
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/components/hamzus-ui/Calendar/Root.svelte

@@ -0,0 +1,166 @@
+<script>
+	// import
+	import { onDestroy, onMount } from 'svelte';
+	import TableLoader from './TableLoader.svelte';
+
+	// props
+	export let tableId = 0;
+	export let columnDateFilter = "created_at";
+	export let columns = [];
+	export let filters = {};
+	export let sort = {};
+    export let totalOfRows = 0;
+	export let limit = 20;
+	export let offset = 0;
+	export let version = 1;
+	export let onClick = undefined;
+	export let getRows = (filters, sort, limit, offset) => {};
+
+	export let ctx = {
+        tableId:`${tableId}_calendar_hamzus_ui`,
+        columnDateFilter,
+        columns,
+        filters,
+        sort,
+        totalOfRows,
+        limit,
+        offset,
+        version,
+        onClick,
+        getRows:handleGetRows,
+    };
+    
+
+	// locale var
+	let mounted = false;
+	let loading = false;
+	let rows = [];
+	let defaultColumns = [...columns];
+
+	// life component
+	onMount(async () => {
+        
+
+		// verifier si l utilisateur possede une ocnfigursation enregistre dans le localsotrage
+		const savedConfiguration = localStorage.getItem(ctx.tableId);
+
+		if (savedConfiguration) {
+			try {
+				const overrideConfig = JSON.parse(savedConfiguration);
+				
+                const upToDate = version === (overrideConfig.version ?? null)
+
+                // si il n'est pas a jour alors il doit étre surpimmer le localstorage et le mettre a jour
+                if (!upToDate) {
+                    localStorage.removeItem(ctx.tableId)
+                }else{
+                    columns = overrideConfig.columns;
+                }
+				filters = overrideConfig.filters;
+			} catch (error) {
+				// suprimmer ce localstorage car il ne peut pas etre decoder
+				localStorage.removeItem(ctx.tableId);
+			}
+		}
+
+		// aller chercher les rows
+        const request = await getRows(filters, sort, limit, offset)
+        totalOfRows = request.totalOfRows
+		rows = request.rows;
+	});
+
+    onDestroy(()=>{
+        mounted = false;
+    })
+
+	async function handleUpdateResult() {
+        if (!mounted || loading) {
+            return
+        }
+        loading = true
+
+		const actualTableData = ctx;
+
+        let filters = {
+            ...actualTableData.filters
+        }
+
+        // vertifier si il n y a pas de filtre special style datepicker pour interval de temsp
+        for (const column of actualTableData.columns) {
+            if (!column.datePicker ) {
+                continue;
+            }
+            if (filters[column.name]) {
+                delete filters[column.name]
+            }
+            if (column.filterAfter) {
+                filters = {
+                    ...filters,
+                    [column.name + "_after"]:column.filterAfter
+                }
+            }
+            if (column.filterBefore) {
+                filters = {
+                    ...filters,
+                    [column.name + "_before"]:column.filterBefore
+                }
+            }
+        }
+        
+        const request = await handleGetRows(
+            filters,
+			actualTableData.sort,
+			actualTableData.limit,
+			actualTableData.offset
+        )
+
+		saveDataActualData();
+
+        loading = false
+	}
+	async function saveDataActualData() {
+		if (!mounted) {
+			return;
+		}
+		localStorage.setItem(ctx.tableId, JSON.stringify(ctx));
+	}
+	function handleResetSettings() {
+		ctx.columns = structuredClone(defaultColumns);
+        saveDataActualData()
+	}
+
+    async function handleGetRows(filters, sort, limit, offset) {
+        loading = true;
+        const request = await getRows(filters, sort, limit, offset)
+        totalOfRows = request.totalOfRows
+        rows = request.rows;
+        loading = false;
+    }
+</script>
+
+{#if mounted}
+	<div class="table">
+		<div class="top-bar">
+            <slot name="actions-bar" {ctx}></slot>
+        </div>
+		{#if loading}
+            <TableLoader></TableLoader>
+        {:else}
+            <slot name="content" {ctx}></slot>
+        {/if}
+	</div>
+{/if}
+
+<style>
+	.table {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+    .top-bar{
+        position: sticky;
+        top: 0;
+        background-color: var(--bg-1);
+        z-index: 1;
+    }
+</style>

package/src/components/hamzus-ui/Calendar/TableLoader.svelte

@@ -0,0 +1,15 @@
+<script>
+	import Skeleton from '../Skeleton/Skeleton.svelte';
+</script>
+
+<div class="result">
+	<h1>Chargement...</h1>
+</div>
+
+<style>
+    .result{
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--pad-xs);
+    }
+</style>

package/src/components/hamzus-ui/Calendar/index.js

@@ -0,0 +1,3 @@
+export { default as Root } from './Root.svelte';//main logic
+export { default as ActionsBar } from './ActionsBar.svelte';//search, active filters, columns list,...
+export { default as Content } from './Content.svelte';//table rows