@antelopejs/dms 0.5.6 → 0.6.0

package/frontend-vue/tests/table-view-chrome.test.ts

@@ -0,0 +1,175 @@
+import { describe, expect, it } from "vitest";
+import {
+  FULL_TABLE_CHROME,
+  resolveTableChrome,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/chrome";
+import {
+  applyQuickFilter,
+  quickFilterButtonLabel,
+  quickFilterValue,
+  quickFilterMode,
+  relationQuickFilterItems,
+  relationQuickFilterSource,
+  staticQuickFilterItems,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/quickFilters";
+import type { TableViewColumn } from "../layers/dms-ui/app/composables/table-view/types/column";
+
+const column = (
+  id: string,
+  options: Record<string, unknown> = {},
+): TableViewColumn =>
+  ({
+    id,
+    accessorKey: id,
+    header: id,
+    listable: true,
+    type: { id, inputComponent: { componentName: "x", options } },
+  }) as unknown as TableViewColumn;
+
+describe("TableView layout", () => {
+  const everything = {
+    hasCaption: true,
+    isSearchable: true,
+    isFilterable: true,
+  };
+
+  it("draws the full chrome by default", () => {
+    expect(resolveTableChrome(undefined, everything)).toEqual(
+      FULL_TABLE_CHROME,
+    );
+    expect(resolveTableChrome("full", everything).search).toBe("toggle");
+  });
+
+  it("reduces the compact layout to an open search field", () => {
+    expect(resolveTableChrome("compact", everything)).toEqual({
+      caption: false,
+      search: "field",
+      filters: false,
+      sorting: false,
+      refresh: false,
+      menu: false,
+      columnMenus: false,
+      pageSize: false,
+    });
+  });
+
+  it("draws a control only when the table has something to offer through it", () => {
+    const bare = resolveTableChrome("full", {
+      hasCaption: false,
+      isSearchable: false,
+      isFilterable: false,
+    });
+    expect(bare.caption).toBe(false);
+    expect(bare.search).toBe("none");
+    expect(bare.filters).toBe(false);
+    expect(bare.menu).toBe(true);
+    expect(
+      resolveTableChrome("compact", { ...everything, isSearchable: false })
+        .search,
+    ).toBe("none");
+  });
+});
+
+describe("TableView quick filters", () => {
+  const translate = (key: string) => key.replace(/^\$/, "t:");
+
+  it("lists a select's items and a boolean's two values", () => {
+    expect(
+      staticQuickFilterItems(
+        column("select", { items: [{ value: 1, label: "$one" }] }),
+        translate,
+      ),
+    ).toEqual([{ value: "1", label: "t:one" }]);
+    expect(
+      staticQuickFilterItems(column("boolean"), translate)?.map((i) => i.value),
+    ).toEqual(["true", "false"]);
+  });
+
+  it("reads a relation's values from its select endpoint", () => {
+    const relation = column("relation", {
+      multiple: true,
+      searchUrl: "/api/roles/select",
+      keyMapping: { label: "title", value: "_id" },
+    });
+    expect(staticQuickFilterItems(relation, translate)).toBe(undefined);
+    const source = relationQuickFilterSource(relation)!;
+    expect(source).toEqual({
+      url: "/api/roles/select",
+      labelKey: "title",
+      valueKey: "_id",
+    });
+    expect(
+      relationQuickFilterItems(
+        [{ _id: "r1", title: "Admin" }, { title: "no id" }],
+        source,
+      ),
+    ).toEqual([{ value: "r1", label: "Admin" }]);
+  });
+
+  it("matches inside a list for a multiple column, by equality otherwise", () => {
+    expect(quickFilterMode(column("relation", { multiple: true }))).toBe(
+      "array_contains_string",
+    );
+    expect(quickFilterMode(column("select"))).toBe("is");
+    expect(quickFilterMode(column("select"), "is_not")).toBe("is_not");
+  });
+
+  const roles = { field: "roleIds", mode: "array_contains_string" } as const;
+  const dueDate = {
+    accessorKey: "dueDate",
+    mode: "before",
+    value: "2026-01-01",
+    pinned: false,
+  };
+
+  it("writes the picked value as the column's own filter", () => {
+    const filters = applyQuickFilter([dueDate], roles, "r1");
+    expect(filters).toEqual([
+      dueDate,
+      {
+        accessorKey: "roleIds",
+        mode: "array_contains_string",
+        value: "r1",
+        pinned: false,
+      },
+    ]);
+    expect(quickFilterValue(filters, roles)).toBe("r1");
+    expect(applyQuickFilter(filters, roles, "r2")).toHaveLength(2);
+    expect(quickFilterValue(applyQuickFilter(filters, roles, "r2"), roles)).toBe(
+      "r2",
+    );
+  });
+
+  it("clears its filter on All, leaving the others", () => {
+    const filters = applyQuickFilter([dueDate], roles, "r1");
+    expect(applyQuickFilter(filters, roles, undefined)).toEqual([dueDate]);
+    expect(quickFilterValue([dueDate], roles)).toBe(undefined);
+  });
+
+  it("sets a default filter on the column rather than adding a second one", () => {
+    const pinned = {
+      accessorKey: "roleIds",
+      mode: "array_contains_string",
+      value: undefined,
+      pinned: true,
+      initialValue: undefined,
+    };
+    expect(applyQuickFilter([pinned], roles, "r1")).toEqual([
+      { ...pinned, value: "r1" },
+    ]);
+  });
+
+  it("names the column and its value on the button of a table without filters row", () => {
+    const role = {
+      ...roles,
+      label: "Role",
+      icon: "i-ph-funnel",
+      allLabel: "All",
+      items: [{ value: "r1", label: "Admin" }],
+    };
+    const filters = applyQuickFilter([], role, "r1");
+    expect(quickFilterButtonLabel(role, [], false)).toBe("Role");
+    expect(quickFilterButtonLabel(role, filters, true)).toBe("Admin");
+    expect(quickFilterButtonLabel(role, filters, false)).toBe("Role: Admin");
+  });
+});

package/frontend-vue/tests/table-view-display-registry.test.ts

@@ -0,0 +1,59 @@
+import { ref, type Ref } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { registerTableViewDisplay } from "../layers/dms-ui/app/composables/table-view/useTableViewDisplays";
+import { storeTableViewDisplay } from "../layers/dms-ui/app/build/composables/table-view/displayRegistry";
+import type { TableViewDisplay } from "../layers/dms-ui/app/composables/table-view/types/display";
+
+const display = (id: string): TableViewDisplay => ({
+  id,
+  label: id,
+  icon: "i-ph-cards",
+});
+
+describe("table view display registry", () => {
+  let state: Ref<TableViewDisplay[]>;
+
+  beforeEach(() => {
+    state = ref([]);
+    vi.stubGlobal("useDmsState", () => state);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("registers a module display under <module>:<id>", () => {
+    registerTableViewDisplay(display("saas:plan-cards"));
+    expect(state.value.map((entry) => entry.id)).toEqual(["saas:plan-cards"]);
+  });
+
+  it.each(["table", "kanban", "cards", "grouped"])(
+    "refuses the reserved id %s",
+    (id) => {
+      expect(() => registerTableViewDisplay(display(id))).toThrow(
+        /is a built-in display/,
+      );
+    },
+  );
+
+  it("refuses an id without its module prefix", () => {
+    expect(() => registerTableViewDisplay(display("timeline"))).toThrow(
+      /must be named "<module>:<id>"/,
+    );
+  });
+
+  it("refuses to overwrite a display another registration claimed", () => {
+    registerTableViewDisplay(display("automation:timeline"));
+    expect(() =>
+      registerTableViewDisplay(display("automation:timeline")),
+    ).toThrow(/already registered/);
+  });
+
+  it("lets the DMS store its built-in displays", () => {
+    storeTableViewDisplay(display("cards"));
+    expect(() => registerTableViewDisplay(display("cards"))).toThrow(
+      /is a built-in display/,
+    );
+    expect(state.value.map((entry) => entry.id)).toEqual(["cards"]);
+  });
+});

package/frontend-vue/tests/table-view-expanded-band.test.ts

@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ExpandedRowDetail from "../layers/dms-ui/app/build/components/table-view/ExpandedRowDetail.vue";
+import type {
+  TableViewColumn,
+  TableViewDisplayActions,
+  TableViewExpandableConfig,
+} from "../layers/dms-ui/app/composables/table-view/types";
+import type { ExpandedRowLoadState } from "../layers/dms-ui/app/build/composables/table-view/useExpandedRowDetails";
+
+vi.mock(
+  "../layers/dms-ui/app/components/key-value-list/KeyValueList.vue",
+  async () => {
+    const { defineComponent: define, h: render } = await import("vue");
+    return {
+      default: define({
+        props: { items: Array },
+        setup: (props) => () =>
+          render(
+            "dl",
+            (props.items as Array<{ label: string }>).map((item) =>
+              render("dt", item.label),
+            ),
+          ),
+      }),
+    };
+  },
+);
+
+const OrderLines = defineComponent({
+  props: { row: Object, rowId: String, refresh: Function, open: Function },
+  setup: (props) => () =>
+    h(
+      "button",
+      { "data-lines": props.rowId, onClick: () => props.refresh?.() },
+      String(props.row?.number),
+    ),
+});
+
+const refresh = vi.fn();
+
+const columns = [
+  { id: "carrier", accessorKey: "carrier", header: "Carrier" },
+] as unknown as TableViewColumn[];
+
+describe("TableView expanded row band", () => {
+  let app: App | undefined;
+
+  const mount = (
+    config: TableViewExpandableConfig,
+    loadState: ExpandedRowLoadState = "ready",
+    onRetry = () => {},
+  ) => {
+    app = createApp({
+      render: () =>
+        h(ExpandedRowDetail, {
+          rowProps: {
+            row: { number: "A-1", carrier: "UPS" },
+            rowId: "a1",
+            columns,
+            actions: {} as TableViewDisplayActions<Record<string, unknown>>,
+            open: () => {},
+            refresh,
+          },
+          config,
+          loadState,
+          onRetry,
+        }),
+    });
+    for (const name of ["USkeleton", "UIcon"]) {
+      app.component(name, defineComponent({ render: () => h("span") }));
+    }
+    app.component(
+      "UButton",
+      defineComponent({
+        props: { label: String },
+        setup: (props) => () => h("button", { "data-retry": "" }, props.label),
+      }),
+    );
+    const container = document.createElement("div");
+    app.mount(container);
+    return container;
+  };
+
+  beforeEach(() => {
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) => text,
+    }));
+    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+    vi.stubGlobal("useI18n", () => ({
+      locale: { value: "en" },
+      t: (key: string) => key,
+    }));
+    vi.stubGlobal("resolveDmsComponent", (name: string) =>
+      name === "OrderLines" ? OrderLines : undefined,
+    );
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("hands the whole band to the component", () => {
+    const container = mount({
+      component: { componentName: "OrderLines" },
+      fields: [{ key: "carrier" }],
+    } as TableViewExpandableConfig);
+    expect(container.querySelector("[data-lines='a1']")?.textContent).toBe(
+      "A-1",
+    );
+    expect(container.querySelector("dl")).toBeNull();
+  });
+
+  it("hands the component the table's refresh", () => {
+    const container = mount({ component: { componentName: "OrderLines" } });
+    container.querySelector<HTMLButtonElement>("[data-lines]")!.click();
+    expect(refresh).toHaveBeenCalledOnce();
+  });
+
+  it("holds the band's place while its row loads, then says a failure, with a retry", () => {
+    const config = { component: { componentName: "OrderLines" } };
+    const loading = mount(config, "loading");
+    expect(loading.querySelector("[aria-busy='true']")).not.toBeNull();
+    expect(loading.querySelector("[data-lines]")).toBeNull();
+    app?.unmount();
+
+    const onRetry = vi.fn();
+    const failed = mount(config, "error", onRetry);
+    expect(failed.querySelector("[data-lines]")).toBeNull();
+    expect(failed.textContent).toContain("dms.table.load_error_title");
+    failed.querySelector<HTMLButtonElement>("[data-retry]")!.click();
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("lists the fields without a component", () => {
+    const container = mount({ fields: [{ key: "carrier" }] });
+    expect(container.querySelector("[data-lines]")).toBeNull();
+    expect(container.querySelector("dt")?.textContent).toBe("Carrier");
+  });
+});

package/frontend-vue/tests/table-view-expanded-row-details.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it, vi } from "vitest";
+import { useExpandedRowDetails } from "../layers/dms-ui/app/build/composables/table-view/useExpandedRowDetails";
+import { buildExpandedRowProps } from "../layers/dms-ui/app/build/composables/table-view/utils/expandedRowProps";
+import type { TableViewDisplayActions } from "../layers/dms-ui/app/composables/table-view/types";
+
+interface Order {
+  _id: string;
+  number: string;
+  lines?: string[];
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: unknown) => void;
+  const promise = new Promise<T>((done, fail) => {
+    resolve = done;
+    reject = fail;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("lazyLoad expanded rows", () => {
+  it("reads an opened row once, until the listed rows reload", async () => {
+    const getRow = vi.fn(async (id: string) => ({ _id: id, number: "A-1" }));
+    const details = useExpandedRowDetails<Order>(getRow);
+
+    details.ensure(["a1"]);
+    expect(details.entryOf("a1")?.state).toBe("loading");
+    await vi.waitFor(() => expect(details.entryOf("a1")?.state).toBe("ready"));
+    details.ensure(["a1"]);
+    expect(getRow).toHaveBeenCalledOnce();
+
+    details.reset();
+    expect(details.entryOf("a1")).toBeUndefined();
+    details.ensure(["a1"]);
+    expect(getRow).toHaveBeenCalledTimes(2);
+  });
+
+  it("says a failed read failed, and reads it again on retry", async () => {
+    const getRow = vi
+      .fn<(id: string) => Promise<Order | undefined>>()
+      .mockRejectedValueOnce(new Error("network"))
+      .mockResolvedValueOnce({ _id: "a1", number: "A-1" });
+    const details = useExpandedRowDetails<Order>(getRow);
+
+    details.ensure(["a1"]);
+    await vi.waitFor(() => expect(details.entryOf("a1")?.state).toBe("error"));
+    await details.load("a1");
+    expect(details.entryOf("a1")).toEqual({
+      state: "ready",
+      row: { _id: "a1", number: "A-1" },
+    });
+  });
+
+  it("drops an answer that lands after the rows reloaded", async () => {
+    const answer = deferred<Order | undefined>();
+    const details = useExpandedRowDetails<Order>(() => answer.promise);
+
+    const loading = details.load("a1");
+    details.reset();
+    answer.resolve({ _id: "a1", number: "stale" });
+    await loading;
+    expect(details.entryOf("a1")).toBeUndefined();
+  });
+});
+
+describe("expanded row props", () => {
+  it("hands a band its row, actions, open and the table's refresh", () => {
+    const open = vi.fn();
+    const refresh = vi.fn();
+    const actions = { open } as unknown as TableViewDisplayActions<Order>;
+    const row = { _id: "a1", number: "A-1" };
+    const props = buildExpandedRowProps(row, {
+      columns: [],
+      labelKey: "number",
+      rowIdKey: "_id",
+      actions,
+      refresh,
+    });
+
+    expect(props).toMatchObject({ row, rowId: "a1", labelKey: "number" });
+    expect(props.actions).toBe(actions);
+    props.open();
+    expect(open).toHaveBeenCalledWith(row);
+    props.refresh();
+    expect(refresh).toHaveBeenCalledOnce();
+  });
+});

package/frontend-vue/tests/table-view-expanded-rows.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import {
+  defaultExpandedRows,
+  keepListedRows,
+  nextExpandedRows,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/expandedRows";
+
+const ROWS = ["a", "b", "c"];
+
+describe("TableView expandable rows", () => {
+  it("opens nothing, the first row or every row on arrival", () => {
+    expect(defaultExpandedRows(ROWS)).toEqual({});
+    expect(defaultExpandedRows(ROWS, "first")).toEqual({ a: true });
+    expect(defaultExpandedRows(ROWS, "all")).toEqual({
+      a: true,
+      b: true,
+      c: true,
+    });
+    expect(defaultExpandedRows([], "all")).toEqual({});
+  });
+
+  it("opens only the first row for 'all' in single mode", () => {
+    expect(defaultExpandedRows(ROWS, "all", true)).toEqual({ a: true });
+  });
+
+  it("keeps several rows open, and drops closed ones", () => {
+    expect(nextExpandedRows({ a: true }, { a: true, b: true }, ROWS)).toEqual({
+      a: true,
+      b: true,
+    });
+    expect(
+      nextExpandedRows({ a: true, b: true }, { a: false, b: true }, ROWS),
+    ).toEqual({ b: true });
+  });
+
+  it("turns TanStack's 'all rows' into the listed ids", () => {
+    expect(nextExpandedRows({}, true, ROWS)).toEqual({
+      a: true,
+      b: true,
+      c: true,
+    });
+  });
+
+  it("keeps only the row opened last in single mode", () => {
+    expect(
+      nextExpandedRows({ a: true }, { a: true, c: true }, ROWS, true),
+    ).toEqual({ c: true });
+    expect(nextExpandedRows({ a: true }, {}, ROWS, true)).toEqual({});
+    expect(nextExpandedRows({}, true, ROWS, true)).toEqual({ c: true });
+  });
+
+  it("forgets open rows that are no longer listed", () => {
+    expect(keepListedRows({ a: true, z: true }, ROWS)).toEqual({ a: true });
+  });
+});

package/frontend-vue/tests/table-view-form-texts.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest";
+import { createI18n } from "vue-i18n";
+import {
+  formatRecordLabel,
+  resolveFormContainerTexts,
+  type FormContainerTextSource,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/formTexts";
+import en from "../layers/dms-ui/i18n/locales/ui-en-GB.json";
+import fr from "../layers/dms-ui/i18n/locales/ui-fr-FR.json";
+
+const TASKS = {
+  en: {
+    caption: "Tasks",
+    edit_title: "Edit task",
+    edit_description: "Change its status or assignees.",
+  },
+  fr: { caption: "Tâches" },
+};
+
+function texts(source: FormContainerTextSource, locale: "en" | "fr" = "en") {
+  const i18n = createI18n({
+    legacy: false,
+    locale,
+    messages: {
+      en: { ...en, tasks: TASKS.en },
+      fr: { ...fr, tasks: TASKS.fr },
+    },
+  });
+  const t = (key: string, params?: Record<string, unknown>) =>
+    i18n.global.t(key, params ?? {});
+  const resolve = (text: string) =>
+    text.startsWith("$") ? t(text.slice(1)) : text;
+  return resolveFormContainerTexts(source, resolve, t);
+}
+
+describe("TableView form container texts", () => {
+  it("uses the formContainer page texts and follows the title with the row label", () => {
+    expect(
+      texts({
+        kind: "edit",
+        caption: "$tasks.caption",
+        pages: {
+          edit: {
+            displayName: "$tasks.edit_title",
+            description: "$tasks.edit_description",
+          },
+        },
+        recordLabel: "Write the docs",
+      }),
+    ).toEqual({
+      title: "Edit task · Write the docs",
+      description: "Change its status or assignees.",
+    });
+  });
+
+  it("falls back to entry texts naming the caption, never an item", () => {
+    const fallback = texts({ kind: "new", caption: "$tasks.caption" });
+    expect(fallback).toEqual({
+      title: "New entry",
+      description: "Added to Tasks once saved.",
+    });
+    expect(JSON.stringify(fallback)).not.toMatch(/item/i);
+  });
+
+  it("titles the details form from the pages' `details` entry", () => {
+    expect(
+      texts({
+        kind: "view",
+        pages: { details: { displayName: "Task details" } },
+        recordLabel: "Write the docs",
+      }).title,
+    ).toBe("Task details · Write the docs");
+  });
+
+  it("speaks French in the fallback too", () => {
+    expect(
+      texts({ kind: "view", caption: "$tasks.caption", recordLabel: 7 }, "fr"),
+    ).toEqual({
+      title: "Détails de l’entrée · 7",
+      description: "Une entrée de « Tâches », en lecture seule.",
+    });
+  });
+
+  it("keeps the generic description when the table has no caption", () => {
+    expect(texts({ kind: "edit" })).toEqual({
+      title: "Edit entry",
+      description: "Change its fields, then save.",
+    });
+  });
+
+  it("completes a partial override with the fallback", () => {
+    expect(
+      texts({
+        kind: "edit",
+        pages: { edit: { displayName: "Edit task" } },
+        caption: "Tasks",
+      }),
+    ).toEqual({
+      title: "Edit task",
+      description: "Changes are saved to Tasks.",
+    });
+  });
+});
+
+describe("formatRecordLabel", () => {
+  it("keeps a non-empty text or a number", () => {
+    expect(formatRecordLabel("  zz@example.com ")).toBe("zz@example.com");
+    expect(formatRecordLabel(42)).toBe("42");
+  });
+
+  it("reads a localized value in the reader's locale, else its first text", () => {
+    const name = { en: "Task 1", fr: "Tâche 1" };
+    expect(formatRecordLabel(name, "fr-FR")).toBe("Tâche 1");
+    expect(formatRecordLabel(name, "en")).toBe("Task 1");
+    expect(formatRecordLabel({ en: "Task 1" }, "fr-FR")).toBe("Task 1");
+  });
+
+  it("drops what cannot name a row", () => {
+    expect(formatRecordLabel("   ")).toBeUndefined();
+    expect(formatRecordLabel(null)).toBeUndefined();
+    expect(formatRecordLabel({ en: " " })).toBeUndefined();
+    expect(formatRecordLabel(["Task 1"])).toBeUndefined();
+  });
+});