From f4cf759924bed9722845cc5bb1711287666caf5a Mon Sep 17 00:00:00 2001
From: AnteSuvala <antejunior2003@gmail.com>
Date: Tue, 17 Dec 2024 09:32:59 +0100
Subject: [PATCH 1/3] Add reset to default button in arrange columns #302

---
 docs/docs/async-table.md                      |  1 +
 .../demo/src/OtherDemos/AsyncTableDemo.svelte |  1 +
 .../lib/src/async-table/async-table.wc.svelte | 25 +++++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/docs/async-table.md b/docs/docs/async-table.md
index 146d29e4..f6be631d 100644
--- a/docs/docs/async-table.md
+++ b/docs/docs/async-table.md
@@ -18,6 +18,7 @@ import '../static/c/async-table.css';
 | showArrangingColumns |              |            `boolean`            |                should the button for arranging columns be shown                 |
 |      showExport      |              |            `boolean`            |                      should the button for export be shown                      |
 |  dropdownMenuExport  |              |            `boolean`            | should the button for export download csv or can you have more download options |
+|  showResetToDefault  |              |            `boolean`            |                should the button for reseting to default be shown               |
 <br></br>
 ****
 
diff --git a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
index dbc3aa52..d5d916a3 100644
--- a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
+++ b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
@@ -120,6 +120,7 @@
     asyncTable.height = '500px';
     asyncTable.freezeFirstColumn = true;
     asyncTable.freezeLastColumn = true;
+    asyncTable.showResetToDefault = true;
     el.appendChild(asyncTable);
   });
 
diff --git a/packages/lib/src/async-table/async-table.wc.svelte b/packages/lib/src/async-table/async-table.wc.svelte
index 00de5d1e..3446c2d3 100644
--- a/packages/lib/src/async-table/async-table.wc.svelte
+++ b/packages/lib/src/async-table/async-table.wc.svelte
@@ -23,7 +23,8 @@
     LOADING: 'Loading',
     LOAD_MORE: 'Load more',
     PAGE_SIZE: 'Page size',
-    SAVE: 'Save'
+    SAVE: 'Save',
+    RESET: 'Reset'
   };
 
   export let allowArrangeColumns = true;
@@ -41,9 +42,11 @@
   export let service: TableService;
   export let id: string;
   export let height: string | null = null;
+  export let showResetToDefault = true;
 
   let additionalExportTypes = [];
   let activeHeaders: TableHeader[] = [];
+  const defaultHeaders = headers;
 
   let isOpen = false;
   let resolved: string[] = [];
@@ -134,7 +137,7 @@
     const { key, fallback, pipes } = header;
 
     let value: any;
-    
+
     try {
       value = get(row, key);
     } catch {
@@ -489,11 +492,23 @@
     exportDataGeneric(option);
     isOpen = false;
   };
