133 lines
3.6 KiB
Svelte
133 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import type { History } from "$src/lib/types";
|
|
import { formatDate } from "$src/lib/utils";
|
|
import { Search } from "@lucide/svelte";
|
|
import { navigate, p } from "sv-router/generated";
|
|
|
|
let { history, perPage = 5 }: { history: History; perPage?: number } =
|
|
$props();
|
|
|
|
let page = $state(1);
|
|
let filter = $state("");
|
|
let filteredHistory = $state<History>(history);
|
|
let paginatedHistory = $state<History>([]);
|
|
let totalPages = $state(0);
|
|
|
|
$effect(() => {
|
|
if (filter.trim() === "") {
|
|
filteredHistory = history;
|
|
} else {
|
|
const lowerFilter = filter.toLowerCase();
|
|
filteredHistory = history.filter((item) =>
|
|
item.Query.Text.toLowerCase().includes(lowerFilter),
|
|
);
|
|
}
|
|
page = 1;
|
|
});
|
|
|
|
$effect(() => {
|
|
if (filteredHistory) {
|
|
totalPages = Math.ceil(filteredHistory.length / perPage);
|
|
const start = (page - 1) * perPage;
|
|
const end = start + perPage;
|
|
paginatedHistory = filteredHistory.slice(start, end);
|
|
if (page > totalPages) {
|
|
page = totalPages > 0 ? totalPages : 1;
|
|
}
|
|
}
|
|
});
|
|
|
|
function previousPage() {
|
|
if (page > 1) {
|
|
page--;
|
|
}
|
|
}
|
|
|
|
function nextPage() {
|
|
if (page < totalPages) {
|
|
page++;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="my-4 flex flex-col gap-2">
|
|
<label class="input input-xs w-full">
|
|
<Search size={12} />
|
|
<input class="grow" placeholder="Filter" bind:value={filter} />
|
|
</label>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="table">
|
|
<!-- head -->
|
|
<thead>
|
|
<tr>
|
|
<th>Query</th>
|
|
<th>Results</th>
|
|
<th>Status</th>
|
|
<th>Date</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#if paginatedHistory.length > 0}
|
|
{#each paginatedHistory as item}
|
|
<tr class="hover:bg-base-300">
|
|
<th>
|
|
<button
|
|
onclick={() => {
|
|
navigate(`/search/:id`, { params: { id: item.Id } });
|
|
}}
|
|
class="btn btn-link p-0 no-underline text-base-content"
|
|
>
|
|
{item.Query.Text}
|
|
</button>
|
|
</th>
|
|
<td>{item.ResultsCount}</td>
|
|
<td
|
|
><div
|
|
class="badge badge-xs"
|
|
class:badge-success={item.Status === "completed"}
|
|
class:badge-warning={item.Status === "pending"}
|
|
class:badge-neutral={item.Status === "queued"}
|
|
class:badge-error={item.Status === "error"}
|
|
>
|
|
{item.Status}
|
|
</div></td
|
|
>
|
|
<td>{formatDate(item.Date)}</td>
|
|
<td
|
|
onclick={() => {
|
|
navigate(`/search/:id`, { params: { id: item.Id } });
|
|
}}
|
|
><button class="btn btn-xs btn-square"
|
|
><Search size={11} /></button
|
|
></td
|
|
>
|
|
</tr>
|
|
{/each}
|
|
{:else}
|
|
<tr class="hover:bg-base-300">
|
|
<td colspan="5" class="text-center leading-9"
|
|
><span class="text-3xl">(·.·)</span><br />No history found</td
|
|
>
|
|
</tr>
|
|
{/if}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{#if totalPages > 1}
|
|
<div class="join m-auto mt-5">
|
|
<button class="join-item btn" onclick={previousPage} disabled={page === 1}
|
|
>«</button
|
|
>
|
|
<button class="join-item btn">Page {page} / {totalPages}</button>
|
|
<button
|
|
class="join-item btn"
|
|
onclick={nextPage}
|
|
disabled={page === totalPages}>»</button
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|