@antelopejs/dms 0.7.13 → 0.7.15

package/frontend-vue/layers/dms-ui/app/components/form/components/InputTags.vue

@@ -3,7 +3,7 @@ import {
   formErrorsInjectionKey,
   formFieldInjectionKey,
 } from "@nuxt/ui/composables/useFormField";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   addTags,
   invalidTags,

package/frontend-vue/layers/dms-ui/app/components/form/components/InputTime.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { InputProps } from "@nuxt/ui/components/Input.vue";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 
 interface InputTimeProps extends Omit<InputProps, "modelValue" | "type"> {
   modelValue?: number | null;

package/frontend-vue/layers/dms-ui/app/components/form/components/KeyValue.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   type KeyValueRow,
   keyValueProblem,

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

@@ -78,9 +78,12 @@ import { selectedRowIds } from "../../build/composables/table-view/utils/bulkAct
 import { isBulkAction } from "../../build/composables/actions/bulkSelection";
 import { selectionScopeKey } from "../../build/utils/selectionScope";
 import {
+  type DeepLinkOutcome,
+  deepLinkOutcome,
   isDeepLinkAction,
   readRecordId,
   resolveDeepLinkedRow,
+  writeRecordId,
 } from "../../build/composables/table-view/utils/recordLink";
 import {
   rowSidePanelOwnerKey,
@@ -112,8 +115,13 @@ import {
 } from "../../build/composables/table-view/useExpandedRowDetails";
 import type {
   TableAccumulation,
+  TableUrlFilter,
   TableViewSwitcherItem,
 } from "../../build/components/table/Table.vue";
+import {
+  visibleUrlFilters,
+  withoutQueryParam,
+} from "../../build/composables/table-view/utils/urlFilters";
 import {
   defineAsyncComponent,
   useTemplateRef,
@@ -396,6 +404,15 @@ const queryParamHiddenFilters = computed<TableFilter[]>(() => {
     }));
 });
 
+const shownUrlFilters = computed<TableUrlFilter[]>(() =>
+  visibleUrlFilters(queryParamFilters, route.query as Record<string, unknown>),
+);
+
+const removeUrlFilter = (param: string) =>
+  router.replace({
+    query: withoutQueryParam(route.query, param),
+  });
+
 const routeParamHiddenFilters = computed<TableFilter[]>(() => {
   if (!routeParamFilters || !routeParams) return [];
 
@@ -1686,10 +1703,50 @@ const openRecordFromUrl = async () => {
     idOf: getRowId,
     getRow: tableRows.getRow,
   });
-  if (row) handleCustomRowAction(deepLinkAction, row as Data);
-  else if (isMissing) handleMissingRow(deepLinkAction, id);
+  const outcome = deepLinkOutcome({ row, isMissing }, deepLinkAction);
+  deepLinkOutcomes[outcome](deepLinkAction, id, row as Data);
 };
 