+
+  function handleReset() {
+    headers = defaultHeaders;
+    headers.forEach((header) => {
+      header.disabled = false;
+    });
+  }
 </script>
 
 <div class="jp-async-table">
   {#if showArrangingColumns || showImport || showExport}
     <div class="jp-async-table-header">
+      {#if showResetToDefault}
+        <button on:click={handleReset} class="jp-async-table-button">
+          {wording.RESET}
+        </button>
+      {/if}
       {#if showArrangingColumns}
         &nbsp;
         <button type="button" on:click={arrangeColumns} class="jp-async-table-button">
@@ -566,7 +581,7 @@
                 class:jp-async-table-sticky-last={index === headers.length - 1 && freezeLastColumn}
                 class:jp-async-table-no-cursor={header.disableOrganize}
                 class:jp-async-table-hover-over={hoveringOverColumnIndex === index}
-                class={`jp-async-table-header-cell-${header.key.slice(1).replace(/\//g, '(?!^)\/')}`}
+                class={`jp-async-table-header-cell-${header.key.slice(1).replace(/\//g, '(?!^)/')}`}
                 draggable={allowArrangeColumns && !header.disableOrganize}
                 on:click={() => adjustSort(header)}
                 on:dragstart={(e) => {
@@ -615,7 +630,7 @@
                   class:jp-async-table-sticky-last={columnIndex === headers.length - 1 &&
                     freezeLastColumn}
                   class:jp-async-table-hover-over={hoveringOverColumnIndex === columnIndex}
-                  class={`jp-async-table-cell-${header.key.slice(1).replace(/\//g, '(?!^)\/')}`}
+                  class={`jp-async-table-cell-${header.key.slice(1).replace(/\//g, '(?!^)/')}`}
                   on:click={(e) => rowClick(row, rowIndex, header, e)}
                 >
                   {#await handleColumn(header, row, rowIndex) then val}
@@ -699,7 +714,7 @@
                   if (!column.disableOrganize) drop(e, index);
                 }}
               >
-              {@html dragHandleIcon}
+                {@html dragHandleIcon}
               </span><input type="checkbox" value={true} bind:checked={column.enabled} />
               <span>{@html column.label}</span>
             </label>{/if}

From 635ca65a23e32c0e17420ba5555f161701c9170c Mon Sep 17 00:00:00 2001
From: AnteSuvala <antejunior2003@gmail.com>
Date: Thu, 16 Jan 2025 13:27:24 +0100
Subject: [PATCH 2/3] feat(asynctable): added reset to default button

---
 .../demo/src/OtherDemos/AsyncTableDemo.svelte     | 11 ++++++++++-
 .../lib/src/async-table/async-table.wc.svelte     | 15 +++++++--------
 packages/lib/src/types/table.service.ts           |  3 +++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
index d5d916a3..f843d9a6 100644
--- a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
+++ b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
@@ -39,7 +39,7 @@
   onMount(() => {
     const asyncTable = document.createElement('jp-async-table') as any;
     asyncTable.dropdownMenuExport = true;
-    asyncTable.headers = [
+    asyncTable.defaultHeaders = [
       {
         key: '/name',
         label: 'Name'
@@ -71,6 +71,7 @@
         disabled: true
       }
     ];
+    asyncTable.headers = asyncTable.defaultHeaders;
     asyncTable.service = {
       get: async () => {
         let rows = [...Array(100).keys()].map(() => ({
@@ -110,6 +111,13 @@
         const storedValue = localStorage.getItem(id);
         return storedValue ? JSON.parse(storedValue) : null;
       },
+      setDefault: async () => {
+        localStorage.setItem('default', JSON.stringify(asyncTable.defaultHeaders));
+      },
+      getDefault: async () => {
+        const storedValue = localStorage.getItem('default');
+        return storedValue ? JSON.parse(storedValue) : null;
+      },
       adjustPageSize: async () => {},
       adjustSort: async () => {}
     };
@@ -122,6 +130,7 @@
     asyncTable.freezeLastColumn = true;
     asyncTable.showResetToDefault = true;
     el.appendChild(asyncTable);
+    asyncTable.service.setDefault();
   });
 
   function applyFilters() {
diff --git a/packages/lib/src/async-table/async-table.wc.svelte b/packages/lib/src/async-table/async-table.wc.svelte
index 3446c2d3..5592a466 100644
--- a/packages/lib/src/async-table/async-table.wc.svelte
+++ b/packages/lib/src/async-table/async-table.wc.svelte
@@ -43,11 +43,9 @@
   export let id: string;
   export let height: string | null = null;
   export let showResetToDefault = true;
-
+  export let defaultHeaders: TableHeader[] = [];
   let additionalExportTypes = [];
   let activeHeaders: TableHeader[] = [];
-  const defaultHeaders = headers;
-
   let isOpen = false;
   let resolved: string[] = [];
 
@@ -483,6 +481,9 @@
           });
       }
     }
+    if (service.getDefault) {
+      defaultHeaders = await service.getDefault();
+    }
 
     activeHeaders = headers.filter((it) => !it.disabled);
     await getData();
@@ -493,11 +494,9 @@
     isOpen = false;
   };
 
-  function handleReset() {
-    headers = defaultHeaders;
-    headers.forEach((header) => {
-      header.disabled = false;
-    });
+  async function handleReset() {
+    headers = JSON.parse(JSON.stringify(defaultHeaders));
+    activeHeaders = headers.filter((it) => !it.disabled);
   }
 </script>
 
diff --git a/packages/lib/src/types/table.service.ts b/packages/lib/src/types/table.service.ts
index 2e392585..03795a96 100644
--- a/packages/lib/src/types/table.service.ts
+++ b/packages/lib/src/types/table.service.ts
@@ -13,4 +13,7 @@ export interface TableService<T = any> {
   adjustSort?: (sort: TableSort) => Promise<void>;
   export?: () => Promise<T[]>;
   import?: (file: File) => Promise<T[]>;
+  setDefault?: (
+  ) => Promise<void>;
+  getDefault?: () => Promise<Array<{ key: string; disabled?: boolean; label: string }>>;	
 }

From 49d17b509e1cdfdb7e389ee6aa4c8a9b63256f28 Mon Sep 17 00:00:00 2001
From: AnteSuvala <antejunior2003@gmail.com>
Date: Thu, 16 Jan 2025 14:27:07 +0100
Subject: [PATCH 3/3] feat(async-table): update reset logic and docs

---
 docs/docs/async-table.md                           | 3 +++
 packages/demo/src/OtherDemos/AsyncTableDemo.svelte | 2 +-
 packages/lib/src/async-table/async-table.wc.svelte | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/docs/async-table.md b/docs/docs/async-table.md
index f6be631d..f4c88138 100644
--- a/docs/docs/async-table.md
+++ b/docs/docs/async-table.md
@@ -19,6 +19,7 @@ import '../static/c/async-table.css';
 |      showExport      |              |            `boolean`            |                      should the button for export be shown                      |
 |  dropdownMenuExport  |              |            `boolean`            | should the button for export download csv or can you have more download options |
 |  showResetToDefault  |              |            `boolean`            |                should the button for reseting to default be shown               |
+|    defaultHeaders    |              | [`TableHeader[]`](#tableheader) |                              default table headers.                             |
 <br></br>
 ****
 
@@ -77,6 +78,8 @@ Defines methods for fetching and loading more table data.
 |        export         | `function` |     retrieves all data that should be included when export is triggered by the table      |
 |    arrangeColumns     | `function` |                This method is intended for persisting column organization                 |
 | additionalExportTypes | `function` |          This method is intended for adding additional export types to function           |
+|      setDefault       | `function` |                 This method is intended for adding default Headers state                  |
+|      getDefault       | `function` |                This method is intended for getting default Headers state                  |
 <br></br>
 ****
 
diff --git a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
index f843d9a6..314d2317 100644
--- a/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
+++ b/packages/demo/src/OtherDemos/AsyncTableDemo.svelte
@@ -71,7 +71,7 @@
         disabled: true
       }
     ];
-    asyncTable.headers = asyncTable.defaultHeaders;
+    asyncTable.headers =  JSON.parse(JSON.stringify(asyncTable.defaultHeaders));
     asyncTable.service = {
       get: async () => {
         let rows = [...Array(100).keys()].map(() => ({
diff --git a/packages/lib/src/async-table/async-table.wc.svelte b/packages/lib/src/async-table/async-table.wc.svelte
index 5592a466..c22814a0 100644
--- a/packages/lib/src/async-table/async-table.wc.svelte
+++ b/packages/lib/src/async-table/async-table.wc.svelte
@@ -495,7 +495,7 @@
   };
 
   async function handleReset() {
-    headers = JSON.parse(JSON.stringify(defaultHeaders));
+    headers = [...defaultHeaders];
     activeHeaders = headers.filter((it) => !it.disabled);
   }
 </script>