@antelopejs/dms 0.10.0 → 0.11.1

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

@@ -19,7 +19,10 @@ import DmsForm from "../Form.vue";
 import { dmsOwnDrawer } from "../../../build/composables/containers/context";
 import { FIELD_TRIGGER_ICON } from "../../../build/utils/fieldTrigger";
 import { unlabeledRelationIds } from "../../../build/composables/data-types/relationValue";
-import { useRelationRows } from "../../../build/composables/data-types/relationRows";
+import {
+  notFoundRelationIds,
+  useRelationRows,
+} from "../../../build/composables/data-types/relationRows";
 import type { FormProps } from "../../../composables/form/types";
 import { sameFormValue } from "../../../build/composables/unsaved-changes/formValue";
 import { FORM_ENTRY_CONTEXT_KEY } from "../../../build/composables/form/formEntryContext";
@@ -385,19 +388,36 @@ const labeledIds = computed(
 // keeps showing as is rather than being asked again.
 const requestedIds = new Set<string>();
 
+// The ids the route did not answer (deleted, out of reach), shown as "Not
+// found" with the id on hover.
+const notFoundIds: Ref<ReadonlySet<string>> = shallowRef(new Set());
+
 async function loadValueItems(ids: string[]) {
   for (const id of ids) requestedIds.add(id);
-  const rows = await readRelationRows(
-    { searchUrl: props.searchUrl, keyMapping: props.keyMapping },
-    ids,
-  );
-  if (!rows.length) return;
+  const source = { searchUrl: props.searchUrl, keyMapping: props.keyMapping };
+  const rows = await readRelationRows(source, ids);
+  const missing = notFoundRelationIds(source, ids, rows);
+  if (!rows.length && !missing.length) return;
+  notFoundIds.value = new Set([...notFoundIds.value, ...missing]);
   valueItems.value = [
     ...valueItems.value,
     ...rows.map((item) => mapData(item as Record<string, string>)),
+    // Kept pickable, so the value can still be deselected.
+    ...missing.map((id) => ({
+      label: t("dms.form.relation.not_found"),
+      value: id,
+    })),
   ];
 }
 
+const notFoundTitle = computed(() => {
+  const ids = [props.modelValue]
+    .flat()
+    .map(String)
+    .filter((id) => notFoundIds.value.has(id));
+  return ids.length ? ids.join(", ") : undefined;
+});
+
 // The picker shows a value through its item: an id no item carries yet is
 // labelled (and given its avatar) from its row before the picker is opened.
 onMounted(() => {
@@ -558,6 +578,7 @@ const addFormOptions = computed(() => {
     :ignore-filter="true"
     :ui="{ content: 'z-50' }"
     :aria-label="t('dms.a11y.show_options')"
+    :title="notFoundTitle"
     @update:open="onOpen"
     @update:model-value="handleUpdateModelValue"
   >

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

@@ -11,6 +11,7 @@ import {
   useColumnValueRenderer,
 } from "../../../build/composables/data-types/useColumnValueRenderer";
 import {
+  type RelationColumnRows,
   type RelationLabelSource,
   type RepeaterTableColumn,
   joinRelationValue,
@@ -53,16 +54,22 @@ function useColumnRelationRows(columnId: string, source: RelationLabelSource) {
   );
   const { data } = useDmsAsyncData(
     `repeater-table-relation-${instanceId}-${columnId}`,
-    () => readRelationRows(source, ids.value),
+    async () => {
+      const readIds = ids.value;
+      return { readIds, rows: await readRelationRows(source, readIds) };
+    },
     // Names for the cells, not the page's data.
     { lazy: true, refreshOnPageRefresh: false, watch: [ids] },
   );
-  return computed(
-    () =>
-      new Map(
-        (data.value ?? []).map((row) => [relationRowValue(source, row), row]),
-      ),
-  );
+  return computed<RelationColumnRows>(() => ({
+    rowsByValue: new Map(
+      (data.value?.rows ?? []).map((row) => [
+        relationRowValue(source, row),
+        row,
+      ]),
+    ),
+    readIds: new Set(data.value?.readIds),
+  }));
 }
 
 const NO_LABELS: ReadonlySet<string> = new Set();

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import {
-  CASCADER_FETCH_LIMIT,
   CASCADER_PATH_SEPARATOR,
+  cascaderValueId,
   cascaderValuePath,
+  cascaderValueReads,
+  readCascaderAncestry,
   resolveCascaderKeyMapping,
   type CascaderKeyMapping,
 } from "../../utils/cascader";
 import { MAX_RELATION_BADGES } from "../../build/composables/data-types/relationBadges";
+import { useRelationRows } from "../../build/composables/data-types/relationRows";
 
 const DEFAULT_VALUE_KEY = "_id";
 
@@ -17,20 +20,20 @@ interface CascaderPathProps {
   keyMapping?: Partial<CascaderKeyMapping>;
 }
 
-/** A picked value of a multiple cascader: its name, its path on hover. */
+/**
+ * A picked value as the cell names it: its path, or "Not found" with its id
+ * on hover when its row is gone or out of reach.
+ */
 interface CascaderBadge {
   label: string;
   title: string;
+  isNotFound: boolean;
 }
 
 const props = defineProps<CascaderPathProps>();
 
-const { $authFetch } = useAuthFetch();
-
-interface CascaderResponse {
-  results: Record<string, unknown>[];
-  total: number;
-}
+const { t } = useI18n();
+const { readRelationRows } = useRelationRows();
 
 const keyMapping = computed(() =>
   resolveCascaderKeyMapping({
@@ -39,33 +42,72 @@ const keyMapping = computed(() =>
   }),
 );
 
+const values = computed<unknown[]>(() =>
+  Array.isArray(props.value) ? props.value : [props.value],
+);
+const reads = computed(() =>
+  cascaderValueReads(values.value, keyMapping.value),
+);
+const ids = computed(() => reads.value.idsToRead);
+
+// The ids a list did not join (and the parents of those it did), with their
+// ancestors, read by `?ids=` level by level.
 const { data } = await useDmsAsyncData(
-  `cascader-path-${props.searchUrl}`,
+  () => `cascader-path-${props.searchUrl}-${ids.value.join(",")}`,
   () =>
-    props.searchUrl
-      ? $authFetch<CascaderResponse>(props.searchUrl, {
-          params: { limit: CASCADER_FETCH_LIMIT },
-        })
+    props.searchUrl && ids.value.length > 0
+      ? readCascaderAncestry(
+          (pending) =>
+            readRelationRows(
+              {
+                searchUrl: props.searchUrl!,
+                keyMapping: { value: keyMapping.value.value },
+              },
+              pending,
+            ),
+          keyMapping.value,
+          ids.value,
+        )
       : Promise.resolve(undefined),
   // The labels of a path, not the page's data.
   { lazy: true, refreshOnPageRefresh: false },
 );
 
-const pathOf = (item: unknown): string[] =>
-  cascaderValuePath(item, keyMapping.value, data.value?.results);
+const pathRows = computed(() => [
+  ...reads.value.joinedRows,
+  ...(data.value?.rows ?? []),
+]);
 
-const pathLabel = computed(() =>
-  pathOf(props.value).join(CASCADER_PATH_SEPARATOR),
-);
+const notFound = computed(() => new Set(data.value?.notFound));
+
+function badgeOf(item: unknown): CascaderBadge | undefined {
+  const id = cascaderValueId(item, keyMapping.value);
+  if (id !== undefined && notFound.value.has(id)) {
+    return {
+      label: t("dms.form.relation.not_found"),
+      title: id,
+      isNotFound: true,
+    };
+  }
+  const path = cascaderValuePath(item, keyMapping.value, pathRows.value);
+  if (path.length === 0) return undefined;
+  return {
+    label: path.at(-1) ?? "",
+    title: path.join(CASCADER_PATH_SEPARATOR),
+    isNotFound: false,
+  };
+}
+
+const single = computed(() => {
+  const badge = badgeOf(props.value);
+  if (!badge || badge.isNotFound) return badge;
+  return { ...badge, label: badge.title };
+});
 
 const badges = computed<CascaderBadge[]>(() =>
   (Array.isArray(props.value) ? props.value : [])
-    .map(pathOf)
-    .filter((path) => path.length > 0)
-    .map((path) => ({
-      label: path.at(-1) ?? "",
-      title: path.join(CASCADER_PATH_SEPARATOR),
-    })),
+    .map(badgeOf)
+    .filter((badge): badge is CascaderBadge => !!badge),
 );
 const visibleBadges = computed(() =>
   badges.value.slice(0, MAX_RELATION_BADGES),
@@ -82,6 +124,7 @@ const hiddenBadges = computed(() => badges.value.slice(MAX_RELATION_BADGES));
       v-for="badge in visibleBadges"
       :key="badge.title"
       :label="badge.label"
+      :class="badge.isNotFound && 'text-muted'"
       :title="badge.title"
       color="neutral"
       variant="subtle"
@@ -97,5 +140,11 @@ const hiddenBadges = computed(() => badges.value.slice(MAX_RELATION_BADGES));
       size="sm"
     />
   </span>
-  <span v-else class="truncate" :title="pathLabel">{{ pathLabel }}</span>
+  <span
+    v-else-if="single"
+    :class="['truncate', single.isNotFound && 'text-muted']"
+    :title="single.title"
+  >
+    {{ single.label }}
+  </span>
 </template>

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

@@ -23,6 +23,7 @@ import {
 import { readSubline } from "../../build/composables/data-types/cellHelpers";
 import { useComposedText } from "#dms-core/app/composables/translation/useComposedText";
 import { useCardFields } from "../../build/composables/table-view/useCardFields";
+import { describeTableWriteError } from "../../build/composables/table-view/utils/writeError";
 
 const DEFAULT_COLUMN_PAGE_SIZE = 10;
 const DEFAULT_COLUMN_MAX_HEIGHT = "60vh";
@@ -83,7 +84,7 @@ const emit = defineEmits<{
 const groupByField = defineModel<string>("groupByField", { required: true });
 
 const { $authFetch } = useAuthFetch();
-const { processI18n, processApiMessage } = useTranslation();
+const { processI18n } = useTranslation();
 const { getDataType } = useDataTypes();
 const { t } = useI18n();
 const { processText } = useComposedText();
@@ -321,18 +322,11 @@ const awaitNewerMoves = async (itemId: string, current: Promise<void>) => {
   }
 };
 
-interface MoveErrorPayload {
-  data?: { message?: string };
-  message?: string;
-}
-
 const notifyMoveError = (error: unknown) => {
-  const err = error as MoveErrorPayload;
-  const message = err?.data?.message || err?.message;
   toast.add({
     color: Color.error,
     title: t("dms.table.kanban.move_error"),
-    description: message ? processApiMessage(message) : undefined,
+    description: describeTableWriteError(error, t, props.columns, processI18n),
   });
 };
 

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

@@ -1,5 +1,7 @@
 <script setup lang="ts" generic="T extends Data">
 import { get } from "@nuxt/ui/runtime/utils/index.js";
+import DmsBlockStatus from "../../build/components/blocks/BlockStatus.vue";
+import { readFetchNotFound } from "../../build/utils/fetchNotFound";
 import type {
   ColumnSizingState,
   ExpandedState,
@@ -53,6 +55,7 @@ import {
   KANBAN_DISPLAY_BRIDGE_KEY,
 } from "../../composables/table-view/kanban";
 import { useTableRowActions } from "../../build/composables/table-view/useTableViewRowActions";
+import { describeTableWriteError } from "../../build/composables/table-view/utils/writeError";
 import {
   buildTableQuery,
   isFilterEffective,
@@ -1064,6 +1067,11 @@ const listLoadError = computed(() => {
     : "error.500";
 });
 
+// A list answering 404 names a resource that does not exist (the workspace
+// its rows belong to was deleted): no retry fixes it, so the table gives way
+// to the not-found state blocks show, with what the 404 said.
+const listNotFound = computed(() => readFetchNotFound(settledError.value));
+
 // useDmsAsyncData keeps the previous result when a refetch fails, so rows kept
 // on screen would masquerade as the newly requested page/filter. Hide them
 // while the latest query is in error; the error panel takes their place.
@@ -1384,7 +1392,7 @@ const { reorderState } = useTableReorder<T>({
   onError: (failure) =>
     toast.add({
       title: t("dms.table.reorder.error"),
-      description: resolveApiErrorMessage(failure),
+      description: describeTableWriteError(failure, t, allColumns, processI18n),
       color: Color.error,
       icon: "i-ph-warning-circle",
     }),
@@ -1569,6 +1577,7 @@ const {
 } = useTableRowActions<T>({
   api: $authFetch,
   location,
+  columns: allColumns,
   caption,
   labelKey,
   rowIdKey: props.rowIdKey,
@@ -2391,7 +2400,13 @@ onMounted(() => {
 </script>
 
 <template>
+  <DmsBlockStatus
+    v-if="listNotFound"
+    state="not-found"
+    :not-found="listNotFound"
+  />
   <UTable
+    v-else
     ref="tableRoot"
     v-bind="tableProps"
     v-model:pagination="paginationState"

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

@@ -18,6 +18,12 @@ export interface FormFieldReadonly {
   link?: FormFieldLink;
 }
 
+/** Holds while the field `field` holds one of the values `in` lists. */
+export interface FieldCondition {
+  field: string;
+  in: unknown[];
+}
+
 export interface FormField {
   id: string;
   label?: string;
@@ -36,6 +42,12 @@ export interface FormField {
   /** "Module default · Use default" while it holds something else. */
   offersDefault?: boolean;
   localized?: boolean;
+  /** Shown only while the condition holds: hidden, neither required nor sent. */
+  visibleWhen?: FieldCondition;
+  /** Read-only while the condition holds: its value is not sent. */
+  disabledWhen?: FieldCondition;
+  /** A localized field's fallback language: filled whenever any language is. */
+  fallbackLocale?: string;
 }
 
 export interface FieldGroup {

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

@@ -5,7 +5,11 @@ import type { FormProps, FormFetchResponse, FormSubmitResponse } from "./types";
 import { jsonSchemaToZod } from "json-schema-to-zod";
 import { FormEvents } from "./types/events";
 import type { FormData, FormFieldValue } from "./types/value";
-import type { FormField, FormFieldOrGroup } from "./types/field";
+import type {
+  FieldCondition,
+  FormField,
+  FormFieldOrGroup,
+} from "./types/field";
 import { isFieldGroup } from "./types/field";
 import { resolveResponseToast } from "../../build/utils/responseWarning";
 import { processFieldI18n } from "../../build/utils/fieldOptionsI18n";
@@ -35,9 +39,11 @@ interface FormSubmitNotice {
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 import {
   type ApiFieldError,
+  apiErrorStatus,
   apiErrorText,
   resolveFieldErrors,
 } from "#dms-core/app/composables/useFieldErrors";
+import { HTTP_NOT_FOUND } from "#dms-core/app/utils/http-status";
 import { isBlankValue } from "#dms-core/app/composables/useFormValidation";
 import {
   isPlainObject,
@@ -472,6 +478,34 @@ export function isFieldMarkedRequired(
   return !!field.required || (required?.has(field.id) ?? false);
 }
 
+const meetsCondition = (
+  condition: FieldCondition,
+  values: Record<string, unknown>,
+): boolean => condition.in.includes(values[condition.field] ?? null);
+
+/**
+ * The fields the values hide (`visibleWhen` not met) or disable
+ * (`disabledWhen` met), added to those the watches hide or disable: the
+ * conditions hold from the values the form opens with, without a watch.
+ */
+export function withConditionFields(
+  fields: ReadonlyArray<Pick<FormField, "id" | "visibleWhen" | "disabledWhen">>,
+  values: Record<string, unknown>,
+  watched: { disabled?: Set<string>; hidden?: Set<string> },
+): { disabled: Set<string>; hidden: Set<string> } {
+  const disabled = new Set(watched.disabled);
+  const hidden = new Set(watched.hidden);
+  for (const field of fields) {
+    if (field.visibleWhen && !meetsCondition(field.visibleWhen, values)) {
+      hidden.add(field.id);
+    }
+    if (field.disabledWhen && meetsCondition(field.disabledWhen, values)) {
+      disabled.add(field.id);
+    }
+  }
+  return { disabled, hidden };
+}
+
 function watchFieldChanges(
   state: Ref<Record<string, unknown>>,
   componentId: string | undefined,
@@ -612,13 +646,16 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     { deep: true },
   );
 
-  const disabledFields = computed(
-    () => state.value.disabledFields as Set<string> | undefined,
+  const inactiveFields = computed(() =>
+    withConditionFields(allFields.value, state.value, {
+      disabled: state.value.disabledFields as Set<string> | undefined,
+      hidden: state.value.hiddenFields as Set<string> | undefined,
+    }),
   );
 
-  const hiddenFields = computed(
-    () => state.value.hiddenFields as Set<string> | undefined,
-  );
+  const disabledFields = computed(() => inactiveFields.value.disabled);
+
+  const hiddenFields = computed(() => inactiveFields.value.hidden);
 
   const requiredFields = computed(
     () => state.value.requiredFields as Set<string> | undefined,
@@ -686,7 +723,10 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
       // A server render shows the failure in the form (FormLoadError) and
       // hands it to the browser; a toast it added would show in its HTML
       // alone, which the browser's toasts never hold.
-      if (!import.meta.env.SSR) showFetchErrorToast(error);
+      // A 404 is no error either: the form says the record is not found.
+      if (!import.meta.env.SSR && apiErrorStatus(error) !== HTTP_NOT_FOUND) {
+        showFetchErrorToast(error);
+      }
       throw error;
     }
   };

package/frontend-vue/layers/dms-ui/app/composables/live/usePageLive.ts

@@ -1,7 +1,9 @@
 import {
   computed,
   getCurrentScope,
+  onMounted,
   onScopeDispose,
+  shallowRef,
   type ComputedRef,
 } from "vue";
 import {
@@ -75,7 +77,12 @@ export interface PageLiveState {
  * never paused, and its actions do nothing. A server render reads the page as
  * live and never paused too, but `isEnabled` says whether it declares `live`:
  * the browser hydrates the page's blocks with its controller installed, so
- * the server draws them as it will.
+ * the server draws them as it will. The rest of the state is born in the
+ * browser (the realtime stream, the page's reads, a pause): a component
+ * hydrating the server's HTML reads it as the server did (live, not polling,
+ * never read, nothing missed) until its own `onMounted`, then follows the
+ * page. A component mounted afresh, after a client navigation, reads the page
+ * at once.
  *
  * ```ts
  * const { isPaused, missedCount, resume, hold, release } = usePageLive();
@@ -86,26 +93,29 @@ export interface PageLiveState {
  * `realtimeTopic` are.
  */
 export function usePageLive(): PageLiveState {
-  const isPaused = computed(() => currentPageLive()?.isPaused.value ?? false);
+  // An async block hydrates after the page has installed its controller and
+  // read its data: until mounted, it draws the state the server drew.
+  const isHydrating = shallowRef(isDmsHydrating());
+  if (isHydrating.value) onMounted(() => (isHydrating.value = false));
+  const shown = () => (isHydrating.value ? null : currentPageLive());
+  const isPaused = computed(() => shown()?.isPaused.value ?? false);
   const hold = usePageLiveHold();
   const isServerLive = isServerPageLive();
   return {
     isEnabled: computed(() => currentPageLive() !== null || isServerLive),
     isLive: computed(() => !isPaused.value),
     isPaused,
-    pauseReason: computed(() => currentPageLive()?.pauseReason.value ?? null),
+    pauseReason: computed(() => shown()?.pauseReason.value ?? null),
     pause: () => currentPageLive()?.pause(),
     resume: () => currentPageLive()?.resume(),
     toggle: () => currentPageLive()?.toggle(),
     hold: hold.hold,
     release: hold.release,
-    lastUpdatedAt: computed(
-      () => currentPageLive()?.lastUpdatedAt.value ?? null,
-    ),
-    missedCount: computed(() => currentPageLive()?.missedCount.value ?? 0),
-    missedDetail: computed(() => currentPageLive()?.missedDetail.value ?? null),
+    lastUpdatedAt: computed(() => shown()?.lastUpdatedAt.value ?? null),
+    missedCount: computed(() => shown()?.missedCount.value ?? 0),
+    missedDetail: computed(() => shown()?.missedDetail.value ?? null),
     setMissedDetail: (detail) => currentPageLive()?.setMissedDetail(detail),
-    isPolling: computed(() => currentPageLive()?.isPolling.value ?? false),
+    isPolling: computed(() => shown()?.isPolling.value ?? false),
   };
 }
 

package/frontend-vue/layers/dms-ui/app/utils/cascader.ts

@@ -27,6 +27,7 @@ export interface CascaderTreeOptions {
 
 export const CASCADER_PATH_SEPARATOR = " / ";
 
+/** How many rows the picker's open menu lists to browse the tree. */
 export const CASCADER_FETCH_LIMIT = 1000;
 
 export const DEFAULT_CASCADER_KEY_MAPPING: CascaderKeyMapping = {
@@ -220,10 +221,100 @@ export function cascaderValuePath(
 ): string[] {
   const row = asPickedRow(item);
   const ownLabel = row ? rowValue(row, keyMapping.label) : undefined;
-  const id = row
-    ? rowValue(row, keyMapping.value)
-    : rowValue({ id: item }, "id");
+  const id = cascaderValueId(item, keyMapping);
   if (!id) return ownLabel ? [ownLabel] : [];
   const labels = rows ? buildCascaderPathLabels(rows, keyMapping, id) : [];
   return labels.length > 0 ? labels : [ownLabel ?? id];
 }
+
+/** Reads the rows of the given ids from the cascader's `select` route. */
+export type CascaderRowsReader = (ids: string[]) => Promise<CascaderRow[]>;
+
+/** The rows a path is drawn from, and the picked ids none of them answer. */
+export interface CascaderAncestry {
+  rows: CascaderRow[];
+  notFound: string[];
+}
+
+/**
+ * The rows of the picked ids and of every ancestor above them, read with
+ * `?ids=` one level at a time: the picked rows, then their parents, then
+ * theirs, until a level names no row not read yet. A tree is as many reads as
+ * it is deep (a level is one request for all its ids), whatever its size, and
+ * a parent cycle ends because a row is never asked twice. A picked id no row
+ * answers (deleted, out of reach) is returned as not found.
+ */
+export async function readCascaderAncestry(
+  read: CascaderRowsReader,
+  keyMapping: CascaderKeyMapping,
+  ids: string[],
+): Promise<CascaderAncestry> {
+  const rowsByValue = new Map<string, CascaderRow>();
+  const asked = new Set<string>();
+  let pending = [...new Set(ids)];
+  while (pending.length > 0) {
+    for (const id of pending) asked.add(id);
+    const rows = await read(pending);
+    for (const row of rows) {
+      const value = rowValue(row, keyMapping.value);
+      if (value !== undefined) rowsByValue.set(value, row);
+    }
+    pending = [
+      ...new Set(
+        rows
+          .map((row) => rowValue(row, keyMapping.parent))
+          .filter(
+            (parent): parent is string =>
+              parent !== undefined && !asked.has(parent),
+          ),
+      ),
+    ];
+  }
+  return {
+    rows: [...rowsByValue.values()],
+    notFound: ids.filter((id) => !rowsByValue.has(id)),
+  };
+}
+
+/** The id of a picked value: an id, or a row carrying its id. */
+export function cascaderValueId(
+  item: unknown,
+  keyMapping: CascaderKeyMapping,
+): string | undefined {
+  const row = asPickedRow(item);
+  return row ? rowValue(row, keyMapping.value) : rowValue({ id: item }, "id");
+}
+
+/** What a cell already holds of its path, and the ids it still has to read. */
+export interface CascaderValueReads {
+  /** The rows the server joined: each one labels itself. */
+  joinedRows: CascaderRow[];
+  /** The picked ids sent plain, and the parents of the joined rows. */
+  idsToRead: string[];
+}
+
+/**
+ * Splits a cell's picked values into the rows the list joined and the ids it
+ * still reads: a plain id is read, a joined row only has its parent read
+ * (none for a root), so a list whose route joins the relation reads nothing
+ * for a pick at the top of the tree.
+ */
+export function cascaderValueReads(
+  values: unknown[],
+  keyMapping: CascaderKeyMapping,
+): CascaderValueReads {
+  const joinedRows = values
+    .map(asPickedRow)
+    .filter(
+      (row): row is CascaderRow =>
+        !!row && rowValue(row, keyMapping.value) !== undefined,
+    );
+  const plainIds = values
+    .filter((item) => !asPickedRow(item))
+    .map((item) => cascaderValueId(item, keyMapping))
+    .filter((id): id is string => id !== undefined);
+  const parents = joinedRows
+    .map((row) => rowValue(row, keyMapping.parent))
+    .filter((id): id is string => id !== undefined);
+  return { joinedRows, idsToRead: [...new Set([...plainIds, ...parents])] };
+}

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

@@ -290,12 +290,15 @@
         "forbidden_description": "Your role doesn't let you view this entry, so the form can't open on its current values. Ask an administrator for access.",
         "missing_title": "No entry selected",
         "missing_description": "This form shows one entry, and the address names none. Open it from an entry to see its values.",
+        "not_found_title": "Not found",
+        "not_found_description": "This entry does not exist, or no longer does: it may have been deleted.",
         "retry": "Try again"
       },
       "select_date": "Select date",
       "relation": {
         "selected_count": "{count} selected",
-        "add_new": "Add new entry"
+        "add_new": "Add new entry",
+        "not_found": "Not found"
       },
       "cascader": {
         "placeholder": "Select an item",

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

@@ -291,12 +291,15 @@
         "forbidden_description": "Votre rôle ne vous permet pas de voir cet élément, le formulaire ne peut donc pas s'ouvrir sur ses valeurs actuelles. Demandez l'accès à un administrateur.",
         "missing_title": "Aucun élément sélectionné",
         "missing_description": "Ce formulaire affiche un élément, et l'adresse n'en désigne aucun. Ouvrez-le depuis un élément pour voir ses valeurs.",
+        "not_found_title": "Introuvable",
+        "not_found_description": "Cet élément n'existe pas, ou plus : il a peut-être été supprimé.",
         "retry": "Réessayer"
       },
       "select_date": "Sélectionner une date",
       "relation": {
         "selected_count": "{count} sélectionné(s)",
-        "add_new": "Ajouter une nouvelle entrée"
+        "add_new": "Ajouter une nouvelle entrée",
+        "not_found": "Introuvable"
       },
       "cascader": {
         "placeholder": "Sélectionner un élément",