@jskit-ai/http-web 0.1.1

package/test/useCrudListFilterLookups.test.js

@@ -0,0 +1,114 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import {
+  resolveLookupSelectedValues,
+  createLookupOptionsFromItems,
+  mergeSelectedLookupOptions,
+  resolveLookupOptionLabel
+} from "../src/client/composables/internal/crudListFilterLookupSupport.js";
+
+const supplierFilter = Object.freeze({
+  key: "supplierContactId",
+  type: "recordIdMany",
+  label: "Supplier",
+  lookup: Object.freeze({
+    apiSuffix: "/contacts",
+    valueKey: "id",
+    labelKey: "name"
+  })
+});
+
+test("lookup filter support normalizes selected record ids for single and many filters", () => {
+  assert.deepEqual(
+    resolveLookupSelectedValues(supplierFilter, ["7", "4", "7", ""]),
+    ["7", "4"]
+  );
+
+  assert.deepEqual(
+    resolveLookupSelectedValues(
+      {
+        ...supplierFilter,
+        type: "recordId"
+      },
+      12
+    ),
+    ["12"]
+  );
+});
+
+test("lookup filter support builds option labels from custom resolvers and fallback lookup labels", () => {
+  const options = createLookupOptionsFromItems(
+    [
+      {
+        id: 7,
+        firstName: "Pollen",
+        lastName: "Partners"
+      },
+      {
+        id: 4,
+        name: "Harbor Storage"
+      }
+    ],
+    supplierFilter,
+    (item = {}) => {
+      if (item.id === 7) {
+        return `${item.firstName} ${item.lastName}`;
+      }
+
+      return "";
+    }
+  );
+
+  assert.deepEqual(options, [
+    {
+      value: "7",
+      label: "Pollen Partners",
+      record: {
+        id: 7,
+        firstName: "Pollen",
+        lastName: "Partners"
+      }
+    },
+    {
+      value: "4",
+      label: "Harbor Storage",
+      record: {
+        id: 4,
+        name: "Harbor Storage"
+      }
+    }
+  ]);
+});
+
+test("lookup filter support merges cached selected labels and resolves fallback labels", () => {
+  const currentOptions = [
+    {
+      value: "7",
+      label: "Pollen Partners",
+      record: {
+        id: 7,
+        name: "Pollen Partners"
+      }
+    }
+  ];
+  const cachedOptions = new Map([
+    ["12", {
+      value: "12",
+      label: "North Shed",
+      record: {
+        id: 12,
+        name: "North Shed"
+      }
+    }]
+  ]);
+
+  const mergedOptions = mergeSelectedLookupOptions(
+    currentOptions,
+    ["12", "7"],
+    cachedOptions
+  );
+
+  assert.deepEqual(mergedOptions.map((option) => option.value), ["12", "7"]);
+  assert.equal(resolveLookupOptionLabel(mergedOptions, cachedOptions, "12", "Storage"), "North Shed");
+  assert.equal(resolveLookupOptionLabel(mergedOptions, cachedOptions, "55", "Storage"), "Storage 55");
+});

package/test/useCrudListFilters.test.js

