src/components/cards/CardsOverview.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getLocaleFromNavigator, json, _ } from "svelte-i18n";
-  import InfiniteLoading from 'svelte-infinite-loading';
   import { RunnerCardService } from "@odit/lfk-client-js";
   import store from "../../store";
   import Toastify from "toastify-js";
@@ -12,21 +11,11 @@
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
-  $: filtered_cards = current_cards.filter(function (c) {
-    if (
-      c.code.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
-      c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
-      should_display_based_on_id(c.id)
-    ) {
-      return true;
-    }
-  });
   $: searchvalue = "";
-  $: searchvalue_lowercase = searchvalue.toLowerCase();
   $: active_deletes = [];
-  $: cards_show = current_cards.some((r) => r.is_selected === true);
+  $: cards_show = current_cards.some(
+    (r) => r.is_selected === true
+  );
   $: generate_cards = current_cards.filter((r) => r.is_selected === true);
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
@@ -57,38 +46,8 @@
     original_data = Object.assign(original_data, card);
     edit_modal_open = true;
   }
-// -----------------
-  let scrollTop = 0;
-  $: rendered = filtered_cards;
-  let innerHeight = 0;
-  let ele;
-  $: updateSlice(scrollTop);
-  $: innerHeight = `${filtered_cards.length * 25}px`;
-  $: if (ele) updateSlice();
-  function updateSlice() {
-    const height = ele ? parseInt(ele.clientHeight) : 100;
-    const init = scrollTop / 25;
-    const end = Math.ceil((scrollTop + height) / 25);
-    rendered = filtered_cards.slice(init, end + 15);
-  }
-  function updateScroll($event) {
-    scrollTop = $event.target.scrollTop;
-  }
 </script>
 
-<style>
-  table tbody {
-  display: block;
-  overflow-y: scroll;
-}
-
-table thead, table tbody tr {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-</style>
-
 {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
   <CardDetailModal
     bind:current_cards
@@ -162,111 +121,107 @@ table thead, table tbody tr {
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-200 virtual-wrapper"
+          <tbody class="divide-y divide-gray-200">
-  on:scroll={updateScroll}
+            {#each current_cards as card}
-  style="height: 70vh; width:100%"
+              {#if card.code
-  bind:this={ele}
+                .toLowerCase()
-          >
+                .includes(
-    {#each filtered_cards as card, index}
+                  searchvalue.toLowerCase()
-    {#if card.code
+                ) || card.runner?.firstname
-      .toLowerCase()
+                  .toLowerCase()
-      .includes(
+                  .includes(
-        searchvalue.toLowerCase()
+                    searchvalue.toLowerCase()
-      ) || card.runner?.firstname
+                  ) || card.runner?.middlename
-        .toLowerCase()
+                  .toLowerCase()
-        .includes(
+                  .includes(
-          searchvalue.toLowerCase()
+                    searchvalue.toLowerCase()
-        ) || card.runner?.middlename
+                  ) || card.runner?.lastname
-        .toLowerCase()
+                  .toLowerCase()
-        .includes(
+                  .includes(
-          searchvalue.toLowerCase()
+                    searchvalue.toLowerCase()
-        ) || card.runner?.lastname
+                  ) || should_display_based_on_id(card.id)}
-        .toLowerCase()
+                <tr data-rowid="card_{card.id}">
-        .includes(
+                  <td class="px-6 py-4 whitespace-nowrap">
-          searchvalue.toLowerCase()
+                    <input
-        ) || should_display_based_on_id(card.id)}
+                      bind:checked={card.is_selected}
-      <tr data-rowid="card_{card.id}">
+                      type="checkbox"
-        <td class="px-6 py-4 whitespace-nowrap">
+                      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-          <input
+                  </td>
-            bind:checked={card.is_selected}
+                  <td class="px-6 py-4 whitespace-nowrap">
-            type="checkbox"
+                    <div class="flex items-center">{card.code}</div>
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+                  </td>
-        </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
-        <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
-          <div class="flex items-center">{card.code}</div>
+                      {#if card.runner}
-        </td>
+                        <a
-        <td class="px-6 py-4 whitespace-nowrap">
+                          href="../runners/{card.runner.id}"
-          <div class="flex items-center">
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
-            {#if card.runner}
+                          {card.runner.middlename || ''}
-              <a
+                          {card.runner.lastname}</a>
-                href="../runners/{card.runner.id}"
+                      {:else}{$_('non-blanko')}{/if}
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{card.runner.firstname}
+                    </div>
-                {card.runner.middlename || ''}
+                  </td>
-                {card.runner.lastname}</a>
+                  <td class="px-6 py-4 whitespace-nowrap">
-            {:else}{$_('non-blanko')}{/if}
+                    <div class="flex items-center">
-          </div>
+                      {#if card.enabled}
-        </td>
+                        <span
-        <td class="px-6 py-4 whitespace-nowrap">
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
-          <div class="flex items-center">
+                      {:else}
-            {#if card.enabled}
+                        <span
-              <span
+                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">{$_('enabled')}</span>
+                      {/if}
-            {:else}
+                    </div>
-              <span
+                  </td>
-                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">{$_('disabled')}</span>
-            {/if}
-          </div>
-        </td>
 
-        {#if active_deletes[card.id] === true}
+                  {#if active_deletes[card.id] === true}
-          <td
+                    <td
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <button
+                      <button
-              on:click={() => {
+                        on:click={() => {
-                active_deletes[card.id] = false;
+                          active_deletes[card.id] = false;
-              }}
+                        }}
-              tabindex="0"
+                        tabindex="0"
-              class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
-            <button
+                      <button
-              on:click={() => {
+                        on:click={() => {
-                RunnerCardService.runnerCardControllerRemove(card.id, false).then(
+                          RunnerCardService.runnerCardControllerRemove(card.id, false).then(
-                  (resp) => {
+                            (resp) => {
-                    current_cards = current_cards.filter(
+                              current_cards = current_cards.filter(
-                      (obj) => obj.id !== card.id
+                                (obj) => obj.id !== card.id
-                    );
+                              );
-                    Toastify({
+                              Toastify({
-                      text: $_('card-deleted'),
+                                text: $_('card-deleted'),
-                      duration: 500,
+                                duration: 500,
-                      backgroundColor:
+                                backgroundColor:
-                        'linear-gradient(to right, #00b09b, #96c93d)',
+                                  'linear-gradient(to right, #00b09b, #96c93d)',
-                    }).showToast();
+                              }).showToast();
-                  }
+                            }
-                );
+                          );
-              }}
+                        }}
-              tabindex="0"
+                        tabindex="0"
-              class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
-          </td>
+                    </td>
-        {:else}
+                  {:else}
-          <td
+                    <td
-            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <button
+                      <button
-              on:click={() => {
+                        on:click={() => {
-                open_edit_modal(card);
+                          open_edit_modal(card);
-              }}
+                        }}
-              class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
+                        class="text-indigo-600 hover:text-indigo-900">{$_('details')}</button>
-            {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:DELETE')}
-              <button
+                        <button
-                on:click={() => {
+                          on:click={() => {
-                  active_deletes[card.id] = true;
+                            active_deletes[card.id] = true;
-                }}
+                          }}
-                tabindex="0"
+                          tabindex="0"
-                class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>
-            {/if}
+                      {/if}
-          </td>
+                    </td>
-        {/if}
+                  {/if}
-      </tr>
+                </tr>
-    {/if}
+              {/if}
-    {/each}
+            {/each}
           </tbody>
         </table>
       </div>