Basic card table replace
This commit is contained in:
parent
52a02c82d2
commit
5662c3b6da
GPG Key ID:
13AFA55AF62F269F
16
src/components/cards/CardRunner.svelte
Normal file
16
src/components/cards/CardRunner.svelte
Normal file
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
export let runner;
|
||||
</script>
|
||||
|
||||
{#if !runner}
|
||||
{$_("non-blanko")}
|
||||
{:else}
|
||||
<a href={`/runners/${runner.id}`}>
|
||||
{#if runner.middlename}
|
||||
{runner.firstname} {runner.middlename} {runner.lastname}
|
||||
{:else}
|
||||
{runner.firstname} {runner.lastname}
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
16
src/components/cards/CardStatus.svelte
Normal file
16
src/components/cards/CardStatus.svelte
Normal file
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
export let enabled = false;
|
||||
</script>
|
||||
|
||||
{#if enabled}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
||||
>{$_("enabled")}</span
|
||||
>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
|
||||
>{$_("disabled")}</span
|
||||
>
|
||||
{/if}
|
||||
@ -6,22 +6,45 @@
|
||||
import CardsEmptyState from "./CardsEmptyState.svelte";
|
||||
import CardDetailModal from "./CardDetailModal.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
import ThFilterStatus from "./ThFilterStatus.svelte";
|
||||
import ThFilterRunner from "./ThFilterRunner.svelte";
|
||||
import InputElement from "../shared/InputElement.svelte";
|
||||
import { groupFilter } from "../shared/tablefilters";
|
||||
import {
|
||||
createSvelteTable,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
renderComponent,
|
||||
} from "@tanstack/svelte-table";
|
||||
import { writable } from "svelte/store";
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import TableActions from "../shared/TableActions.svelte";
|
||||
import TableHeader from "../shared/TableHeader.svelte";
|
||||
import CardStatus from "./CardStatus.svelte";
|
||||
import CardRunner from "./CardRunner.svelte";
|
||||
|
||||
export let edit_modal_open = false;
|
||||
export let runner = {};
|
||||
export let editable = {};
|
||||
export let original_data = {};
|
||||
export let current_cards = [];
|
||||
const handler = new DataHandler(current_cards, { rowsPerPage: 50 });
|
||||
const rows = handler.getRows();
|
||||
$: active_deletes = [];
|
||||
|
||||
$: selected =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
$: selectedCards =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||
$: active_delete = undefined;
|
||||
$: cards_show = generate_cards.length > 0;
|
||||
$: generate_cards = [];
|
||||
|
||||
const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
|
||||
(val) => {
|
||||
current_cards = val;
|
||||
handler.setRows(val);
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_cards,
|
||||
}));
|
||||
}
|
||||
);
|
||||
const getRunnerLabel = (option) =>
|
||||
@ -30,6 +53,68 @@
|
||||
(option?.middlename || "") +
|
||||
" " +
|
||||
(option?.lastname || "{$_('non-blanko')}");
|
||||
|
||||
const columns = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: () => "id",
|
||||
filterFn: `equalsString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "runner",
|
||||
header: () => $_("name"),
|
||||
cell: (info) => {
|
||||
return renderComponent(CardRunner, { runner: info.getValue() });
|
||||
},
|
||||
filterFn: `includesString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "enabled",
|
||||
cell: (info) => {
|
||||
return renderComponent(CardStatus, { enabled: info.getValue() });
|
||||
},
|
||||
header: () => $_("status"),
|
||||
filterFn: `includesString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "actions",
|
||||
header: () => $_("action"),
|
||||
cell: (info) => {
|
||||
return renderComponent(TableActions, {
|
||||
detailsLink: `./${info.row.original.id}`,
|
||||
deleteAction: () => {
|
||||
active_delete =
|
||||
current_cards[
|
||||
current_cards.findIndex((r) => r.id == info.row.original.id)
|
||||
];
|
||||
},
|
||||
deleteEnabled:
|
||||
store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE"),
|
||||
});
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
},
|
||||
];
|
||||
const options = writable({
|
||||
data: [],
|
||||
columns: columns,
|
||||
filterFns: {
|
||||
group: groupFilter,
|
||||
},
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 50,
|
||||
},
|
||||
},
|
||||
enableRowSelection: true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
});
|
||||
const table = createSvelteTable(options);
|
||||
|
||||
function open_edit_modal(card) {
|
||||
if (card.runner?.id) {
|
||||
runner = Object.assign(
|
||||
@ -54,7 +139,9 @@
|
||||
bind:runner
|
||||
bind:editable
|
||||
bind:original_data
|
||||
on:dataUpdated={handler.setRows(current_cards)}
|
||||
on:dataUpdated={() => {
|
||||
//TODO:
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@ -112,131 +199,49 @@
|
||||
{/if}
|
||||
<GenerateRunnerCards bind:cards_show bind:generate_cards />
|
||||
</div>
|
||||
<table>
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="border-bottom: 1px solid #ddd;">
|
||||
<input
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
|
||||
checked={generate_cards.length == current_cards.length}
|
||||
on:click={() => {
|
||||
if (generate_cards.length != current_cards.length) {
|
||||
generate_cards = current_cards;
|
||||
} else {
|
||||
generate_cards = [];
|
||||
}
|
||||
}}
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
<Th {handler} orderBy="code">{$_("code")}</Th>
|
||||
<Th {handler} orderBy="runner">{$_("runner")}</Th>
|
||||
<Th {handler} orderBy="status">{$_("status")}</Th>
|
||||
<th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="border-bottom: 1px solid #ddd;" />
|
||||
<ThFilter {handler} filterBy="code" />
|
||||
<ThFilterRunner {handler} />
|
||||
<ThFilterStatus {handler} />
|
||||
<th style="border-bottom: 1px solid #ddd;" />
|
||||
{#each headerGroup.headers as header}
|
||||
<TableHeader {header} />
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $rows as row}
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
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).length >
|
||||
0}
|
||||
on:click={() => {
|
||||
if (generate_cards.findIndex((i) => i.id == row.id) == -1) {
|
||||
generate_cards.push(row);
|
||||
generate_cards = generate_cards;
|
||||
} else {
|
||||
generate_cards = generate_cards.filter(
|
||||
(r) => r.id != row.id
|
||||
);
|
||||
}
|
||||
console.log(generate_cards);
|
||||
}}
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
<td>{row.code}</td>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
{#if row.runner}
|
||||
<a
|
||||
href="../runners/{row.runner.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{row.runner.firstname}
|
||||
{row.runner.middlename || ""}
|
||||
{row.runner.lastname}</a
|
||||
>
|
||||
{:else}{$_("non-blanko")}{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if row.enabled}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
||||
>{$_("enabled")}</span
|
||||
>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
|
||||
>{$_("disabled")}</span
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if active_deletes[row.id] === true}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[row.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
RunnerCardService.runnerCardControllerRemove(row.id, true)
|
||||
.then((resp) => {
|
||||
current_cards = current_cards.filter(
|
||||
(obj) => obj.id !== row.id
|
||||
);
|
||||
})
|
||||
.catch((err) => {});
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
{:else}
|
||||
<button
|
||||
on:click={() => {
|
||||
open_edit_modal(row);
|
||||
}}
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</button
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[row.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<TableBottom {table} {selected} />
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user