Implement pagination

Once pagination, sort, and search are fully implemented, I will break table out into its own component.

source/SIL.AppBuilder.Portal/src/lib/table.ts

@@ -0,0 +1,8 @@
+import * as v from 'valibot';
+
+export const paginateSchema = v.object({
+  page: v.number(),
+  size: v.number()
+});
+
+export type PaginateSchema = typeof paginateSchema;

source/SIL.AppBuilder.Portal/src/routes/(authenticated)/admin/workflows/+page.svelte

@@ -4,44 +4,86 @@
   import { writable } from 'svelte/store';
   import type { PageData } from './$types';
   import { createTable, Subscribe, Render } from 'svelte-headless-table';
+  import { addSortBy, addPagination } from 'svelte-headless-table/plugins';
+  import SortDirectionPicker from '$lib/components/SortDirectionPicker.svelte';
 
   export let data: PageData;
 
   const tableData = writable(data.instances);
 
-  const table = createTable(tableData);
+  const table = createTable(tableData, {
+    sort: addSortBy(),
+    page: addPagination({
+      initialPageSize: 2
+    })
+  });
 
   const columns = table.createColumns([
     table.column({
+      id: 'product',
       header: m.tasks_product(),
       accessor: (i) => i.Product.Id
     }),
     table.column({
+      id: 'state',
       header: m.project_products_transitions_state(),
       accessor: (i) => i.Product.ProductTransitions[0].DestinationState
     }),
     table.column({
+      id: 'date',
       header: m.project_products_transitions_date(),
-      accessor: (i) => i.Product.ProductTransitions[0].DateTransition
+      accessor: (i) => i.Product.ProductTransitions[0].DateTransition,
+      cell: (c) => c.value?.toLocaleString()!
     })
   ]);
 
-  const { headerRows, rows, tableAttrs, tableBodyAttrs } = table.createViewModel(columns);
+  const {
+    headerRows,
+    pageRows: rows,
+    tableAttrs,
+    tableBodyAttrs,
+    pluginStates
+  } = table.createViewModel(columns);
+
+  const {
+    pageIndex,
+    hasPreviousPage,
+    hasNextPage,
+    pageCount
+  } = pluginStates.page;
+
+  const {
+    sortKeys
+  } = pluginStates.sort;
+
+  $: console.log($sortKeys);
 </script>
 
 <div class="w-full">
   <h1>{m.admin_workflowInstances_title()}</h1>
   <div class="m-4 relative mt-0">
     {#if data.instances.length > 0}
+      <form>
+        <div class="join">
+          {#each Array.from({ length: $pageCount}) as _, i}
+          <label class="join-item btn btn-square form-control">
+            <span>{i+1}</span>
+            <input class="hidden" type="radio" name="page" value={i+1}>
+          </label>
+          {/each}
+        </div>
+      </form>
       <table class="w-full" {...$tableAttrs}>
         <thead>
           {#each $headerRows as headerRow (headerRow.id)}
             <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
               <tr class="border-b-2 text-left" {...rowAttrs}>
                 {#each headerRow.cells as cell (cell.id)}
-                  <Subscribe attrs={cell.attrs()} let:attrs>
-                    <th {...attrs}>
-                      <Render of={cell.render()} />
+                  <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
+                    <th {...attrs} on:click={props.sort.toggle}>
+                      <SortDirectionPicker order={props.sort.order}>
+                        <Render of={cell.render()} />
+                      </SortDirectionPicker>
                     </th>
                   </Subscribe>
                 {/each}
@@ -82,9 +124,12 @@
 
 <style lang="postcss">
   tr {
-    @apply cursor-pointer;
+    @apply cursor-pointer select-none;
   }
   tbody > tr:hover {
     @apply bg-info;
+  } /* this helps prevent the vertical jankiness */
+  thead {
+    line-height: inherit;
   }
 </style>

source/SIL.AppBuilder.Portal/src/routes/(authenticated)/admin/workflows/[product_id]/transitions/+page.server.ts

@@ -0,0 +1,77 @@
+import { prisma } from 'sil.appbuilder.portal.common';
+import type { PageServerLoad, Actions } from './$types';
+import { paginateSchema } from '$lib/table';
+import { superValidate } from 'sveltekit-superforms';
+import { valibot } from 'sveltekit-superforms/adapters';
+
+export const load: PageServerLoad = async (event) => {
+  const transitions = await prisma.productTransitions.findMany({
+    where: {
+      ProductId: event.params.product_id,
+      TransitionType: 1
+    },
+    select: {
+      AllowedUserNames: true,
+      InitialState: true,
+      DestinationState: true,
+      DateTransition: true,
+      Command: true,
+      Comment: true,
+    },
+    take: 5
+  });
+
+  const count = await prisma.productTransitions.count({
+    where: {
+      ProductId: event.params.product_id,
+      TransitionType: 1
+    }
+  });
+
+  return {
+    transitions,
+    count,
+    form: await superValidate(
+      {
+        page: 0,
+        size: 5
+      },
+      valibot(paginateSchema)
+    )
+  };
+};
+
+export const actions: Actions = {
+  page: async function (event) {
+
+    const form = await superValidate(event.request, valibot(paginateSchema));
+
+    const transitions = await prisma.productTransitions.findMany({
+      where: {
+        ProductId: event.params.product_id,
+        TransitionType: 1
+      },
+      select: {
+        AllowedUserNames: true,
+        InitialState: true,
+        DestinationState: true,
+        DateTransition: true,
+        Command: true,
+        Comment: true,
+      },
+      skip: form.data.size * form.data.page,
+      take: form.data.size
+    });
+
+    const count = await prisma.productTransitions.count({
+      where: {
+        ProductId: event.params.product_id,
+        TransitionType: 1
+      }
+    });
+
+    //console.log({ form, query: { data: transitions, count }});
+
+    return { form, ok: form.valid, query: { data: transitions, count }};
+  }
+}