@antelopejs/dms 0.7.9 → 0.7.11

package/frontend-vue/layers/dms-layout/app/build/composables/layout/rowSidePanel.ts

@@ -21,6 +21,17 @@ export const ROW_SIDE_PANEL_ID = "dms:row-side-panel";
 /** Registered name of `RowSidePanel.vue` (the layer's `Dms` prefix applied). */
 const ROW_SIDE_PANEL_COMPONENT = "DmsRowSidePanel";
 
+/**
+ * The state the panel draws in place of the component on a row that is gone,
+ * its texts translated.
+ *
+ * @internal
+ */
+export interface RowSidePanelNotFound {
+  title: string;
+  description: string;
+}
+
 /**
  * What the row side panel shows: the header the DMS draws, the module's
  * component and the row it receives.
@@ -32,7 +43,12 @@ export interface RowSidePanelContent {
   session: symbol;
   /** The table (or button bar) that opened the panel; see {@link rowSidePanelOwnerKey}. */
   ownerKey: string;
+  /** The panel's title: its accessible name, and its header without a row. */
   title: string;
+  /** The header's title while `row` is open (the target's `rowTitle`). */
+  rowTitle?: string;
+  /** The row the link names is gone: this state replaces the component. */
+  notFound?: RowSidePanelNotFound;
   /** i18n key (`$`-prefixed) of the position, receiving `{ index, total }`. */
   positionLabel?: string;
   component: Component;

package/frontend-vue/layers/dms-layout/app/composables/layout/useServedHeaderActions.ts

@@ -0,0 +1,75 @@
+import { computed, shallowRef, watch, type ComputedRef } from "vue";
+import type { LayoutHeaderAction } from "../../build/components/layout/PageHeaderActionBar.vue";
+import type { PageLayout } from "../../types/page";
+import {
+  isSamePageQuery,
+  layoutUrlWithQuery,
+  pageQueryValues,
+} from "../../utils/pageQuery";
+
+interface ServedHeaderActionsOptions {
+  /** The buttons the page layout was served with. */
+  actions: () => LayoutHeaderAction[];
+  /**
+   * The page query their availability was resolved for, set when one of them
+   * declares an `availability` (`headerActionsQuery`).
+   */
+  servedQuery: () => Record<string, string> | undefined;
+}
+
+/**
+ * The page header's buttons for the page query of the moment. A button whose
+ * `availability` depends on the query (`?workspace=` names the record the
+ * page acts on) was resolved for the query the layout was loaded with: when
+ * the URL's query moves away from it, the header asks the page layout again
+ * for that query and takes its buttons, keeping the last ones meanwhile.
+ * Buttons without an availability never cause a request.
+ */
+export function useServedHeaderActions({
+  actions,
+  servedQuery,
+}: ServedHeaderActionsOptions): ComputedRef<LayoutHeaderAction[]> {
+  const route = useDmsRoute();
+  const siteLayout = useSiteLayout();
+  const refreshed = shallowRef<LayoutHeaderAction[] | null>(null);
+  let latestRequest = 0;
+
+  const layoutUrl = () =>
+    siteLayout.findMatchingRoute(route.path)?.metadata?.layoutUrl;
+
+  async function askFor(url: string, query: Record<string, string>) {
+    const request = ++latestRequest;
+    const { $authFetch } = useAuthFetch();
+    try {
+      const layout = await $authFetch<PageLayout>(
+        layoutUrlWithQuery(url, query),
+      );
+      if (request !== latestRequest) return;
+      const options = layout.layout.options as
+        | { headerActions?: LayoutHeaderAction[] }
+        | undefined;
+      refreshed.value = options?.headerActions ?? [];
+    } catch {
+      // The buttons resolved for the previous query stay: the operation
+      // behind each one still refuses on its own.
+    }
+  }
+
+  function follow() {
+    const served = servedQuery();
+    const current = pageQueryValues(route.query as Record<string, unknown>);
+    const url = layoutUrl();
+    if (!served || !url || isSamePageQuery(served, current)) {
+      latestRequest++;
+      refreshed.value = null;
+      return;
+    }
+    void askFor(url, current);
+  }
+
+  if (!import.meta.env.SSR) {
+    watch([() => route.query, servedQuery], follow, { immediate: true });
+  }
+
+  return computed(() => refreshed.value ?? actions());
+}

