@bexis2/bexis2-core-ui 0.3.12 → 0.3.13

package/README.md

@@ -1,4 +1,5 @@
 # bexis-core-ui
+## 0.3.13
 ## 0.3.12
 - table
   - Server-side data fetching

package/dist/components/File/FileUploader.svelte

@@ -1,4 +1,4 @@
-<script>import DropZone from "svelte-file-dropzone/Dropzone.svelte";
+<script>import Dropzone from "svelte-file-dropzone";
 import Fa from "svelte-fa/src/fa.svelte";
 import Spinner from "../page/Spinner.svelte";
 import { createEventDispatcher } from "svelte";
@@ -100,7 +100,7 @@ async function handleSubmit() {
 	{#if model}
 		<!--if model exist  -->
 		<div>
-			<DropZone
+			<Dropzone
 				on:drop={handleFilesSelect}
 				accept={model.accept}
 				multiple={model.multiple}
@@ -118,7 +118,7 @@ async function handleSubmit() {
 						{/each}
 					{/if}
 				</p>
-			</DropZone>
+			</Dropzone>
 			{#if isUploading}
 					<ProgressBar  value={undefined}/>
 			{/if}

package/dist/components/Table/TableContent.svelte

@@ -1,4 +1,7 @@
 <script>import { createEventDispatcher } from "svelte";
+import { readable, writable } from "svelte/store";
+import Fa from "svelte-fa";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
 import {
   addSortBy,
@@ -12,8 +15,19 @@ import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floati
 import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import TableFilter from "./TableFilter.svelte";
+import TableFilterServer from "./TableFilterServer.svelte";
 import TablePagination from "./TablePagination.svelte";
+import TablePaginationServer from "./TablePaginationServer.svelte";
 import { columnFilter, searchFilter } from "./filter";
+import {
+  cellStyle,
+  exportAsCsv,
+  fixedWidth,
+  normalizeFilters,
+  resetResize,
+  convertServerColumns
+} from "./shared";
+import { Receive, Send } from "../../models/Models";
 export let config;
 let {
   id: tableId,
@@ -38,18 +52,44 @@ let {
   // Page sizes to display in the pagination component
   fitToScreen = true,
   // Whether to fit the table to the screen,
-  exportable = false
+  exportable = false,
   // Whether to display the export button and enable export functionality
+  serverSide = false,
+  // Whether the table is client or server-side
+  URL = "",
+  // URL to fetch data from
+  token = "",
+  // Bearer token to authenticate the request
+  sendModel = new Send(),
+  // Model to send requests
+  entityId = 0,
+  // Entity ID to send with the request
+  versionId = 0
+  // Version ID to send with the request
 } = config;
+let searchValue = "";
+const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
+const serverItems = serverSide ? writable(0) : void 0;
+const serverItemCount = serverSide ? readable(0, (set) => {
+  serverItems.subscribe((val) => set(val));
+}) : void 0;
 const table = createTable(data, {
   colFilter: addColumnFilters(),
   tableFilter: addTableFilter({
-    fn: searchFilter
+    fn: searchFilter,
+    serverSide
+  }),
+  sort: addSortBy({
+    disableMultiSort: true,
+    serverSide
+  }),
+  page: addPagination({
+    initialPageSize: defaultPageSize,
+    serverSide,
+    serverItemCount
   }),
-  sort: addSortBy({ disableMultiSort: true }),
-  page: addPagination({ initialPageSize: defaultPageSize }),
   expand: addExpandedRows(),
   export: addDataExport({ format: "csv" })
 });
@@ -61,6 +101,9 @@ $data.forEach((item) => {
     }
   });
 });
+Object.keys(allCols).forEach((key) => {
+  $filters = { ...$filters, [key]: {} };
+});
 const accessors = Object.keys(allCols);
 const tableColumns = [
   ...accessors.filter((accessor) => {
@@ -99,7 +142,6 @@ const tableColumns = [
           // Sorting config
           sort: {
             disable: disableSorting,
-            invert: true,
             getSortValue: (row) => {
               return toSortableValueFn ? toSortableValueFn(row) : row;
             }
@@ -110,12 +152,22 @@ const tableColumns = [
               return colFilterFn ? colFilterFn({ filterValue: filterValue2, value: val }) : columnFilter({ filterValue: filterValue2, value: val });
             },
             render: ({ filterValue: filterValue2, values, id }) => {
-              return createRender(colFilterComponent ?? TableFilter, {
+              filterValue2.set($filters[key]);
+              return serverSide ? createRender(TableFilterServer, {
+                id,
+                tableId,
+                values,
+                updateTable,
+                pageIndex,
+                toFilterableValueFn,
+                filters
+              }) : createRender(colFilterComponent ?? TableFilter, {
                 filterValue: filterValue2,
                 id,
                 tableId,
                 values,
-                toFilterableValueFn
+                toFilterableValueFn,
+                filters
               });
             }
           } : void 0,
@@ -136,18 +188,26 @@ const tableColumns = [
         },
         plugins: {
           // Sorting enabled by default
-          sort: {
-            invert: true
-          },
+          sort: {},
           // Filtering enabled by default
           colFilter: {
             fn: columnFilter,
-            render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, {
-              filterValue: filterValue2,
-              id,
-              tableId,
-              values
-            })
+            render: ({ filterValue: filterValue2, values, id }) => {
+              return serverSide ? createRender(TableFilterServer, {
+                id,
+                tableId,
+                values,
+                updateTable,
+                pageIndex,
+                filters
+              }) : createRender(TableFilter, {
+                filterValue: filterValue2,
+                id,
+                tableId,
+                values,
+                filters
+              });
+            }
           }
         }
       });
@@ -177,68 +237,77 @@ const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
 const { exportedData } = pluginStates.export;
-const minWidth = (id) => {
-  if (columns && id in columns) {
-    return columns[id].minWidth ?? 0;
-  }
-  return 0;
-};
-const fixedWidth = (id) => {
-  if (columns && id in columns) {
-    return columns[id].fixedWidth ?? 0;
+const { pageIndex, pageSize } = pluginStates.page;
+const updateTable = async () => {
+  sendModel.limit = $pageSize;
+  sendModel.offset = $pageSize * $pageIndex;
+  sendModel.version = versionId;
+  sendModel.id = entityId;
+  sendModel.filter = normalizeFilters($filters);
+  const fetchData = await fetch(URL, {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`
+    },
+    method: "POST",
+    body: JSON.stringify(sendModel)
+  });
+  const response = await fetchData.json();
+  if (response.columns !== void 0) {
+    columns = convertServerColumns(response.columns);
   }
-  return 0;
-};
-const cellStyle = (id) => {
-  const minW = minWidth(id);
-  const fixedW = fixedWidth(id);
-  const styles = [];
-  minW && styles.push(`min-width: ${minW}px`);
-  fixedW && styles.push(`width: ${fixedW}px`);
-  return styles.join(";");
+  $data = response.data;
+  $serverItems = response.count;
+  return response;
 };
-const resetResize = () => {
-  if (resizable === "columns" || resizable === "both") {
-    $headerRows.forEach((row) => {
-      row.cells.forEach((cell) => {
-        const minW = minWidth(cell.id);
-        const fixedW = fixedWidth(cell.id);
-        fixedW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("width", `${fixedW}px`);
-        minW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("min-width", `${minW}px`);
-        !minW && !fixedW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("width", "auto");
-      });
-    });
+const sortServer = (order, id) => {
+  if (order === void 0) {
+    sendModel.order = [];
+  } else {
+    sendModel.order = [{ column: id, direction: order }];
   }
-  if (resizable === "rows" || resizable === "both") {
-    $pageRows.forEach((row) => {
-      row.cells.forEach((cell) => {
-        document.getElementById(`${tableId}-${cell.id}-${row.id}`)?.style.setProperty("height", "auto");
-      });
-    });
-  }
-};
-const exportAsCsv = () => {
-  const anchor = document.createElement("a");
-  anchor.style.display = "none";
-  anchor.href = `data:text/csv;charset=utf-8,${encodeURIComponent($exportedData)}`;
-  anchor.download = `${tableId}.csv`;
-  document.body.appendChild(anchor);
-  anchor.click();
-  document.body.removeChild(anchor);
+  $pageIndex = 0;
+  updateTable();
 };
+$:
+  sortKeys = pluginStates.sort.sortKeys;
+$:
+  serverSide && updateTable();
+$:
+  serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
 		<!-- Enable the search filter if table is not empty -->
 		{#if $data.length > 0}
-			<input
-				class="input p-2 border border-primary-500"
-				type="text"
-				bind:value={$filterValue}
-				placeholder="Search rows..."
-				id="{tableId}-search"
-			/>
+			{#if !serverSide}
+				<div class="flex gap-2">
+					<div class="relative w-full flex items-center">
+						<input
+							class="input p-2 border border-primary-500"
+							type="text"
+							bind:value={searchValue}
+							placeholder="Search rows..."
+							id="{tableId}-search"
+						/><button
+							type="reset"
+							class="absolute right-3 items-center"
+							on:click|preventDefault={() => {
+								searchValue = '';
+								$filterValue = '';
+							}}><Fa icon={faXmark} /></button
+						>
+					</div>
+					<button
+						type="button"
+						class="btn variant-filled-primary"
+						on:click|preventDefault={() => {
+							$filterValue = searchValue;
+						}}>Search</button
+					>
+				</div>
+			{/if}
 			<div class="flex justify-between items-center py-2 w-full">
 				<div>
 					<!-- Enable the fitToScreen toggle if toggle === true -->
@@ -259,14 +328,17 @@ const exportAsCsv = () => {
 						<button
 							type="button"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							on:click|preventDefault={resetResize}>Reset sizing</button
+							on:click|preventDefault={() =>
+								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
+							>Reset sizing</button
 						>
 					{/if}
 					{#if exportable}
 						<button
 							type="button"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							on:click|preventDefault={exportAsCsv}>Export as CSV</button
+							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
+							>Export as CSV</button
 						>
 					{/if}
 				</div>
@@ -289,46 +361,45 @@ const exportAsCsv = () => {
 								rowProps={headerRow.props()}
 								let:rowProps
 							>
-								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500 items-stretch">
+								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500">
 									{#each headerRow.cells as cell (cell.id)}
 										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-											<th
-												scope="col"
-												class="!p-2 overflow-auto"
-												class:resize-x={(resizable === 'columns' || resizable === 'both') &&
-													!fixedWidth(cell.id)}
-												{...attrs}
-												id="th-{tableId}-{cell.id}"
-												style={cellStyle(cell.id)}
-											>
-												<div class="flex justify-between items-center">
-													<div class="flex gap-1 whitespace-pre-wrap">
-														<!-- Adding sorting config and styling -->
-														<span
-															class:underline={props.sort.order}
-															class:normal-case={cell.id !== cell.label}
-															class:cursor-pointer={!props.sort.disabled}
-															on:click={props.sort.toggle}
-															on:keydown={props.sort.toggle}
-														>
-															{cell.render()}
-														</span>
-														<div class="w-2">
-															{#if props.sort.order === 'asc'}
-																▾
-															{:else if props.sort.order === 'desc'}
-																▴
-															{/if}
-														</div>
-													</div>
-													<!-- Adding column filter config -->
-													{#if cell.isData()}
-														{#if props.colFilter?.render}
-															<div class="">
-																<Render of={props.colFilter.render} />
+											<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
+												<div
+													class="overflow-auto"
+													class:resize-x={(resizable === 'columns' || resizable === 'both') &&
+														!fixedWidth(cell.id, columns)}
+													id="th-{tableId}-{cell.id}"
+												>
+													<div class="flex justify-between items-center">
+														<div class="flex gap-1 whitespace-pre-wrap">
+															<!-- Adding sorting config and styling -->
+															<span
+																class:underline={props.sort.order}
+																class:normal-case={cell.id !== cell.label}
+																class:cursor-pointer={!props.sort.disabled}
+																on:click={props.sort.toggle}
+																on:keydown={props.sort.toggle}
+															>
+																{cell.render()}
+															</span>
+															<div class="w-2">
+																{#if props.sort.order === 'asc'}
+																	▴
+																{:else if props.sort.order === 'desc'}
+																	▾
+																{/if}
 															</div>
+														</div>
+														<!-- Adding column filter config -->
+														{#if cell.isData()}
+															{#if props.colFilter?.render}
+																<div class="">
+																	<Render of={props.colFilter.render} />
+																</div>
+															{/if}
 														{/if}
-													{/if}
+													</div>
 												</div>
 											</th>
 										</Subscribe>
@@ -349,20 +420,21 @@ const exportAsCsv = () => {
 								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
 									{#each row.cells as cell, index (cell?.id)}
 										<Subscribe attrs={cell.attrs()} let:attrs>
-											<td
-												{...attrs}
-												class="!p-2 overflow-auto {index === 0 &&
-												(resizable === 'rows' || resizable === 'both')
-													? 'resize-y'
-													: ''}"
-												id="{tableId}-{cell.id}-{row.id}"
-											>
-												<!-- Adding config for initial rowHeight, if provided -->
+											<td {...attrs} class="!p-2">
 												<div
-													class="flex items-center"
-													style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+													class=" overflow-auto h-max {index === 0 &&
+													(resizable === 'rows' || resizable === 'both')
+														? 'resize-y'
+														: ''}"
+													id="{tableId}-{cell.id}-{row.id}"
 												>
-													<div class="grow h-full"><Render of={cell.render()} /></div>
+													<!-- Adding config for initial rowHeight, if provided -->
+													<div
+														class="flex items-center overflow-auto"
+														style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+													>
+														<div class="grow h-full"><Render of={cell.render()} /></div>
+													</div>
 												</div>
 											</td>
 										</Subscribe>
@@ -377,6 +449,17 @@ const exportAsCsv = () => {
 	</div>
 	{#if $data.length > 0}
 		<!-- Adding pagination, if table is not empty -->
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
+		{#if serverSide}
+			<TablePaginationServer
+				{pageIndex}
+				{pageSize}
+				{serverItemCount}
+				{updateTable}
+				{pageSizes}
+				id={tableId}
+			/>
+		{:else}
+			<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
+		{/if}
 	{/if}
 </div>