@podosoft/podokit 0.4.0 → 0.5.0

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/data-table.svelte

@@ -0,0 +1,149 @@
+<script lang="ts" module>
+  export type DataTableColumn<Row> = {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    class?: string;
+    // Value used for client-side sorting (defaults to row[key]). Use for nested
+    // or derived fields, e.g. (s) => s.user.email.
+    value?: (row: Row) => string | number | boolean | Date | null | undefined;
+  };
+  export type SortState = { key: string; dir: "asc" | "desc" };
+
+  // Shared page size for all admin tables — sized so a desktop viewport shows a
+  // full list at a glance (rather than the old 5-row pages). Change it here to
+  // retune every table at once.
+  export const DEFAULT_PAGE_SIZE = 15;
+</script>
+
+<script lang="ts" generics="Row">
+  import type { Snippet } from "svelte";
+  import { Button } from "$lib/components/ui/button";
+  import * as Table from "$lib/components/ui/table";
+  import TablePagination from "$lib/components/table-pagination.svelte";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+
+  // The one table used across the admin console: sortable headers + a shared
+  // pagination footer. Two modes:
+  //  - client (default): pass all `rows`; sorting + paging happen here.
+  //  - manual (server): set manualSort/manualPagination, pass `total`, and refetch
+  //    in `onChange` using the emitted sort + page.
+  type Props = {
+    columns: DataTableColumn<Row>[];
+    rows: Row[];
+    row: Snippet<[Row]>; // renders the <Table.Cell>s for one row
+    getKey?: (row: Row, index: number) => string | number;
+    empty?: string;
+    sort?: SortState | null;
+    manualSort?: boolean;
+    page?: number;
+    perPage?: number; // 0 => no pagination footer
+    total?: number; // server total (defaults to rows.length)
+    label?: string;
+    manualPagination?: boolean;
+    onChange?: (state: { sort: SortState | null; page: number }) => void;
+  };
+  let {
+    columns,
+    rows,
+    row,
+    getKey = (_r, i) => i,
+    empty = "No data.",
+    sort = $bindable(null),
+    manualSort = false,
+    page = $bindable(1),
+    perPage = 0,
+    total,
+    label,
+    manualPagination = false,
+    onChange,
+  }: Props = $props();
+
+  function toggle(col: DataTableColumn<Row>): void {
+    if (!col.sortable) return;
+    sort =
+      sort?.key === col.key
+        ? { key: col.key, dir: sort.dir === "asc" ? "desc" : "asc" }
+        : { key: col.key, dir: "asc" };
+    if (!manualPagination) page = 1;
+    onChange?.({ sort, page });
+  }
+
+  function cmp(a: unknown, b: unknown): number {
+    if (a == null && b == null) return 0;
+    if (a == null) return -1;
+    if (b == null) return 1;
+    if (typeof a === "number" && typeof b === "number") return a - b;
+    if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+    return String(a).localeCompare(String(b), undefined, { numeric: true });
+  }
+
+  const sorted = $derived.by(() => {
+    if (manualSort || !sort) return rows;
+    const active = sort;
+    const col = columns.find((c) => c.key === active.key);
+    const read = (r: Row) => (col?.value ? col.value(r) : (r as Record<string, unknown>)[active.key]);
+    const factor = active.dir === "asc" ? 1 : -1;
+    return [...rows].sort((a, b) => cmp(read(a), read(b)) * factor);
+  });
+  const view = $derived.by(() =>
+    perPage && !manualPagination ? sorted.slice((page - 1) * perPage, page * perPage) : sorted,
+  );
+  const count = $derived(total ?? rows.length);
+</script>
+
+<div class="rounded-md border">
+  <Table.Root>
+    <Table.Header>
+      <Table.Row>
+        {#each columns as col (col.key)}
+          <Table.Head
+            class={col.class}
+            aria-sort={sort?.key === col.key ? (sort.dir === "asc" ? "ascending" : "descending") : undefined}
+          >
+            {#if col.sortable}
+              <Button variant="ghost" size="sm" class="-mx-2 h-auto gap-1 px-2 py-1 font-medium" onclick={() => toggle(col)}>
+                {col.label}
+                {#if sort?.key === col.key}
+                  {#if sort.dir === "asc"}<ChevronUpIcon class="size-3.5" />{:else}<ChevronDownIcon class="size-3.5" />{/if}
+                {:else}
+                  <ChevronsUpDownIcon class="size-3.5 opacity-40" />
+                {/if}
+              </Button>
+            {:else}
+              {col.label}
+            {/if}
+          </Table.Head>
+        {/each}
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {#each view as r, i (getKey(r, i))}
+        <Table.Row>{@render row(r)}</Table.Row>
+      {:else}
+        <Table.Row>
+          <Table.Cell colspan={columns.length} class="text-muted-foreground py-8 text-center">{empty}</Table.Cell>
+        </Table.Row>
+      {/each}
+    </Table.Body>
+    <!-- Pagination lives in the table footer so every DataTable is consistent
+         top-to-bottom (sortable header, rows, footer pager). -->
+    {#if perPage}
+      <Table.Footer class="bg-transparent">
+        <Table.Row class="hover:bg-transparent">
+          <Table.Cell colspan={columns.length} class="py-2">
+            <TablePagination
+              {count}
+              {perPage}
+              bind:page
+              {label}
+              onPageChange={manualPagination ? (p) => onChange?.({ sort, page: p }) : undefined}
+            />
+          </Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    {/if}
+  </Table.Root>
+</div>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/table-pagination.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import * as Pagination from "$lib/components/ui/pagination";
 
-  // Shared table footer: a count label plus shadcn-svelte pagination that appears
-  // only when the list spans more than one page. Bind `page` (1-based). For
-  // server-side lists pass `onPageChange` to refetch; client-side lists just bind.
+  // Shared table footer: a count label plus shadcn-svelte pagination. The pager
+  // is always shown (even for a single page or an empty list) so the footer stays
+  // consistent across tables. Bind `page` (1-based). For server-side lists pass
+  // `onPageChange` to refetch; client-side lists just bind.
   type Props = {
     count: number;
     perPage?: number;
@@ -18,23 +19,21 @@
   {#if label}
     <span class="text-muted-foreground shrink-0 text-sm whitespace-nowrap">{label}</span>
   {/if}
-  {#if count > perPage}
-    <Pagination.Root {count} {perPage} bind:page {onPageChange}>
-      {#snippet children({ pages, currentPage })}
-        <Pagination.Content>
-          <Pagination.Item><Pagination.PrevButton /></Pagination.Item>
-          {#each pages as p (p.key)}
-            {#if p.type === "ellipsis"}
-              <Pagination.Item><Pagination.Ellipsis /></Pagination.Item>
-            {:else}
-              <Pagination.Item>
-                <Pagination.Link page={p} isActive={currentPage === p.value}>{p.value}</Pagination.Link>
-              </Pagination.Item>
-            {/if}
-          {/each}
-          <Pagination.Item><Pagination.NextButton /></Pagination.Item>
-        </Pagination.Content>
-      {/snippet}
-    </Pagination.Root>
-  {/if}
+  <Pagination.Root count={Math.max(count, 1)} {perPage} bind:page {onPageChange}>
+    {#snippet children({ pages, currentPage })}
+      <Pagination.Content>
+        <Pagination.Item><Pagination.PrevButton /></Pagination.Item>
+        {#each pages as p (p.key)}
+          {#if p.type === "ellipsis"}
+            <Pagination.Item><Pagination.Ellipsis /></Pagination.Item>
+          {:else}
+            <Pagination.Item>
+              <Pagination.Link page={p} isActive={currentPage === p.value}>{p.value}</Pagination.Link>
+            </Pagination.Item>
+          {/if}
+        {/each}
+        <Pagination.Item><Pagination.NextButton /></Pagination.Item>
+      </Pagination.Content>
+    {/snippet}
+  </Pagination.Root>
 </div>

package/dist/templates/modules/admin-dashboard/files/apps/web/src/lib/components/table-toolbar.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" module>
+  export type ToolbarFilter = {
+    key: string;
+    label: string;
+    // First option is the "all" choice (usually value "").
+    options: { value: string; label: string }[];
+  };
+  export type ToolbarSearchField = { value: string; label: string };
+</script>
+
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import * as Select from "$lib/components/ui/select";
+
+  // Shared toolbar above a DataTable. Filters (enum columns) and search (free-text
+  // columns that can't be a filter) both commit together on the Search button /
+  // Enter — never per keystroke, so many conditions apply in one pass. The search
+  // field itself is a select, so a page can search by Email, Name, ... whatever
+  // isn't covered by a filter.
+  type Props = {
+    filters?: ToolbarFilter[];
+    filterValues?: Record<string, string>;
+    searchFields?: ToolbarSearchField[]; // ≥1 to show the search row
+    searchField?: string; // selected field value (bound)
+    searchPlaceholder?: string;
+    search?: string; // the query text (bound)
+    filterHeading?: string;
+    searchHeading?: string;
+    searchButton?: string;
+    onSearch: () => void; // commit filters + search + field together
+  };
+  let {
+    filters = [],
+    filterValues = $bindable({}),
+    searchFields = [],
+    searchField = $bindable(""),
+    searchPlaceholder,
+    search = $bindable(""),
+    filterHeading = "Filter",
+    searchHeading = "Search",
+    searchButton = "Search",
+    onSearch,
+  }: Props = $props();
+
+  function filterTrigger(f: ToolbarFilter): string {
+    return f.options.find((o) => o.value === (filterValues[f.key] ?? ""))?.label ?? f.options[0]?.label ?? "";
+  }
+  const searchFieldLabel = $derived(
+    searchFields.find((f) => f.value === searchField)?.label ?? searchFields[0]?.label ?? "",
+  );
+</script>
+
+<div class="flex flex-col gap-3 rounded-md border p-3">
+  {#if filters.length}
+    <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+      <span class="text-muted-foreground w-14 shrink-0 text-sm font-medium">{filterHeading}</span>
+      {#each filters as f (f.key)}
+        <div class="flex items-center gap-2">
+          <Label class="text-sm">{f.label}</Label>
+          <Select.Root type="single" bind:value={filterValues[f.key]}>
+            <Select.Trigger class="w-36">{filterTrigger(f)}</Select.Trigger>
+            <Select.Content>
+              {#each f.options as o (o.value)}
+                <Select.Item value={o.value}>{o.label}</Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Root>
+        </div>
+      {/each}
+    </div>
+  {/if}
+  {#if searchFields.length}
+    <form class="flex flex-wrap items-center gap-2" onsubmit={(e) => { e.preventDefault(); onSearch(); }}>
+      <span class="text-muted-foreground w-14 shrink-0 text-sm font-medium">{searchHeading}</span>
+      {#if searchFields.length > 1}
+        <Select.Root type="single" bind:value={searchField}>
+          <Select.Trigger class="w-32">{searchFieldLabel}</Select.Trigger>
+          <Select.Content>
+            {#each searchFields as f (f.value)}
+              <Select.Item value={f.value}>{f.label}</Select.Item>
+            {/each}
+          </Select.Content>
+        </Select.Root>
+      {:else}
+        <Label class="text-sm" for="toolbar-search">{searchFields[0].label}</Label>
+      {/if}
+      <Input id="toolbar-search" bind:value={search} placeholder={searchPlaceholder} class="max-w-xs flex-1" />
+      <Button type="submit">{searchButton}</Button>
+    </form>
+  {/if}
+</div>