@multiplatform.one/backoffice 6.4.3 → 6.6.0

package/src/report/QueryReportScreen.tsx

@@ -0,0 +1,312 @@
+// Desk /app/query-report/<name> parity surface: report title header +
+// refresh, doc-level filter bar (when derivable from the Report doc), and
+// the query_report.run result in the catalog DataTable (client-side
+// sort/search/pagination — desk also loads query-report rows in one shot).
+// Standard reports declare filters in desk-side JS (not reachable via the
+// API), so those run unfiltered and failures surface a hint instead.
+import React from "react";
+import {
+  Button,
+  EmptyState,
+  PageHeader,
+  ScrollView,
+  Spinner,
+  Text,
+  XStack,
+  YStack,
+  isWeb,
+} from "@multiplatform.one/components";
+import { Input, Select } from "@multiplatform.one/forms";
+import { DataTable, DataTablePagination } from "@multiplatform.one/table";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { selectOptionsFromField } from "../list/filter-fields";
+import { buildQueryReportColumns } from "./queryReportColumns";
+import {
+  type QueryReportFilterMeta,
+  type QueryReportFilters,
+  type QueryReportFixture,
+  stripHtml,
+  useQueryReport,
+} from "./useQueryReport";
+
+export interface QueryReportScreenProps {
+  /** Report document name (proper-cased, e.g. "Permitted Documents For User"). */
+  reportName: string;
+  /** Fixture override for stories/tests (skips bench RPCs). */
+  fixture?: QueryReportFixture;
+  /** Doc-level filter values applied before the first run. */
+  initialFilters?: QueryReportFilters;
+  /** Hide result columns by fieldname. */
+  hiddenColumns?: readonly string[];
+  /** Open a Link cell's target document (default: navigate to its form). */
+  onRowOpen?: (doctype: string, name: string) => void;
+}
+
+const PAGE_SIZES = [20, 100, 500];
+
+function draftFromFilters(
+  filterMeta: readonly QueryReportFilterMeta[],
+  filters: QueryReportFilters,
+): Record<string, string> {
+  const draft: Record<string, string> = {};
+  for (const filter of filterMeta) {
+    const value = filters[filter.fieldname] ?? filter.default;
+    draft[filter.fieldname] = value === undefined || value === null ? "" : String(value);
+  }
+  return draft;
+}
+
+/**
+ * Minimal doc-level filter bar: one input per Report Filter row (Select
+ * fieldtypes get the options picker, everything else free text) + Apply.
+ */
+function ReportFilterBar({
+  filterMeta,
+  filters,
+  onApply,
+}: {
+  filterMeta: readonly QueryReportFilterMeta[];
+  filters: QueryReportFilters;
+  onApply: (next: QueryReportFilters) => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const [draft, setDraft] = useState<Record<string, string>>(() =>
+    draftFromFilters(filterMeta, filters),
+  );
+  useEffect(() => {
+    setDraft(draftFromFilters(filterMeta, filters));
+  }, [filterMeta, filters]);
+
+  const apply = useCallback(() => {
+    const next: QueryReportFilters = {};
+    for (const [fieldname, value] of Object.entries(draft)) {
+      if (value !== "") next[fieldname] = value;
+    }
+    onApply(next);
+  }, [draft, onApply]);
+
+  return (
+    <XStack gap="$2" flexWrap="wrap" alignItems="flex-end">
+      {filterMeta.map((filter) => {
+        const label = filter.label || filter.fieldname;
+        const requiredMark = filter.mandatory === 1 ? " *" : "";
+        return (
+          <YStack key={filter.fieldname} gap="$1" minWidth={180}>
+            <Text fontSize="$2" color="$color10">
+              {label}
+              {requiredMark}
+            </Text>
+            {filter.fieldtype === "Select" && filter.options ? (
+              <Select
+                value={draft[filter.fieldname] ?? ""}
+                onChange={(next) => {
+                  if (typeof next === "string")
+                    setDraft((previous) => ({ ...previous, [filter.fieldname]: next }));
+                }}
+                options={selectOptionsFromField(filter.options)}
+                placeholder={t("queryReport.selectValue", "Select...")}
+                size="$3"
+                compact
+                aria-label={label}
+              />
+            ) : (
+              <Input
+                value={draft[filter.fieldname] ?? ""}
+                onChangeText={(next) =>
+                  setDraft((previous) => ({ ...previous, [filter.fieldname]: next }))
+                }
+                placeholder={filter.fieldtype === "Date" ? "YYYY-MM-DD" : undefined}
+                size="$3"
+                compact
+                aria-label={label}
+              />
+            )}
+          </YStack>
+        );
+      })}
+      <Button size="$3" theme="blue" onPress={apply}>
+        {t("queryReport.apply", "Apply")}
+      </Button>
+    </XStack>
+  );
+}
+
+export function QueryReportScreen({
+  reportName,
+  fixture,
+  initialFilters,
+  hiddenColumns,
+  onRowOpen,
+}: QueryReportScreenProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const navigator = useBackofficeNavigator();
+  const paths = useBackofficePaths();
+  const report = useQueryReport(reportName, { fixture, initialFilters });
+
+  const handleOpenLink = useCallback(
+    (doctype: string, name: string) => {
+      if (onRowOpen) {
+        onRowOpen(doctype, name);
+        return;
+      }
+      navigator.navigate(paths.form(doctype, name));
+    },
+    [navigator, paths, onRowOpen],
+  );
+
+  const tableColumns = useMemo(() => {
+    const hidden = new Set(hiddenColumns ?? []);
+    const visible = hidden.size
+      ? report.columns.filter((column) => !hidden.has(column.fieldname))
+      : report.columns;
+    return buildQueryReportColumns({ columns: visible, onOpenLink: handleOpenLink });
+  }, [report.columns, handleOpenLink, hiddenColumns]);
+
+  const title = report.meta?.report_name || reportName;
+
+  const subtitle = useMemo(() => {
+    if (report.loading) return undefined;
+    const bits: string[] = [];
+    if (report.meta?.ref_doctype) bits.push(report.meta.ref_doctype);
+    if (!report.error && report.missingRequired.length === 0) {
+      bits.push(
+        t("queryReport.rowCount", {
+          defaultValue: "{{count}} row(s)",
+          count: report.rows.length,
+        }),
+      );
+      if (typeof report.executionTime === "number")
+        bits.push(
+          t("queryReport.executionTime", {
+            defaultValue: "ran in {{seconds}}s",
+            seconds: report.executionTime.toFixed(2),
+          }),
+        );
+    }
+    return bits.length > 0 ? bits.join(" · ") : undefined;
+  }, [report, t]);
+
+  let body: React.ReactNode;
+  if (report.loading) {
+    body = (
+      <YStack flex={1} alignItems="center" justifyContent="center" padding="$6">
+        <Spinner size="large" />
+      </YStack>
+    );
+  } else if (report.meta?.disabled === 1) {
+    body = (
+      <EmptyState
+        title={t("queryReport.disabledTitle", {
+          defaultValue: '"{{report}}" is disabled',
+          report: title,
+        })}
+        description={t(
+          "queryReport.disabledDescription",
+          "Enable the report from its Report document to run it",
+        )}
+      />
+    );
+  } else if (report.error) {
+    body = (
+      <YStack flex={1} gap="$2">
+        <EmptyState
+          intent="error"
+          title={t("queryReport.runError", {
+            defaultValue: 'Could not run "{{report}}"',
+            report: title,
+          })}
+          description={report.error.message}
+          action={
+            <Button theme="blue" onPress={report.reload}>
+              {t("queryReport.retry", "Retry")}
+            </Button>
+          }
+        />
+        <Text fontSize="$2" color="$color9" textAlign="center" paddingHorizontal="$4">
+          {t(
+            "queryReport.scriptFiltersHint",
+            "Some reports require filters that are declared in desk-side scripts and cannot be derived here yet",
+          )}
+        </Text>
+      </YStack>
+    );
+  } else if (report.missingRequired.length > 0) {
+    body = (
+      <EmptyState
+        title={t("queryReport.filtersRequiredTitle", "Filters required")}
+        description={t("queryReport.filtersRequiredDescription", {
+          defaultValue: "Set the required filter(s) to run this report: {{filters}}",
+          filters: report.missingRequired
+            .map((filter) => filter.label || filter.fieldname)
+            .join(", "),
+        })}
+      />
+    );
+  } else if (report.rows.length === 0) {
+    body = (
+      <EmptyState
+        title={t("queryReport.emptyTitle", "No results")}
+        description={t("queryReport.emptyDescription", "The report ran but returned no rows")}
+        action={
+          <Button chromeless onPress={report.reload}>
+            {t("queryReport.refresh", "Refresh")}
+          </Button>
+        }
+      />
+    );
+  } else {
+    body = (
+      <DataTable
+        key={reportName}
+        data={report.rows}
+        columns={tableColumns}
+        enableSorting
+        enableFiltering={false}
+        enablePagination
+        initialState={{ pagination: { pageIndex: 0, pageSize: PAGE_SIZES[0] } }}
+        renderPagination={(paginationProps) => (
+          <DataTablePagination {...paginationProps} pageSizeOptions={[...PAGE_SIZES]} compact />
+        )}
+      />
+    );
+  }
+
+  const content = (
+    <YStack flex={1} gap="$3" padding="$4">
+      <PageHeader
+        title={title}
+        subtitle={subtitle}
+        actions={
+          <XStack gap="$2" alignItems="center">
+            {report.running && !report.loading ? <Spinner size="small" /> : null}
+            <Button size="$2" chromeless onPress={report.reload} disabled={report.loading}>
+              {t("queryReport.refresh", "Refresh")}
+            </Button>
+          </XStack>
+        }
+      />
+      {report.serverMessage ? (
+        <Text fontSize="$2" color="$color10">
+          {stripHtml(report.serverMessage)}
+        </Text>
+      ) : null}
+      {report.filterMeta.length > 0 ? (
+        <ReportFilterBar
+          filterMeta={report.filterMeta}
+          filters={report.filters}
+          onApply={report.setFilters}
+        />
+      ) : null}
+      <YStack flex={1} minWidth={0}>
+        {body}
+      </YStack>
+    </YStack>
+  );
+
+  // Native has no page-level scroll (DoctypeListScreen precedent) — wrap so
+  // rows below the fold stay reachable. Web keeps the flex layout.
+  return isWeb ? content : <ScrollView flex={1}>{content}</ScrollView>;
+}

package/src/report/queryReportColumns.tsx

@@ -0,0 +1,106 @@
+// Query-report column meta → DataTable columns with fieldtype-aware cells:
+// numerics right-aligned, Date/Datetime trimmed like desk lists, Link cells
+// navigable to the target doc form, HTML values (desk anchor markup)
+// flattened to text.
+import React from "react";
+import { Text } from "@multiplatform.one/components";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { formatDateCell } from "../list/listFormat";
+import { type QueryReportColumn, type QueryReportRow, stripHtml } from "./useQueryReport";
+
+const NUMERIC_FIELDTYPES = new Set(["Currency", "Float", "Int", "Percent", "Duration"]);
+
+export interface BuildQueryReportColumnsArgs {
+  columns: readonly QueryReportColumn[];
+  /** Open a Link cell's target document (doctype comes from column options). */
+  onOpenLink?: (doctype: string, name: string) => void;
+}
+
+function queryReportCell(
+  column: QueryReportColumn,
+  onOpenLink?: (doctype: string, name: string) => void,
+) {
+  return ({ getValue }: { getValue: () => unknown }) => {
+    const raw = getValue();
+    if (raw === null || raw === undefined || raw === "") {
+      return (
+        <Text fontSize="$3" color="$color8">
+          —
+        </Text>
+      );
+    }
+    if (column.fieldtype === "Check") {
+      return (
+        <Text fontSize="$3" color={raw ? "$green11" : "$color8"}>
+          {raw ? "✓" : "—"}
+        </Text>
+      );
+    }
+    const value = String(raw);
+    if (NUMERIC_FIELDTYPES.has(column.fieldtype)) {
+      return (
+        <Text fontSize="$3" color="$color12" textAlign="right">
+          {value}
+        </Text>
+      );
+    }
+    switch (column.fieldtype) {
+      case "Date":
+      case "Datetime":
+        return (
+          <Text fontSize="$3" color="$color11">
+            {formatDateCell(value)}
+          </Text>
+        );
+      case "Link": {
+        const doctype = column.options;
+        if (doctype && onOpenLink) {
+          return (
+            <Text
+              fontSize="$3"
+              color="$color11"
+              textDecorationLine="underline"
+              cursor="pointer"
+              numberOfLines={1}
+              role="link"
+              onPress={(event) => {
+                event?.stopPropagation?.();
+                onOpenLink(doctype, value);
+              }}
+            >
+              {value}
+            </Text>
+          );
+        }
+        return (
+          <Text fontSize="$3" color="$color11" numberOfLines={1}>
+            {value}
+          </Text>
+        );
+      }
+      default:
+        return (
+          <Text fontSize="$3" color="$color11" numberOfLines={1}>
+            {stripHtml(value)}
+          </Text>
+        );
+    }
+  };
+}
+
+/** Build DataTable columns for a query-report run result. */
+export function buildQueryReportColumns({
+  columns,
+  onOpenLink,
+}: BuildQueryReportColumnsArgs): DataTableColumn<QueryReportRow>[] {
+  return columns.map((column) => ({
+    id: column.fieldname,
+    header: column.label,
+    // accessorFn (not accessorKey): report fieldnames may contain path-y
+    // characters like "assigned_to/owner" that key-based access mangles.
+    accessorFn: (row: QueryReportRow) => row[column.fieldname],
+    ...(NUMERIC_FIELDTYPES.has(column.fieldtype) ? { align: "right" as const } : {}),
+    ...(column.width ? { width: column.width } : {}),
+    cell: queryReportCell(column, onOpenLink),
+  }));
+}