drop old datatables

package.json

@@ -45,7 +45,6 @@
 		"@paralleldrive/cuid2": "^2.2.0",
 		"@tanstack/svelte-table": "^8.8.5",
 		"@tanstack/table-core": "^8.8.5",
-		"@vincjo/datatables": "^1.5.2",
 		"check-password-strength": "2.0.7",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",

pnpm-lock.yaml

@@ -13,9 +13,6 @@ dependencies:
   '@tanstack/table-core':
     specifier: ^8.8.5
     version: 8.8.5
-  '@vincjo/datatables':
-    specifier: ^1.5.2
-    version: 1.5.2
   check-password-strength:
     specifier: 2.0.7
     version: 2.0.7
@@ -641,10 +638,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /@vincjo/datatables@1.5.2:
-    resolution: {integrity: sha512-pdpwJ0y/CobZdfIxeujXB1jIARVlaKRf0aGhr6cINdUTuW0Ab0kgpZNy/MdAXnKeE6lBFzBXjI8FcJzkdmN/wg==}
-    dev: false
-
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}

src/App.svelte

@@ -1,6 +1,5 @@
 <script>
   import "toastify-js/src/toastify.css";
-  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);

src/components/cards/CardsOverview.svelte

@@ -3,7 +3,6 @@
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
@@ -89,8 +88,7 @@
               Toastify({
                 text: $_("cards-deleted"),
                 duration: 3500,
-                backgroundColor:
+                backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-                  "linear-gradient(to right, #00b09b, #96c93d)",
               }).showToast();
               //TODO: Delete cards from table
             }}
@@ -114,7 +112,6 @@
         {/if}
         <GenerateRunnerCards bind:cards_show bind:generate_cards />
       </div>
-      <Datatable {handler}>
       <table>
         <thead>
           <tr>
@@ -152,12 +149,10 @@
                 <input
                   type="checkbox"
                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
-                    checked={generate_cards.filter((i) => i.id == row.id)
+                  checked={generate_cards.filter((i) => i.id == row.id).length >
-                      .length > 0}
+                    0}
                   on:click={() => {
-                      if (
+                    if (generate_cards.findIndex((i) => i.id == row.id) == -1) {
-                        generate_cards.findIndex((i) => i.id == row.id) == -1
-                      ) {
                       generate_cards.push(row);
                       generate_cards = generate_cards;
                     } else {
@@ -206,10 +201,7 @@
                   >
                   <button
                     on:click={() => {
-                        RunnerCardService.runnerCardControllerRemove(
+                      RunnerCardService.runnerCardControllerRemove(row.id, true)
-                          row.id,
-                          true
-                        )
                         .then((resp) => {
                           current_cards = current_cards.filter(
                             (obj) => obj.id !== row.id
@@ -245,7 +237,6 @@
           {/each}
         </tbody>
       </table>
-      </Datatable>
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">

src/components/contacts/ContactsOverview.svelte

@@ -31,7 +31,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">

src/components/donations/DonationsOverview.svelte

@@ -49,7 +49,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">

src/components/donors/DonorsOverview.svelte

@@ -51,7 +51,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">

src/components/groups/UserGroupsOverview.svelte

@@ -30,7 +30,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">

src/components/orgs/OrgOverview.svelte

@@ -51,7 +51,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div class="h-12">
         <GenerateSponsoringContracts
             bind:sponsoring_contracts_show

src/components/presets/DataTable.svelte

@@ -1,30 +0,0 @@
-<script>
-  import { _, json } from "svelte-i18n";
-  import { getlang } from "./datatable_i18n";
-  import { Grid } from "gridjs";
-  //
-  let table;
-  const datatable = new Grid({
-    columns: ["Name", "Email", "Phone Number"],
-    language: getlang($json("datatable")),
-    sort: true,
-    search: { enabled: true },
-    data: [
-      ["John", "john@example.com", "(353) 01 222 3333"],
-      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
-      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
-      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
-      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
-    ],
-    pagination: {
-      enabled: true,
-      limit: 2,
-      summary: false,
-    },
-  });
-  setTimeout(() => {
-    datatable.render(table);
-  }, 0);
-</script>
-
-<div bind:this={table} />

src/components/scans/ScansOverview.svelte

@@ -1,6 +1,5 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import { ScanService, TrackService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
@@ -57,7 +56,6 @@
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
       >
-        <Datatable {handler}>
         <table class="divide-y divide-gray-200 w-full">
           <thead class="bg-gray-50">
             <tr>
@@ -219,7 +217,6 @@
             {/each}
           </tbody>
         </table>
-        </Datatable>
       </div>
     {/if}
   {:catch error}

src/components/scanstations/ScanStationsOverview.svelte

@@ -41,7 +41,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">

src/components/statsclients/StatsClientsOverview.svelte

@@ -41,7 +41,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div
         class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
         <table class="divide-y divide-gray-200 w-full">

src/components/teams/TeamsOverview.svelte

@@ -57,7 +57,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <div class="h-12">
         <GenerateSponsoringContracts
           bind:sponsoring_contracts_show

src/components/tracks/Tracks.svelte

@@ -57,9 +57,9 @@
             .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
             .classList.add("hidden");
           //
-          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName">${elem.childNodes[0].childNodes[0].value}</td>`;
-          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName">${elem.childNodes[1].childNodes[0].value}</td>`;
-          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName">${elem.childNodes[2].childNodes[0].value}</td>`;
         })
         .catch((err) => {});
     }

src/components/users/UsersOverview.svelte

@@ -36,7 +36,7 @@
         bind:value={searchvalue}
         placeholder={$_('datatable.search')}
         aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
+        class="mb-4" />
       <!-- {/if} -->
       <!-- <button
         on:click={() => {

src/main.js

@@ -1,6 +1,5 @@
 import './style.css';
 import "toastify-js/src/toastify.css";
-import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';
 
 const app = new App({