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,12 +121,8 @@ 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%"
-  bind:this={ele}
-          >
-    {#each filtered_cards as card, index}
               {#if card.code
                 .toLowerCase()
                 .includes(