@antelopejs/dms 0.9.8 → 0.10.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/KanbanBoard.vue

@@ -17,7 +17,12 @@ 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";
 
 const DEFAULT_COLUMN_PAGE_SIZE = 10;
 const DEFAULT_COLUMN_MAX_HEIGHT = "60vh";
@@ -69,6 +74,10 @@ 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 });
@@ -76,7 +85,8 @@ const groupByField = defineModel<string>("groupByField", { required: true });
 const { $authFetch } = useAuthFetch();
 const { processI18n, processApiMessage } = 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 +181,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;
@@ -348,6 +366,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 +403,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 +427,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 +541,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 +551,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 +583,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>