@7365admin1/layer-common 3.2.2-staging.192 → 3.2.2-staging.193

package/components/BulletinBoardManagement.vue

@@ -11,7 +11,7 @@
             </PageHeader>
         </v-col>
 
-        <TableMain :headers="headers" :items="paginatePlaceholderItem" v-model:search="searchInput"
+        <TableMain :headers="headers" :items="items" v-model:search="searchInput"
             :loading="getAnnouncementPending" :page="page" :pages="pages" :pageRange="pageRange"
             @refresh="getAnnouncementsRefresh" :show-header="APP_CONSTANTS.RESIDENT === props.recipients" @update:page="handleUpdatePage" @row-click="handleRowClick">
             <!--
@@ -27,6 +27,15 @@
                 </button>
             </template>
 
+            <!--
+                A failed request is not an empty bulletin board. Without this the
+                table drew its neutral "No data available" for a 500, which reads
+                as "there are no announcements" - a statement the server never made.
+            -->
+            <template v-if="getAnnouncementError" #no-data>
+                <DashboardEmptyState error />
+            </template>
+
             <template v-slot:item.createdAt="{ item }">
                 <span class="d-flex align-center ga-2">
                     <v-icon icon="mdi-calendar-start" color="green" size="20" />
@@ -75,6 +84,10 @@
 <script setup lang="ts">
 import useBulletin from '../composables/useBulletin';
 import { APP_CONSTANTS } from '../constants/app';
