@multiplatform.one/frappe-ui 7.34.4 → 7.36.0

package/src/report/ReportGrid.phone.spec.tsx

@@ -0,0 +1,140 @@
+// The phone report Clay picked (FZ-7684, option B): four columns that fit
+// the screen, the record's image inside the title cell, units in the number
+// cells, and no row-number column or per-column filter row.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ReportGrid, reportColumnUnit } from "./ReportGrid";
+import {
+  buildGridRows,
+  phoneReportFieldnames,
+  type ReportColumnDef,
+  type ReportRow,
+} from "./reportViewModel";
+
+const columns: ReportColumnDef[] = [
+  {
+    fieldname: "pokemon_name",
+    label: "Pokemon Name",
+    fieldtype: "Data",
+    kind: "text",
+    width: 160,
+    align: "left",
+  },
+  {
+    fieldname: "poke_id",
+    label: "Poke ID",
+    fieldtype: "Int",
+    kind: "number",
+    width: 110,
+    align: "right",
+  },
+  {
+    fieldname: "height",
+    label: "Height (dm)",
+    fieldtype: "Int",
+    kind: "number",
+    width: 110,
+    align: "right",
+  },
+];
+
+const rows: ReportRow[] = [
+  {
+    name: "pikachu",
+    pokemon_name: "Pikachu",
+    poke_id: 25,
+    height: 4,
+    sprite_front: "/files/25.png",
+  },
+];
+
+function renderGrid() {
+  return renderWithProviders(
+    <ReportGrid
+      columns={columns}
+      rows={buildGridRows(rows, 0, 20)}
+      sort={{ field: "modified", order: "desc" }}
+      onSortChange={vi.fn()}
+      columnFilters={{}}
+      onColumnFilterChange={vi.fn()}
+      totals={[]}
+      imageField="sprite_front"
+      titleField="pokemon_name"
+      fileUrl={(path) => `https://site.test${path}`}
+    />,
+  );
+}
+
+describe("ReportGrid on a phone", () => {
+  const width = window.innerWidth;
+  beforeEach(() => {
+    window.innerWidth = 390;
+  });
+  afterEach(() => {
+    window.innerWidth = width;
+  });
+
+  it("drops the row numbers and the per-column filter row", () => {
+    renderGrid();
+    expect(screen.queryByLabelText("Row number")).toBeNull();
+    expect(screen.queryByLabelText("Filter Pokemon Name")).toBeNull();
+  });
+
+  it("heads a number column without its unit and puts the unit in the cell", () => {
+    renderGrid();
+    expect(screen.getByText("Height")).toBeTruthy();
+    expect(screen.queryByText("Height (dm)")).toBeNull();
+    const cells = Array.from(document.querySelectorAll("span, div")).filter(
+      (node) => node.textContent === "4 dm" && node.children.length > 0,
+    );
+    expect(cells.length).toBeGreaterThan(0);
+  });
+
+  it("leads the title cell with the record's image", () => {
+    const { container } = renderGrid();
+    const image = container.querySelector('img[src="https://site.test/files/25.png"]');
+    expect(image).not.toBeNull();
+  });
+});
+
+describe("reportColumnUnit", () => {
+  it("splits a short trailing unit off a number label only", () => {
+    expect(reportColumnUnit(columns[2])).toEqual({ label: "Height", unit: "dm" });
+    expect(reportColumnUnit({ ...columns[0], label: "Name (EN)" })).toEqual({ label: "Name (EN)" });
+    expect(
+      reportColumnUnit({ ...columns[2], fieldtype: "Currency", label: "Price (USD)" }),
+    ).toEqual({ label: "Price (USD)" });
+  });
+});
+
+describe("phoneReportFieldnames", () => {
+  it("picks the title, then numbers, up to four columns", () => {
+    expect(
+      phoneReportFieldnames({
+        title_field: "pokemon_name",
+        image_field: "sprite_front",
+        fields: [
+          { fieldname: "pokemon_name", fieldtype: "Data", label: "Pokemon Name", in_list_view: 1 },
+          { fieldname: "poke_id", fieldtype: "Int", label: "Poke ID", in_list_view: 1 },
+          { fieldname: "species", fieldtype: "Data", label: "Species", in_list_view: 1 },
+          { fieldname: "height", fieldtype: "Int", label: "Height (dm)" },
+          { fieldname: "weight", fieldtype: "Int", label: "Weight (hg)" },
+          { fieldname: "base_experience", fieldtype: "Int", label: "Base Experience" },
+          { fieldname: "sprite_front", fieldtype: "Attach Image", label: "Sprite (Front)" },
+        ],
+      }),
+    ).toEqual(["pokemon_name", "poke_id", "height", "weight"]);
+  });
+
+  it("falls back to flagged text fields when there are too few numbers", () => {
+    expect(
+      phoneReportFieldnames({
+        fields: [
+          { fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 },
+          { fieldname: "status", fieldtype: "Select", label: "Status", in_list_view: 1 },
+        ],
+      }),
+    ).toEqual(["name", "subject", "status"]);
+  });
+});

