updated virtual scroll list

This commit is contained in:
Philipp Dormann 2021-04-07 18:38:52 +02:00
parent 4cad86cf85
commit 1376788016

View File

@ -14,16 +14,17 @@
export let current_cards = []; export let current_cards = [];
$: filtered_cards = current_cards.filter(function (c) { $: filtered_cards = current_cards.filter(function (c) {
if ( if (
c.code.toLowerCase().includes(searchvalue.toLowerCase()) || c.code.toLowerCase().includes(searchvalue_lowercase) ||
c.runner?.firstname.toLowerCase().includes(searchvalue.toLowerCase()) || c.runner?.firstname.toLowerCase().includes(searchvalue_lowercase) ||
c.runner?.middlename.toLowerCase().includes(searchvalue.toLowerCase()) || c.runner?.middlename.toLowerCase().includes(searchvalue_lowercase) ||
c.runner?.lastname.toLowerCase().includes(searchvalue.toLowerCase()) || c.runner?.lastname.toLowerCase().includes(searchvalue_lowercase) ||
should_display_based_on_id(c.id) should_display_based_on_id(c.id)
) { ) {
return true; return true;
} }
}); });
$: searchvalue = ""; $: searchvalue = "";
$: searchvalue_lowercase = searchvalue.toLowerCase();
$: active_deletes = []; $: 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); $: generate_cards = current_cards.filter((r) => r.is_selected === true);
@ -57,7 +58,6 @@
edit_modal_open = true; edit_modal_open = true;
} }
// ----------------- // -----------------
export let wrapperHeight = "500px";
let scrollTop = 0; let scrollTop = 0;
$: rendered = filtered_cards; $: rendered = filtered_cards;
let innerHeight = 0; let innerHeight = 0;
@ -121,7 +121,6 @@ table thead, table tbody tr {
bind:cards_show bind:cards_show
bind:generate_cards /> bind:generate_cards />
</div> </div>
{rendered.length}
<div <div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"> class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
<table class="divide-y divide-gray-200 w-full"> <table class="divide-y divide-gray-200 w-full">
@ -165,7 +164,7 @@ table thead, table tbody tr {
</thead> </thead>
<tbody class="divide-y divide-gray-200 virtual-wrapper" <tbody class="divide-y divide-gray-200 virtual-wrapper"
on:scroll={updateScroll} on:scroll={updateScroll}
style="height: {wrapperHeight}; width:100%" style="height: 70vh; width:100%"
bind:this={ele} bind:this={ele}
> >
{#each filtered_cards as card, index} {#each filtered_cards as card, index}