@7365admin1/layer-common 4.1.3-staging.255 → 4.1.3-staging.256

package/components/CameraWall.vue

@@ -72,7 +72,32 @@
         <p v-if="!cameras.length && !loading" class="vms__picker-empty">
           No cameras yet.
         </p>
-        <label v-for="c in cameras" :key="c._id" class="vms__pick">
+
+        <!--
+          SEARCH, then a pager. A site with 150 cameras used to render 150
+          checkboxes in one 220 px column, so finding "Basement Ramp 2" meant
+          scrolling past everything else. Typing filters; the pager keeps the
+          column a fixed height whatever the site's size.
+
+          A plain input rather than a Vuetify field: this component is the wall
+          chrome, styled from its own CSS variables, and a `v-text-field` here
+          brings the app theme into a black surround that deliberately is not
+          themed.
+        -->
+        <input
+          v-if="cameras.length > PICKER_PAGE_SIZE"
+          v-model.trim="pickerSearch"
+          class="vms__picker-search"
+          type="search"
+          placeholder="Search cameras"
+          aria-label="Search cameras on this site"
+        >
+
+        <p v-if="cameras.length && !picker.matched" class="vms__picker-empty">
+          No camera matches that search.
+        </p>
+
+        <label v-for="c in picker.items" :key="c._id" class="vms__pick">
           <input
             type="checkbox"
             :checked="isPicked(c._id)"
@@ -85,6 +110,32 @@
             :class="c.status === 'active' ? 'vms__pick-dot--on' : 'vms__pick-dot--off'"
           />
         </label>
+
+        <!--
+          Shown whenever the matching list is longer than one page, so the reader
+          is never left believing the column is the whole list. The count is of
+          MATCHES, not of the site, because that is the list being paged.
+        -->
+        <div v-if="picker.pages > 1" class="vms__picker-pager">
+          <button
+            type="button"
+            class="vms__link"
+            :disabled="pickerPage === 0"
+            @click="pickerPage -= 1"
+          >
+            Prev
+          </button>
+          <span class="vms__picker-range">{{ picker.range }}</span>
+          <button
+            type="button"
+            class="vms__link"
+            :disabled="pickerPage >= picker.pages - 1"
+            @click="pickerPage += 1"
+          >
+            Next
+          </button>
+        </div>
+
         <p v-if="selectedIds.length >= layout.tiles" class="vms__picker-note">
           This layout holds {{ layout.tiles }}. Choose a bigger layout for more.
         </p>
