feat: add server-side pagination, search, and filtering to all collection and admin pages
- Public pages (videos, magazine, models): URL-driven search, sort, category/duration
filters, and Prev/Next pagination (page size 24)
- Admin tables (videos, articles): search input, toggle filters, and pagination (page size 50)
- Tags page: tag filtering now done server-side via DB arrayContains query instead of
fetching all items and filtering client-side
- Backend resolvers updated for videos, articles, models with paginated { items, total }
responses and filter/sort/tag args
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from "$app/navigation";
|
||||
import { goto, invalidateAll } from "$app/navigation";
|
||||
import { page } from "$app/state";
|
||||
import { SvelteURLSearchParams } from "svelte/reactivity";
|
||||
import { toast } from "svelte-sonner";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { deleteVideo } from "$lib/services";
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Badge } from "$lib/components/ui/badge";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import type { Video } from "$lib/types";
|
||||
|
||||
@@ -14,6 +17,27 @@
|
||||
let deleteTarget: Video | null = $state(null);
|
||||
let deleteOpen = $state(false);
|
||||
let deleting = $state(false);
|
||||
let searchValue = $state(data.search ?? "");
|
||||
let searchTimeout: ReturnType<typeof setTimeout>;
|
||||
|
||||
function debounceSearch(value: string) {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams.toString());
|
||||
if (value) params.set("search", value);
|
||||
else params.delete("search");
|
||||
params.delete("offset");
|
||||
goto(`?${params.toString()}`, { keepFocus: true });
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function setFilter(key: string, value: string | null) {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams.toString());
|
||||
if (value !== null) params.set(key, value);
|
||||
else params.delete(key);
|
||||
params.delete("offset");
|
||||
goto(`?${params.toString()}`);
|
||||
}
|
||||
|
||||
function confirmDelete(video: Video) {
|
||||
deleteTarget = video;
|
||||
@@ -40,24 +64,78 @@
|
||||
<div class="py-3 sm:py-6 sm:pl-6">
|
||||
<div class="flex items-center justify-between mb-6 px-3 sm:px-0">
|
||||
<h1 class="text-2xl font-bold">{$_("admin.videos.title")}</h1>
|
||||
<Button href="/admin/videos/new" class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
|
||||
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.videos.new_video")}
|
||||
</Button>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm text-muted-foreground"
|
||||
>{$_("admin.users.total", { values: { total: data.total } })}</span
|
||||
>
|
||||
<Button
|
||||
href="/admin/videos/new"
|
||||
class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
||||
>
|
||||
<span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.videos.new_video")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0">
|
||||
<Input
|
||||
placeholder={$_("admin.videos.search_placeholder")}
|
||||
class="max-w-xs"
|
||||
value={searchValue}
|
||||
oninput={(e) => {
|
||||
searchValue = (e.target as HTMLInputElement).value;
|
||||
debounceSearch(searchValue);
|
||||
}}
|
||||
/>
|
||||
<div class="flex gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={data.featured === undefined ? "default" : "outline"}
|
||||
onclick={() => setFilter("featured", null)}
|
||||
>
|
||||
{$_("admin.common.all")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={data.featured === true ? "default" : "outline"}
|
||||
onclick={() => setFilter("featured", "true")}
|
||||
>
|
||||
{$_("admin.common.featured")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={data.premium === true ? "default" : "outline"}
|
||||
onclick={() => setFilter("premium", data.premium === true ? null : "true")}
|
||||
>
|
||||
{$_("admin.common.premium")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-muted/30">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.videos.col_video")}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.videos.col_badges")}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.videos.col_plays")}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell">{$_("admin.videos.col_likes")}</th>
|
||||
<th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground"
|
||||
>{$_("admin.videos.col_video")}</th
|
||||
>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
|
||||
>{$_("admin.videos.col_badges")}</th
|
||||
>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell"
|
||||
>{$_("admin.videos.col_plays")}</th
|
||||
>
|
||||
<th class="px-4 py-3 text-left font-medium text-muted-foreground hidden md:table-cell"
|
||||
>{$_("admin.videos.col_likes")}</th
|
||||
>
|
||||
<th class="px-4 py-3 text-right font-medium text-muted-foreground"
|
||||
>{$_("admin.users.col_actions")}</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/30">
|
||||
{#each data.videos as video (video.id)}
|
||||
{#each data.items as video (video.id)}
|
||||
<tr class="hover:bg-muted/10 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -83,15 +161,23 @@
|
||||
<td class="px-4 py-3 hidden sm:table-cell">
|
||||
<div class="flex gap-1">
|
||||
{#if video.premium}
|
||||
<Badge variant="outline" class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10">{$_("admin.common.premium")}</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
class="text-yellow-600 border-yellow-500/40 bg-yellow-500/10"
|
||||
>{$_("admin.common.premium")}</Badge
|
||||
>
|
||||
{/if}
|
||||
{#if video.featured}
|
||||
<Badge variant="default">{$_("admin.common.featured")}</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{video.plays_count ?? 0}</td>
|
||||
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell">{video.likes_count ?? 0}</td>
|
||||
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
|
||||
>{video.plays_count ?? 0}</td
|
||||
>
|
||||
<td class="px-4 py-3 text-muted-foreground hidden md:table-cell"
|
||||
>{video.likes_count ?? 0}</td
|
||||
>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<Button size="sm" variant="ghost" href="/admin/videos/{video.id}">
|
||||
@@ -110,14 +196,57 @@
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
{#if data.videos.length === 0}
|
||||
{#if data.items.length === 0}
|
||||
<tr>
|
||||
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground">{$_("admin.videos.no_results")}</td>
|
||||
<td colspan="5" class="px-4 py-8 text-center text-muted-foreground"
|
||||
>{$_("admin.videos.no_results")}</td
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if data.total > data.limit}
|
||||
<div class="flex items-center justify-between mt-4 px-3 sm:px-0">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{$_("admin.users.showing", {
|
||||
values: {
|
||||
start: data.offset + 1,
|
||||
end: Math.min(data.offset + data.limit, data.total),
|
||||
total: data.total,
|
||||
},
|
||||
})}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={data.offset === 0}
|
||||
onclick={() => {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams.toString());
|
||||
params.set("offset", String(Math.max(0, data.offset - data.limit)));
|
||||
goto(`?${params.toString()}`);
|
||||
}}
|
||||
>
|
||||
{$_("common.previous")}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled={data.offset + data.limit >= data.total}
|
||||
onclick={() => {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams.toString());
|
||||
params.set("offset", String(data.offset + data.limit));
|
||||
goto(`?${params.toString()}`);
|
||||
}}
|
||||
>
|
||||
{$_("common.next")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Dialog.Root bind:open={deleteOpen}>
|
||||
|
||||
Reference in New Issue
Block a user