package/frontend-vue/layers/dms-layout/app/composables/page/usePageLayout.ts

@@ -1,3 +1,5 @@
+import { pageQueryValues } from "../../utils/pageQuery";
+
 /**
  * Reads the same page cache that Inertia hydrates before navigation. Missing
  * layouts (including newly registered dev pages) use the shared deduped loader.
@@ -17,7 +19,12 @@ export async function usePageLayout() {
   );
   const load = async () => {
     if (layoutUrl.value && !pageLayout.value) {
-      await siteLayout.loadPageLayout(layoutUrl.value);
+      // Asked with the page query, for the header buttons whose availability
+      // depends on it; cached for the page whatever its query.
+      await siteLayout.loadPageLayout(
+        layoutUrl.value,
+        pageQueryValues(route.query),
+      );
     }
   };
   watch([layoutUrl, () => siteLayout.pageLayouts.value], load);

package/frontend-vue/layers/dms-layout/app/composables/page/useSiteLayout.ts

@@ -1,3 +1,4 @@
+import { layoutUrlWithQuery } from "../../utils/pageQuery";
 import { withoutTrailingSlash } from "ufo";
 
 const STALE_THRESHOLD_MS = 300_000;
@@ -282,7 +283,15 @@ export const useSiteLayout = () => {
     await refresh();
   };
 
-  const loadPageLayout = async (slug: string): Promise<PageLayout> => {
+  /**
+   * The layout of a page, cached by its layout URL. `query` is the page
+   * URL's, which the first request carries for the header buttons whose
+   * availability reads it (the header asks again for another query).
+   */
+  const loadPageLayout = async (
+    slug: string,
+    query?: Record<string, string>,
+  ): Promise<PageLayout> => {
     if (pageLayouts.value[slug]) {
       return pageLayouts.value[slug];
     }
@@ -294,7 +303,9 @@ export const useSiteLayout = () => {
     }
 
     const { $authFetch } = useAuthFetch();
-    const request = $authFetch<PageLayout>(slug).then((result) => {
+    const request = $authFetch<PageLayout>(
+      layoutUrlWithQuery(slug, query ?? {}),
+    ).then((result) => {
       if (pageLayouts.value === cache) cache[slug] = result;
       return result;
     });

package/frontend-vue/layers/dms-layout/app/custom-layouts/DefaultLayout.vue

@@ -12,6 +12,11 @@ interface Props {
   description?: string;
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
+  /**
+   * The page query the server resolved the buttons' availability for, set
+   * when one declares an `availability` (`headerActionsQuery`).
+   */
+  headerActionsQuery?: Record<string, string>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   headerActions: () => [],
+  headerActionsQuery: undefined,
 });
 </script>
 
@@ -33,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
       :title="props.title"
       :description="props.description"
       :header-actions="props.headerActions"
+      :header-actions-query="props.headerActionsQuery"
     >
       <slot />
     </DashboardPageBody>

package/frontend-vue/layers/dms-layout/app/custom-layouts/SettingsLayout.vue

@@ -12,6 +12,11 @@ interface Props {
   description?: string;
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
+  /**
+   * The page query the server resolved the buttons' availability for, set
+   * when one declares an `availability` (`headerActionsQuery`).
+   */
+  headerActionsQuery?: Record<string, string>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: undefined,
   description: undefined,
   headerActions: () => [],
+  headerActionsQuery: undefined,
 });
 </script>
 
@@ -33,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
         :title="props.title"
         :description="props.description"
         :header-actions="props.headerActions"
+        :header-actions-query="props.headerActionsQuery"
         header-class="pb-5"
       >
         <slot />

package/frontend-vue/layers/dms-layout/app/pages/[...slug].vue

@@ -218,10 +218,13 @@ const realtimePageId = computed(() => pagelayoutMetadata.value?.fullId ?? "");
 const realtime = usePageRealtime(realtimePageId);
 providePageRealtime(realtime);
 // Before the blocks set up: their refetches go through the page's live gate.
-usePageLiveHost(() => ({
-  pageId: pagelayoutMetadata.value?.fullId,
-  live: pagelayoutMetadata.value?.live,
-}));
+usePageLiveHost(
+  () => ({
+    pageId: pagelayoutMetadata.value?.fullId,
+    live: pagelayoutMetadata.value?.live,
+  }),
+  { isStreamConnected: () => !!realtime.sessionId.value },
+);
 
 function buildPageSetupContext(
   pageInfo: PageInfo,

package/frontend-vue/layers/dms-layout/app/utils/pageQuery.ts

@@ -0,0 +1,59 @@
+// The page URL's query as the server reads it for header-button availability.
+
+/** The page query as the server reads it: one value per name, the last one. */
+export function pageQueryValues(
+  query: Record<string, unknown> | undefined,
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(query ?? {}).flatMap(([name, value]) => {
+      const last = Array.isArray(value) ? value.at(-1) : value;
+      return typeof last === "string" ? [[name, last]] : [];
+    }),
+  );
+}
+
+// Query keys the DMS writes for the view itself, never for the record a page
+// acts on: the row open in a side panel, the paused live mode, and a period
+// selector's range (`<id>.period`, `<id>.compare`, `<id>.from`…).
+const VIEW_STATE_KEYS = new Set(["record", "live"]);
+const PERIOD_KEY = /\.(?:period|compare|from|to|compareFrom|compareTo)$/;
+
+/** Whether a query key only records the view's own state. */
+export function isViewStateKey(name: string): boolean {
+  return VIEW_STATE_KEYS.has(name) || PERIOD_KEY.test(name);
+}
+
+function withoutViewState(
+  query: Record<string, string>,
+): Record<string, string> {
+  return Object.fromEntries(
+    Object.entries(query).filter(([name]) => !isViewStateKey(name)),
+  );
+}
+
+/**
+ * Whether two page queries hold the same values, in any order, leaving out
+ * the keys that only record the view's state: moving through rows, pausing
+ * the live mode or changing a period never asks the layout again.
+ */
+export function isSamePageQuery(
+  left: Record<string, string>,
+  right: Record<string, string>,
+): boolean {
+  const kept = withoutViewState(left);
+  const other = withoutViewState(right);
+  const names = Object.keys(kept);
+  return (
+    names.length === Object.keys(other).length &&
+    names.every((name) => kept[name] === other[name])
+  );
+}
+
+/** The layout URL of a page, asked for the given query. */
+export function layoutUrlWithQuery(
+  layoutUrl: string,
+  query: Record<string, string>,
+): string {
+  const search = new URLSearchParams(query).toString();
+  return search ? `${layoutUrl}?${search}` : layoutUrl;
+}

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

@@ -899,6 +899,10 @@
     "position": "{index} of {total}",
     "previous": "Previous",
     "next": "Next",
-    "close": "Close"
+    "close": "Close",
+    "not_found": {
+      "title": "This entry is no longer available",
+      "description": "It was deleted, or the link is wrong."
+    }
   }
 }

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

