hamzus-ui 0.0.30 → 0.0.32

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

@@ -1,36 +1,130 @@
 <script>
 	// import
-	import { tableData } from './table';
+	import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
+	import { mobileFormat, tableData } from './table';
+	import Button from '../Button/Button.svelte';
 	// props
 	export let tableId = null;
 
 	// local var
-
+	let extended = {};
+	$: numberOfColumn = $tableData[tableId].columns.length ?? 0;
 	// lifeTime component
 
 	// function
+	function handleClick(rowData, avoidClick) {
+		if (avoidClick) {
+			return;
+		}
+		// apeller la fonction onclick de la table et fournir la row
+		if (
+			$tableData[tableId].onClick !== undefined &&
+			typeof $tableData[tableId].onClick === 'function'
+		) {
+			$tableData[tableId].onClick(rowData);
+		}
+	}
+	function handleSelect(row) {
+		// verifier si il est deja present
+		let isAlreadySelected = false;
+
+		for (const pushedRow of $tableData[tableId].selection) {
+			if (pushedRow.id === row.id) {
+				isAlreadySelected = true;
+				break;
+			}
+		}
+
+		tableData.update((actualValue) => {
+			if (isAlreadySelected) {
+				actualValue[tableId].selection = actualValue[tableId].selection.filter(
+					(item) => item.id !== row.id
+				);
+				return actualValue;
+			}
+			actualValue[tableId].selection.push(row);
+			return actualValue;
+		});
+	}
+
+	function handleExtend(index) {
+		extended[index] = !(extended[index] ?? false);
+	}
 </script>
 
-<div class="content">
-	{#each $tableData[tableId].rows as row}
-		<div class="row">
-			{#each Object.keys(row) as cellKey}
+<div class="content {$mobileFormat ? 'mobile' : ''}">
+	{#each $tableData[tableId].rows as row, rowIndex}
+		<div class="row {$tableData[tableId].actions.length > 0 ? 'selectable' : ''}">
+			{#if $tableData[tableId].actions.length > 0}
+				<div
+					style="--cell-width:50px"
+					class="selector cell {$tableData[tableId].selection.length > 0 ? 'active' : ''}"
+				>
+					<Checkbox
+						size={24}
+						checked={$tableData[tableId].selection.filter((item) => item.id === row.id).length > 0}
+						onChange={() => {
+							handleSelect(row);
+						}}
+					></Checkbox>
+				</div>
+			{/if}
+			{#each Object.keys(row) as cellKey, cellIndex}
 				{@const column = $tableData[tableId].columns.filter((obj) => obj.name === cellKey)[0]}
 
 				{#if !column.hidden}
-					<div
-						class="cell"
-						style="--cell-width:{column.width ?? column.initialWidth}px;{column.skipLine === true
-							? 'white-space:nowrap;'
-							: ''}"
-					>   
-                        <!-- il se peut que ce soit un composant -->
-                        {#if typeof row[cellKey] === 'object'}
-                            <svelte:component this={row[cellKey].component} {...row[cellKey].props}></svelte:component>
-                        {:else}
-						    <h4>{row[cellKey]}</h4>
-                        {/if}
-					</div>
+					{@const cellIsExtended = extended[rowIndex] ?? false}
+
+					<!-- si le format est mobile que on est a plus de trois cell afficher et que le content est pas extend on affiche pas le reste -->
+					{#if !$mobileFormat || numberOfColumn <= 3 || cellIndex < 3 || cellIsExtended}
+						<button
+							on:click={() => {
+								handleClick(row, column.avoidClick ?? false);
+							}}
+							class="cell"
+							style="--cell-width:{column.width ?? column.initialWidth}px;{column.skipLine === true
+								? 'white-space:nowrap;'
+								: ''}"
+						>
+							<!-- il se peut que ce soit un composant -->
+							{#if row[cellKey]}
+								{#if typeof row[cellKey] === 'object'}
+									<svelte:component this={row[cellKey].component} {...row[cellKey].props}
+									></svelte:component>
+								{:else}
+									<h4>{row[cellKey]}</h4>
+								{/if}
+							{/if}
+							<!-- si c est au format mobile on affiche le nom de la cell -->
+							{#if $mobileFormat}
+								<h4>{column.label}</h4>
+							{/if}
+						</button>
+						{#if $mobileFormat}
+							{#if !cellIsExtended && cellIndex === 2 && numberOfColumn > 3}
+								<div class="cell">
+									<Button
+										variant="outline"
+										label="voir plus"
+										onClick={() => {
+											handleExtend(rowIndex);
+										}}
+									></Button>
+								</div>
+							{/if}
+							{#if cellIsExtended && cellIndex === Object.keys(row).length - 1 && numberOfColumn > 3}
+								<div class="cell">
+									<Button
+										variant="outline"
+										label="voir moins"
+										onClick={() => {
+											handleExtend(rowIndex);
+										}}
+									></Button>
+								</div>
+							{/if}
+						{/if}
+					{/if}
 				{/if}
 			{/each}
 		</div>
@@ -43,17 +137,27 @@
 		flex-direction: column;
 	}
 	.row {
+		all: unset;
 		display: flex;
 		border-bottom: 1px solid var(--stroke);
-        flex-shrink: 0;
-        min-width: max-content;
-        width: 100%;
+		flex-shrink: 0;
+		min-width: max-content;
+		width: 100%;
+		cursor: pointer;
+		position: relative;
 	}
 	.row:hover {
-		background-color: var(--bg-2);
+		background-color: var(--bg-d);
+	}
+
+	.selector {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.cell {
+		text-align: left;
 		width: var(--cell-width);
 		padding: var(--pad-m);
 		overflow: hidden;
@@ -61,8 +165,36 @@
 		border-right: 1px solid var(--stroke);
 		flex-shrink: 0;
 	}
+	.cell:focus {
+		outline: 1px solid var(--accent) !important;
+		z-index: 1;
+	}
 	.cell > h4 {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	/* mobile version */
+    .mobile{
+        width: 100%;
+        flex-shrink: 0;
+    }
+	.mobile .row {
+		width: 100%;
+		flex-direction: column;
+		min-width: unset;
+        flex-shrink: 0;
+	}
+	.mobile .cell {
+		width: 100%;
+		border-right: 0px;
+		display: flex;
+		align-items: center;
+		column-gap: var(--pad-m);
+		justify-content: space-between;
+	}
+	.mobile .cell:has(:nth-child(2)) > :last-child {
+		text-align: right;
+        flex-shrink: 0;
+	}
 </style>

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

@@ -0,0 +1,332 @@
+<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 '../MonthPicker/MonthPicker.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) {
+		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;
+						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>