drop old datatables
This commit is contained in:
@@ -3,7 +3,6 @@
|
||||
import { RunnerCardService } from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import Toastify from "toastify-js";
|
||||
import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
|
||||
import CardsEmptyState from "./CardsEmptyState.svelte";
|
||||
import CardDetailModal from "./CardDetailModal.svelte";
|
||||
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
|
||||
@@ -89,8 +88,7 @@
|
||||
Toastify({
|
||||
text: $_("cards-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
//TODO: Delete cards from table
|
||||
}}
|
||||
@@ -114,138 +112,131 @@
|
||||
{/if}
|
||||
<GenerateRunnerCards bind:cards_show bind:generate_cards />
|
||||
</div>
|
||||
<Datatable {handler}>
|
||||
<table>
|
||||
<thead>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="border-bottom: 1px solid #ddd;">
|
||||
<input
|
||||
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 = [];
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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;" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $rows as row}
|
||||
<tr>
|
||||
<th style="border-bottom: 1px solid #ddd;">
|
||||
<td>
|
||||
<input
|
||||
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}
|
||||
checked={generate_cards.filter((i) => i.id == row.id).length >
|
||||
0}
|
||||
on:click={() => {
|
||||
if (generate_cards.length != current_cards.length) {
|
||||
generate_cards = current_cards;
|
||||
if (generate_cards.findIndex((i) => i.id == row.id) == -1) {
|
||||
generate_cards.push(row);
|
||||
generate_cards = generate_cards;
|
||||
} else {
|
||||
generate_cards = [];
|
||||
generate_cards = generate_cards.filter(
|
||||
(r) => r.id != row.id
|
||||
);
|
||||
}
|
||||
console.log(generate_cards);
|
||||
}}
|
||||
/>
|
||||
</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;" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $rows as row}
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
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}
|
||||
</td>
|
||||
<td>{row.code}</td>
|
||||
<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={() => {
|
||||
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);
|
||||
active_deletes[row.id] = false;
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
<td>{row.code}</td>
|
||||
<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}
|
||||
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] = 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) => {});
|
||||
active_deletes[row.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>{$_("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}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</Datatable>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
|
||||
Reference in New Issue
Block a user