@antelopejs/dms 0.3.7 → 0.3.8

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewRowActions.ts

@@ -1,4 +1,8 @@
-import type { FormContainer } from "./useTableViewConfig";
+import {
+  fillFormPageUrl,
+  type FormContainer,
+  type FormPageUrls,
+} from "./useTableViewConfig";
 import type { FormProps } from "../../../composables/form/types";
 import type { QueryParamFilters } from "../../../composables/table-view/types";
 import type {
@@ -38,6 +42,8 @@ interface TableRowActionsConfig {
     view?: ComponentInfo<FormProps>;
   };
   formContainer?: FormContainer;
+  formPages?: FormPageUrls;
+  routeParams?: Record<string, string>;
   componentId: string;
   pageId: string;
   queryParamFilters?: QueryParamFilters;
@@ -83,20 +89,6 @@ export const useTableRowActions = <T extends Data>(
     return Object.keys(forwarded).length > 0 ? forwarded : undefined;
   };
 
-  const resolveFormPageUrl = (urlSlug: string): string => {
-    if (urlSlug.startsWith("/")) return urlSlug;
-    const baseSegments = route.path.replace(/\/$/, "").split("/");
-    const parts = urlSlug.split("/");
-    let popCount = 0;
-    let partStart = 0;
-    while (partStart < parts.length && parts[partStart] === "..") {
-      popCount++;
-      partStart++;
-    }
-    const base = baseSegments.slice(0, baseSegments.length - popCount);
-    return [...base, ...parts.slice(partStart)].join("/");
-  };
-
   const handleApiError = (error: unknown, defaultMessage: string) => {
     const err = error as Record<string, unknown>;
     const errData = err?.data as Record<string, unknown> | string | undefined;
@@ -335,10 +327,9 @@ export const useTableRowActions = <T extends Data>(
   };
 
   const openRowByIdImpl = (itemId: string, item?: T) => {
-    if (getContainerType() === FormContainerType.page) {
-      const viewSlug = config.formContainer?.pages?.view?.urlSlug || ":id/view";
-      const viewUrl = resolveFormPageUrl(viewSlug).replace(":id", itemId);
-      navigateDms(viewUrl);
+    const viewPageUrl = config.formPages?.view;
+    if (getContainerType() === FormContainerType.page && viewPageUrl) {
+      navigateDms(fillFormPageUrl(viewPageUrl, config.routeParams, itemId));
       return;
     }
 
@@ -355,12 +346,15 @@ export const useTableRowActions = <T extends Data>(
   const editRowImpl = (item: T, submitDefaults?: Record<string, unknown>) => {
     const itemId = getItemId(item, config.rowIdKey ?? DEFAULT_ROW_ID_KEY);
 
-    if (getContainerType() === FormContainerType.page && itemId) {
-      const editSlug = config.formContainer?.pages?.edit?.urlSlug || ":id/edit";
-      const editUrl = resolveFormPageUrl(editSlug).replace(":id", itemId);
+    const editPageUrl = config.formPages?.edit;
+    if (
+      getContainerType() === FormContainerType.page &&
+      itemId &&
+      editPageUrl
+    ) {
       const forwardedQuery = buildForwardedQuery();
       navigateDms({
-        path: editUrl,
+        path: fillFormPageUrl(editPageUrl, config.routeParams, itemId),
         ...(forwardedQuery ? { query: forwardedQuery } : {}),
       });
       return;
@@ -377,11 +371,11 @@ export const useTableRowActions = <T extends Data>(
   };
 
   const newRowImpl = (submitDefaults?: Record<string, unknown>) => {
-    if (getContainerType() === FormContainerType.page) {
-      const newSlug = config.formContainer?.pages?.new?.urlSlug || "new";
+    const newPageUrl = config.formPages?.new;
+    if (getContainerType() === FormContainerType.page && newPageUrl) {
       const forwardedQuery = buildForwardedQuery();
       navigateDms({
-        path: resolveFormPageUrl(newSlug),
+        path: fillFormPageUrl(newPageUrl, config.routeParams),
         ...(forwardedQuery ? { query: forwardedQuery } : {}),
       });
       return;
@@ -396,10 +390,10 @@ export const useTableRowActions = <T extends Data>(
   };
 
   const duplicateRowImpl = (itemId: string) => {
-    if (getContainerType() === FormContainerType.page) {
-      const newSlug = config.formContainer?.pages?.new?.urlSlug || "new";
+    const newPageUrl = config.formPages?.new;
+    if (getContainerType() === FormContainerType.page && newPageUrl) {
       navigateDms({
-        path: resolveFormPageUrl(newSlug),
+        path: fillFormPageUrl(newPageUrl, config.routeParams),
         query: { duplicate: itemId },
       });
       return;

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -88,6 +88,7 @@ const {
   customButtons,
   formComponents,
   formContainer,
+  formPages,
   componentId,
   pageId,
   defaultSort,
@@ -599,6 +600,8 @@ const {
   refreshCallback: refreshAll,
   formComponents,
   formContainer,
+  formPages,
+  routeParams,
   componentId: componentId!,
   pageId: pageId!,
   queryParamFilters,

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -96,18 +96,24 @@ function processFieldI18n(
   };
 }
 
-interface ReplaceUrlVariablesContext {
+// `{{params.id}}` takes the bare name, which on a route repeating a placeholder
+// is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
+// a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
+// table view (see extractRouteParams).
+const PARAM_TOKEN = /\{\{params\.(\w+(?::\d+)?)\}\}/g;
+
+export interface ReplaceUrlVariablesContext {
   routeParams?: Record<string, string>;
   routeQuery: Record<string, unknown>;
   response?: Record<string, unknown>;
 }
 
-function replaceUrlVariables(
+export function replaceUrlVariables(
   url: string,
   context: ReplaceUrlVariablesContext,
 ): string {
   let processedUrl = url.replace(
-    /\{\{params\.(\w+)\}\}/g,
+    PARAM_TOKEN,
     (match, key) => context.routeParams?.[key] || match,
   );
 
@@ -177,6 +183,30 @@ function collectSubmitData(
   };
 }
 
+// `submitDefaults` string values may contain `{{query.X}}` / `{{params.X}}`
+// tokens (e.g. a "new" form generated from `queryParamFilters`). Resolve them
+// against the current route at submit time; drop entries whose tokens cannot
+// be resolved so an unfiltered form doesn't submit a literal `{{...}}`.
+export function resolveSubmitDefaults(
+  submitDefaults: Record<string, unknown> | undefined,
+  context: ReplaceUrlVariablesContext,
+): Record<string, unknown> | undefined {
+  if (!submitDefaults) return undefined;
+
+  const resolved: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(submitDefaults)) {
+    if (typeof value === "string" && value.includes("{{")) {
+      const replaced = replaceUrlVariables(value, context);
+      if (replaced.includes("{{")) continue;
+      resolved[key] = replaced;
+    } else {
+      resolved[key] = value;
+    }
+  }
+
+  return Object.keys(resolved).length > 0 ? resolved : undefined;
+}
+
 export function makeFieldSchemaRequired(schema: z.ZodTypeAny): z.ZodTypeAny {
   if (schema instanceof z.ZodOptional || schema instanceof z.ZodNullable) {
     return makeFieldSchemaRequired(schema.unwrap());
@@ -346,28 +376,8 @@ export const useForm = (props: FormProps) => {
     response,
   });
 
-  // `submitDefaults` string values may contain `{{query.X}}` / `{{params.X}}`
-  // tokens (e.g. a "new" form generated from `queryParamFilters`). Resolve them
-  // against the current route at submit time; drop entries whose tokens cannot
-  // be resolved so an unfiltered form doesn't submit a literal `{{...}}`.
-  const effectiveSubmitDefaults = computed<Record<string, unknown> | undefined>(
-    () => {
-      if (!props.submitDefaults) return undefined;
-
-      const context = buildUrlContext();
-      const resolved: Record<string, unknown> = {};
-      for (const [key, value] of Object.entries(props.submitDefaults)) {
-        if (typeof value === "string" && value.includes("{{")) {
-          const replaced = replaceUrlVariables(value, context);
-          if (replaced.includes("{{")) continue;
-          resolved[key] = replaced;
-        } else {
-          resolved[key] = value;
-        }
-      }
-
-      return Object.keys(resolved).length > 0 ? resolved : undefined;
-    },
+  const effectiveSubmitDefaults = computed(() =>
+    resolveSubmitDefaults(props.submitDefaults, buildUrlContext()),
   );
 
   const resolvedFetchUrl = computed(() => {

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/config.ts

@@ -1,4 +1,7 @@
-import type { FormContainer } from "../../../build/composables/table-view/useTableViewConfig";
+import type {
+  FormContainer,
+  FormPageUrls,
+} from "../../../build/composables/table-view/useTableViewConfig";
 import type { TableViewColumn } from "./column";
 import type { TableViewDisplayCapabilities } from "./display";
 import type { CustomButton } from "./custom-button";
@@ -80,6 +83,7 @@ export interface TableViewConfig<T extends Data>
     view?: ComponentInfo<FormProps>;
   };
   formContainer?: FormContainer;
+  formPages?: FormPageUrls;
   componentId?: string;
   pageId?: string;
   defaultSort?: { field: string; desc?: boolean };

package/frontend-vue/pnpm-lock.yaml

@@ -210,8 +210,8 @@ packages:
       '@antelopejs/core':
         optional: true
 
-  '@antelopejs/interface-core@0.0.13':
-    resolution: {integrity: sha512-zMVhW5OefmVNRLHvd3rPQTaShy+k9w6+cOhqOryyfxgVyRZ18nBlV8VSq9TuPkFIo5OGNAXFybOf54DRSnPVsw==}
+  '@antelopejs/interface-core@0.1.0':
+    resolution: {integrity: sha512-49mmTXREMNNEigWpmubwQD7fSrIIvmcTb9L8L79zQcDWTToud/GIap40vaKWmkbN1oGbjOB4ael/agqZ/ejYSg==}
 
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
@@ -4327,7 +4327,7 @@ snapshots:
 
   '@antelopejs/core@1.8.0(@types/node@24.8.1)':
     dependencies:
-      '@antelopejs/interface-core': 0.0.13
+      '@antelopejs/interface-core': 0.1.0
       '@types/proper-lockfile': 4.1.4
       boxen: 8.0.1
       chalk: 4.1.2
@@ -4362,7 +4362,7 @@ snapshots:
       '@oxc-parser/binding-linux-x64-gnu': 0.95.0
       '@oxc-parser/binding-win32-x64-msvc': 0.95.0
 
-  '@antelopejs/interface-core@0.0.13':
+  '@antelopejs/interface-core@0.1.0':
     dependencies:
       reflect-metadata: 0.2.2
 

package/frontend-vue/tests/form-page-url-fill.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { fillFormPageUrl } from "../layers/dms-ui/app/build/composables/table-view/useTableViewConfig";
+
+const ROW = "row-1";
+
+describe("filling a serialized form page URL", () => {
+  it("substitutes the row id of a default slug", () => {
+    expect(
+      fillFormPageUrl("/settings/users/roles/table/:id/edit", {}, ROW),
+    ).toBe("/settings/users/roles/table/row-1/edit");
+  });
+
+  it("leaves a URL without placeholder alone", () => {
+    expect(fillFormPageUrl("/settings/users/roles/table/new", {})).toBe(
+      "/settings/users/roles/table/new",
+    );
+  });
+
+  it("substitutes the row id inside the query string of an absolute slug", () => {
+    expect(
+      fillFormPageUrl("/modules/automation/builder?selected=:id", {}, ROW),
+    ).toBe("/modules/automation/builder?selected=row-1");
+  });
+
+  // The page slug contributes its own `:id`, and the form slug appends another:
+  // the row takes the last, the route params fill the first.
+  it("tells the row id apart from the id of the carrying page", () => {
+    expect(
+      fillFormPageUrl("/modules/workspaces/:id/:id/view", { id: "ws-1" }, ROW),
+    ).toBe("/modules/workspaces/ws-1/row-1/view");
+  });
+
+  // What a table view nested under a `:id` detail page now resolves to: the
+  // key segment sits between the two placeholders and changes nothing.
+  it("tells the ids apart across the key segment of the table view", () => {
+    expect(
+      fillFormPageUrl(
+        "/modules/workspaces/:id/invoiceTable/:id/view",
+        { id: "ws-1" },
+        ROW,
+      ),
+    ).toBe("/modules/workspaces/ws-1/invoiceTable/row-1/view");
+  });
+
+  it("fills the params of the carrying page when the form takes no row id", () => {
+    expect(fillFormPageUrl("/modules/workspaces/:id/new", { id: "ws-1" })).toBe(
+      "/modules/workspaces/ws-1/new",
+    );
+  });
+
+  it("matches a route param on its whole name", () => {
+    expect(
+      fillFormPageUrl(
+        "/projects/:project/:projectRole/:id/view",
+        {
+          project: "p-1",
+          projectRole: "owner",
+        },
+        ROW,
+      ),
+    ).toBe("/projects/p-1/owner/row-1/view");
+  });
+});

package/frontend-vue/tests/form-redirect-placeholders.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { extractRouteParams } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import { resolveFormSuccessTarget } from "../layers/dms-ui/app/build/composables/table-view/registerDefaultFunctions";
+
+// The redirect a page-mode form of a table view registered below
+// `/workspaces/:id` sends on submit, as the TableView factory generates it for
+// each form page route.
+const EDIT_PATTERN = "/workspaces/:id/invoiceTable/:id/edit";
+const NEW_PATTERN = "/workspaces/:id/invoiceTable/new";
+const EDIT_REDIRECT = { url: "/workspaces/{{params.id:1}}" };
+const NEW_REDIRECT = { url: "/workspaces/{{params.id}}" };
+
+const routeOf = (
+  pattern: string,
+  path: string,
+  query: Record<string, string> = {},
+) => ({ params: extractRouteParams(pattern, path)!, query });
+
+describe("page-mode form redirect", () => {
+  it("sends the edit form back to the page, not to the row", () => {
+    expect(
+      resolveFormSuccessTarget(
+        EDIT_REDIRECT,
+        routeOf(EDIT_PATTERN, "/workspaces/ws-42/invoiceTable/inv-7/edit"),
+      ),
+    ).toEqual({ path: "/workspaces/ws-42" });
+  });
+
+  it("sends the new form back to the page", () => {
+    expect(
+      resolveFormSuccessTarget(
+        NEW_REDIRECT,
+        routeOf(NEW_PATTERN, "/workspaces/ws-42/invoiceTable/new"),
+      ),
+    ).toEqual({ path: "/workspaces/ws-42" });
+  });
+
+  it("carries back the declared query params only", () => {
+    expect(
+      resolveFormSuccessTarget(
+        { ...EDIT_REDIRECT, preserveQuery: ["status", "missing"] },
+        routeOf(EDIT_PATTERN, "/workspaces/ws-42/invoiceTable/inv-7/edit", {
+          status: "paid",
+          other: "x",
+        }),
+      ),
+    ).toEqual({ path: "/workspaces/ws-42", query: { status: "paid" } });
+  });
+
+  it("leaves the slug of a page without route parameter as is", () => {
+    const route = routeOf(
+      "/invoices/invoiceTable/:id/edit",
+      "/invoices/invoiceTable/inv-7/edit",
+      {
+        status: "paid",
+      },
+    );
+
+    expect(resolveFormSuccessTarget({ url: "/invoices" }, route)).toEqual({
+      path: "/invoices",
+    });
+    expect(
+      resolveFormSuccessTarget(
+        { url: "/invoices", preserveQuery: ["status"] },
+        route,
+      ),
+    ).toEqual({ path: "/invoices", query: { status: "paid" } });
+  });
+});

package/frontend-vue/tests/route-param-filter-defaults.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { extractRouteParams } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import {
+  replaceUrlVariables,
+  resolveSubmitDefaults,
+} from "../layers/dms-ui/app/composables/form/useForm";
+
+// The forms of a table view filtered by `routeParamFilters: { id: { field:
+// "_instance" } }`, registered below a page whose own slug is `:id`. The tokens
+// are what the TableView factory generates for each form page route.
+const EDIT_PATTERN = "/workspaces/:id/invoiceTable/:id/edit";
+const NEW_PATTERN = "/workspaces/:id/invoiceTable/new";
+const EDIT_DEFAULTS = { _instance: "{{params.id:1}}" };
+const NEW_DEFAULTS = { _instance: "{{params.id}}" };
+const EDIT_SUBMIT_URL = "/api/invoices/edit?id={{params.id}}";
+
+const contextOf = (pattern: string, path: string) => ({
+  routeParams: extractRouteParams(pattern, path)!,
+  routeQuery: {},
+});
+
+describe("route param filter defaults on a nested form page", () => {
+  it("submits the page id in the filtered field, the row id in the URL", () => {
+    const context = contextOf(
+      EDIT_PATTERN,
+      "/workspaces/ws-42/invoiceTable/inv-7/edit",
+    );
+
+    expect(resolveSubmitDefaults(EDIT_DEFAULTS, context)).toEqual({
+      _instance: "ws-42",
+    });
+    expect(replaceUrlVariables(EDIT_SUBMIT_URL, context)).toBe(
+      "/api/invoices/edit?id=inv-7",
+    );
+  });
+
+  it("submits the page id from the new form, whose route has one :id", () => {
+    expect(
+      resolveSubmitDefaults(
+        NEW_DEFAULTS,
+        contextOf(NEW_PATTERN, "/workspaces/ws-42/invoiceTable/new"),
+      ),
+    ).toEqual({ _instance: "ws-42" });
+  });
+
+  // A form reached at an absolute URL does not carry the page's parameters:
+  // the default is dropped rather than submitted as a literal token.
+  it("drops a default no parameter of the route answers", () => {
+    const context = contextOf(
+      "/modules/automation/builder/:id",
+      "/modules/automation/builder/p-1",
+    );
+
+    expect(resolveSubmitDefaults(EDIT_DEFAULTS, context)).toBe(undefined);
+    expect(
+      resolveSubmitDefaults({ ...EDIT_DEFAULTS, status: "draft" }, context),
+    ).toEqual({ status: "draft" });
+  });
+});

package/frontend-vue/tests/route-param-occurrences.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { extractRouteParams } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import { replaceUrlVariables } from "../layers/dms-ui/app/composables/form/useForm";
+
+// A page-mode form sub-page under a page whose own slug is `:id`: the carrying
+// page contributes one `:id` and the form slug appends another.
+const NESTED_FORM_PATTERN = "/workspaces/:id/invoiceTable/:id/edit";
+const NESTED_FORM_PATH = "/workspaces/ws-1/invoiceTable/row-7/edit";
+
+describe("extractRouteParams", () => {
+  it("keeps a single placeholder under its bare name and nothing else", () => {
+    expect(
+      extractRouteParams("/customers/:id/edit", "/customers/c-1/edit"),
+    ).toEqual({ id: "c-1" });
+  });
+
+  it("keeps distinct placeholders under their own names and nothing else", () => {
+    expect(
+      extractRouteParams(
+        "/projects/:project/members/:id/view",
+        "/projects/p-1/members/m-2/view",
+      ),
+    ).toEqual({ project: "p-1", id: "m-2" });
+  });
+
+  it("reaches both values when one name occurs twice", () => {
+    expect(extractRouteParams(NESTED_FORM_PATTERN, NESTED_FORM_PATH)).toEqual({
+      id: "row-7",
+      "id:1": "ws-1",
+      "id:2": "row-7",
+    });
+  });
+
+  it("numbers every occurrence of a name repeated more than twice", () => {
+    expect(
+      extractRouteParams(
+        "/a/:id/b/:id/c/:id/view",
+        "/a/one/b/two/c/three/view",
+      ),
+    ).toEqual({
+      id: "three",
+      "id:1": "one",
+      "id:2": "two",
+      "id:3": "three",
+    });
+  });
+
+  it("indexes only the repeated name, leaving its neighbours untouched", () => {
+    expect(
+      extractRouteParams(
+        "/workspaces/:id/:tenant/invoiceTable/:id/edit",
+        "/workspaces/ws-1/t-9/invoiceTable/row-7/edit",
+      ),
+    ).toEqual({
+      id: "row-7",
+      "id:1": "ws-1",
+      "id:2": "row-7",
+      tenant: "t-9",
+    });
+  });
+
+  it("still refuses a path the pattern does not match", () => {
+    expect(extractRouteParams(NESTED_FORM_PATTERN, "/workspaces/ws-1")).toBe(
+      null,
+    );
+  });
+});
+
+describe("form URL variables on a repeated placeholder", () => {
+  const context = {
+    routeParams: extractRouteParams(NESTED_FORM_PATTERN, NESTED_FORM_PATH)!,
+    routeQuery: {},
+  };
+
+  // What the TableView factory generates for the edit form: the bare name has
+  // to stay the row id, on a nested route as on a flat one.
+  it("resolves the bare name to the row id", () => {
+    expect(
+      replaceUrlVariables("/invoices/edit?id={{params.id}}", context),
+    ).toBe("/invoices/edit?id=row-7");
+  });
+
+  it("resolves an indexed name to the id of the carrying page", () => {
+    expect(
+      replaceUrlVariables(
+        "/workspaces/{{params.id:1}}/invoices/{{params.id}}",
+        context,
+      ),
+    ).toBe("/workspaces/ws-1/invoices/row-7");
+  });
+
+  it("leaves an indexed token that no occurrence answers alone", () => {
+    expect(replaceUrlVariables("/invoices/{{params.id:3}}", context)).toBe(
+      "/invoices/{{params.id:3}}",
+    );
+  });
+
+  it("resolves the bare name on a single-placeholder route as before", () => {
+    expect(
+      replaceUrlVariables("/customers/edit?id={{params.id}}", {
+        routeParams: extractRouteParams(
+          "/customers/:id/edit",
+          "/customers/c-1/edit",
+        )!,
+        routeQuery: {},
+      }),
+    ).toBe("/customers/edit?id=c-1");
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -51,7 +51,7 @@
     "zod": "~3.24.2"
   },
   "devDependencies": {
-    "@antelopejs/core": ">=1.8.0 <2",
+    "@antelopejs/core": ">=1.9.0 <2",
     "@antelopejs/tooling-configs": ">=0.0.6 <1.0.0",
     "@types/archiver": "^6.0.4",
     "@types/chai": "^4.3.20",