@antelopejs/dms 0.9.8 → 0.11.0

package/frontend-vue/layers/dms-ui/app/components/stat-group/StatGroup.vue

@@ -7,6 +7,9 @@ import type { Tone } from "../../types/tone";
 
 export type StatGroupLayout = "joined" | "cards";
 
+/** A container size: `sm` 24rem, `md` 28rem, `lg` 32rem, `xl` 36rem. */
+export type StatGroupColumnsFrom = "sm" | "md" | "lg" | "xl";
+
 export interface StatGroupItem {
   /** Stable key; the position is used without one. */
   id?: string;
@@ -42,6 +45,12 @@ interface StatGroupProps {
    * number of items.
    */
   columns?: number;
+  /**
+   * The group's own width from which all `columns` sit side by side (a
+   * container size); below it, one column (`joined`) or the narrow count of
+   * `cards`. Defaults to the usual steps for the column count.
+   */
+  columnsFrom?: StatGroupColumnsFrom;
   /**
    * Loading: with items, their well and value turn to skeletons (labels stay);
    * without, `skeletonCount` placeholder cells are drawn.
@@ -57,6 +66,7 @@ const props = withDefaults(defineProps<StatGroupProps>(), {
   items: () => [],
   layout: "joined",
   columns: undefined,
+  columnsFrom: undefined,
   loading: false,
   skeletonCount: 4,
   label: undefined,
@@ -87,6 +97,38 @@ const CARD_COLUMNS: Record<number, string> = {
   6: "grid-cols-2 @2xl:grid-cols-3 @5xl:grid-cols-6",
 };
 
+// `columnsFrom`: every column from that container size, literal for Tailwind.
+const COLUMNS_FROM: Record<StatGroupColumnsFrom, Record<number, string>> = {
+  sm: {
+    2: "@sm:grid-cols-2",
+    3: "@sm:grid-cols-3",
+    4: "@sm:grid-cols-4",
+    5: "@sm:grid-cols-5",
+    6: "@sm:grid-cols-6",
+  },
+  md: {
+    2: "@md:grid-cols-2",
+    3: "@md:grid-cols-3",
+    4: "@md:grid-cols-4",
+    5: "@md:grid-cols-5",
+    6: "@md:grid-cols-6",
+  },
+  lg: {
+    2: "@lg:grid-cols-2",
+    3: "@lg:grid-cols-3",
+    4: "@lg:grid-cols-4",
+    5: "@lg:grid-cols-5",
+    6: "@lg:grid-cols-6",
+  },
+  xl: {
+    2: "@xl:grid-cols-2",
+    3: "@xl:grid-cols-3",
+    4: "@xl:grid-cols-4",
+    5: "@xl:grid-cols-5",
+    6: "@xl:grid-cols-6",
+  },
+};
+
 // Every joined cell draws its top and start hairlines; the grid is pulled 1px
 // up and left under the card's clipping edge, so the first row and the first
 // column lose theirs at any column count and on every breakpoint.
@@ -98,9 +140,16 @@ const columnCount = computed(() => {
     props.columns ?? (props.items.length || props.skeletonCount || MIN_COLUMNS);
   return Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.round(wanted)));
 });
-const columnClass = computed(
-  () => (isJoined.value ? JOINED_COLUMNS : CARD_COLUMNS)[columnCount.value],
-);
+const columnClass = computed(() => {
+  const steps = (isJoined.value ? JOINED_COLUMNS : CARD_COLUMNS)[
+    columnCount.value
+  ]!;
+  const from =
+    props.columnsFrom && COLUMNS_FROM[props.columnsFrom][columnCount.value];
+  if (!from) return steps;
+  // The narrow count of the usual steps, then every column from the size.
+  return `${steps.split(" ")[0]} ${from}`;
+});
 const showPlaceholders = computed(
   () => props.loading && props.items.length === 0,
 );

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import type { TabProps } from "../../composables/tab/types";
 import { type TabBadges, TabVariant } from "../../composables/tab/types/props";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
@@ -41,7 +42,7 @@ const { data: fetchedBadges } = useChartFetch<TabBadges>({
   watchSource: () => JSON.stringify(watchState.value),
 });
 const { locale } = useI18n();
-const countFormat = computed(() => new Intl.NumberFormat(locale.value));
+const countFormat = computed(() => readableNumberFormat(locale.value));
 
 // Shown like a table view's tab counts: a mono counter, tinted on the
 // active tab.

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

@@ -17,7 +17,13 @@ import type { TableViewDisplayContext } from "../../composables/table-view/types
 import {
   buildCardProps,
   cardFieldColumns,
+  cardIdentity,
+  cardSubtitle,
 } from "../../build/composables/table-view/utils/card";
+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";
@@ -69,14 +75,19 @@ const props = defineProps<KanbanBoardProps>();
 const emit = defineEmits<{
   "card-click": [item: T];
   "card-delete": [item: T];
+  /** A card moved to another column and the change was saved. */
+  moved: [item: T, column: KanbanColumnDef];
+  /** The cards shown, column by column: what a row's drawer steps through. */
+  "rows-shown": [items: T[]];
 }>();
 
 const groupByField = defineModel<string>("groupByField", { required: true });
 
 const { $authFetch } = useAuthFetch();
-const { processI18n, processApiMessage } = useTranslation();
+const { processI18n } = useTranslation();
 const { getDataType } = useDataTypes();
-const { locale, t } = useI18n();
+const { t } = useI18n();
+const { processText } = useComposedText();
 const toast = useToast();
 
 const rowIdKey = computed(() => props.rowIdKey ?? DEFAULT_ROW_ID_KEY);
@@ -171,6 +182,14 @@ watch(
   { immediate: true },
 );
 
+// The cards in the order the board reads, column by column and top to
+// bottom in each: a card's drawer steps through them (J / K), and through the
+// cards a "load more" or a drag adds or moves.
+const shownRows = computed(() =>
+  boardColumns.value.flatMap((col) => cells.value[col.value]?.items ?? []),
+);
+watch(shownRows, (rows) => emit("rows-shown", rows), { immediate: true });
+
 const loadMore = async (col: KanbanColumnDef) => {
   const cell = cells.value[col.value];
   if (!cell || cell.loadingMore) return;
@@ -303,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),
   });
 };
 
