@stacksjs/defaults 0.75.279 → 0.75.280

package/resources/components/Dashboard/Notifications/NotificationDeliveries.stx

@@ -13,8 +13,6 @@ const title = useReactiveProp('title', 'Notification Deliveries')
 const description = useReactiveProp('description', 'Monitor notification transport attempts.')
 
 const deliveries = state<NotificationDelivery[]>([])
-const currentPage = state(1)
-const perPage = state(10)
 const isLoading = state(true)
 const searchQuery = state('')
 const selectedStatus = state('all')
@@ -46,30 +44,27 @@ const sortedDeliveries = derived(() => [...filteredDeliveries()].sort((a, b) =>
   return sortDirection() === 'asc' ? comparison : -comparison
 }))
 
-const paginatedDeliveries = derived(() => {
-  const start = (currentPage() - 1) * perPage()
-  return sortedDeliveries().slice(start, start + perPage())
-})
-
-const totalItems = derived(() => filteredDeliveries().length)
-const totalPages = derived(() => Math.max(1, Math.ceil(totalItems() / perPage())))
-const rangeStart = derived(() => totalItems() === 0 ? 0 : (currentPage() - 1) * perPage() + 1)
-const rangeEnd = derived(() => Math.min(currentPage() * perPage(), totalItems()))
-const canGoBack = derived(() => currentPage() > 1)
-const canGoForward = derived(() => currentPage() < totalPages())
 const sentCount = derived(() => deliveries().filter(delivery => delivery.status === 'sent' || delivery.status === 'delivered').length)
 const failedCount = derived(() => deliveries().filter(delivery => delivery.status === 'failed').length)
 const pendingCount = derived(() => deliveries().filter(delivery => delivery.status === 'pending').length)
 
-effect(() => {
-  searchQuery()
-  selectedStatus()
-  sortDirection()
-  currentPage.set(1)
-})
+/**
+ * What the table is showing: a change returns it to the first page, as this
+ * page's own pager did before the table took over paging.
+ */
+const viewKey = derived(() => JSON.stringify([searchQuery(), selectedStatus(), sortDirection()]))
+
+/**
+ * A component event reaches this handler as the emitted value, not as a
+ * CustomEvent, so reading `.detail` gave undefined: View opened an empty
+ * dialog and Retry did nothing (stacksjs/stacks#2977). Accept either.
+ */
+function eventValue<T>(value: T | CustomEvent<T>): T {
+  return value instanceof CustomEvent ? value.detail : value
+}
 