+const notifyUnresolvedRecordLink = () => {
+  writeRecordId(urlScope);
+  toast.add({
+    title: t("dms.record_link.not_found_title"),
+    description: t("dms.record_link.not_found_description"),
+    color: Color.warning,
+    icon: "i-ph-link-break",
+  });
+};
+
+const notifyFailedRecordLink = () => {
+  writeRecordId(urlScope);
+  toast.add({
+    title: t("dms.record_link.failed_title"),
+    description: t("dms.record_link.failed_description"),
+    color: Color.error,
+    icon: "i-ph-warning-circle",
+  });
+};
+
+const deepLinkOutcomes: Record<
+  DeepLinkOutcome,
+  (action: CustomRowAction, id: string, row: Data) => void
+> = {
+  open: (action, _id, row) => handleCustomRowAction(action, row),
+  missingPanel: (action, id) => handleMissingRow(action, id),
+  notify: notifyUnresolvedRecordLink,
+  notifyFailed: notifyFailedRecordLink,
+};
+
+// A visit that keeps the page mounted (a link to the same page with another
+// `?record=`) opens the row it names, as a fresh load would. The table's own
+// writes replace the URL in place and never reach the route.
+watch(
+  () => readRecordId(route.query, urlScope),
+  (id, previous) => {
+    if (id && id !== previous) void openRecordFromUrl();
+  },
+);
+
 const selectedIds = computed(() => selectedRowIds(rowSelect.value));
 
 const isRowActionEnabled = (
@@ -2065,6 +2122,7 @@ onMounted(() => {
     :footer="resolvedFooter"
     :empty-states="props.emptyStates"
     :hidden-filters-apply="queryParamHiddenFilters.length > 0"
+    :url-filters="shownUrlFilters"
     :default-page-size="props.pageSize"
     :archive-toggle="canToggleArchived"
     :displays="availableDisplays"
@@ -2102,6 +2160,7 @@ onMounted(() => {
     @export-all="handleExportTable"
     @bulk-action="runBulkAction"
     @duplicate="handleRowDuplicate"
+    @remove-url-filter="removeUrlFilter"
     @edit="handleRowEdit"
   >
     <template

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -14,6 +14,10 @@ import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { formatValue } from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
 import { usePeriodScope } from "#dms-core/app/composables/period/usePeriodScope";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "../../build/utils/urlVariables";
 import type {
   TopListCardResponse,
   TopListItem,
@@ -126,7 +130,23 @@ const { data, isLoading } = useChartFetch<TopListCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-const items = computed<TopListItem[]>(() => data.value?.items ?? []);
+// A row's link may name the page it is shown on (`{{query.website}}`), so a
+// list served once leads on with the page's own context, as the URL changes.
+// The route is only read for a list holding such a link.
+function withPageValues(item: TopListItem): TopListItem {
+  if (!item.to || !hasUrlVariables(item.to)) return item;
+  return {
+    ...item,
+    to: resolveLinkVariables(item.to, {
+      routeParams: props.routeParams,
+      routeQuery: useDmsRoute().query as Record<string, unknown>,
+    }),
+  };
+}
+
+const items = computed<TopListItem[]>(() =>
+  (data.value?.items ?? []).map(withPageValues),
+);
 const hasAnyIcon = computed(() =>
   items.value.some((item) => Boolean(item.icon || item.avatar)),
 );

package/frontend-vue/layers/dms-ui/app/composables/confirm/index.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./useConfirm";
+export * from "./useConfirmFrom";
 export * from "./usePresenceEditWarning";

package/frontend-vue/layers/dms-ui/app/composables/confirm/types.ts

@@ -70,6 +70,26 @@ export interface ConfirmOptions
   ) => Promise<void | boolean | ConfirmPartialOutcome>;
 }
 
+/**
+ * How `useConfirmFrom().confirmFrom(url, options)` asks a dialog the server
+ * words, as a declarative action's `confirm: { from }` does.
+ */
+export interface ConfirmFromOptions {
+  /**
+   * Fill-ins of the URL's `{placeholders}` and of the dialog's texts (a
+   * record's fields); the dialog's own `params` win in its texts.
+   */
+  params?: Record<string, unknown>;
+  /** What the dialog leaves out (a colour, an icon, a confirm label). */
+  fallback?: Partial<ConfirmOptions>;
+  /**
+   * Runs the action from inside the dialog with its fields' values, as
+   * {@link ConfirmOptions.onConfirm}; left out, run it once `confirmFrom`
+   * resolved `true`.
+   */
+  onConfirm?: ConfirmOptions["onConfirm"];
+}
+
 /** A secondary button of the confirm modal: its text resolved, its handler. */
 export interface ConfirmSecondaryAction {
   label: string;

package/frontend-vue/layers/dms-ui/app/composables/confirm/useConfirmFrom.ts

@@ -0,0 +1,32 @@
+import { useActionConfirm } from "../../build/composables/confirm/useActionConfirm";
+import type { ConfirmFromOptions } from "./types";
+
+/**
+ * Opens the confirmation dialog a route words (a `ConfirmDialogSerialized`,
+ * see `serializeConfirmDialog`), as a declarative action's
+ * `confirm: { from }` does: the URL is read, its texts resolved, then the
+ * standard confirm dialog shown. A failed read is a toast and resolves
+ * `false`.
+ *
+ * @returns `confirmFrom(url, options)`, resolving `true` when the user
+ *   confirmed — never for a `blocked` dialog, which only explains
+ */
+export function useConfirmFrom() {
+  const { confirmAction } = useActionConfirm();
+
+  function confirmFrom(
+    from: string,
+    options: ConfirmFromOptions = {},
+  ): Promise<boolean> {
+    return confirmAction(
+      { from },
+      {
+        row: options.params,
+        fallback: options.fallback,
+        run: options.onConfirm,
+      },
+    );
+  }
+
+  return { confirmFrom };
+}

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

@@ -0,0 +1,30 @@
+import { formFieldInjectionKey } from "@nuxt/ui/composables/useFormField";
+import { inject, onBeforeUnmount, ref } from "vue";
+import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/formControlErrors";
+
+/**
+ * Lets a control refuse what was typed into it (a duration or JSON it cannot
+ * read): inside a form, the message becomes the field's error, which blocks
+ * the submit and joins the form's summary like any other. `message` holds it
+ * for a control used outside a form.
+ *
+ * Call it in the setup of a field's input component. `report(message)` sets
+ * the error, `report(undefined)` clears it; the error is cleared when the
+ * component unmounts.
+ */
+export function useControlError() {
+  const field = inject(formFieldInjectionKey, undefined);
+  const errors = inject(FORM_CONTROL_ERRORS_KEY, null);
+  const message = ref<string>();
+
+  function report(next: string | undefined): void {
+    if (message.value === next) return;
+    message.value = next;
+    const name = field?.value?.name;
+    if (name) errors?.report(name, next);
+  }
+
+  onBeforeUnmount(() => report(undefined));
+
+  return { message, report };
+}

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

@@ -721,10 +721,10 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
         // them: the field shows which ones to fix.
         message: entry.values?.length
           ? t("dms.field_errors.with_values", {
-              message: processApiMessage(entry.message),
+              message: processApiMessage(entry.message, entry.params),
               values: entry.values.join(", "),
             })
-          : processApiMessage(entry.message),
+          : processApiMessage(entry.message, entry.params),
         values: entry.values,
         path: entry.path,
       })),

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

@@ -14,6 +14,10 @@ import type { BlockAction } from "../../../build/components/blocks/BlockActions.
 export interface QueryParamFilter {
   field: string;
   mode?: string;
+  /** Shown as a removable chip while the URL applies it. */
+  visible?: boolean;
+  /** The chip's name; the field's column label by default. */
+  label?: string;
 }
 
 export type QueryParamFilters = Record<string, QueryParamFilter>;

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -753,6 +753,12 @@
       "held_searching": "search active",
       "held_sorted": "sorted otherwise than by default",
       "held_scrolled": "scrolled down"
+    },
+    "record_link": {
+      "not_found_title": "This entry is no longer available",
+      "not_found_description": "The link points to an entry that was deleted, or that this list cannot show.",
+      "failed_title": "This entry could not be opened",
+      "failed_description": "Loading it failed. Try again in a moment."
     }
   }
 }

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -754,6 +754,12 @@
       "held_searching": "recherche active",
       "held_sorted": "tri autre que celui par défaut",
       "held_scrolled": "défilé vers le bas"
