@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends Data">
 import { computed, type Component, type VNodeChild } from "vue";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 import DmsKeyValueList, {
@@ -19,16 +19,16 @@ import type { ExpandedRowLoadState } from "../../composables/table-view/useExpan
  * (each value drawn by its column's data type, like a cell). While a
  * `lazyLoad` row loads, or if it fails, the band says so in its place.
  */
-interface ExpandedRowDetailProps {
+interface ExpandedRowDetailProps<T extends Data> {
   /** What the band details, as a custom band receives it. */
-  rowProps: TableViewExpandedRowProps;
+  rowProps: TableViewExpandedRowProps<T>;
   /** The table view's `expandable` configuration. */
   config: TableViewExpandableConfig;
   /** Where the row a `lazyLoad` band shows stands. */
   loadState?: ExpandedRowLoadState;
 }
 
-const props = withDefaults(defineProps<ExpandedRowDetailProps>(), {
+const props = withDefaults(defineProps<ExpandedRowDetailProps<T>>(), {
   loadState: "ready",
 });
 const emit = defineEmits<{ retry: [] }>();
@@ -83,8 +83,6 @@ function renderField(key: string | undefined): VNodeChild {
   return renderColumnValue(column, row, "detail");
 }
 
-// The value slot renders a VNode tree; a functional wrapper keeps it in the
-// template's flow.
 const FieldValue = (fieldProps: { item: KeyValueItem }) =>
   renderField(fieldProps.item.id);
 </script>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
+import { isObject, isString } from "#dms-core/app/utils/type-check";
 import { useFileReadUrls } from "../../../composables/useFileReadUrls";
 
 /**
@@ -70,7 +71,7 @@ const name = computed(() =>
 const tileIcon = computed(() =>
   isEmpty.value ? (props.emptyIcon ?? props.icon) : props.icon,
 );
-// Without a title the subtitle stands as the name, unless an empty label does.
+
 const hasSubtitleLine = computed(
   () =>
     !!props.subtitle &&
@@ -81,12 +82,12 @@ const isSelf = computed(
 );
 
 const avatarKey = computed(() =>
-  props.avatar && typeof props.avatar === "object" ? props.avatar.key : null,
+  props.avatar && isObject(props.avatar) ? props.avatar.key : null,
 );
 watch(avatarKey, (key) => key && resolve(key), { immediate: true });
 
 const avatarSrc = computed(() => {
-  if (typeof props.avatar === "string") return props.avatar || undefined;
+  if (isString(props.avatar)) return props.avatar || undefined;
   return avatarKey.value ? getUrl(avatarKey.value) : undefined;
 });
 
@@ -133,7 +134,7 @@ const initials = computed(() =>
         <UBadge
           v-for="badge in props.badges"
           :key="badge.label"
-          :color="(badge.color ?? 'neutral') as 'neutral'"
+          :color="badge.color ?? 'neutral'"
           variant="soft"
           size="sm"
           :label="badge.label"

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

@@ -3,7 +3,7 @@ import { computed } from "vue";
 import type { TableLiveHoldReason } from "../../composables/table-view/useTableLiveHold";
 import type { ConfirmTranslate } from "../../composables/confirm/confirmDialogTexts";
 import { missedRowsText, showLiveNote } from "../../composables/live/liveNotes";
-import type { PageLiveNote } from "../../../types/live";
+import type { PageLiveNote } from "#dms-core/app/types/live";
 
 /**
  * The strip of a `liveHold` table: "N new · Show" once events came in while
@@ -31,9 +31,6 @@ const props = withDefaults(
   { reason: null, missedLabel: undefined, detail: null, floating: false },
 );
 
-// Literal class strings (Tailwind extracts them). The pill is opaque and
-// lifted by the theme's pop shadow (deeper in dark), so the rows under it
-// stay apart from it.
 const STRIP_CLASS =
   "border-b border-(--dms-info-line) bg-(--dms-info-tint) py-[7px] ps-[18px] pe-3.5 text-[13px]";
 const PILL_CLASS =
@@ -42,7 +39,7 @@ const PILL_CLASS =
 const emit = defineEmits<{ show: [] }>();
 
 const { t } = useI18n();
-const translate = t as ConfirmTranslate;
+const translate: ConfirmTranslate = t;
 
 const REASON_KEYS: Record<TableLiveHoldReason, string> = {
   rowOpen: "dms.live.held_row_open",

package/frontend-vue/layers/dms-ui/app/build/composables/actions/actionTargetActions.ts

@@ -0,0 +1,141 @@
+import { isConfirmFrom } from "#dms-core/app/types/confirm-dialog";
+import { namesRowField } from "#dms-core/app/utils/url-interpolation";
+import type { CustomButton } from "../../../composables/table-view/types/custom-button";
+import type { CustomRowAction } from "../../../types/row-action";
+import type { ActionTargetsConfig } from "./useActionTargets";
+import type { createActionTargetRunner } from "./actionTargetConfirmation";
+import type { TargetRows } from "./actionTargetRows";
+import {
+  type BulkSelection,
+  bulkSelectionQuery,
+  isBulkAction,
+  isUrlTarget,
+  targetForRow,
+  targetWithSelection,
+  withQuery,
+} from "./bulkSelection";
+import {
+  hasMissingRowState,
+  isDeepLinkAction,
+} from "../table-view/utils/recordLink";
+import { dropRowTokens } from "../../utils/urlVariables";
+import {
+  handleComponentTarget,
+  type ComponentTargetContext,
+} from "./actionTargetContainers";
+import type { createSidePanelHandler } from "./actionTargetSidePanel";
+
+function rowRun(
+  action: CustomRowAction,
+  rowData: Data | undefined,
+  rowIdOf: TargetRows["rowIdOf"],
+) {
+  const id = rowIdOf(rowData);
+  if (!isBulkAction(action) || id === undefined) {
+    return { target: action.target, confirm: action.confirm, row: rowData };
+  }
+  const selection: BulkSelection = { ids: [id], count: 1 };
+  const query = bulkSelectionQuery(selection);
+  const { confirm } = action;
+  const textParams = { count: selection.count };
+  return {
+    target: targetForRow(action.target, query),
+    textParams,
+    selection: isUrlTarget(action.target) ? undefined : selection,
+    row: isUrlTarget(action.target) ? { ...rowData, ...textParams } : rowData,
+    confirm:
+      confirm && isConfirmFrom(confirm) && !namesRowField(confirm.from)
+        ? { from: withQuery(confirm.from, query) }
+        : confirm,
+  };
+}
+
+export function createCustomActions(
+  handleActionTarget: ReturnType<typeof createActionTargetRunner>,
+  rowIdOf: TargetRows["rowIdOf"],
+  toast: ReturnType<typeof useToast>,
+  processI18n: ReturnType<typeof useTranslation>["processI18n"],
+) {
+  const handleCustomButton = (button: CustomButton) => {
+    if (button.disabled) {
+      toast.add({
+        color: Color.warning,
+        title: processI18n(button.label),
+        description: button.disabledReason
+          ? processI18n(button.disabledReason)
+          : undefined,
+      });
+      return;
+    }
+    void handleActionTarget(
+      button.target,
+      button.label,
+      undefined,
+      button.confirm,
+    );
+  };
+  const handleCustomRowAction = (action: CustomRowAction, rowData?: Data) => {
+    const { target, confirm, row, textParams, selection } = rowRun(
+      action,
+      rowData,
+      rowIdOf,
+    );
+    void handleActionTarget(target, action.label, row, confirm, {
+      deepLink: isDeepLinkAction(action),
+      textParams,
+      selection,
+      keepsRow: !!selection,
+    });
+  };
+  const handleBulkCustomAction = (
+    action: CustomRowAction,
+    selection: BulkSelection,
+  ) => {
+    const query = bulkSelectionQuery(selection);
+    const declared =
+      action.confirm && isConfirmFrom(action.confirm)
+        ? { from: withQuery(dropRowTokens(action.confirm.from), query) }
+        : action.confirm;
+    void handleActionTarget(
+      targetWithSelection(action.target, query),
+      action.label,
+      { count: selection.count },
+      declared,
+      { selection },
+    );
+  };
+  return { handleCustomButton, handleCustomRowAction, handleBulkCustomAction };
+}
+
+export function createMissingRowHandler(
+  config: ActionTargetsConfig,
+  processI18n: ReturnType<typeof useTranslation>["processI18n"],
+  componentContext: ComponentTargetContext,
+  handleSidePanelTarget: ReturnType<typeof createSidePanelHandler>,
+) {
+  return (action: CustomRowAction, id: string) => {
+    if (!hasMissingRowState(action)) return;
+    if (action.target.type === "drawer") {
+      handleComponentTarget(
+        {
+          target: action.target,
+          title: processI18n(action.target.title || action.label),
+          description: processI18n(action.target.description || ""),
+          containerId: `${config.pageId}-${config.componentId}-${action.target.type}`,
+          deepLink: isDeepLinkAction(action),
+          missingId: id,
+        },
+        componentContext,
+      );
+      return;
+    }
+    if (action.target.type !== "sidePanel") return;
+    handleSidePanelTarget({
+      target: action.target,
+      title: processI18n(action.target.title || action.label),
+      containerId: `${config.pageId}-${config.componentId}-${action.target.type}`,
+      deepLink: isDeepLinkAction(action),
+      missingId: id,
+    });
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/actions/actionTargetConfirmation.ts

@@ -0,0 +1,63 @@
+import type { ActionConfirm } from "#dms-core/app/types/confirm-dialog";
+import type { ActionTarget } from "../../../composables/table-view/types/action-target";
+import type { ConfirmOptions } from "../../../composables/confirm/types";
+import type {
+  TargetHandlers,
+  TargetsByKind,
+  TargetRunExtras,
+} from "./actionTargetTypes";
+import type { createActionRequests } from "./actionTargetRequests";
+import type { TargetRows } from "./actionTargetRows";
+import type { useActionConfirm } from "../confirm/useActionConfirm";
+import { targetUrl } from "./actionTargetUrl";
+
+type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
+type ConfirmedRuns = {
+  [Kind in ActionTarget["type"]]?: (
+    target: TargetsByKind[Kind],
+    rowData?: Data,
+    extras?: TargetRunExtras,
+  ) => ConfirmedRun;
+};
+
+export function createActionTargetRunner(
+  targetHandlers: TargetHandlers,
+  requestApiTarget: ReturnType<typeof createActionRequests>["requestApiTarget"],
+  confirmAction: ReturnType<typeof useActionConfirm>["confirmAction"],
+  rowUrlParams: TargetRows["rowUrlParams"],
+) {
+  const confirmedRuns: ConfirmedRuns = {
+    api: (target, rowData, extras) => (values) => {
+      return requestApiTarget(
+        target,
+        targetUrl(target.url, rowData),
+        rowData,
+        values,
+        extras?.selection,
+      );
+    },
+  };
+  return async <Kind extends ActionTarget["type"]>(
+    target: TargetsByKind[Kind],
+    label: string,
+    rowData?: Data,
+    declared?: ActionConfirm,
+    extras?: TargetRunExtras,
+  ) => {
+    const handler = targetHandlers[target.type];
+    if (!handler) return;
+    if (!declared) {
+      await handler(target, label, rowData, extras);
+      return;
+    }
+    const runInside = confirmedRuns[target.type]?.(target, rowData, extras);
+    const isConfirmed = await confirmAction(declared, {
+      row: extras?.textParams ? { ...rowData, ...extras.textParams } : rowData,
+      urlParams: rowUrlParams(rowData),
+      run: runInside,
+    });
+    if (isConfirmed && !runInside) {
+      await handler(target, label, rowData, extras);
+    }
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/actions/actionTargetContainers.ts

@@ -0,0 +1,178 @@
+import type { Component } from "vue";
+import type {
+  ContainerInstance,
+  DrawerOptions,
+} from "../../../composables/containers/types";
+import type { RowNavigation } from "../../../types/row-navigation";
+import DmsRowHeader from "../../components/containers/row/RowHeader.vue";
+import DmsRowNotFound from "../../components/containers/row/RowNotFound.vue";
+import { drawerRowHeaderProps } from "../../components/containers/row/drawerRowHeader";
+import { dmsOwnDrawer } from "../containers/context";
+import { listenRowSteps, trackRowNavigation } from "./rowNavigation";
+import {
+  targetComponentOf,
+  type TargetRows,
+  type RowTexts,
+} from "./actionTargetRows";
+import type { ActionTargetsConfig } from "./useActionTargets";
+import type { ComponentTargetRun } from "./actionTargetTypes";
+
+export function createContainerOpener(
+  config: ActionTargetsConfig,
+  openModal: ReturnType<typeof useModal>["open"],
+  openDrawer: ReturnType<typeof useDrawer>["open"],
+) {
+  return (
+    run: ComponentTargetRun,
+    component: Component,
+    options: Pick<
+      DrawerOptions,
+      "title" | "componentOptions" | "headerComponentOptions"
+    >,
+  ): ContainerInstance => {
+    const containerOptions = {
+      ...options,
+      description: run.description,
+      containerId: run.containerId,
+      component,
+    };
+    if (run.target.type === "modal") {
+      return openModal({ ...containerOptions, size: run.target.size });
+    }
+    return openDrawer(
+      dmsOwnDrawer({
+        ...containerOptions,
+        direction: run.target.direction,
+        size: run.target.size,
+        sizeKey: `${config.pageId}-${config.componentId}-${run.target.component?.componentName}`,
+        ...(options.headerComponentOptions && {
+          headerComponent: DmsRowHeader,
+        }),
+      }),
+    );
+  };
+}
+
+export interface ComponentTargetContext {
+  config: ActionTargetsConfig;
+  rows: TargetRows;
+  texts: RowTexts;
+  openContainer: ReturnType<typeof createContainerOpener>;
+}
+
+function hasRowHeader(target: ComponentTargetRun["target"]): boolean {
+  if (target.type !== "drawer") return false;
+  return target.rowHeader ?? !!(target.rowTitle || target.positionLabel);
+}
+
+export function handleComponentTarget(
+  run: ComponentTargetRun,
+  context: ComponentTargetContext,
+) {
+  const { config, rows, texts, openContainer } = context;
+  const { targetOptionsFor, rowShower, rowIdOf, rowRecorder } = rows;
+  const { rowTitleOf } = texts;
+  const componentName = run.target.component?.componentName;
+  if (!componentName) return;
+  if (run.missingId) return showMissingInDrawer(run, run.missingId, context);
+  const component = targetComponentOf(componentName, run.target.component);
+  const source = config.rowNavigation;
+  const drawerTarget = run.target.type === "drawer" ? run.target : undefined;
+  const withRowHeader = hasRowHeader(run.target) && !run.selection;
+  let instance: ContainerInstance | undefined;
+  let navigation: RowNavigation | undefined;
+  let stopNavigation: (() => void) | undefined;
+  let closed = false;
+  const showRowOpen = (row: Data) => {
+    if (!closed) showRow(row);
+  };
+  const showRowById = rowShower(showRowOpen);
+  const trackNavigation = (row?: Data) => {
+    stopNavigation?.();
+    stopNavigation = undefined;
+    navigation = undefined;
+    if (!row || !source) return;
+    let isShowing = true;
+    stopNavigation = trackRowNavigation(source, row, showRowOpen, (next) => {
+      navigation = next;
+      if (isShowing || !instance || closed) return;
+      instance.patch({
+        componentOptions: optionsOf(row),
+        ...(withRowHeader && { headerComponentOptions: headerFor(row) }),
+      });
+    });
+    isShowing = false;
+  };
+  const optionsFor = (row?: Data) => {
+    trackNavigation(row);
+    return optionsOf(row);
+  };
+  const optionsOf = (row?: Data) => ({
+    ...targetOptionsFor(run.target, row),
+    pageId: config.pageId,
+    componentId: config.componentId,
+    containerId: run.containerId,
+    rowData: row,
+    navigation,
+    showRow: showRowById,
+    selection: run.selection,
+    onSuccessCallback: () => {
+      instance?.close();
+      config.refreshCallback?.();
+    },
+  });
+  const titleFor = (row?: Data) =>
+    (drawerTarget && rowTitleOf(drawerTarget, row)) || run.title;
+  const headerFor = (row?: Data) =>
+    withRowHeader
+      ? drawerRowHeaderProps(
+          { positionLabel: drawerTarget?.positionLabel, navigation },
+          titleFor(row),
+        )
+      : undefined;
+  const recordRow = rowRecorder(run.deepLink);
+  function showRow(row: Data) {
+    const componentOptions = optionsFor(row);
+    instance?.patch({
+      title: titleFor(row),
+      componentOptions,
+      componentKey: rowIdOf(row),
+      ...(withRowHeader && { headerComponentOptions: headerFor(row) }),
+    });
+    recordRow(row);
+  }
+  const componentOptions = optionsFor(run.rowData);
+  instance = openContainer(run, component, {
+    title: titleFor(run.rowData),
+    componentOptions,
+    headerComponentOptions: headerFor(run.rowData),
+  });
+  recordRow(run.rowData);
+  const stopSteps = source ? listenRowSteps(() => navigation) : undefined;
+  const settle = () => {
+    closed = true;
+    stopSteps?.();
+    stopNavigation?.();
+    recordRow(undefined);
+  };
+  instance.result.then(settle, settle);
+}
+
+function showMissingInDrawer(
+  run: ComponentTargetRun,
+  id: string,
+  context: ComponentTargetContext,
+): void {
+  if (run.target.type !== "drawer") return;
+  const { rows, texts, openContainer } = context;
+  const recordId = rows.recordRecorder(run.deepLink);
+  let instance: ContainerInstance | undefined;
+  const notFound = texts.notFoundOf(run.target);
+  instance = openContainer(run, DmsRowNotFound, {
+    title: run.title,
+    componentOptions: { ...notFound, onClose: () => instance?.close() },
+  });
+  recordId(id);
+  const settle = () => recordId(undefined);
+  instance.result.then(settle, settle);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/actions/actionTargetHandlers.ts

@@ -0,0 +1,104 @@
+import type { ActionTargetsConfig } from "./useActionTargets";
+import type { TargetHandler, TargetHandlers } from "./actionTargetTypes";
+import type {
+  createActionRequests,
+  createExportJobHandler,
+} from "./actionTargetRequests";
+import {
+  handleComponentTarget,
+  type ComponentTargetContext,
+} from "./actionTargetContainers";
+import type { createSidePanelHandler } from "./actionTargetSidePanel";
+import { targetUrl } from "./actionTargetUrl";
+import {
+  dispatchQuickActionTarget,
+  findServedQuickAction,
+} from "../../utils/dispatchQuickActionTarget";
+
+interface TargetHandlerContext {
+  config: ActionTargetsConfig;
+  processI18n: ReturnType<typeof useTranslation>["processI18n"];
+  componentContext: ComponentTargetContext;
+  handleSidePanelTarget: ReturnType<typeof createSidePanelHandler>;
+  requests: ReturnType<typeof createActionRequests>;
+  handleExportJobTarget: ReturnType<typeof createExportJobHandler>;
+}
+
+export function createTargetHandlers(
+  context: TargetHandlerContext,
+): TargetHandlers {
+  const {
+    config,
+    processI18n,
+    componentContext,
+    handleSidePanelTarget,
+    requests,
+    handleExportJobTarget,
+  } = context;
+  const { handleApiTarget, handleDownloadTarget } = requests;
+  const componentHandler: TargetHandler<"modal" | "drawer"> = (
+    target,
+    label,
+    rowData,
+    extras,
+  ) =>
+    handleComponentTarget(
+      {
+        target,
+        title: processI18n(target.title || label),
+        description: processI18n(target.description || ""),
+        containerId: `${config.pageId}-${config.componentId}-${target.type}`,
+        rowData: extras?.selection && !extras.keepsRow ? undefined : rowData,
+        ...extras,
+      },
+      componentContext,
+    );
+  const sidePanelHandler: TargetHandler<"sidePanel"> = (
+    target,
+    label,
+    rowData,
+    extras,
+  ) =>
+    handleSidePanelTarget({
+      target,
+      title: processI18n(target.title || label),
+      containerId: `${config.pageId}-${config.componentId}-${target.type}`,
+      rowData: extras?.selection && !extras.keepsRow ? undefined : rowData,
+      ...extras,
+    });
+  return {
+    page: (target, _label, rowData) => {
+      navigateDms(targetUrl(target.url, rowData));
+    },
+    external: (target, _label, rowData) => {
+      const url = targetUrl(target.url, rowData);
+      if (typeof window === "undefined" || !url) return;
+      if (target.newTab) {
+        window.open(url, "_blank", "noopener,noreferrer");
+        return;
+      }
+      window.location.href = url;
+    },
+    api: async (target, label, rowData, extras) => {
+      const url = targetUrl(target.url, rowData);
+      await handleApiTarget(target, url, label, rowData, extras?.selection);
+    },
+    exportJob: async (target, _label, rowData) => {
+      const url = targetUrl(target.url, rowData);
+      await handleExportJobTarget(target, url, rowData);
+    },
+    download: (target, label, rowData) =>
+      handleDownloadTarget(target, label, rowData),
+    modal: componentHandler,
+    quickAction: (target) => {
+      const { id } = target;
+      const quickAction = findServedQuickAction(
+        useSiteLayout().quickActions.value?.actions,
+        id,
+      );
+      if (quickAction) dispatchQuickActionTarget(quickAction.target);
+    },
+    drawer: componentHandler,
+    sidePanel: sidePanelHandler,
+  };
+}