@@ -293,6 +344,8 @@ import {
   focusedCamera,
   healthView,
   isDenseLayout,
+  PICKER_PAGE_SIZE,
+  pickerView,
   sharedCapabilityNote,
   wallCameras,
   wallLayout,
@@ -392,6 +445,8 @@ onMounted(load);
 watch(() => props.site, () => {
   selectedIds.value = [];
   page.value = 0;
+  pickerSearch.value = "";
+  pickerPage.value = 0;
   healthById.value = {};
   load();
 });
@@ -437,6 +492,46 @@ watch([layoutKey, pages], () => {
   page.value = clampPage(page.value, pages.value);
 });
 
+/* ------------------------------------------------- browsing a large estate */
+
+/**
+ * The picker is searched and paged, because at 150 cameras it was neither.
+ *
+ * It rendered one checkbox per camera in a 220 px column with no filter, so the
+ * only way to reach the last camera at a large site was to scroll past the other
+ * 149 - and nothing on screen said how many there were. This is the same
+ * treatment `CameraMain.vue` already gives the settings list.
+ *
+ * Searched and paged in the BROWSER on purpose: the wall endpoint answers with
+ * the whole site in one read (`getSiteWall` applies no limit, and the response is
+ * an id/name/status projection, not pictures), it has no search parameter, and a
+ * site's camera list is small enough to hold. If a site ever grows past what one
+ * request should carry, this wants a server-side search - and so does the
+ * endpoint.
+ *
+ * ponytail: a plain filter + slice, no virtual scroller. 150 rows of which 25
+ * are mounted is not a performance problem.
+ */
+const pickerSearch = ref("");
+const pickerPage = ref(0);
+
+/**
+ * The whole picker column in one computed: the matching cameras, the page being
+ * shown, how many pages there are and the "26-50 of 150" label. The rule lives
+ * in `pickerView` so it can be tested; this only holds the two inputs.
+ */
+const picker = computed(() =>
+  pickerView(cameras.value, pickerSearch.value, pickerPage.value, PICKER_PAGE_SIZE)
+);
+
+/**
+ * `pickerView` clamps the page for display, but the ref has to follow or the
+ * Prev/Next buttons act on a number the column is not on.
+ */
+watch(picker, (view) => {
+  if (pickerPage.value !== view.page) pickerPage.value = view.page;
+});
+
 function isPicked(id: string) {
   return selectedIds.value.includes(id);
 }
@@ -728,6 +823,39 @@ async function toggleFullscreen() {
   border-right: 1px solid var(--vms-line);
 }
 
+.vms__picker-search {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0 0 6px;
+  /* 32 px so a thumb on a control-room touchscreen hits it. */
+  height: 32px;
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--vms-text);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--vms-line);
+  border-radius: 4px;
+}
+.vms__picker-search::placeholder {
+  color: var(--vms-text-dim);
+}
+.vms__picker-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  margin: 6px 0 0;
+  font-size: 11px;
+}
+.vms__picker-range {
+  color: var(--vms-text-dim);
+}
+.vms__picker-pager .vms__link[disabled] {
+  /* Dimmed, not hidden: a pager that loses its Prev button on page 1 moves Next
+     under the cursor and gets clicked by accident. */
+  opacity: 0.45;
+  cursor: default;
+}
 .vms__picker-head {
   display: flex;
   align-items: center;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.1.3-staging.255",
+  "version": "4.1.3-staging.256",
   "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/camera-wall.ts

@@ -169,6 +169,78 @@ export function clampPage(page: number, pages: number): number {
   return Math.min(Math.max(0, Math.floor(page)), Math.max(0, pages - 1));
 }
 
+/** How many cameras the picker's side column shows at a time. */
+export const PICKER_PAGE_SIZE = 25;
+
+/**
+ * The camera browser beside the wall, searched and paged.
+ *
+ * **This exists because the picker was neither.** It rendered one checkbox per
+ * camera in a 220 px column with no filter and no count, so at a 150-camera site
+ * the only way to reach the last camera was to scroll past the other 149, and
+ * nothing on screen said how many there were. A supervisor who could not find a
+ * camera had no way to tell whether it was missing or merely further down.
+ *
+ * Searched and paged in the browser on purpose: the wall endpoint answers with
+ * the whole site in one read (`getSiteWall` applies no limit, and the response is
+ * an id/name/status projection rather than pictures) and has no search parameter.
+ *
+ * Extracted from the component so the paging is a tested rule rather than a
+ * template nobody would think to check - the playground build does not compile
+ * the wall's screens at all.
+ *
+ * `range` counts MATCHES, not the site, because that is the list being paged -
+ * but a search that hides cameras says so through `total` vs `matched`.
+ */
+export function pickerView(
+  cameras: TWallCamera[],
+  query: string | undefined,
+  page: number,
+  pageSize: number = PICKER_PAGE_SIZE
+): {
+  matches: TWallCamera[];
+  items: TWallCamera[];
+  pages: number;
+  page: number;
+  range: string;
+  total: number;
+  matched: number;
+} {
+  const all = Array.isArray(cameras) ? cameras : [];
+  const size = Number.isFinite(pageSize) && pageSize > 0 ? Math.floor(pageSize) : PICKER_PAGE_SIZE;
+  const needle = String(query ?? "").trim().toLowerCase();
+
+  // Name first, id as the fallback label - the same thing the row displays, so
+  // searching for what you can read always finds it.
+  const matches = needle
+    ? all.filter((c: any) =>
+        String(c?.name || c?._id || "").toLowerCase().includes(needle)
+      )
+    : all;
+
+  const pages = Math.max(1, Math.ceil(matches.length / size));
+  // Clamped rather than trusted: typing can shrink the list under a page number
+  // that was valid a keystroke ago, and an out-of-range page renders as "no
+  // cameras", which reads as a broken picker rather than a stale page.
+  const current = clampPage(page, pages);
+  const start = current * size;
+  const items = matches.slice(start, start + size);
+
+  const range = matches.length
+    ? `${start + 1}-${Math.min(matches.length, start + size)} of ${matches.length}`
+    : "0 of 0";
+
+  return {
+    matches,
+    items,
+    pages,
+    page: current,
+    range,
+    total: all.length,
+    matched: matches.length,
+  };
+}
+
 /**
  * The cameras on one page, in order. **Never padded.**
  *