+    },
+    "record_link": {
+      "not_found_title": "Cette entrée n’est plus disponible",
+      "not_found_description": "Le lien mène à une entrée supprimée, ou que cette liste ne peut pas afficher.",
+      "failed_title": "Impossible d’ouvrir cette entrée",
+      "failed_description": "Son chargement a échoué. Réessayez dans un instant."
     }
   }
 }

package/frontend-vue/tests/confirm-from.test.ts

@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+/**
+ * `useConfirmFrom().confirmFrom(url)` opens the dialog a route words, as a
+ * declarative action's `confirm: { from }` does, for code of a module's own
+ * (a custom page, a block's button).
+ */
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
+import { useConfirmFrom } from "../layers/dms-ui/app/composables/confirm/useConfirmFrom";
+import { isConfirmTextMatch } from "../layers/dms-ui/app/build/composables/confirm/confirmTextMatch";
+
+const authFetch = vi.fn();
+const confirm = vi.fn(async () => true);
+const addToast = vi.fn();
+let app: App | undefined;
+
+function mountConfirmFrom() {
+  let api: ReturnType<typeof useConfirmFrom> | undefined;
+  app = createApp(
+    defineComponent({
+      setup() {
+        api = useConfirmFrom();
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  return api!;
+}
+
+beforeEach(() => {
+  authFetch.mockReset();
+  confirm.mockClear();
+  addToast.mockClear();
+  const fetch = Object.assign(authFetch, { raw: vi.fn() });
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: fetch }));
+  vi.stubGlobal("useConfirm", () => ({ confirm }));
+  vi.stubGlobal("useToast", () => ({ add: addToast }));
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params?.name ? `${key}(${String(params.name)})` : key,
+  }));
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
+  vi.stubGlobal("Color", { error: "error" });
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("confirmFrom", () => {
+  it("reads the dialog from the URL filled with the params and shows it", async () => {
+    authFetch.mockResolvedValue({
+      title: "$campaigns.delete_title",
+      color: "error",
+    });
+    const onConfirm = vi.fn(async () => undefined);
+    const confirmed = await mountConfirmFrom().confirmFrom(
+      "/api/campaigns/{id}/delete-confirm",
+      {
+        params: { id: "c1", name: "Spring" },
+        fallback: { icon: "i-ph-trash" },
+        onConfirm,
+      },
+    );
+    expect(confirmed).toBe(true);
+    expect(authFetch).toHaveBeenCalledWith("/api/campaigns/c1/delete-confirm");
+    expect(confirm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "campaigns.delete_title(Spring)",
+        color: "error",
+        icon: "i-ph-trash",
+        onConfirm,
+      }),
+    );
+  });
+
+  it("never resolves true for a blocked dialog", async () => {
+    authFetch.mockResolvedValue({ title: "Cannot delete", blocked: true });
+    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
+  });
+
+  it("toasts a failed read and resolves false", async () => {
+    authFetch.mockRejectedValue(new Error("down"));
+    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
+    expect(confirm).not.toHaveBeenCalled();
+    expect(addToast).toHaveBeenCalledOnce();
+  });
+});
+
+describe("isConfirmTextMatch", () => {
+  it("compares the trimmed text, ignoring case only when asked", () => {
+    expect(isConfirmTextMatch(" ACME ", "ACME")).toBe(true);
+    expect(isConfirmTextMatch("acme", "ACME")).toBe(false);
+    expect(isConfirmTextMatch("acme", "ACME", true)).toBe(true);
+    expect(isConfirmTextMatch("acmé", "ACME", true)).toBe(false);
+  });
+});

