hamzus-ui 0.0.30 → 0.0.32

package/src/components/hamzus-ui/Table/Header.svelte

@@ -7,10 +7,14 @@
 	import Input from '../Input/Input.svelte';
 	import RadioGroup from '../Radios/RadioGroup/RadioGroup.svelte';
 	import Switch from '../Switch/Switch.svelte';
+	import { onDestroy } from 'svelte';
+	import DatePicker from '../DatePicker/DatePicker.svelte';
+	import MonthPicker from '../MonthPicker/MonthPicker.svelte';
+	import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
 	// props
 	export let tableId = null;
 	// local var
-    const minimalColumnWidth = 50
+	const minimalColumnWidth = 50;
 	let start = null;
 	let trackedColumnName = null;
 	let trackedColumnWidth = null;
@@ -21,8 +25,8 @@
 		for (let i = 0; i < $tableData[tableId].columns.length; i++) {
 			const element = $tableData[tableId].columns[i];
 			if (element.name === trackedColumnName) {
-                trackedColumnWidth = element.width ?? element.initialWidth ?? 0
-                break
+				trackedColumnWidth = element.width ?? element.initialWidth ?? 0;
+				break;
 			}
 		}
 		document.addEventListener('mousemove', handleMouseMove);
@@ -36,9 +40,10 @@
 			for (let i = 0; i < actualValue[tableId].columns.length; i++) {
 				const element = actualValue[tableId].columns[i];
 				if (element.name === trackedColumnName) {
-                    const newWidth = trackedColumnWidth - deltaX
-					actualValue[tableId].columns[i].width = newWidth > minimalColumnWidth ? newWidth : minimalColumnWidth;
-                    break;
+					const newWidth = trackedColumnWidth - deltaX;
+					actualValue[tableId].columns[i].width =
+						newWidth > minimalColumnWidth ? newWidth : minimalColumnWidth;
+					break;
 				}
 			}
 
@@ -48,114 +53,218 @@
 	function removeListener() {
 		document.removeEventListener('mousemove', handleMouseMove);
 		document.removeEventListener('mouseup', removeListener);
+
+		document.dispatchEvent(new Event('saveTableData'));
 	}
-    function handleChangeSkipLine(columnName, newValue) {
-        tableData.update((actualValue) => {
+	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;
+					break;
 				}
 			}
 
 			return actualValue;
 		});
-    }
-    function handleFilter(columnName, newValue) {
-        
-        let foundedColumn = false
-        tableData.update((actualValue) => {
+
+		document.dispatchEvent(new Event('saveTableData'));
+	}
+	function handleFilter(columnName, newValue, position) {
+		console.log(newValue);
+
+		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
-                        delete actualValue[tableId].filters[columnName]
-                        foundedColumn = true
-                        break
-                    }
-                    actualValue[tableId].columns[i].filter = newValue
-                    actualValue[tableId].filters[columnName] = newValue
-                    foundedColumn = true
-                    break;
+					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;
-                }
-            }
+		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
-            }
+				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()
-        }
+		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>
 