-function openDelivery(event: CustomEvent<NotificationDelivery>): void {
-  selectedDelivery.set(event.detail)
+function openDelivery(event: NotificationDelivery | CustomEvent<NotificationDelivery>): void {
+  selectedDelivery.set(eventValue(event))
   showDetails.set(true)
 }
 
@@ -84,8 +79,8 @@ async function loadDeliveries(): Promise<void> {
   isLoading.set(false)
 }
 
-async function retryDelivery(event: CustomEvent<NotificationDelivery>): Promise<void> {
-  const delivery = event.detail
+async function retryDelivery(event: NotificationDelivery | CustomEvent<NotificationDelivery>): Promise<void> {
+  const delivery = eventValue(event)
   retryingId.set(delivery.id)
   const retried = await retryNotificationDelivery(delivery)
   if (retried)
@@ -99,16 +94,6 @@ function resetFilters(): void {
   sortDirection.set('desc')
 }
 
-function previousPage(): void {
-  if (canGoBack())
-    currentPage.update(page => page - 1)
-}
-
-function nextPage(): void {
-  if (canGoForward())
-    currentPage.update(page => page + 1)
-}
-
 onMount(loadDeliveries)
 </script>
 
@@ -183,7 +168,10 @@ onMount(loadDeliveries)
 
     <div class="mt-8">
       <NotificationDeliveryTable
-        :deliveries="paginatedDeliveries"
+        :deliveries="sortedDeliveries"
+        :paginated="true"
+        :sort-reset-key="sortDirection"
+        :page-reset-key="viewKey"
         :loading="isLoading"
         :actions="true"
         :retryingId="retryingId"
@@ -192,16 +180,6 @@ onMount(loadDeliveries)
         @retry="retryDelivery($event)"
       />
     </div>
-
-    <div class="flex items-center justify-between mt-4">
-      <p class="text-gray-700 text-sm dark:text-neutral-300">
-        Showing <span class="font-medium">{{ rangeStart }}</span> to <span class="font-medium">{{ rangeEnd }}</span> of <span class="font-medium">{{ totalItems }}</span> results
-      </p>
-      <div class="flex gap-2 items-center">
-        <Button variant="secondary" :disabled="!canGoBack" @click="previousPage()">Previous</Button>
-        <Button variant="secondary" :disabled="!canGoForward" @click="nextPage()">Next</Button>
-      </div>
-    </div>
   </div>
 
   <NotificationDeliveryDialog :open="showDetails" :delivery="selectedDelivery" @close="closeDelivery()" />

package/resources/components/Dashboard/Notifications/NotificationDeliveryHistory.stx

@@ -102,8 +102,17 @@ function nextPage(): void {
   void loadHistory()
 }
 
-function openDelivery(event: CustomEvent<NotificationDelivery>): void {
-  selectedDelivery.set(event.detail)
+/**
+ * A component event reaches this handler as the emitted value, not as a
+ * CustomEvent, so reading `.detail` gave undefined: View opened an empty
+ * dialog and Retry did nothing (stacksjs/stacks#2977). Accept either.
+ */
+function eventValue<T>(value: T | CustomEvent<T>): T {
+  return value instanceof CustomEvent ? value.detail : value
+}
+
+function openDelivery(event: NotificationDelivery | CustomEvent<NotificationDelivery>): void {
+  selectedDelivery.set(eventValue(event))
   showDetails.set(true)
 }
 
@@ -112,8 +121,8 @@ function closeDelivery(): void {
   selectedDelivery.set(null)
 }
 
-async function retryDelivery(event: CustomEvent<NotificationDelivery>): Promise<void> {
-  const delivery = event.detail
+async function retryDelivery(event: NotificationDelivery | CustomEvent<NotificationDelivery>): Promise<void> {
+  const delivery = eventValue(event)
   retryingId.set(delivery.id)
   const retried = await retryNotificationDelivery(delivery)
   if (retried)

package/resources/components/Dashboard/Notifications/NotificationDeliveryTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { NotificationDelivery } from '../../../../functions/notifications/deliveries'
 
@@ -7,6 +9,16 @@ const actions = useReactiveProp('actions', false)
 const allowRetry = useReactiveProp('allowRetry', true)
 const retryingId = useReactiveProp('retryingId', null as number | null)
 const emptyMessage = useReactiveProp('emptyMessage', 'No notification delivery attempts have been recorded.')
+/**
+ * Off by default: the delivery history pages on the server and hands this
+ * one page at a time, while the per-channel deliveries page passes every
+ * attempt it loaded and lets Table page them (stacksjs/stacks#2977).
+ */
+const paginated = useReactiveProp('paginated', false)
+/** The parent's sort select: a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
 function channelIcon(channel: string): string {
@@ -25,101 +37,77 @@ function channelIcon(channel: string): string {
   return 'i-hugeicons-notification-03'
 }
 
-function statusClass(status: string): string {
-  if (status === 'failed')
-    return 'bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-950/40 dark:text-red-300'
-  if (status === 'pending')
-    return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300'
-  if (status === 'sent')
-    return 'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-950/40 dark:text-blue-300'
-  return 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-950/40 dark:text-green-300'
-}
-
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat('en-US', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(date)
-}
-
 function provider(delivery: NotificationDelivery): string {
   const value = delivery.metadata.provider || delivery.metadata.driver
   return typeof value === 'string' && value ? value : 'Default'
 }
 
-function summary(delivery: NotificationDelivery): string {
-  return delivery.subject || delivery.body || 'No content recorded'
-}
-
 function canRetry(delivery: NotificationDelivery): boolean {
   return allowRetry()
     && delivery.status === 'failed'
     && (delivery.channel === 'email' || delivery.channel === 'sms')
 }
+
+/** The channel cell is slotted for its icon. */
+const COLUMNS = [
+  { key: 'channel', label: 'Channel', sortable: true, slotted: true },
+  { key: 'recipient', label: 'Recipient', sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+  { key: 'summary', label: 'Content', class: 'max-w-sm truncate' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      failed: 'capitalize bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+      pending: 'capitalize bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+      sent: 'capitalize bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
+      delivered: 'capitalize bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300',
+    },
+  },
+  { key: 'providerLabel', label: 'Provider', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'sent_at', label: 'Attempted', type: 'datetime' as const, sortable: true, align: 'right' as const, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'retry', label: 'Retry delivery to', icon: 'i-hugeicons-reload', when: { key: 'retryable', equals: true } },
+  { action: 'view', label: 'View details of delivery to', icon: 'i-hugeicons-view' },
+]
+
+const rows = derived(() => deliveries().map(delivery => ({
+  ...delivery,
+  icon: `h-5 w-5 ${channelIcon(delivery.channel)}`,
+  summary: delivery.subject || delivery.body || 'No content recorded',
+  providerLabel: provider(delivery),
+  retryable: canRetry(delivery),
+  actionName: delivery.recipient || `attempt ${delivery.id}`,
+})))
+
+function handleRowAction(payload: { action: string, row: NotificationDelivery }): void {
+  emit(payload.action, payload.row)
+}
 </script>
 
-<div class="overflow-x-auto ring-1 ring-black/5 rounded-lg dark:ring-white/10 shadow-sm">
-  <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-600">
-    <thead class="bg-gray-50 dark:bg-neutral-700">
-      <tr>
-        <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Channel</th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Recipient</th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Content</th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Status</th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Provider</th>
-        <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Attempted</th>
-        <th :if="actions" scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Actions</span></th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-700">
-      <tr :if="loading">
-        <td :colspan="actions ? 7 : 6" class="px-6 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">
-          Loading delivery attempts...
-        </td>
-      </tr>
-      <tr :if="!loading && deliveries.length === 0">
-        <td :colspan="actions ? 7 : 6" class="px-6 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">
-          {{ emptyMessage }}
-        </td>
-      </tr>
-      <template :for="delivery in deliveries">
-        <tr class="hover:bg-gray-50 dark:hover:bg-neutral-700/50">
-          <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
-            <span class="inline-flex gap-2 items-center font-medium text-gray-900 dark:text-neutral-100">
-              <span :class="'h-5 w-5 ' + channelIcon(delivery.channel)"></span>
-              <span class="capitalize">{{ delivery.channel }}</span>
-            </span>
-          </td>
-          <td class="px-3 py-4 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ delivery.recipient || 'Not recorded' }}</td>
-          <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">
-            <span class="block max-w-sm truncate">{{ summary(delivery) }}</span>
-          </td>
-          <td class="px-3 py-4 text-sm whitespace-nowrap">
-            <span :class="'inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md capitalize ' + statusClass(delivery.status)">
-              {{ delivery.status }}
-            </span>
-          </td>
-          <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ provider(delivery) }}</td>
-          <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(delivery.sent_at) }}</td>
-          <td :if="actions" class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
-            <Button
-              :if="canRetry(delivery)"
-              variant="secondary"
-              size="sm"
-              :loading="retryingId === delivery.id"
-              @click="emit('retry', delivery)"
-            >
-              Retry
-            </Button>
-            <Button variant="ghost" size="sm" @click="emit('view', delivery)">
-              View Details
-            </Button>
-          </td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
-</div>
+<Table
+  :sort-reset-key="sortResetKey()"
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="actions() ? ROW_ACTIONS : []"
+  action-label-key="actionName"
+  busy-key="id"
+  :busy-value="retryingId()"
+  :paginated="paginated()"
+  :page-size="10"
+  empty-title="No delivery attempts"
+  :empty-description="emptyMessage()"
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <span class="inline-flex gap-2 items-center font-medium text-gray-900 dark:text-neutral-100">
+      <span :class="row.icon"></span>
+      <span class="capitalize" x-text="row.channel"></span>
+    </span>
+  </template>
+</Table>

package/resources/components/Dashboard/UI/Table.stx

@@ -210,14 +210,43 @@ const actionLabelKey = useReactiveProp('actionLabelKey', '')
  */
 const busyKey = useReactiveProp('busyKey', '')
 const busyValue = useReactiveProp<unknown>('busyValue', '')
+/**
+ * The parent's own ordering, for a page whose sort select orders the rows
+ * Table receives.
+ *
+ * A header click overrides that order, and nothing used to hand it back:
+ * once a column was sorted, changing the select changed nothing visible, so
+ * the page had two sort controls that disagreed (stacksjs/stacks#2977). Pass
+ * the select's value here and a change to it clears the header sort, so the
+ * order on screen is always the one the viewer chose last.
+ */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
+/**
+ * The parent's search and filters, for a page that filters the rows Table
+ * receives. A change returns to the first page, as a parent that paged
+ * itself always did: a narrower result read from page 3 is a page that
+ * looks empty or unrelated to what was just typed (stacksjs/stacks#2977).
+ */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 
 const selectedKeys = state<TableKey[]>([])
 const sortKey = state('')
 const sortDirection = state<SortDirection>('asc')
+
+effect(() => {
+  sortResetKey()
+  sortKey.set('')
+})
 const query = state('')
 const columnFilters = state<Record<string, string>>({})
 const hiddenColumns = state<string[]>([])
 const page = state(1)
+
+effect(() => {
+  sortResetKey()
+  pageResetKey()
+  page.set(1)
+})
 const columnMenuOpen = state(false)
 const emit = defineEmits()
 
@@ -486,10 +515,20 @@ function toggleRow(row: DashboardTableRow, event: Event): void {
 
 /* ------------------------------------------------------------------ sort */
 
+/**
+ * Ascending, descending, then off. Off is the order the rows arrived in,
+ * which on a page with its own sort select is that select's order; without
+ * a third state a header click could never be undone.
+ */
 function sort(column: DashboardTableColumn): void {
   if (!column.sortable)
     return
-  const direction: SortDirection = sortKey() === column.key && sortDirection() === 'asc' ? 'desc' : 'asc'
+  if (sortKey() === column.key && sortDirection() === 'desc') {
+    sortKey.set('')
+    emit('sort', { key: '', direction: 'asc' })
+    return
+  }
+  const direction: SortDirection = sortKey() === column.key ? 'desc' : 'asc'
   sortKey.set(column.key)
   sortDirection.set(direction)
   emit('sort', { key: column.key, direction })
@@ -498,7 +537,7 @@ function sort(column: DashboardTableColumn): void {
 function sortLabel(column: DashboardTableColumn): string {
   if (sortKey() !== column.key)
     return `Sort by ${column.label}`
-  return `Sort by ${column.label} ${sortDirection() === 'asc' ? 'descending' : 'ascending'}`
+  return sortDirection() === 'asc' ? `Sort by ${column.label} descending` : `Stop sorting by ${column.label}`
 }
 
 /** Mirrors sort state into aria-sort so screen readers announce it. */