@@ -0,0 +1,293 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { formatDateOnlyDisplay } from "../src/client/support/crudListDateFilterSupport.js";
+
+test("useCrudListFilters manages values, query params, chips, and presets", async () => {
+  const { useCrudListFilters } = await import("@jskit-ai/http-web/client/composables/useCrudListFilters");
+
+  const filters = useCrudListFilters(
+    {
+      onlyStaff: {
+        type: "flag",
+        label: "Staff"
+      },
+      status: {
+        type: "enumMany",
+        label: "Status",
+        options: [
+          { value: "active", label: "Active" },
+          { value: "archived", label: "Archived" }
+        ]
+      },
+      supplierContactId: {
+        type: "recordIdMany",
+        label: "Supplier"
+      },
+      arrivalDate: {
+        type: "dateRange",
+        label: "Arrival Date"
+      }
+    },
+    {
+      labelResolvers: {
+        supplierContactId(value) {
+          return value === "7" ? "Pollen Partners" : "";
+        }
+      },
+      presets: [
+        {
+          key: "needs-staff-review",
+          label: "Needs Staff Review",
+          values: {
+            onlyStaff: true,
+            status: ["archived"]
+          }
+        }
+      ]
+    }
+  );
+
+  filters.values.onlyStaff = true;
+  filters.values.status = ["active"];
+  filters.values.supplierContactId = ["7"];
+  filters.values.arrivalDate.from = "2026-04-01";
+
+  assert.equal(filters.queryParams.onlyStaff.value, true);
+  assert.deepEqual(filters.queryParams.status.value, ["active"]);
+  assert.equal(filters.queryParams.arrivalDate.value, "2026-04-01..");
+  assert.equal(filters.hasActiveFilters.value, true);
+  assert.deepEqual(
+    filters.activeChips.value.map((chip) => chip.label),
+    [
+      "Staff",
+      "Status: Active",
+      "Supplier: Pollen Partners",
+      `Arrival Date: from ${formatDateOnlyDisplay("2026-04-01")}`
+    ]
+  );
+
+  filters.clearChip(filters.activeChips.value.find((chip) => chip.filterKey === "supplierContactId"));
+  assert.deepEqual(filters.values.supplierContactId, []);
+
+  filters.applyPreset("needs-staff-review");
+  assert.equal(filters.values.onlyStaff, true);
+  assert.deepEqual(filters.values.status, ["archived"]);
+  assert.equal(filters.values.arrivalDate.from, "");
+
+  filters.clearFilters();
+  assert.equal(filters.values.onlyStaff, false);
+  assert.deepEqual(filters.values.status, []);
+  assert.equal(filters.hasActiveFilters.value, false);
+});
+
+test("useCrudListFilters supports dynamic presets and preset matching", async () => {
+  const { useCrudListFilters } = await import("@jskit-ai/http-web/client/composables/useCrudListFilters");
+  let today = "2026-04-18";
+
+  const filters = useCrudListFilters(
+    {
+      status: {
+        type: "enumMany",
+        label: "Status",
+        options: [
+          { value: "active", label: "Active" },
+          { value: "archived", label: "Archived" }
+        ]
+      },
+      arrivalDate: {
+        type: "dateRange",
+        label: "Arrival Date"
+      }
+    },
+    {
+      presets: [
+        {
+          key: "today",
+          label: "Today",
+          resolveValues() {
+            return {
+              arrivalDate: {
+                from: today,
+                to: today
+              }
+            };
+          }
+        },
+        {
+          key: "all-dates",
+          label: "All Dates",
+          values: {
+            arrivalDate: {
+              from: "",
+              to: ""
+            }
+          }
+        }
+      ]
+    }
+  );
+
+  filters.values.status = ["archived"];
+  filters.applyPreset("today", { mode: "merge" });
+
+  assert.equal(filters.values.arrivalDate.from, "2026-04-18");
+  assert.equal(filters.values.arrivalDate.to, "2026-04-18");
+  assert.equal(filters.queryParams.arrivalDate.value, "2026-04-18");
+  assert.deepEqual(filters.values.status, ["archived"]);
+  assert.equal(filters.matchesPreset("today"), true);
+  assert.equal(filters.matchesPreset("all-dates"), false);
+
+  today = "2026-04-19";
+  assert.equal(filters.matchesPreset("today"), false);
+
+  filters.applyPreset("all-dates", { mode: "merge" });
+  assert.equal(filters.values.arrivalDate.from, "");
+  assert.equal(filters.values.arrivalDate.to, "");
+  assert.deepEqual(filters.values.status, ["archived"]);
+  assert.equal(filters.matchesPreset("all-dates"), true);
+});
+
+test("useCrudListFilters preset matching ignores invalid extra enumMany values outside the shared contract", async () => {
+  const { useCrudListFilters } = await import("@jskit-ai/http-web/client/composables/useCrudListFilters");
+
+  const filters = useCrudListFilters(
+    {
+      status: {
+        type: "enumMany",
+        label: "Status",
+        options: [
+          { value: "active", label: "Active" },
+          { value: "archived", label: "Archived" }
+        ]
+      }
+    },
+    {
+      presets: [
+        {
+          key: "archived-only",
+          label: "Archived Only",
+          values: {
+            status: ["archived"]
+          }
+        }
+      ]
+    }
+  );
+
+  filters.values.status = ["archived", "bogus"];
+
+  assert.equal(filters.matchesPreset("archived-only"), true);
+  assert.deepEqual(filters.queryParams.status.value, ["archived"]);
+  assert.deepEqual(
+    filters.activeChips.value.map((chip) => chip.label),
+    ["Status: Archived"]
+  );
+});
+
+test("useCrudListFilters hydrates single-key range query params into structured values", async () => {
+  const { useCrudListFilters } = await import("@jskit-ai/http-web/client/composables/useCrudListFilters");
+
+  const filters = useCrudListFilters({
+    arrivalDate: {
+      type: "dateRange",
+      label: "Arrival Date"
+    },
+    weight: {
+      type: "numberRange",
+      label: "Weight"
+    }
+  });
+
+  filters.queryParams.arrivalDate.value = "..2026-04-30";
+  filters.queryParams.weight.value = "12.5..18";
+
+  assert.deepEqual(filters.values.arrivalDate, {
+    from: "",
+    to: "2026-04-30"
+  });
+  assert.deepEqual(filters.values.weight, {
+    min: "12.5",
+    max: "18"
+  });
+});
+
+test("useCrudListFilters preserves scalar, complete, partial, and cleared date contracts", async () => {
+  const { useCrudListFilters } = await import("@jskit-ai/http-web/client/composables/useCrudListFilters");
+  const filters = useCrudListFilters({
+    submittedOn: {
+      type: "date",
+      label: "Submitted"
+    },
+    arrivalDate: {
+      type: "dateRange",
+      label: "Arrival"
+    }
+  });
+
+  filters.queryParams.submittedOn.value = "2026-04-18";
+  filters.queryParams.arrivalDate.value = "2026-05-04..2026-05-10";
+
+  assert.equal(filters.values.submittedOn, "2026-04-18");
+  assert.deepEqual(filters.values.arrivalDate, {
+    from: "2026-05-04",
+    to: "2026-05-10"
+  });
+  assert.equal(filters.queryParams.submittedOn.value, "2026-04-18");
+  assert.equal(filters.queryParams.arrivalDate.value, "2026-05-04..2026-05-10");
+  assert.deepEqual(
+    filters.activeChips.value.map((chip) => chip.label),
+    [
+      `Submitted: ${formatDateOnlyDisplay("2026-04-18")}`,
+      `Arrival: ${formatDateOnlyDisplay("2026-05-04")} to ${formatDateOnlyDisplay("2026-05-10")}`
+    ]
+  );
+
+  filters.values.arrivalDate.to = "";
+  assert.equal(filters.queryParams.arrivalDate.value, "2026-05-04..");
+  assert.equal(
+    filters.activeChips.value.at(-1).label,
+    `Arrival: from ${formatDateOnlyDisplay("2026-05-04")}`
+  );
+
+  filters.clearFilter("submittedOn");
+  assert.equal(filters.values.submittedOn, "");
+  assert.equal(filters.queryParams.submittedOn.value, "");
+
+  filters.clearFilters();
+  assert.deepEqual(filters.values.arrivalDate, { from: "", to: "" });
+  assert.equal(filters.hasActiveFilters.value, false);
+});
+
+test("useCrudListFilters applies declarative defaults once while clear remains an explicit empty state", async () => {
+  const { useCrudListFilters } = await import("@jskit-ai/http-web/client/composables/useCrudListFilters");
+
+  const filters = useCrudListFilters({
+    currentness: {
+      type: "enum",
+      label: "Currentness",
+      options: [
+        { value: "active", label: "Active" },
+        { value: "archived", label: "Archived" }
+      ],
+      defaultValue: "active"
+    },
+    onlyStaff: {
+      type: "flag",
+      label: "Staff",
+      defaultValue: true
+    }
+  });
+
+  assert.equal(filters.values.currentness, "active");
+  assert.equal(filters.values.onlyStaff, true);
+  assert.equal(filters.queryParams.currentness.value, "active");
+  assert.equal(filters.queryParams.onlyStaff.value, true);
+
+  filters.clearFilter("currentness");
+  filters.clearFilter("onlyStaff");
+
+  assert.equal(filters.values.currentness, "");
+  assert.equal(filters.values.onlyStaff, false);
+  assert.equal(filters.queryParams.currentness.value, "");
+  assert.equal(filters.queryParams.onlyStaff.value, false);
+});