+// Imported by relative path, not left to Nuxt's auto-import: this layer's
+// components always import their utils explicitly, and a missing import here
+// is a ReferenceError that blanks the screen in every consuming app.
+import { readListPage } from '../utils/list-page';
 
 definePageMeta({
     memberOnly: true,
@@ -135,6 +148,13 @@ const headers = computed(() => {
     return arr;
 
 });
+// THE SERVER PAGES THIS LIST. `getAll` is called with `page`, so `items` is
+// already one page of rows and `pages` / `pageRange` are the server's own
+// answer for the whole list. A computed used to re-derive both from
+// `items.value.length` - i.e. from the page it had just been handed - so 47
+// announcements read "1-10 of 10", the pager was told there was 1 page, and
+// page 2 was unreachable. Nothing here recomputes them any more; the watcher
+// below is the only writer.
 const items = ref<TAnnouncement[]>([]);
 const page = ref(1);
 const pages = ref(0);
@@ -163,28 +183,11 @@ const activeAnnouncementObj = computed(() => {
     return items.value.find(x => x._id === selectedAnnouncementId.value)
 })
 
-const paginatePlaceholderItem = computed(() => {
-    const pageSize = 10
-    const total = items.value.length
-    const currentPage = page.value
-
-    const start = (currentPage - 1) * pageSize
-    const end = start + pageSize
-
-    const from = total === 0 ? 0 : start + 1
-    const to = Math.min(end, total)
-    pageRange.value = `${from}-${to} of ${total}`
-
-    pages.value = Math.ceil(total / pageSize)
-
-    return items.value.slice(start, end)
-})
-
-
 const {
     data: getAnnouncementReq,
     refresh: getAnnouncementsRefresh,
     pending: getAnnouncementPending,
+    error: getAnnouncementError,
 } = await useLazyAsyncData(
     `get-all-announcements-${page.value}`,
     () => getAll({ page: page.value, site: siteId, status: status.value, recipients: props.recipients ?? "" }),
@@ -194,9 +197,10 @@ const {
 );
 
 watch(getAnnouncementReq, (newVal) => {
-    items.value = newVal?.items || [];
-    pages.value = newVal?.pages || 0;
-    pageRange.value = newVal?.pageRange || "-- - -- of --";
+    const listPage = readListPage<TAnnouncement>(newVal);
+    items.value = listPage.items;
+    pages.value = listPage.pages;
+    pageRange.value = listPage.pageRange;
 });
 
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.192",
+  "version": "3.2.2-staging.193",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/list-page.test.ts

@@ -0,0 +1,60 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { readListPage, NO_PAGE_RANGE } from "./list-page.ts";
+
+const rows = (n: number, from = 1) =>
+    Array.from({ length: n }, (_, i) => ({ _id: `row-${from + i}` }));
+
+describe("readListPage", () => {
+    it("keeps the server's total when it is bigger than the page - the failing case", () => {
+        // 47 announcements served 10 at a time. Deriving from the page gives
+        // "10" and one page, which is the defect this replaces.
+        const got = readListPage({ items: rows(10), pages: 5, pageRange: "1-10 of 47" });
+
+        assert.equal(got.items.length, 10);
+        assert.equal(got.pages, 5);
+        assert.equal(got.pageRange, "1-10 of 47");
+    });
+
+    it("keeps the server's page 2 range rather than re-slicing", () => {
+        const got = readListPage({ items: rows(10, 11), pages: 5, pageRange: "11-20 of 47" });
+
+        assert.equal(got.items.length, 10);
+        assert.equal(got.items[0]._id, "row-11");
+        assert.equal(got.pageRange, "11-20 of 47");
+    });
+
+    it("passes a single page through unchanged", () => {
+        const got = readListPage({ items: rows(7), pages: 1, pageRange: "1-7 of 7" });
+
+        assert.deepEqual(
+            { pages: got.pages, pageRange: got.pageRange, n: got.items.length },
+            { pages: 1, pageRange: "1-7 of 7", n: 7 }
+        );
+    });
+
+    it("reports a genuinely empty list as the server described it", () => {
+        const got = readListPage({ items: [], pages: 0, pageRange: "0 - 0 of 0" });
+
+        assert.deepEqual(got, { items: [], pages: 0, pageRange: "0 - 0 of 0" });
+    });
+
+    it("does not invent a zero when the request failed and there is no reply", () => {
+        for (const reply of [null, undefined]) {
+            const got = readListPage(reply);
+
+            assert.deepEqual(got.items, []);
+            assert.equal(got.pages, 0);
+            // "0 of 0" would be a statement about the data. This is not one.
+            assert.equal(got.pageRange, NO_PAGE_RANGE);
+        }
+    });
+
+    it("does not fall back to the page length when the envelope omits its totals", () => {
+        const got = readListPage({ items: rows(10) });
+
+        assert.equal(got.pages, 0);
+        assert.equal(got.pageRange, NO_PAGE_RANGE);
+        assert.notEqual(got.pageRange, "1-10 of 10");
+    });
+});

package/utils/list-page.ts

@@ -0,0 +1,38 @@
+/**
+ * READING A PAGINATED LIST REPLY.
+ *
+ * Every paginated endpoint in this product answers with an envelope: the rows
+ * for the page that was asked for, plus `pages` and `pageRange` describing the
+ * WHOLE list. Screens kept re-deriving those two from the rows they had just
+ * been handed - `items.length` is the size of one page, not the size of the
+ * list - so a list of 47 announcements presented itself as 10 and its pager
+ * was told there was one page.
+ *
+ * This is the one place that reads the envelope, so the rule is stated once:
+ * take the server's own totals, and when the reply is missing (a failed
+ * request) say so with a placeholder rather than inventing a zero.
+ */
+
+export const NO_PAGE_RANGE = "-- - -- of --";
+
+export type TListPageReply<T> = {
+    items?: T[] | null;
+    pages?: number | null;
+    pageRange?: string | null;
+} | null | undefined;
+
+export type TListPage<T> = {
+    items: T[];
+    pages: number;
+    pageRange: string;
+};
+
+export function readListPage<T>(reply: TListPageReply<T>): TListPage<T> {
+    return {
+        items: reply?.items ?? [],
+        // The server's page COUNT for the whole list. Never ceil(items/limit).
+        pages: reply?.pages ?? 0,
+        // The server's own "1-10 of 47" string. Never rebuilt from the page.
+        pageRange: reply?.pageRange || NO_PAGE_RANGE,
+    };
+}