-<div class="header">
+<div class="header {$tableData[tableId].actions.length > 0 ? 'selectable' : ''}">
+	{#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}
 	{#each $tableData[tableId].columns as column, index}
 		{#if !column.hidden}
 			<div class="column" style="--width:{column.width ?? column.initialWidth}px;">
 				{#if column.isSearchable}
-					<DropdownMenu.Root triggerFullWidth onOpen={()=>{focusInput(column.name)}}>
+					<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>
+							<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}
-                                <div class="input-column-hamzus-{column.name}">
-                                    <Input placeholder="filtre" value={column.filter} onChange={(newValue)=>{handleFilter(column.name, newValue)}}></Input>
-                                </div>
+								{#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">
@@ -180,39 +289,63 @@
 										</Button>
 									</Popover.Trigger>
 									<Popover.Content slot="content">
-										<Popover.Button label="aucun" onClick={()=>{handleFilter(column.name, null)}}></Popover.Button>
+										<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>
+											<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">
+							<DropdownMenu.Button variant="ghost" style="padding:0;">
 								<label
-									style="display:flex;align-items:center;justify-content:space-between;width:100%;"
+									style="display:flex;align-items:center;justify-content:space-between;width:100%;padding:3px 7px;"
 								>
-									<h4>passer a la ligne</h4>
-									<Switch checked={column.skipLine} onChange={(newValue)=>{handleChangeSkipLine(column.name, newValue)}} size={16}></Switch>
+									<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>
+								<DropdownMenu.Button
+									onClick={() => {
+										handleSort(column.name);
+									}}
+									variant="ghost"
+									label="trier"
+								></DropdownMenu.Button>
 							{/if}
 						</DropdownMenu.Content>
 					</DropdownMenu.Root>
 				{:else}
-					<Button
-						style="width:100%;"
-						avoidRipple={!column.isSearchable}
-						variant="ghost"
-						label={column.label}
-					></Button>
+					<div style="width:100%;">
+						<Button
+							style="width:100%;"
+							avoidRipple={!column.isSearchable}
+							variant="ghost"
+							label={column.label}
+						></Button>
+					</div>
 				{/if}
 				<span class="resizer"
 					><button
-						onmousedown={(event) => {
+						on:mousedown={(event) => {
 							handleMouseDown(event, column.name);
 						}}
 						class="resizer-pad"
@@ -230,7 +363,7 @@
 		display: flex;
 		border-bottom: 1px solid var(--stroke);
 		user-select: none;
-		background-color: var(--bg-2);
+		background-color: var(--bg-d);
 		position: sticky;
 		top: 0;
 		z-index: 1;
@@ -240,6 +373,12 @@
 		display: flex;
 		width: var(--width);
 	}
+    .selector{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
 
 	/* track */
 	.resizer {

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

@@ -1,7 +1,9 @@
 <script>
 	// import
-	import { onMount } from 'svelte';
-	import { tableData } from './table';
+	import { onDestroy, onMount } from 'svelte';
+	import { mobileFormat, tableData } from './table';
+	import { writable } from 'svelte/store';
+	import TableLoader from './TableLoader.svelte';
 
 	// props
 	export let tableId = 0;
@@ -14,20 +16,48 @@
 	export let limit = 20;
 	export let offset = 0;
 	export let getRows = (globalSearch, filters) => {};
+	export let onClick = undefined;
+	export let version = 1;
 
 	// locale var
-	let monted = false;
+	let mounted = false;
+	let loading = false;
 	let rows = [];
 	let defaultColumns = [...columns];
+    let selection = [];
 
 	// life component
 	onMount(async () => {
+        // verifier le type d agencement
+		const savedFormat = localStorage.getItem(`table_format`);
+
+        if (!savedFormat) {
+            // verifier la taille de l ecran pour savoir si on est sur telephgone 900px
+            if (window.innerWidth < 900) {
+                mobileFormat.set(true)
+            }
+
+            localStorage.setItem(`table_format`, $mobileFormat ? "1" : "0");
+        }else {
+            $mobileFormat = savedFormat === "1"
+        }
+        
+
 		// verifier si l utilisateur possede une ocnfigursation enregistre dans le localsotrage
 		const savedConfiguration = localStorage.getItem(`table_${tableId}`);
+
 		if (savedConfiguration) {
 			try {
 				const overrideConfig = JSON.parse(savedConfiguration);
-				columns = overrideConfig.columns;
+				
+                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(`table_${tableId}`)
+                }else{
+                    columns = overrideConfig.columns;
+                }
 				filters = overrideConfig.filters;
 				globalSearch = overrideConfig.globalSearch;
 			} catch (error) {
@@ -53,7 +83,10 @@
 			totalOfRows: totalOfRows,
 			limit: limit,
 			offset: offset,
-			getRows: getRows
+			getRows: getRows,
+            onClick:onClick,
+            version:version,
+            selection:selection
 		};
 
 		tableData.update((actualValue) => {
@@ -68,33 +101,81 @@
 
 		// add les event
 		document.addEventListener('updateTableResult', handleUpdateResult);
+		document.addEventListener('saveTableData', saveDataActualData);
 		document.addEventListener('resetTableColumnsSettings', handleResetSettings);
 
-		monted = true;
+		mounted = true;
 
 		return () => {
+            mounted = false;
 			document.removeEventListener('updateTableResult', handleUpdateResult);
+			document.removeEventListener('saveTableData', saveDataActualData);
 			document.removeEventListener('resetTableColumnsSettings', handleResetSettings);
 		};
 	});
+    onDestroy(()=>{
+        mounted = false;
+    })
 
 	async function handleUpdateResult() {
+        if (!mounted || loading) {
+            return
+        }
+        loading = true
+
 		const actualTableData = $tableData[tableId];
 
+        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 getRows(
 			actualTableData.globalSearch,
-			actualTableData.filters,
+			filters,
 			actualTableData.sort,
 			actualTableData.limit,
 			actualTableData.offset
 		);
         totalOfRows = request.totalOfRows
-		$tableData[tableId].rows = request.rows;
+        tableData.update((actualTable)=>{
+            if (!actualTable[tableId]) {
+                return actualTable
+            }
+            actualTable[tableId].rows = request.rows
+            actualTable[tableId].totalOfRows = request.totalOfRows
+            return actualTable
+        })
 
 		saveDataActualData();
+
+        loading = false
+        // setTimeout(()=>{
+        // },1000)
 	}
 	async function saveDataActualData() {
-		if (!monted) {
+		if (!mounted) {
 			return;
 		}
 		localStorage.setItem(`table_${tableId}`, JSON.stringify($tableData[tableId]));
@@ -106,14 +187,23 @@
 				...actualValue
 			};
 		});
+        saveDataActualData()
 	}
 </script>
 
-{#if monted}
+{#if mounted}
 	<div class="table">
-		<slot name="actions-bar" {tableId}></slot>
-		<slot name="header" {tableId}></slot>
-		<slot name="content" {tableId}></slot>
+		<div class="top-bar">
+            <slot name="actions-bar" {tableId}></slot>
+		    {#if !$mobileFormat}
+                <slot name="header" {tableId}></slot>
+            {/if}
+        </div>
+		{#if loading}
+            <TableLoader></TableLoader>
+        {:else}
+            <slot name="content" {tableId}></slot>
+        {/if}
 		<slot name="navigation-bar" {tableId}></slot>
 	</div>
 {/if}
@@ -123,6 +213,11 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		overflow-x: scroll;
 	}
+    .top-bar{
+        position: sticky;
+        top: 0;
+        background-color: var(--bg-u);
+        z-index: 1;
+    }
 </style>