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,48 +1,53 @@
|
||||
<script lang="ts">
|
||||
import { _ } from "svelte-i18n";
|
||||
import { goto } from "$app/navigation";
|
||||
import { page } from "$app/state";
|
||||
import { SvelteURLSearchParams } from "svelte/reactivity";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Card, CardContent } from "$lib/components/ui/card";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
|
||||
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import type { Article } from "$lib/types";
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import { calcReadingTime } from "$lib/utils.js";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
|
||||
let searchQuery = $state("");
|
||||
let categoryFilter = $state("all");
|
||||
let sortBy = $state("recent");
|
||||
|
||||
const timeAgo = new TimeAgo("en");
|
||||
const { data }: { data: { articles: Article[] } } = $props();
|
||||
const { data } = $props();
|
||||
|
||||
const featuredArticle = data.articles.find((article) => article.featured);
|
||||
let searchValue = $state(data.search ?? "");
|
||||
let searchTimeout: ReturnType<typeof setTimeout>;
|
||||
|
||||
const filteredArticles = $derived(() => {
|
||||
return data.articles
|
||||
.filter((article) => {
|
||||
const matchesSearch =
|
||||
article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.excerpt?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
article.author?.artist_name?.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
const matchesCategory = categoryFilter === "all" || article.category === categoryFilter;
|
||||
return matchesSearch && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (sortBy === "recent")
|
||||
return new Date(b.publish_date).getTime() - new Date(a.publish_date).getTime();
|
||||
// if (sortBy === "popular")
|
||||
// return (
|
||||
// parseInt(b.views.replace(/[^\d]/g, "")) -
|
||||
// parseInt(a.views.replace(/[^\d]/g, ""))
|
||||
// );
|
||||
if (sortBy === "featured") return (b.featured ? 1 : 0) - (a.featured ? 1 : 0);
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
});
|
||||
const featuredArticle =
|
||||
data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null;
|
||||
|
||||
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("page");
|
||||
goto(`?${params.toString()}`, { keepFocus: true });
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function setParam(key: string, value: string) {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams.toString());
|
||||
if (value && value !== "all" && value !== "recent") params.set(key, value);
|
||||
else params.delete(key);
|
||||
params.delete("page");
|
||||
goto(`?${params.toString()}`);
|
||||
}
|
||||
|
||||
function goToPage(p: number) {
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams.toString());
|
||||
if (p > 1) params.set("page", String(p));
|
||||
else params.delete("page");
|
||||
goto(`?${params.toString()}`);
|
||||
}
|
||||
|
||||
const totalPages = $derived(Math.ceil(data.total / data.limit));
|
||||
</script>
|
||||
|
||||
<Meta title={$_("magazine.title")} description={$_("magazine.description")} />
|
||||
@@ -88,28 +93,36 @@
|
||||
></span>
|
||||
<Input
|
||||
placeholder={$_("magazine.search_placeholder")}
|
||||
bind:value={searchQuery}
|
||||
value={searchValue}
|
||||
oninput={(e) => {
|
||||
searchValue = (e.target as HTMLInputElement).value;
|
||||
debounceSearch(searchValue);
|
||||
}}
|
||||
class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Category Filter -->
|
||||
<Select type="single" bind:value={categoryFilter}>
|
||||
<Select
|
||||
type="single"
|
||||
value={data.category ?? "all"}
|
||||
onValueChange={(v) => v && setParam("category", v)}
|
||||
>
|
||||
<SelectTrigger
|
||||
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
|
||||
>
|
||||
<span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
|
||||
{categoryFilter === "all"
|
||||
{!data.category
|
||||
? $_("magazine.categories.all")
|
||||
: categoryFilter === "photography"
|
||||
: data.category === "photography"
|
||||
? $_("magazine.categories.photography")
|
||||
: categoryFilter === "production"
|
||||
: data.category === "production"
|
||||
? $_("magazine.categories.production")
|
||||
: categoryFilter === "interview"
|
||||
: data.category === "interview"
|
||||
? $_("magazine.categories.interview")
|
||||
: categoryFilter === "psychology"
|
||||
: data.category === "psychology"
|
||||
? $_("magazine.categories.psychology")
|
||||
: categoryFilter === "trends"
|
||||
: data.category === "trends"
|
||||
? $_("magazine.categories.trends")
|
||||
: $_("magazine.categories.spotlight")}
|
||||
</SelectTrigger>
|
||||
@@ -125,23 +138,18 @@
|
||||
</Select>
|
||||
|
||||
<!-- Sort -->
|
||||
<Select type="single" bind:value={sortBy}>
|
||||
<Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
|
||||
<SelectTrigger
|
||||
class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
|
||||
>
|
||||
{sortBy === "recent"
|
||||
? $_("magazine.sort.recent")
|
||||
: sortBy === "popular"
|
||||
? $_("magazine.sort.popular")
|
||||
: sortBy === "featured"
|
||||
? $_("magazine.sort.featured")
|
||||
: $_("magazine.sort.name")}
|
||||
{data.sort === "featured"
|
||||
? $_("magazine.sort.featured")
|
||||
: data.sort === "name"
|
||||
? $_("magazine.sort.name")
|
||||
: $_("magazine.sort.recent")}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
|
||||
<!-- <SelectItem value="popular"
|
||||
>{$_("magazine.sort.popular")}</SelectItem
|
||||
> -->
|
||||
<SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
|
||||
<SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
|
||||
</SelectContent>
|
||||
@@ -153,7 +161,7 @@
|
||||
|
||||
<div class="container mx-auto px-4 py-12">
|
||||
<!-- Featured Article -->
|
||||
{#if featuredArticle && categoryFilter === "all" && !searchQuery}
|
||||
{#if featuredArticle}
|
||||
<Card
|
||||
class="py-0 mb-12 overflow-hidden bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-2xl shadow-primary/20"
|
||||
>
|
||||
@@ -220,7 +228,7 @@
|
||||
|
||||
<!-- Articles Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{#each filteredArticles() as article (article.slug)}
|
||||
{#each data.items as article (article.slug)}
|
||||
<Card
|
||||
class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
|
||||
>
|
||||
@@ -318,22 +326,46 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if filteredArticles().length === 0}
|
||||
{#if data.items.length === 0}
|
||||
<div class="text-center py-12">
|
||||
<p class="text-muted-foreground text-lg mb-4">
|
||||
{$_("magazine.no_results")}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() => {
|
||||
searchQuery = "";
|
||||
categoryFilter = "all";
|
||||
}}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
<Button variant="outline" href="/magazine" class="border-primary/20 hover:bg-primary/10">
|
||||
{$_("magazine.clear_filters")}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Pagination -->
|
||||
{#if totalPages > 1}
|
||||
<div class="flex items-center justify-between mt-10">
|
||||
<span class="text-sm text-muted-foreground">
|
||||
{$_("common.page_of", { values: { page: data.page, total: totalPages } })}
|
||||
·
|
||||
{$_("common.total_results", { values: { total: data.total } })}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page <= 1}
|
||||
onclick={() => goToPage(data.page - 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.previous")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={data.page >= totalPages}
|
||||
onclick={() => goToPage(data.page + 1)}
|
||||
class="border-primary/20 hover:bg-primary/10"
|
||||
>
|
||||
{$_("common.next")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user