lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

fixed datatable-emptystate transition

Browse Source 
ref #11
This commit is contained in:
Philipp Dormann 2021-01-05 20:27:06 +01:00
parent 6e00ac8f1f
commit 10bf88e4ba
1 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/Tracks.svelte
View File

@ -7,36 +7,29 @@
import { Grid, html } from "gridjs"; import { Grid, html } from "gridjs";
import "gridjs/dist/theme/mermaid.css"; import "gridjs/dist/theme/mermaid.css";
import { tracks as tracksstore } from "../store.js"; import { tracks as tracksstore } from "../store.js";
let trackscache = []; $: trackscache = [];
let table; let table;
let datatable; let datatable;
let datatable_inited = false; let datatable_inited = false;
let initial_load_done = false; tracksstore.subscribe((val) => {
trackscache = val;
setTimeout(() => {
if (val.length > 0) {
renderdatatable();
}
}, 100);
});
tracks_promise.then((data) => { tracks_promise.then((data) => {
tracksstore.set(data); tracksstore.set(data);
tracksstore.subscribe((val) => {
trackscache = val;
if (initial_load_done === false) {
initial_load_done = true;
}
setTimeout(() => {
renderdatatable();
}, 100);
});
if (trackscache.length > 0) {
table_visible = true;
}
}); });
window.track__delete_handler = () => { window.track__delete_handler = () => {
const trackid = parseInt(window.event.target.getAttribute("data-trackid")); const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
// const track = trackscache.find((e) => e.id == trackid);
// console.log(track);
// -----
// TODO: modal or double click confirmation? // TODO: modal or double click confirmation?
TrackService.trackControllerRemove(trackid) TrackService.trackControllerRemove(trackid)
.then((resp) => { .then(() => {
const newStoreVal = trackscache.filter((obj) => obj.id !== trackid); const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
tracksstore.set(newStoreVal); tracksstore.set(newStoreVal);
renderdatatable();
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
@ -55,36 +48,36 @@
`), `),
]); ]);
}); });
if (trackscache.length > 0) {
if (datatable_inited === false) { if (datatable_inited === false) {
datatable = new Grid({ datatable = new Grid({
columns: [ columns: [
$_("track-name"), $_("track-name"),
$_("track-length-in-m"), $_("track-length-in-m"),
$_("minimum-lap-time-in-s"), $_("minimum-lap-time-in-s"),
$_("action"), $_("action"),
], ],
language: getlang($json("datatable")), language: getlang($json("datatable")),
sort: true, sort: true,
search: { enabled: true }, search: { enabled: true },
data: tabledata, data: tabledata,
pagination: { pagination: {
enabled: true, enabled: true,
limit: 25, limit: 25,
summary: false, summary: false,
}, },
}).render(table); }).render(table);
datatable_inited = true; datatable_inited = true;
} else { } else {
datatable.updateConfig({ data: tabledata }).forceRender(); datatable.updateConfig({ data: tabledata }).forceRender();
}
} }
} }
let table_visible = false;
</script> </script>
{#if table_visible} {#if trackscache.length > 0}
<div bind:this={table} /> <div bind:this={table} />
{:else}
<TracksEmptyState />
{/if} {/if}
{#await tracks_promise} {#await tracks_promise}
<div <div
@ -93,12 +86,6 @@
<p class="font-bold">{$_('track-data-is-being-loaded')}</p> <p class="font-bold">{$_('track-data-is-being-loaded')}</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div> </div>
{:then tracks}
{#if tracks.length > 0}
<!-- -->
{:else}
<TracksEmptyState />
{/if}
{:catch error} {:catch error}
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"> <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
<span class="inline-block align-middle mr-8"> <span class="inline-block align-middle mr-8">