@antelopejs/dms 0.7.21 → 0.8.0

package/frontend-vue/tests/table-row-action-errors.test.ts

@@ -140,7 +140,7 @@ describe("Table row actions: refusals", () => {
         label: "Resend",
         target: {
           type: "api",
-          url: "/api/invites/{_id}/resend",
+          url: "/api/invites/{{row._id}}/resend",
           successMessage: "Sent",
         },
         confirm: { title: "Resend?", description: "" },
@@ -170,7 +170,7 @@ describe("Table row actions: refusals", () => {
         target: {
           type: "api",
           method: "GET",
-          url: "/api/invites/{_id}/link",
+          url: "/api/invites/{{row._id}}/link",
           successMessage: "Copied",
           copy: "url",
         },
@@ -267,7 +267,7 @@ describe("Table row actions: refusals", () => {
         label: "Ban",
         target: {
           type: "api",
-          url: "/api/users/{_id}/ban",
+          url: "/api/users/{{row._id}}/ban",
           body: { notify: true, scope: "all" },
           successMessage: "Banned",
         },
@@ -293,7 +293,7 @@ describe("Table row actions: refusals", () => {
     const { deleteRows } = await rowActions();
 
     const done = await deleteRows(["t1"], {
-      confirm: { from: "/api/task/{id}/delete-confirm" },
+      confirm: { from: "/api/task/{{row.id}}/delete-confirm" },
     });
 
     expect(done).toBe(true);
@@ -329,7 +329,7 @@ describe("Table row actions: refusals", () => {
     const { deleteRows } = await rowActions();
 
     await deleteRows(["t1", "t2"], {
-      confirm: { from: "/api/task/{id}/delete-confirm" },
+      confirm: { from: "/api/task/{{row.id}}/delete-confirm" },
     });
 
     expect(api).not.toHaveBeenCalledWith("/api/task/t1/delete-confirm");

package/frontend-vue/tests/table-row-hover.test.ts

@@ -164,13 +164,13 @@ describe("rowCustomActions", () => {
   const stopSelling: CustomRowAction = {
     id: "stop_selling",
     label: "Stop selling",
-    target: { type: "api", url: "/plans/{_id}/stop", method: "POST" },
+    target: { type: "api", url: "/plans/{{row._id}}/stop", method: "POST" },
     rule: { field: "isActive", equals: true },
   };
   const remove: CustomRowAction = {
     id: "delete",
     label: "Delete",
-    target: { type: "api", url: "/plans/{_id}", method: "DELETE" },
+    target: { type: "api", url: "/plans/{{row._id}}", method: "DELETE" },
     rule: { field: "workspaces", equals: 0 },
   };
 

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

@@ -182,7 +182,7 @@ describe("source tables", () => {
 
   describe("reading one row (fetchRowUrl)", () => {
     const FETCH_URL = "/api/ws/{{params.ws}}/requests";
-    const ROW_URL = "/api/ws/{{params.ws}}/requests/{id}";
+    const ROW_URL = "/api/ws/{{params.ws}}/requests/{{row.id}}";
 
     function rowsWith(
       api: (url: string) => Promise<unknown>,

package/frontend-vue/tests/template-tokens.test.ts

@@ -0,0 +1,235 @@
+// @vitest-environment jsdom
+/**
+ * Every option naming a value with a token writes it `{{<scope>.<key>}}`, and
+ * every URL or link option fills the page's `{{params.X}}` / `{{query.X}}`
+ * the same way: an `api` or `exportJob` target as a `page` one, a
+ * confirmation's `from`, a block's links, a form's `backTo`.
+ */
+import { createApp, defineComponent, h, reactive, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useActionTargets } from "../layers/dms-ui/app/build/composables/actions/useActionTargets";
+import {
+  interpolateRowText,
+  interpolateUrl,
+} from "../layers/dms-core/app/utils/url-interpolation";
+import { HttpMethod } from "../layers/dms-core/app/types/http";
+import {
+  replaceUrlVariables,
+  resolveLinkVariables,
+} from "../layers/dms-ui/app/build/utils/urlVariables";
+import {
+  pageLink,
+  pageRequestUrl,
+} from "../layers/dms-ui/app/build/composables/page/pageUrlValues";
+import { buttonLinkProps } from "../layers/dms-ui/app/build/utils/link";
+import { resolveConfirmDialog } from "../layers/dms-ui/app/build/composables/confirm/confirmDialogTexts";
+import type { CustomButton } from "../layers/dms-ui/app/composables/table-view/types/custom-button";
+import type { CustomRowAction } from "../layers/dms-ui/app/types/row-action";
+
+const route = reactive<{ path: string; query: Record<string, unknown> }>({
+  path: "/modules/shop/stores/s1",
+  query: {},
+});
+const api = vi.fn();
+const runJob = vi.fn();
+let app: App | undefined;
+
+function mountTargets() {
+  let targets: ReturnType<typeof useActionTargets> | undefined;
+  app = createApp(
+    defineComponent({
+      setup() {
+        targets = useActionTargets({
+          api: api as never,
+          pageId: "store-page",
+          componentId: "orders",
+          handleApiError: vi.fn(),
+        });
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  return targets!;
+}
+
+beforeEach(() => {
+  route.query = { store: "north", period: "7d" };
+  api.mockReset().mockResolvedValue(undefined);
+  runJob.mockReset().mockResolvedValue(undefined);
+  vi.stubGlobal("useToast", () => ({ add: vi.fn() }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => text,
+    processApiMessage: (text: string) => text,
+  }));
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useModal", () => ({ open: vi.fn() }));
+  vi.stubGlobal("useDrawer", () => ({ open: vi.fn() }));
+  vi.stubGlobal("useExportJob", () => ({ runJob }));
+  vi.stubGlobal("useConfirm", () => ({ confirm: vi.fn(async () => true) }));
+  vi.stubGlobal("useAuthFetch", () => ({
+    $authFetch: Object.assign(vi.fn(), { raw: vi.fn() }),
+  }));
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
+  vi.stubGlobal("HttpMethod", HttpMethod);
+  vi.stubGlobal("useDmsRoute", () => route);
+  vi.stubGlobal("useSiteLayout", () => ({
+    findMatchingRoute: () => ({ params: { id: "s1" } }),
+  }));
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe("token syntax", () => {
+  const context = {
+    routeParams: { id: "s 1" },
+    routeQuery: { store: "north" },
+    response: { data: { id: "o-9" } },
+  };
+
+  it("allows spaces inside the braces, as the server's filter tokens do", () => {
+    expect(
+      replaceUrlVariables(
+        "/s/{{ params.id }}?store={{  query.store }}",
+        context,
+      ),
+    ).toBe("/s/s%201?store=north");
+  });
+
+  it("reaches into a response with a dotted path", () => {
+    expect(replaceUrlVariables("/orders/{{response.data.id}}", context)).toBe(
+      "/orders/o-9",
+    );
+  });
+
+  it("resolves a redirect's response and page tokens, dropping an empty pair", () => {
+    expect(
+      resolveLinkVariables(
+        "/orders/{{response.data.id}}?store={{query.store}}&tab={{query.tab}}",
+        context,
+      ),
+    ).toBe("/orders/o-9?store=north");
+  });
+
+  it("names a row field with {{row.X}}, a dotted path reaching into it", () => {
+    const row = { _id: "a 1", customer: { name: "Ada" } };
+    expect(interpolateUrl("/o/{{row._id}}/{{ row.customer.name }}", row)).toBe(
+      "/o/a%201/Ada",
+    );
+    expect(interpolateRowText("{{row._id}}.csv", row)).toBe("a 1.csv");
+  });
+
+  it("does not take a single-brace name for a row field", () => {
+    expect(interpolateUrl("/o/{_id}", { _id: "a" })).toBe("/o/{_id}");
+  });
+
+  it("leaves another scope's token whole when filling a row", () => {
+    expect(
+      interpolateUrl("/s/{{params.id}}/o/{{row._id}}", { _id: "a" }),
+    ).toBe("/s/{{params.id}}/o/a");
+  });
+});
+
+describe("page tokens in links and requested routes", () => {
+  it("fills a block link, leaving out a pair the page has no value for", () => {
+    expect(pageLink("/stores/{{params.id}}?store={{query.store}}")).toBe(
+      "/stores/s1?store=north",
+    );
+    expect(pageLink("/orders?tab={{query.tab}}")).toBe("/orders");
+    expect(buttonLinkProps("/stores/{{params.id}}/orders")).toEqual({
+      to: "/stores/s1/orders",
+    });
+  });
+
+  it("does not request a route while one of its tokens has no value", () => {
+    expect(pageRequestUrl("/api/stores/{{params.id}}/rotate")).toBe(
+      "/api/stores/s1/rotate",
+    );
+    expect(pageRequestUrl("/api/x?tab={{query.tab}}")).toBeUndefined();
+  });
+
+  it("fills a confirmation's secondary target with the page, then the row", async () => {
+    const runTarget = vi.fn();
+    const dialog = resolveConfirmDialog(
+      {
+        title: "Remove",
+        secondaryAction: {
+          label: "Download",
+          target: {
+            type: "download",
+            url: "/api/stores/{{params.id}}/orders/{{row._id}}",
+            filename: "{{query.store}}-{{row.name}}.json",
+          },
+        },
+      },
+      { _id: "o1", name: "order" },
+      (key) => key,
+      runTarget,
+    );
+    await dialog.secondaryAction!.run();
+    expect(runTarget).toHaveBeenCalledWith({
+      type: "download",
+      url: "/api/stores/s1/orders/o1",
+      filename: "north-order.json",
+    });
+  });
+});
+
+describe("an action target's URL", () => {
+  it("fills an api target on a row with the page's values, then the row's", async () => {
+    const action: CustomRowAction = {
+      label: "Refund",
+      target: {
+        type: "api",
+        url: "/api/stores/{{params.id}}/orders/{{row._id}}/refund?store={{query.store}}",
+        successMessage: "Refunded",
+      },
+    };
+    mountTargets().handleCustomRowAction(action, { _id: "o 1" });
+    await vi.waitFor(() => expect(api).toHaveBeenCalled());
+    expect(api.mock.calls[0]![0]).toBe(
+      "/api/stores/s1/orders/o%201/refund?store=north",
+    );
+  });
+
+  it("fills an api target on a toolbar button, without a row", async () => {
+    const button: CustomButton = {
+      id: "sync",
+      label: "Sync",
+      target: {
+        type: "api",
+        url: "/api/stores/{{params.id}}/sync?period={{query.period}}",
+        successMessage: "Synced",
+      },
+    };
+    mountTargets().handleCustomButton(button);
+    await vi.waitFor(() => expect(api).toHaveBeenCalled());
+    expect(api.mock.calls[0]![0]).toBe("/api/stores/s1/sync?period=7d");
+  });
+
+  it("fills an export job's start, status and download URLs", async () => {
+    const button: CustomButton = {
+      id: "export",
+      label: "Export",
+      target: {
+        type: "exportJob",
+        url: "/api/stores/{{params.id}}/export?store={{query.store}}",
+        statusUrl: "/api/stores/{{params.id}}/export/{{job.id}}",
+        downloadUrl: "/api/stores/{{params.id}}/export/{{ job.id }}/file",
+      },
+    };
+    mountTargets().handleCustomButton(button);
+    await vi.waitFor(() => expect(runJob).toHaveBeenCalled());
+    const job = runJob.mock.calls[0]![0];
+    expect(job.startUrl).toBe("/api/stores/s1/export?store=north");
+    expect(job.statusUrl({ jobId: "j1" })).toBe("/api/stores/s1/export/j1");
+    expect(job.downloadUrl({ jobId: "j1" })).toBe(
+      "/api/stores/s1/export/j1/file",
+    );
+  });
+});

package/frontend-vue/tests/url-interpolation.test.ts

@@ -4,25 +4,25 @@ import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
 describe("interpolateUrl", () => {
   it("fills row fields into the URL, encoded", () => {
     expect(
-      interpolateUrl("/items/{_id}/tag/{name}", { _id: "a1", name: "a b/c" }),
+      interpolateUrl("/items/{{row._id}}/tag/{{row.name}}", { _id: "a1", name: "a b/c" }),
     ).toBe("/items/a1/tag/a%20b%2Fc");
   });
 
   it("keeps the colon of a tenant-scoped id readable", () => {
     expect(
-      interpolateUrl("/members/{_id}/owner", { _id: "default:29fd-11" }),
+      interpolateUrl("/members/{{row._id}}/owner", { _id: "default:29fd-11" }),
     ).toBe("/members/default:29fd-11/owner");
   });
 
   it("leaves a missing field empty", () => {
-    expect(interpolateUrl("/items/{missing}", {})).toBe("/items/");
+    expect(interpolateUrl("/items/{{row.missing}}", {})).toBe("/items/");
   });
 
   it("keeps web and mail links", () => {
-    expect(interpolateUrl("https://acme.dev/{slug}", { slug: "a" })).toBe(
+    expect(interpolateUrl("https://acme.dev/{{row.slug}}", { slug: "a" })).toBe(
       "https://acme.dev/a",
     );
-    expect(interpolateUrl("mailto:{email}", { email: "a@b.c" })).toBe(
+    expect(interpolateUrl("mailto:{{row.email}}", { email: "a@b.c" })).toBe(
       "mailto:a%40b.c",
     );
   });
@@ -34,7 +34,7 @@ describe("interpolateUrl", () => {
       "data:text/html,x",
       "vbscript:x",
     ]) {
-      expect(interpolateUrl("{site}", { site })).toBe("");
+      expect(interpolateUrl("{{row.site}}", { site })).toBe("");
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.21",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -37,7 +37,7 @@
     "@antelopejs/interface-data-api": ">=0.2.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
     "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.5.13 <0.6.0",
+    "@antelopejs/interface-dms": ">=0.6.0 <0.7.0",
     "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.3 <1.0.0",
     "archiver": "^7.0.1",

package/skills/dms/SKILL.md

@@ -33,7 +33,8 @@ For the framework underneath (the core, `ajs` CLI, interfaces as versioned contr
   frontend renders it. **Components fetch their own data** via URLs (`fetchUrl`, `submitUrl`, …) —
   routes often declared `@Get`/`@Post` on the same page class; the backend stays the source of truth.
   A URL names the record of its page with `{{params.id}}` / `{{query.X}}` (filled from the page URL, percent-encoded;
-  nothing is fetched while one is unresolved), and `.watch(FormEvents.SUBMIT_SUCCESS,
+  nothing is fetched while one is unresolved) — every token is `{{<scope>.<key>}}`: `params`, `query`, `row` (an
+  action's row), `response` (a form's redirect), and the same page tokens work in every URL and link option, and `.watch(FormEvents.SUBMIT_SUCCESS,
   BlockFunctions.REFRESH_PAGE)` makes the page's data blocks (table views included) re-fetch after a form saves;
   `periodScope` binds a card, chart, list block, `Meter` or `TableView.fromSource` to a `PeriodSelector`
   (which keeps its period in the page URL, `?<id>.period=`), and

package/skills/dms-pages/REFERENCE.md

@@ -54,10 +54,10 @@ own drawer in a `CustomComponent`.
 To read rows one after the other next to the table (a request log), use a `sidePanel`
 target instead: a non-modal panel docked on the right whose header the DMS draws (title,
 `rowTitle` naming the row from its fields, `positionLabel` "x of y", previous / next, J / K, close), `?record=` kept by default (`deepLink: false` opts out), a "not found" state on a 404 (`notFound: { title, description }`) and the table's
-`rowClick: "single"` (a `TableView.fromSource` table reads a deep-linked row beyond its first page through `fetchRowUrl: "/api/x/{id}"`) — never bridge the table's DOM to build one —
+`rowClick: "single"` (a `TableView.fromSource` table reads a deep-linked row beyond its first page through `fetchRowUrl: "/api/x/{{row.id}}"`) — never bridge the table's DOM to build one —
 `docs/04.components/06.tables/8.row-drawers.md#side-panel`.
 A button downloading a file the user's session may read (`/api/...`) takes a `download`
-target, `{ url, filename? }`, with the same `{field}` / `{{query.X}}` tokens — never a Vue
+target, `{ url, filename? }`, with the same `{{row.field}}` / `{{query.X}}` tokens — never a Vue
 header button or an `api` target for it — `docs/07.interfaces/3.base/2.types.md`.
 
 A row that must stay on top of a table under any sort (a base language, a default

package/skills/dms-project/SKILL.md

@@ -82,7 +82,6 @@ export function construct(config: Config): void {
   registerAllPermissions();  // RegisterPermission(...) — see dms-auth
   RegisterHook(Hook.DATABASE_INITIALIZED, async () => {
     await initDatabase();
-    return undefined;
   });
 }
 export async function start(): Promise<void> {