package/frontend-vue/tests/confirm-typed-text.test.ts

@@ -171,6 +171,41 @@ it("flags an empty or different typed text instead of disabling confirm", async
   expect(closed).toHaveBeenCalledWith(true);
 });
 
+it("matches the typed text ignoring case when asked", async () => {
+  const onConfirm = vi.fn(async () => undefined);
+  mount({
+    title: "Delete?",
+    confirmLabel: "Delete",
+    confirmText: "Acme Corp",
+    confirmTextCaseInsensitive: true,
+    onConfirm,
+  });
+  await flush();
+
+  await type("acme corp");
+  confirmButton().click();
+  await flush();
+  expect(typedError()).toBeUndefined();
+  expect(onConfirm).toHaveBeenCalledOnce();
+});
+
+it("keeps the case-sensitive match by default", async () => {
+  const onConfirm = vi.fn(async () => undefined);
+  mount({
+    title: "Delete?",
+    confirmLabel: "Delete",
+    confirmText: "Acme Corp",
+    onConfirm,
+  });
+  await flush();
+
+  await type("acme corp");
+  confirmButton().click();
+  await flush();
+  expect(typedError()).toBe('dms.confirm.type_mismatch {"text":"Acme Corp"}');
+  expect(onConfirm).not.toHaveBeenCalled();
+});
+
 it("runs the body check with the typed one and stays open when it fails", async () => {
   const validate = vi.fn(() => false);
   const onConfirm = vi.fn(async () => undefined);