@@ -348,6 +360,7 @@ const onColumnChange = async (
 
   try {
     await queued;
+    emit("moved", item, target);
     toast.add({
       color: Color.success,
       title: t("dms.table.kanban.move_success", { column: target.label }),
@@ -384,13 +397,18 @@ const cardColumns = computed(() =>
   }),
 );
 
-// The id line only adds something when the title is a label, not the id.
-const getCardId = (item: T): string | undefined => {
-  if (!props.labelKey) return undefined;
-  const label = get(item, props.labelKey);
-  if (label === undefined || label === null || label === "") return undefined;
-  return getRowId(item);
-};
+// The line above the title: the title column's identity subtitle, or the
+// row's own id key (`rowIdKey: "code"`) under a label — never the database
+// `_id`, which tells the reader nothing.
+const identity = computed(() => cardIdentity(props.columns, props.labelKey));
+const getCardLine = (item: T): string | undefined =>
+  readSubline(
+    cardSubtitle(item, identity.value, {
+      labelKey: props.labelKey,
+      rowIdKey: props.rowIdKey ?? DEFAULT_ROW_ID_KEY,
+    }),
+    { processText, isStringTranslated: false },
+  )?.text;
 
 const getCardTitle = (item: T): string => {
   if (props.labelKey) {
@@ -403,27 +421,10 @@ const getCardTitle = (item: T): string => {
 };
 
 // Renders a card field value the same way table cells do: through the
-// formatter registered for the column's data type.
-const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
-  const value = get(fieldProps.item, fieldProps.column.accessorKey);
-  const options = fieldProps.column.type.inputComponent?.options as
-    | Record<string, unknown>
-    | undefined;
-
-  if (value === null || value === undefined) {
-    return h("span", (options?.fallback as string) ?? "-");
-  }
-
-  const formatter = getDataType(fieldProps.column.type.id)?.formatter;
-  const rendered = formatter
-    ? formatter.default(value, locale.value, options)
-    : value;
-
-  if (typeof rendered === "string" || typeof rendered === "number") {
-    return h("span", String(rendered));
-  }
-  return rendered as ReturnType<typeof h>;
-};
+// column's display, else its data type.
+const { renderField } = useCardFields();
+const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) =>
+  renderField(fieldProps.column, fieldProps.item);
 </script>
 
 <template>
@@ -534,7 +535,9 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
                   @edit="emit('card-click', element)"
                   @delete="emit('card-delete', element)"
                 />
-                <!-- v2 card: id line (with its delete or lock), title, fields. -->
+                <!-- v2 card: subtitle line (with its delete or lock), title, fields.
+                     Each line shrinks below a long word: a UUID truncates
+                     rather than overflowing the card. -->
                 <div
                   v-else
                   class="border-default group hover:border-primary/35 grid cursor-pointer gap-2 rounded-lg border bg-(--dms-surface-card) px-3 pt-2.5 pb-[11px] text-[12.5px] shadow-xs transition-colors"
@@ -542,17 +545,18 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
                 >
                   <div
                     v-if="
-                      getCardId(element) ||
+                      getCardLine(element) ||
                       canDeleteItem(element) ||
                       isItemLocked(element)
                     "
                     class="-mb-0.5 flex min-h-5 items-center gap-2"
                   >
                     <span
-                      v-if="getCardId(element)"
-                      class="text-muted truncate font-mono text-[11.5px] font-medium"
+                      v-if="getCardLine(element)"
+                      class="text-muted min-w-0 truncate font-mono text-[11.5px] font-medium"
+                      :title="getCardLine(element)"
                     >
-                      #{{ getCardId(element) }}
+                      {{ getCardLine(element) }}
                     </span>
                     <UIcon
                       v-if="isItemLocked(element)"
@@ -573,7 +577,7 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
                     />
                   </div>
                   <p
-                    class="text-highlighted truncate text-[13px] leading-[1.3] font-semibold"
+                    class="text-highlighted min-w-0 truncate text-[13px] leading-[1.3] font-semibold"
                   >
                     {{ getCardTitle(element) }}
                   </p>

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

@@ -35,7 +35,8 @@ const onCardClick = (item: T) => props.context.actions.open(item);
 
 const onCardDelete = (item: T) => {
   const id = rowId(item);
-  if (id) props.context.actions.delete([id]);
+  // The card is not among the grid's rows: hand it, its dialog names it.
+  if (id) props.context.actions.delete([id], [item]);
 };
 
 const kanbanBoardRef = ref<{ refresh: () => Promise<void> } | null>(null);
@@ -63,5 +64,7 @@ defineExpose({ refresh: () => kanbanBoardRef.value?.refresh() });
     :delete-action="bridge?.deleteAction"
     @card-click="(item) => onCardClick(item as T)"
     @card-delete="(item) => onCardDelete(item as T)"
+    @moved="bridge?.onCardMoved?.()"
+    @rows-shown="(items) => context.setShownRows?.(items as T[])"
   />
 </template>