package/src/report/ReportGrid.tsx

@@ -8,11 +8,21 @@
 // scrollport and wraps header content in Text, so it cannot host an input
 // row under its headers today — capability gap flagged to the table
 // workstream; this grid is the interim desk-parity surface.
-import { ScrollView, Text, Tooltip, View, XStack, isWeb } from "@multiplatform.one/components";
+import {
+  Image,
+  ScrollView,
+  Text,
+  Tooltip,
+  View,
+  XStack,
+  getTokenValue,
+  isWeb,
+} from "@multiplatform.one/components";
 import { Input } from "@multiplatform.one/forms";
-import { Table } from "@multiplatform.one/table";
+import { Table, resolveSimpleTableColumns } from "@multiplatform.one/table";
 import {
   ensureFocusVisibleRing,
+  useLayoutSizeClass,
   formatCurrency,
   formatNumber,
   formatPercent,
@@ -20,6 +30,7 @@ import {
 import { CaretDownIcon, CaretUpDownIcon } from "@phosphor-icons/react";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { splitUnitLabel } from "../fieldRegistry";
 import { formatDateCell } from "../list/listFormat";
 import {
   REPORT_NUMERIC_FIELDTYPES,
@@ -32,6 +43,42 @@ import {
 
 const ROW_NUMBER_WIDTH = 56;
 
+/**
+ * Phone widths from the table package's column fitter (FZ-7698): numbers
+ * take a narrow token width, the title column takes what is left, so four
+ * columns fit without a sideways scroll.
+ */
+function fitColumns(
+  columns: readonly ReportColumnDef[],
+  rows: readonly ReportGridRow[],
+  titleFieldname: string | undefined,
+  viewportWidth: number,
+): ReportColumnDef[] {
+  if (viewportWidth <= 0) return [...columns];
+  const data = rows.flatMap((row) => (row.kind === "row" ? [row.row] : []));
+  const fitted = resolveSimpleTableColumns(
+    columns.map((column) => ({
+      accessorKey: column.fieldname,
+      header: column.label,
+      type: REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)
+        ? ("number" as const)
+        : ("text" as const),
+      ...(column.fieldname === titleFieldname
+        ? { width: { flex: 1, min: "$10" as const } }
+        : REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)
+          ? { width: "$8" as const }
+          : { width: "$11" as const }),
+    })),
+    data as Array<Record<string, any>>,
+    viewportWidth,
+    (token) => Number(getTokenValue(token as Parameters<typeof getTokenValue>[0], "size")),
+  );
+  return columns.map((column, index) => ({
+    ...column,
+    width: fitted[index]?.width ?? column.width,
+  }));
+}
+
 // ── LC-49/LC-50 row keyboard contract ───────────────────────────────
 // Local mirror of the table package's `isInteractiveInnerTarget`
 // (public/table/src/utils/rowPress.ts — internal util, not on the
@@ -92,6 +139,29 @@ export interface ReportGridProps {
   totals: readonly ReportTotalsCell[];
   /** Group-by column (group header rows span the grid). */
   groupByColumn?: ReportColumnDef;
+  /**
+   * The doctype's image field. On a phone the title cell leads with that
+   * image, so the record reads as one column instead of two.
+   */
+  imageField?: string;
+  /** The doctype's title field (defaults to the first column). */
+  titleField?: string;
+  /** Turns a stored file path into a URL the image can load. */
+  fileUrl?: (path: string) => string;
+}
+
+/**
+ * A number column's label and unit: "Height (dm)" heads the column as
+ * "Height" and each cell reads "3 dm", so the unit is never lost to a
+ * narrow header. Currency and percent carry their own symbol.
+ */
+export function reportColumnUnit(column: ReportColumnDef): { label: string; unit?: string } {
+  if (!REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)) return { label: column.label };
+  if (column.fieldtype === "Currency" || column.fieldtype === "Percent") {
+    return { label: column.label };
+  }
+  const split = splitUnitLabel(column.label);
+  return { label: String(split.label), unit: split.unit };
 }
 
 function alignToJustify(align: ReportColumnDef["align"]) {
@@ -116,10 +186,12 @@ function ReportCellValue({
   column,
   row,
   onOpenLink,
+  fileUrl,
 }: {
   column: ReportColumnDef;
   row: ReportRow;
   onOpenLink?: (doctype: string, name: string) => void;
+  fileUrl?: (path: string) => string;
 }) {
   const raw = row[column.fieldname];
   if (raw === null || raw === undefined || raw === "") {
@@ -138,12 +210,18 @@ function ReportCellValue({
   }
   if (REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)) {
     const numeric = Number(raw);
+    const { unit } = reportColumnUnit(column);
     return (
-      <Text fontSize="$3" color="$color12" fontFamily="$mono">
+      <Text fontSize="$3" color="$color12" fontFamily="$mono" numberOfLines={1}>
         {Number.isFinite(numeric) ? formatNumericCell(numeric, column.fieldtype) : String(raw)}
+        {unit ? <Text color="$color10">{` ${unit}`}</Text> : null}
       </Text>
     );
   }
+  if (column.fieldtype === "Attach Image" && typeof raw === "string") {
+    // Desk prints the path (formatters.js AttachImage); a report reads the image.
+    return <Image src={fileUrl ? fileUrl(raw) : raw} alt="" size="extraSmall" framed />;
+  }
   const value = String(raw);
   switch (column.fieldtype) {
     case "Date":
@@ -189,7 +267,7 @@ function ReportCellValue({
 }
 
 export function ReportGrid({
-  columns,
+  columns: columnsIn,
   rows,
   sort,
   onSortChange,
@@ -199,8 +277,19 @@ export function ReportGrid({
   onOpenLink,
   totals,
   groupByColumn,
+  imageField,
+  titleField,
+  fileUrl,
 }: ReportGridProps) {
   const { t } = useTranslation();
+  // A phone report fits its columns to the screen: no row numbers, no
+  // per-column filter row (the filter bar above owns filtering there), the
+  // title column takes the room the numbers leave (FZ-7684).
+  const compact = useLayoutSizeClass() === "compact";
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const titleFieldname = titleField ?? columnsIn[0]?.fieldname;
+  const columns = compact ? fitColumns(columnsIn, rows, titleFieldname, viewportWidth) : columnsIn;
+  const rowNumberWidth = compact ? 0 : ROW_NUMBER_WIDTH;
 
   const handleSortPress = useCallback(
     (fieldname: string) => {
@@ -310,10 +399,19 @@ export function ReportGrid({
   );
 
   const totalsByField = new Map(totals.map((total) => [total.fieldname, total]));
-  const gridWidth = ROW_NUMBER_WIDTH + columns.reduce((sum, column) => sum + column.width, 0);
+  const gridWidth = rowNumberWidth + columns.reduce((sum, column) => sum + column.width, 0);
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator flexGrow={0} flexShrink={1}>
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator
+      flexGrow={0}
+      flexShrink={1}
+      onLayout={(event) => {
+        const width = Math.floor(event.nativeEvent.layout.width);
+        setViewportWidth((previous) => (previous === width ? previous : width));
+      }}
+    >
       <Table
         minWidth={gridWidth}
         width={gridWidth}
@@ -326,14 +424,16 @@ export function ReportGrid({
         <Table.Head>
           {/* Header row: label + sort affordance (aria-sort, Enter/Space). */}
           <Table.Row>
-            <Table.HeaderCell
-              cellWidth={ROW_NUMBER_WIDTH}
-              aria-label={t("report.rowNumber", "Row number")}
-            >
-              <Text fontSize="$2" color="$color9">
-                #
-              </Text>
-            </Table.HeaderCell>
+            {compact ? null : (
+              <Table.HeaderCell
+                cellWidth={ROW_NUMBER_WIDTH}
+                aria-label={t("report.rowNumber", "Row number")}
+              >
+                <Text fontSize="$2" color="$color9">
+                  #
+                </Text>
+              </Table.HeaderCell>
+            )}
             {columns.map((column) => {
               const sorted = sort.field === column.fieldname ? sort.order : undefined;
               return (
@@ -377,7 +477,7 @@ export function ReportGrid({
                       hoverStyle={{ opacity: 0.8 }}
                     >
                       <Text fontSize="$3" fontWeight="400" numberOfLines={1}>
-                        {column.label}
+                        {reportColumnUnit(column).label}
                       </Text>
                       {/* Caret orientation mirrors DataTable's headers:
                           asc = caret-down, desc = rotated 180. */}
@@ -400,43 +500,44 @@ export function ReportGrid({
           </Table.Row>
           {/* Filter row — desk parity: one input per column, standard filter
               pipeline. Number/date accept comparison prefixes (>, <, >=…). */}
-          <Table.Row>
-            <Table.HeaderCell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$1.5" />
-            {columns.map((column) => {
-              const placeholder =
-                column.kind === "number" || column.kind === "date"
-                  ? t("report.filterComparablePlaceholder", "= > <…")
-                  : column.kind === "check"
-                    ? t("report.filterCheckPlaceholder", "yes / no")
-                    : t("report.filterPlaceholder", "Filter…");
-              return (
-                <Table.HeaderCell
-                  key={column.fieldname}
-                  cellWidth={column.width}
-                  paddingVertical="$1.5"
-                  overflow="visible"
-                >
-                  <View flex={1} minWidth={0} overflow="visible">
-                    <Input
-                      size="$2"
-                      compact
-                      value={columnFilters[column.fieldname] ?? ""}
-                      onChangeText={(next) => onColumnFilterChange(column.fieldname, next)}
-                      placeholder={placeholder}
-                      // inputProps is the eject that reaches the real input
-                      // element — a top-level aria-label stays on the wrapper.
-                      inputProps={{
-                        "aria-label": t("report.filterColumn", {
-                          defaultValue: "Filter {{column}}",
-                          column: column.label,
-                        }),
-                      }}
-                    />
-                  </View>
-                </Table.HeaderCell>
-              );
-            })}
-          </Table.Row>
+          {compact ? null : (
+            <Table.Row>
+              <Table.HeaderCell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$1.5" />
+              {columns.map((column) => {
+                const placeholder =
+                  column.kind === "number" || column.kind === "date"
+                    ? t("report.filterComparablePlaceholder", "= > <…")
+                    : column.kind === "check"
+                      ? t("report.filterCheckPlaceholder", "yes / no")
+                      : t("report.filterPlaceholder", "Filter…");
+                return (
+                  <Table.HeaderCell
+                    key={column.fieldname}
+                    cellWidth={column.width}
+                    paddingVertical="$1.5"
+                    overflow="visible"
+                  >
+                    <View flex={1} minWidth={0} overflow="visible">
+                      <Input
+                        size="$2"
+                        value={columnFilters[column.fieldname] ?? ""}
+                        onChangeText={(next) => onColumnFilterChange(column.fieldname, next)}
+                        placeholder={placeholder}
+                        // inputProps is the eject that reaches the real input
+                        // element — a top-level aria-label stays on the wrapper.
+                        inputProps={{
+                          "aria-label": t("report.filterColumn", {
+                            defaultValue: "Filter {{column}}",
+                            column: column.label,
+                          }),
+                        }}
+                      />
+                    </View>
+                  </Table.HeaderCell>
+                );
+              })}
+            </Table.Row>
+          )}
         </Table.Head>
         <Table.Body>
           {(() => {
@@ -476,21 +577,51 @@ export function ReportGrid({
                     ? (getRowPressProps(gridRow.row, pressCursor) as Record<string, unknown>)
                     : { "aria-label": gridRow.row.name })}
                 >
-                  <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
-                    <Text fontSize="$2" color="$color9" fontFamily="$mono">
-                      {gridRow.index}
-                    </Text>
-                  </Table.Cell>
-                  {columns.map((column) => (
-                    <Table.Cell
-                      key={column.fieldname}
-                      cellWidth={column.width}
-                      paddingVertical="$2"
-                      justifyContent={alignToJustify(column.align)}
-                    >
-                      <ReportCellValue column={column} row={gridRow.row} onOpenLink={onOpenLink} />
+                  {compact ? null : (
+                    <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
+                      <Text fontSize="$2" color="$color9" fontFamily="$mono">
+                        {gridRow.index}
+                      </Text>
                     </Table.Cell>
-                  ))}
+                  )}
+                  {columns.map((column) => {
+                    const image =
+                      compact && imageField && column.fieldname === titleFieldname
+                        ? gridRow.row[imageField]
+                        : undefined;
+                    return (
+                      <Table.Cell
+                        key={column.fieldname}
+                        cellWidth={column.width}
+                        paddingVertical="$2"
+                        justifyContent={alignToJustify(column.align)}
+                      >
+                        {typeof image === "string" && image ? (
+                          <XStack gap="$2" alignItems="center" minWidth="$0" flexShrink={1}>
+                            <Image
+                              src={fileUrl ? fileUrl(image) : image}
+                              alt=""
+                              size="extraSmall"
+                              framed
+                            />
+                            <ReportCellValue
+                              column={column}
+                              row={gridRow.row}
+                              onOpenLink={onOpenLink}
+                              fileUrl={fileUrl}
+                            />
+                          </XStack>
+                        ) : (
+                          <ReportCellValue
+                            column={column}
+                            row={gridRow.row}
+                            onOpenLink={onOpenLink}
+                            fileUrl={fileUrl}
+                          />
+                        )}
+                      </Table.Cell>
+                    );
+                  })}
                 </Table.Row>
               );
             });
@@ -499,13 +630,28 @@ export function ReportGrid({
         {totals.length > 0 && (
           <Table.Foot borderTopWidth={1} borderTopColor="$color6">
             <Table.Row backgroundColor="$color2">
-              <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
-                <Text fontSize="$2" fontWeight="400" color="$color10">
-                  {t("report.totals", "Totals")}
-                </Text>
-              </Table.Cell>
-              {columns.map((column) => {
+              {compact ? null : (
+                <Table.Cell cellWidth={ROW_NUMBER_WIDTH} paddingVertical="$2">
+                  <Text fontSize="$2" fontWeight="400" color="$color10">
+                    {t("report.totals", "Totals")}
+                  </Text>
+                </Table.Cell>
+              )}
+              {columns.map((column, columnIndex) => {
                 const total = totalsByField.get(column.fieldname);
+                if (compact && columnIndex === 0 && !total) {
+                  return (
+                    <Table.Cell
+                      key={column.fieldname}
+                      cellWidth={column.width}
+                      paddingVertical="$2"
+                    >
+                      <Text fontSize="$2" fontWeight="400" color="$color10">
+                        {t("report.totals", "Totals")}
+                      </Text>
+                    </Table.Cell>
+                  );
+                }
                 return (
                   <Table.Cell
                     key={column.fieldname}

package/src/report/ReportViewToolbar.tsx

@@ -108,7 +108,7 @@ export function ReportViewToolbar({
         <DropdownMenu.Trigger asChild>
           <Button size="$3" chromeless icon={ColumnsIcon}>
             {t("report.columns", {
-              defaultValue: "Columns ({{enabled}}/{{total}})",
+              defaultValue: "Columns · {{enabled}} of {{total}}",
               enabled: selected.length,
               total: columns.length,
             })}
@@ -249,7 +249,6 @@ export function ReportViewToolbar({
               <YStack flex={1} minWidth={0}>
                 <Input
                   size="$3"
-                  compact
                   value={saveName}
                   onChangeText={setSaveName}
                   placeholder={t("report.reportNamePlaceholder", "New report name")}

package/src/report/reportViewModel.ts

@@ -224,6 +224,44 @@ export function defaultReportFieldnames(meta?: ReportMetaSource): string[] {
   return out;
 }
 
+/** Columns a phone report shows before the reader picks more (FZ-7684). */
+export const PHONE_REPORT_COLUMNS = 4;
+
+/**
+ * A phone report's default columns: the title (the record, with its image
+ * drawn inside the title cell), then numbers, which stay narrow enough for
+ * four columns to fit a phone. Flagged list fields lead the numbers; text
+ * columns join only when there are too few numbers. Everything else is one
+ * tap away in the column picker.
+ */
+export function phoneReportFieldnames(
+  meta?: ReportMetaSource,
+  max: number = PHONE_REPORT_COLUMNS,
+): string[] {
+  const out: string[] = [];
+  const push = (fieldname?: string) => {
+    if (fieldname && !out.includes(fieldname) && out.length < max) out.push(fieldname);
+  };
+  push(meta?.title_field || "name");
+  const values = (meta?.fields ?? []).filter((field) => {
+    const fieldtype = String(field.fieldtype);
+    return (
+      !VALUELESS_FIELDTYPES.has(fieldtype) &&
+      !fieldtype.startsWith("Table") &&
+      field.report_hide !== 1 &&
+      field.fieldname !== meta?.image_field &&
+      fieldtype !== "Attach Image"
+    );
+  });
+  const flagged = (field: DocFieldMeta) =>
+    field.in_list_view === 1 || field.in_standard_filter === 1;
+  const numeric = (field: DocFieldMeta) => REPORT_NUMERIC_FIELDTYPES.has(String(field.fieldtype));
+  for (const field of values) if (flagged(field) && numeric(field)) push(field.fieldname);
+  for (const field of values) if (numeric(field)) push(field.fieldname);
+  for (const field of values) if (flagged(field)) push(field.fieldname);
+  return out;
+}
+
 /** Resolve selected fieldnames against the pickable set (drops unknowns). */
 export function resolveSelectedColumns(
   all: ReportColumnDef[],