package/test/useCrudListParentTitle.test.js

@@ -0,0 +1,262 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createSchema } from "json-rest-schema";
+import { resolveCrudListParentDescriptor, resolveCrudListParentRecordTitle, resolveCrudListParentTitleFromItems } from "../src/client/composables/internal/crudListParentTitleSupport.js";
+import { useCrudListParentTitle } from "../src/client/composables/useCrudListParentTitle.js";
+
+const contactChildResource = Object.freeze({
+  contract: {
+    lookup: {
+      containerKey: "lookups"
+    }
+  },
+  operations: {
+    view: {
+      output: {
+        schema: createSchema({
+          contactId: {
+            type: "integer",
+            relation: {
+              kind: "lookup",
+              namespace: "contacts",
+              valueKey: "id"
+            }
+          },
+          serviceId: {
+            type: "integer",
+            relation: {
+              kind: "lookup",
+              namespace: "services",
+              valueKey: "id"
+            }
+          }
+        })
+      }
+    }
+  }
+});
+
+test("resolveCrudListParentDescriptor selects the nearest lookup route parent", () => {
+  const descriptor = resolveCrudListParentDescriptor({
+    resource: contactChildResource,
+    route: {
+      matched: [
+        { path: "/w/:workspaceSlug/admin" },
+        { path: "/w/:workspaceSlug/admin/contacts/:contactId/availabilities" }
+      ],
+      params: {
+        workspaceSlug: "dogandgroom",
+        contactId: "538779"
+      }
+    },
+    recordIdParam: "availabilityRuleId"
+  });
+
+  assert.deepEqual(
+    descriptor,
+    {
+      fieldKey: "contactId",
+      routeParamKey: "contactId",
+      relationNamespace: "contacts",
+      entityLabel: "Contact",
+      labelKey: "",
+      fieldDescriptor: {
+        key: "contactId",
+        relation: {
+          kind: "lookup",
+          valueKey: "id",
+          labelKey: "",
+          containerKey: "lookups"
+        }
+      },
+      apiUrlTemplate: "/contacts/:contactId"
+    }
+  );
+});
+
+test("resolveCrudListParentTitleFromItems uses the hydrated lookup label", () => {
+  const descriptor = resolveCrudListParentDescriptor({
+    resource: contactChildResource,
+    route: {
+      matched: [{ path: "/w/:workspaceSlug/admin/contacts/:contactId/availabilities" }],
+      params: {
+        workspaceSlug: "dogandgroom",
+        contactId: "538779"
+      }
+    },
+    recordIdParam: "availabilityRuleId"
+  });
+
+  const title = resolveCrudListParentTitleFromItems(
+    [
+      {
+        id: 1,
+        contactId: 538779,
+        lookups: {
+          contactId: {
+            id: 538779,
+            firstName: "Jessica",
+            lastName: "Dickinson"
+          }
+        }
+      }
+    ],
+    descriptor
+  );
+
+  assert.equal(title, "Jessica Dickinson");
+});
+
+test("resolveCrudListParentTitleFromItems ignores raw lookup ids when no hydrated label is present", () => {
+  const descriptor = resolveCrudListParentDescriptor({
+    resource: contactChildResource,
+    route: {
+      matched: [{ path: "/w/:workspaceSlug/admin/contacts/:contactId/availabilities" }],
+      params: {
+        workspaceSlug: "dogandgroom",
+        contactId: "538779"
+      }
+    },
+    recordIdParam: "availabilityRuleId"
+  });
+
+  const title = resolveCrudListParentTitleFromItems(
+    [
+      {
+        id: 1,
+        contactId: 538779
+      }
+    ],
+    descriptor
+  );
+
+  assert.equal(title, "");
+});
+
+test("resolveCrudListParentRecordTitle falls back to entity label plus id", () => {
+  const title = resolveCrudListParentRecordTitle(
+    {
+      id: 538779
+    },
+    {
+      entityLabel: "Contact",
+      labelKey: ""
+    }
+  );
+
+  assert.equal(title, "Contact #538779");
+});
+
+test("resolveCrudListParentDescriptor supports parentRouteParamKey aliases", () => {
+  const descriptor = resolveCrudListParentDescriptor({
+    resource: {
+      operations: {
+        view: {
+          output: {
+            schema: createSchema({
+              staffContactId: {
+                type: "integer",
+                parentRouteParamKey: "contactId",
+                relation: {
+                  kind: "lookup",
+                  namespace: "contacts",
+                  valueKey: "id"
+                }
+              }
+            })
+          }
+        }
+      }
+    },
+    route: {
+      matched: [{ path: "/w/:workspaceSlug/admin/contacts/:contactId/availabilities" }],
+      params: {
+        workspaceSlug: "dogandgroom",
+        contactId: "538779"
+      }
+    },
+    recordIdParam: "availabilityRuleId"
+  });
+
+  assert.equal(descriptor?.fieldKey, "staffContactId");
+  assert.equal(descriptor?.routeParamKey, "contactId");
+});
+
+test("useCrudListParentTitle loads the parent record when child rows only expose the raw parent id", () => {
+  const runtime = useCrudListParentTitle({
+    listRuntime: {
+      items: [
+        {
+          id: 1,
+          contactId: 538779
+        }
+      ],
+      isInitialLoading: false,
+      loadError: ""
+    },
+    resource: contactChildResource,
+    recordIdParam: "availabilityRuleId",
+    route: {
+      matched: [{ path: "/w/:workspaceSlug/admin/contacts/:contactId/availabilities" }],
+      params: {
+        workspaceSlug: "dogandgroom",
+        contactId: "538779"
+      }
+    },
+    viewRuntimeFactory: () => ({
+      record: {
+        id: 538779,
+        firstName: "Jessica",
+        lastName: "Dickinson"
+      },
+      isLoading: false,
+      loadError: ""
+    })
+  });
+
+  assert.equal(runtime.shouldLoadParentRecord, true);
+  assert.equal(runtime.title, "Jessica Dickinson");
+});
+
+test("useCrudListParentTitle requests the parent through JSON:API record transport", () => {
+  let capturedTransport = null;
+
+  useCrudListParentTitle({
+    listRuntime: {
+      items: [
+        {
+          id: 1,
+          contactId: 538779
+        }
+      ],
+      isInitialLoading: false,
+      loadError: ""
+    },
+    resource: contactChildResource,
+    recordIdParam: "availabilityRuleId",
+    route: {
+      matched: [{ path: "/w/:workspaceSlug/admin/contacts/:contactId/availabilities" }],
+      params: {
+        workspaceSlug: "dogandgroom",
+        contactId: "538779"
+      }
+    },
+    viewRuntimeFactory: (options = {}) => {
+      capturedTransport = options.transport;
+      return {
+        record: {
+          id: 538779,
+          fullName: "Jessica Dickinson"
+        },
+        isLoading: false,
+        loadError: ""
+      };
+    }
+  });
+
+  assert.deepEqual(capturedTransport, {
+    kind: "jsonapi-resource",
+    responseType: "contacts",
+    responseKind: "record"
+  });
+});