@@ -903,6 +903,10 @@
     "position": "{index} sur {total}",
     "previous": "Précédent",
     "next": "Suivant",
-    "close": "Fermer"
+    "close": "Fermer",
+    "not_found": {
+      "title": "Cette entrée n'est plus disponible",
+      "description": "Elle a été supprimée, ou le lien est erroné."
+    }
   }
 }

package/frontend-vue/layers/dms-ui/app/build/components/activity-feed/activityFeedDays.ts

@@ -18,6 +18,8 @@ export interface ActivityFeedItem {
   title: BlockText;
   /** Dimmed details, joined by "·". */
   meta?: BlockText[];
+  /** Third line, dimmed and mono (the entry's evidence). */
+  detail?: BlockText;
   /**
    * Values the `$` title and details interpolate: typed values are formatted
    * as in a composed text; a `$`-prefixed string is translated first.

package/frontend-vue/layers/dms-ui/app/build/components/blocks/BlockInlineStatus.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  type FetchNotFound,
+  NOT_FOUND_TITLE_KEY,
+} from "../../utils/fetchNotFound";
+
+// The one-line status a compact block (a KPI card, a meter) shows in place of
+// its value: a first load that failed, with a retry, or a source that
+// answered 404 — nothing to retry there, the value does not exist.
+interface BlockInlineStatusProps {
+  state: "error" | "not-found";
+  /** What the 404 said; its `emptyState.title` replaces the default text. */
+  notFound?: FetchNotFound | null;
+}
+
+interface BlockInlineStatusEmits {
+  (e: "retry"): void;
+}
+
+const props = withDefaults(defineProps<BlockInlineStatusProps>(), {
+  notFound: undefined,
+});
+const emit = defineEmits<BlockInlineStatusEmits>();
+
+const NOT_FOUND_ICON = "i-ph-magnifying-glass";
+const ERROR_ICON = "i-ph-warning-circle";
+
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const isError = computed(() => props.state === "error");
+const label = computed(() => {
+  if (isError.value) return t("dms.table.load_error_title");
+  const title = props.notFound?.emptyState?.title;
+  return title ? processI18n(title) : t(NOT_FOUND_TITLE_KEY);
+});
+const icon = computed(() =>
+  isError.value
+    ? ERROR_ICON
+    : (props.notFound?.emptyState?.icon ?? NOT_FOUND_ICON),
+);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-2"
+    :role="isError ? 'alert' : 'status'"
+  >
+    <p
+      class="flex min-w-0 items-center gap-1.5 text-[12.5px]"
+      :class="isError ? 'text-error' : 'text-muted'"
+    >
+      <UIcon :name="icon" class="size-4 shrink-0" />
+      <span class="truncate">{{ label }}</span>
+    </p>
+    <UButton
+      v-if="isError"
+      :label="t('dms.table.load_error_retry')"
+      icon="i-ph-arrows-clockwise"
+      color="neutral"
+      variant="outline"
+      size="xs"
+      @click="emit('retry')"
+    />
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/blocks/BlockStatus.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import DmsEmptyState from "../../../components/empty-state/EmptyState.vue";
+import DmsBlockActions from "./BlockActions.vue";
+import { type FetchNotFound, notFoundTexts } from "../../utils/fetchNotFound";
 
 /** What a block shows when it has nothing to list (interface-dms `BlockEmptyText`). */
 export interface BlockEmptyText {
@@ -8,14 +11,22 @@ export interface BlockEmptyText {
   description?: string;
 }
 
-// What a data-driven block shows instead of its content: an empty list, or a
-// first load that failed (with a retry). Compact v2 .c-empty in a card, so it
-// keeps the footprint of the block it stands in for.
+/**
+ * `empty`: nothing to show. `error`: the first load failed. `not-found`: the
+ * source answered 404, what the block shows does not exist.
+ */
+export type BlockStatusState = "empty" | "error" | "not-found";
+
+// What a data-driven block shows instead of its content: an empty list, a
+// first load that failed (with a retry), or a source that answered 404.
+// Compact v2 .c-empty in a card, so it keeps the footprint of the block it
+// stands in for.
 interface BlockStatusProps {
-  /** `empty`: nothing to show. `error`: the first load failed. */
-  state: "empty" | "error";
+  state: BlockStatusState;
   /** Replaces the default texts of the empty state. */
   empty?: BlockEmptyText;
+  /** What the 404 said, laid over the default not-found texts. */
+  notFound?: FetchNotFound | null;
   /** Draw the card surface around it (off inside a card). */
   card?: boolean;
 }
@@ -26,33 +37,59 @@ interface BlockStatusEmits {
 
 const props = withDefaults(defineProps<BlockStatusProps>(), {
   empty: undefined,
+  notFound: undefined,
   card: true,
 });
 const emit = defineEmits<BlockStatusEmits>();
 
+const VARIANTS = {
+  empty: "no-data",
+  error: "error",
+  "not-found": "no-result",
+} as const;
+
 const { t } = useI18n();
 const { processI18n } = useTranslation();
+
+const translate = (text: string | undefined) =>
+  text ? processI18n(text) : undefined;
+
+const notFoundState = computed(() => {
+  const answered = props.notFound?.emptyState ?? {};
+  const defaults = notFoundTexts(props.notFound, t);
+  return {
+    title: translate(answered.title) ?? defaults.title,
+    description: translate(answered.description) ?? defaults.description,
+    icon: answered.icon,
+    tone: answered.tone,
+    actions: answered.actions ?? [],
+  };
+});
+
+const isNotFound = computed(() => props.state === "not-found");
+
+const title = computed(() => {
+  if (props.state === "error") return t("dms.blocks.load_error");
+  if (isNotFound.value) return notFoundState.value.title;
+  return props.empty ? processI18n(props.empty.title) : t("dms.blocks.empty");
+});
+
+const description = computed(() => {
+  if (props.state === "error") return t("dms.blocks.load_error_hint");
+  if (isNotFound.value) return notFoundState.value.description;
+  return translate(props.empty?.description);
+});
 </script>
 
 <template>
   <div :class="props.card && 'dms-card'">
     <DmsEmptyState
       size="sm"
-      :variant="props.state === 'error' ? 'error' : 'no-data'"
-      :title="
-        props.state === 'error'
-          ? t('dms.blocks.load_error')
-          : props.empty
-            ? processI18n(props.empty.title)
-            : t('dms.blocks.empty')
-      "
-      :description="
-        props.state === 'error'
-          ? t('dms.blocks.load_error_hint')
-          : props.empty?.description
-            ? processI18n(props.empty.description)
-            : undefined
-      "
+      :variant="VARIANTS[props.state]"
+      :icon="isNotFound ? notFoundState.icon : undefined"
+      :tone="isNotFound ? notFoundState.tone : undefined"
+      :title="title"
+      :description="description"
     >
       <template v-if="props.state === 'error'" #actions>
         <UButton
@@ -64,6 +101,9 @@ const { processI18n } = useTranslation();
           @click="emit('retry')"
         />
       </template>
+      <template v-else-if="isNotFound && notFoundState.actions.length" #actions>
+        <DmsBlockActions :actions="notFoundState.actions" size="sm" />
+      </template>
     </DmsEmptyState>
   </div>
 </template>

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

@@ -9,7 +9,10 @@ import type { Data, TableSharedData } from "./Table.vue";
 import { KANBAN_DISPLAY_ID } from "../../../composables/table-view/types";
 import type { CustomButton } from "../../../composables/table-view/types/custom-button";
 import { useTableContext } from "../../composables/table/useTableContext";
-import { createTableViewShiftFShortcut } from "../../../composables/table-view/shortcuts/tableViewShiftF";
+import {
+  createTableViewShiftFShortcut,
+  tableSearchShortcuts,
+} from "../../../composables/table-view/shortcuts/tableViewShiftF";
 import {
   FULL_TABLE_CHROME,
   type ResolvedTableChrome,
@@ -111,6 +114,8 @@ interface TableActionsProps {
   chrome?: ResolvedTableChrome;
   /** Placeholder of the search field. */
   searchPlaceholder?: string;
+  /** Key opening the search (`defineShortcuts` notation); `shift_f` else. */
+  searchShortcut?: string;
   /** Dropdown filters writing their column's filter. */
   quickFilters?: ResolvedQuickFilter[];
 }
@@ -193,7 +198,6 @@ watch(searchAreaFocused, async (isFocused) => {
   searchActive.value = false;
 });
 
-
 const searchFieldRef = ref<{ $el: HTMLElement }>();
 
 const focusSearchBar = () => {
@@ -273,13 +277,16 @@ const closeSearch = () => {
   searchActive.value = false;
 };
 
-defineShortcuts({
-  shift_f: createTableViewShiftFShortcut(
-    searchActive,
-    tableSharedData!.globalFilterState,
-    focusSearchBar,
+const openSearchFromShortcut = createTableViewShiftFShortcut(
+  searchActive,
+  tableSharedData!.globalFilterState,
+  focusSearchBar,
+);
+defineShortcuts(
+  computed(() =>
+    tableSearchShortcuts(props.searchShortcut, openSearchFromShortcut),
   ),
-});
+);
 
 const hasCustomFilterConfig = computed(() => {
   const filters = tableSharedData?.columnFiltersState.value || [];

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

@@ -80,6 +80,18 @@ const customComponent = computed(() => {
   return name ? resolveDmsComponent(name) || name : undefined;
 });
 const refresh = () => tableSharedData.value?.emits("refresh");
+// A custom state clears what narrows the rows as the built-in one does; each
+// is unset while there is nothing of it to clear.
+const clearSearch = computed(() =>
+  clearable.value?.search
+    ? () => tableSharedData.value?.clearSearch()
+    : undefined,
+);
+const clearFilters = computed(() =>
+  clearable.value?.filters
+    ? () => tableSharedData.value?.clearFilters()
+    : undefined,
+);
 
 interface EmptyStateContent {
   title: string;
@@ -221,6 +233,8 @@ const builtInActions = computed(() => {
     :state="kind"
     :search="search"
     :refresh="refresh"
+    :clear-search="clearSearch"
+    :clear-filters="clearFilters"
   />
   <DmsEmptyState
     v-else