@multiplatform.one/backoffice 6.4.2 → 6.6.0

package/src/list/bulk-edit-dialog.tsx

@@ -0,0 +1,297 @@
+// Bulk edit dialog (desk "Bulk Edit"): pick an editable field, enter the new
+// value (the control follows the fieldtype), then frappe.client.set_value per
+// selected document. Per-row failures surface in the result toast — desk's
+// bulk_update endpoint hides per-row outcomes and backgrounds ≥20 docs, so
+// the per-doc loop keeps reporting honest (same trade-off as bulkDelete).
+import React from "react";
+import { ConfirmDialog, Text, YStack, notify } from "@multiplatform.one/components";
+import type { FrappeApp } from "@multiplatform.one/frappe";
+import {
+  Check,
+  Data,
+  Date as DateInput,
+  Link,
+  LongText,
+  Numeric,
+  Select,
+  type NumericType,
+} from "@multiplatform.one/frappe-ui";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { DocFieldMeta, DoctypeMeta } from "../shared/useDoctypeMeta";
+import { useFrappeApp } from "../shared/useFrappeApp";
+import type { BulkResult } from "./bulkActions";
+
+/**
+ * Fieldtypes with no stored value (layout / display / child rows) plus
+ * surfaces a one-line bulk control cannot sensibly set (attachments,
+ * signatures, geolocation). Mirrors desk's `frappe.model.no_value_type`.
+ */
+export const BULK_EDIT_EXCLUDED_FIELDTYPES = new Set([
+  "Section Break",
+  "Column Break",
+  "Tab Break",
+  "HTML",
+  "Heading",
+  "Button",
+  "Image",
+  "Fold",
+  "Table",
+  "Table MultiSelect",
+  "Attach",
+  "Attach Image",
+  "Signature",
+  "Geolocation",
+  "Read Only",
+]);
+
+/** Editable (writable, visible, value-bearing) fields for bulk edit. */
+export function bulkEditableFields(meta?: DoctypeMeta): DocFieldMeta[] {
+  if (!meta?.fields) return [];
+  return meta.fields.filter(
+    (field) =>
+      Boolean(field.fieldname) &&
+      !BULK_EDIT_EXCLUDED_FIELDTYPES.has(field.fieldtype) &&
+      !field.read_only &&
+      !field.hidden,
+  );
+}
+
+export type BulkEditValue = string | number | boolean | undefined;
+
+/**
+ * Set one field on every document via frappe.client.set_value
+ * (POST {doctype, name, fieldname, value}); failures collected per row.
+ * Empty string clears the field (desk sends `value || null`).
+ */
+export async function bulkSetValue(
+  app: FrappeApp,
+  doctype: string,
+  names: string[],
+  fieldname: string,
+  value: BulkEditValue,
+): Promise<BulkResult> {
+  const payloadValue = value === "" || value === undefined ? null : value;
+  const settled = await Promise.allSettled(
+    names.map((name) =>
+      app.call().post("frappe.client.set_value", { doctype, name, fieldname, value: payloadValue }),
+    ),
+  );
+  const result: BulkResult = { succeeded: [], failed: [] };
+  settled.forEach((outcome, index) => {
+    const name = names[index];
+    if (outcome.status === "fulfilled") result.succeeded.push(name);
+    else {
+      const reason = outcome.reason;
+      result.failed.push({
+        name,
+        message: reason instanceof Error ? reason.message : String(reason),
+      });
+    }
+  });
+  return result;
+}
+
+const NUMERIC_FIELDTYPES: Record<string, NumericType> = {
+  Int: "Int",
+  Float: "Float",
+  Currency: "Currency",
+  Percent: "Percent",
+};
+
+const DATE_FIELDTYPES: Record<string, "date" | "datetime" | "time"> = {
+  Date: "date",
+  Datetime: "datetime",
+  Time: "time",
+};
+
+const MULTILINE_FIELDTYPES = new Set([
+  "Long Text",
+  "Text",
+  "Small Text",
+  "Text Editor",
+  "Markdown Editor",
+  "Code",
+  "HTML Editor",
+]);
+
+export interface BulkEditDialogProps {
+  doctype: string;
+  meta?: DoctypeMeta;
+  /** Documents to update. */
+  names: string[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Fired after the update ran (even with partial failures). */
+  onDone?: () => void;
+}
+
+export function BulkEditDialog({
+  doctype,
+  meta,
+  names,
+  open,
+  onOpenChange,
+  onDone,
+}: BulkEditDialogProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const app = useFrappeApp();
+  const [fieldname, setFieldname] = useState("");
+  const [value, setValue] = useState<BulkEditValue>(undefined);
+  const [busy, setBusy] = useState(false);
+
+  const fields = useMemo(() => bulkEditableFields(meta), [meta]);
+  const field = fields.find((candidate) => candidate.fieldname === fieldname);
+
+  const handleConfirm = async () => {
+    if (!app || !field || names.length === 0) return;
+    setBusy(true);
+    try {
+      // Check fields store 0/1 ints server-side.
+      const outgoing = field.fieldtype === "Check" ? (value ? 1 : 0) : value;
+      const result = await bulkSetValue(app, doctype, names, field.fieldname, outgoing);
+      if (result.failed.length > 0) {
+        notify({
+          severity: "warning",
+          scope: "page",
+          body: t("list.editPartial", {
+            defaultValue: "Updated {{ok}} document(s); {{failed}} failed ({{names}})",
+            ok: result.succeeded.length,
+            failed: result.failed.length,
+            names: result.failed.map((failure) => failure.name).join(", "),
+          }),
+        });
+      } else {
+        notify({
+          severity: "success",
+          scope: "page",
+          body: t("list.editDone", {
+            defaultValue: "Updated {{field}} on {{count}} document(s)",
+            field: field.label || field.fieldname,
+            count: result.succeeded.length,
+          }),
+        });
+      }
+      setFieldname("");
+      setValue(undefined);
+      onOpenChange(false);
+      onDone?.();
+    } catch (error) {
+      notify({
+        severity: "error",
+        scope: "page",
+        body: error instanceof Error ? error.message : t("list.editFailed", "Bulk edit failed"),
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const valueLabel = t("list.editValue", "Value");
+  const renderValueControl = () => {
+    if (!field) return null;
+    if (field.fieldtype === "Check") {
+      return (
+        <Check label={valueLabel} value={Boolean(value)} onChange={(next) => setValue(next)} />
+      );
+    }
+    if (field.fieldtype === "Select") {
+      const options = (field.options ?? "").split("\n").filter(Boolean);
+      return (
+        <Select
+          label={valueLabel}
+          options={options}
+          value={typeof value === "string" ? value : undefined}
+          onChange={(next) => setValue(next)}
+          placeholder={t("list.editSelectPlaceholder", "Select a value")}
+        />
+      );
+    }
+    if (field.fieldtype === "Link" && field.options) {
+      return (
+        <Link
+          label={valueLabel}
+          doctype={field.options}
+          value={typeof value === "string" ? value : ""}
+          onChange={(next) => setValue(next)}
+        />
+      );
+    }
+    const numericType = NUMERIC_FIELDTYPES[field.fieldtype];
+    if (numericType) {
+      return (
+        <Numeric
+          label={valueLabel}
+          type={numericType}
+          value={typeof value === "number" ? value : undefined}
+          onChange={(next) => setValue(next)}
+        />
+      );
+    }
+    const dateType = DATE_FIELDTYPES[field.fieldtype];
+    if (dateType) {
+      return (
+        <DateInput
+          label={valueLabel}
+          type={dateType}
+          value={typeof value === "string" ? value : ""}
+          onChange={(next) => setValue(next)}
+        />
+      );
+    }
+    if (MULTILINE_FIELDTYPES.has(field.fieldtype)) {
+      return (
+        <LongText
+          label={valueLabel}
+          value={typeof value === "string" ? value : ""}
+          onChange={(next) => setValue(next)}
+        />
+      );
+    }
+    return (
+      <Data
+        label={valueLabel}
+        value={typeof value === "string" ? value : ""}
+        onChange={(next) => setValue(next)}
+      />
+    );
+  };
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t("list.editTitle", "Bulk Edit")}
+      confirmLabel={busy ? t("list.editing", "Updating…") : t("list.editConfirm", "Update")}
+      confirmDisabled={!field || busy}
+      confirmDisabledReason={field ? undefined : t("list.editPickField", "Pick a field to update")}
+      onConfirm={() => {
+        void handleConfirm();
+      }}
+    >
+      <YStack gap="$3" minWidth={280}>
+        <Text color="$color11" fontSize="$3">
+          {t("list.editBody", {
+            defaultValue: "Set one field on {{count}} selected document(s)",
+            count: names.length,
+          })}
+        </Text>
+        <Select
+          label={t("list.editField", "Field")}
+          options={fields.map((candidate) => ({
+            label: candidate.label || candidate.fieldname,
+            value: candidate.fieldname,
+          }))}
+          value={fieldname || undefined}
+          onChange={(next) => {
+            setFieldname(next);
+            setValue(undefined);
+          }}
+          placeholder={t("list.editFieldPlaceholder", "Select a field")}
+        />
+        {renderValueControl()}
+      </YStack>
+    </ConfirmDialog>
+  );
+}

package/src/list/bulk-export.tsx

@@ -0,0 +1,91 @@
+// Client-side CSV export for the selected rows (desk "Export" parity, scoped
+// to the selection): fetch the selected docs' list-view fields via
+// app.db().getDocList, build the CSV locally, download it web-side.
+// KNOWN GAP: native/GTK have no document/Blob download path — callers get
+// `downloaded: false` plus the CSV text and should surface the gap honestly.
+import React from "react";
+import type { FrappeApp } from "@multiplatform.one/frappe";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { BULK_EDIT_EXCLUDED_FIELDTYPES } from "./bulk-edit-dialog";
+
+function formatCsvCell(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  const text = typeof value === "object" ? JSON.stringify(value) : String(value);
+  return /[",\n\r]/.test(text) ? `"${text.replaceAll('"', '""')}"` : text;
+}
+
+/** Build a CSV string (CRLF rows, header first) from column keys + row objects. */
+export function buildCsv(columns: string[], rows: Record<string, unknown>[]): string {
+  const lines = [columns.map(formatCsvCell).join(",")];
+  for (const row of rows) {
+    lines.push(columns.map((column) => formatCsvCell(row[column])).join(","));
+  }
+  return lines.join("\r\n");
+}
+
+/** Value-bearing list-view fieldnames from meta (always includes "name"). */
+export function exportFieldnames(meta?: DoctypeMeta): string[] {
+  const fieldnames = ["name"];
+  for (const field of meta?.fields ?? []) {
+    if (!field.fieldname || field.fieldname === "name") continue;
+    if (!field.in_list_view) continue;
+    if (BULK_EDIT_EXCLUDED_FIELDTYPES.has(field.fieldtype)) continue;
+    fieldnames.push(field.fieldname);
+  }
+  return fieldnames;
+}
+
+/** Trigger a browser download. Returns false where the DOM APIs are absent. */
+export function downloadTextFile(filename: string, text: string, mime = "text/csv"): boolean {
+  if (
+    typeof document === "undefined" ||
+    typeof Blob === "undefined" ||
+    typeof URL === "undefined" ||
+    typeof URL.createObjectURL !== "function"
+  ) {
+    return false;
+  }
+  const url = URL.createObjectURL(new Blob([text], { type: `${mime};charset=utf-8` }));
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+  return true;
+}
+
+export interface BulkExportResult {
+  /** CSV text (also returned when the platform cannot download). */
+  csv: string;
+  /** Rows actually fetched — may be fewer than requested (permissions). */
+  rowCount: number;
+  /** False on platforms without a download path (native/GTK). */
+  downloaded: boolean;
+}
+
+/** Fetch the selected docs and export them as CSV (selection-scoped export). */
+export async function bulkExportCsv(
+  app: FrappeApp,
+  doctype: string,
+  names: string[],
+  meta?: DoctypeMeta,
+): Promise<BulkExportResult> {
+  const fields = exportFieldnames(meta);
+  const rows = await app.db().getDocList(doctype, {
+    fields,
+    filters: [["name", "in", names]],
+    limit: 0,
+  });
+  const order = new Map(names.map((name, index) => [name, index]));
+  const sorted = [...rows].sort(
+    (a, b) =>
+      (order.get(String(a.name)) ?? Number.MAX_SAFE_INTEGER) -
+      (order.get(String(b.name)) ?? Number.MAX_SAFE_INTEGER),
+  );
+  const csv = buildCsv(fields, sorted as Record<string, unknown>[]);
+  const filename = `${doctype.toLowerCase().replace(/\s+/g, "-")}.csv`;
+  const downloaded = downloadTextFile(filename, csv);
+  return { csv, rowCount: sorted.length, downloaded };
+}

package/src/list/bulk-submit-cancel.tsx

@@ -0,0 +1,38 @@
+// Bulk submit / cancel for submittable doctypes (desk parity) via
+// frappe.desk.doctype.bulk_update.bulk_update.submit_cancel_or_update_docs
+// {doctype, docnames: JSON names[], action}. Probed against the bench:
+// <20 docs runs sync and returns the failed docnames; 20–500 docs the server
+// backgrounds the job (message is null → `queued`); >500 the server throws.
+import React from "react";
+import type { FrappeApp } from "@multiplatform.one/frappe";
+
+export type BulkDocstatusAction = "submit" | "cancel";
+
+export interface BulkSubmitCancelResult {
+  /** Docnames the server reported as failed (sync path only). */
+  failed: string[];
+  /** True when the server backgrounded the job (≥20 docs) — no per-doc report. */
+  queued: boolean;
+  attempted: number;
+}
+
+export async function bulkSubmitCancel(
+  app: FrappeApp,
+  doctype: string,
+  names: string[],
+  action: BulkDocstatusAction,
+): Promise<BulkSubmitCancelResult> {
+  const res = await app.call().post<{
+    message?: string[] | null;
+  }>("frappe.desk.doctype.bulk_update.bulk_update.submit_cancel_or_update_docs", {
+    doctype,
+    docnames: JSON.stringify(names),
+    action,
+  });
+  const failed = res.payload?.message;
+  return {
+    failed: Array.isArray(failed) ? failed : [],
+    queued: !Array.isArray(failed),
+    attempted: names.length,
+  };
+}

package/src/list/bulkActions.ts

@@ -0,0 +1,95 @@
+// RPC helpers behind the list bulk actions (probed against a stock bench):
+// - delete: per-row REST delete so per-row failures are reportable
+//   (frappe.desk.reportview.delete_items exists but swallows failures)
+// - assign: frappe.desk.form.assign_to.add_multiple
+//   {doctype, name: JSON names[], assign_to: JSON users[], description}
+// - tags: frappe.desk.doctype.tag.tag.add_tag {tag, dt, dn} per document
+// - like: frappe.desk.like.toggle_like {doctype, name, add: "Yes"|"No"}
+import type { FrappeApp } from "@multiplatform.one/frappe";
+
+export interface BulkFailure {
+  name: string;
+  message: string;
+}
+
+export interface BulkResult {
+  succeeded: string[];
+  failed: BulkFailure[];
+}
+
+function toMessage(reason: unknown): string {
+  if (reason instanceof Error) return reason.message;
+  return String(reason);
+}
+
+async function settlePerDoc(
+  names: string[],
+  run: (name: string) => Promise<unknown>,
+): Promise<BulkResult> {
+  const settled = await Promise.allSettled(names.map((name) => run(name)));
+  const result: BulkResult = { succeeded: [], failed: [] };
+  settled.forEach((outcome, index) => {
+    const name = names[index];
+    if (outcome.status === "fulfilled") result.succeeded.push(name);
+    else result.failed.push({ name, message: toMessage(outcome.reason) });
+  });
+  return result;
+}
+
+/** Delete each document; failures are collected per row, not thrown. */
+export function bulkDelete(app: FrappeApp, doctype: string, names: string[]): Promise<BulkResult> {
+  return settlePerDoc(names, (name) => app.db().deleteDoc({ doctype, name }));
+}
+
+/** Assign users to every selected document (desk ToDo assignments). */
+export async function bulkAssign(
+  app: FrappeApp,
+  doctype: string,
+  names: string[],
+  assignTo: string[],
+  description?: string,
+): Promise<void> {
+  await app.call().post("frappe.desk.form.assign_to.add_multiple", {
+    doctype,
+    name: JSON.stringify(names),
+    assign_to: JSON.stringify(assignTo),
+    ...(description ? { description } : {}),
+  });
+}
+
+/** Add a tag to every selected document; per-row failures collected.
+ * Sequential on purpose: parallel `add_tag` calls race on creating the Tag
+ * master for a brand-new tag — every call but the winner fails with
+ * DuplicateEntry (verified against the live bench: 2 selected docs, only one
+ * got the new tag). The first call creates the master; the rest reuse it. */
+export async function bulkAddTag(
+  app: FrappeApp,
+  doctype: string,
+  names: string[],
+  tag: string,
+): Promise<BulkResult> {
+  const result: BulkResult = { succeeded: [], failed: [] };
+  for (const name of names) {
+    try {
+      await app.call().post("frappe.desk.doctype.tag.tag.add_tag", { tag, dt: doctype, dn: name });
+      result.succeeded.push(name);
+    } catch (reason) {
+      result.failed.push({ name, message: toMessage(reason) });
+    }
+  }
+  return result;
+}
+
+/** Toggle the session user's like on a document. */
+export async function toggleLike(
+  app: FrappeApp,
+  doctype: string,
+  name: string,
+  liked: boolean,
+): Promise<void> {
+  await app.call().post("frappe.desk.like.toggle_like", {
+    doctype,
+    name,
+    add: liked ? "Yes" : "No",
+  });
+}

package/src/list/filter-chips.tsx

@@ -0,0 +1,43 @@
+/**
+ * Active filter chips — desk shows every applied filter as a removable
+ * chip under the list header (HONEST STATE: the chip is how the user sees
+ * a filter acting on the data). Per-chip dismiss removes that tuple;
+ * "Clear filters" drops them all.
+ */
+import { Button, Chip, XStack } from "@multiplatform.one/components";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import type { FrappeFilters } from "../shared/types";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { filterTupleLabel, filterableFieldsFromMeta } from "./filter-fields";
+
+export interface FilterChipsProps {
+  meta?: DoctypeMeta;
+  filters: FrappeFilters;
+  onFiltersChange: (filters: FrappeFilters) => void;
+}
+
+export function FilterChips({ meta, filters, onFiltersChange }: FilterChipsProps) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const fields = useMemo(() => filterableFieldsFromMeta(meta), [meta]);
+  if (!filters.length) return null;
+  return (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      {filters.map((tuple, index) => (
+        <Chip
+          key={`${tuple[0]}-${tuple[1]}-${index}`}
+          color="blue"
+          onDismiss={() => onFiltersChange(filters.filter((_, i) => i !== index))}
+        >
+          {filterTupleLabel(fields, tuple)}
+        </Chip>
+      ))}
+      {filters.length > 1 && (
+        <Button size="$2" chromeless onPress={() => onFiltersChange([])}>
+          {t("list.clearFilters", "Clear filters")}
+        </Button>
+      )}
+    </XStack>
+  );
+}