@multiplatform.one/frappe-ui 6.0.0

package/dist/cjs/FrappeReportBuilder.cjs

@@ -0,0 +1,351 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeReportBuilder_exports = {};
+__export(FrappeReportBuilder_exports, {
+  FrappeReportBuilder: () => FrappeReportBuilder
+});
+module.exports = __toCommonJS(FrappeReportBuilder_exports);
+var import_frappe = require("@multiplatform.one/frappe");
+var import_platform = require("@multiplatform.one/platform");
+var import_components = require("@multiplatform.one/components");
+var import_store = require("@multiplatform.one/store");
+var import_react = require("react");
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_react2 = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_FrappeProvider = require("./FrappeProvider.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function getSavedReportsKey(doctype) {
+  return `frappe-report-${doctype}`;
+}
+async function loadSavedReports(doctype) {
+  try {
+    const raw = await Promise.resolve(import_store.storage.getItem(getSavedReportsKey(doctype)));
+    if (raw) return JSON.parse(raw);
+  } catch {}
+  return [];
+}
+async function persistSavedReports(doctype, reports) {
+  try {
+    await Promise.resolve(import_store.storage.setItem(getSavedReportsKey(doctype), JSON.stringify(reports)));
+  } catch {}
+}
+function FrappeReportBuilder({
+  doctype,
+  initialColumns,
+  initialGroupBy,
+  filters,
+  showChart = false,
+  onExport,
+  baseURL,
+  auth,
+  syncOptions,
+  ...stackProps
+}) {
+  const config = (0, import_FrappeProvider.useFrappeConfig)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const finalBaseURL = baseURL ?? config?.baseURL;
+  const finalAuth = auth ?? config?.auth;
+  const finalSyncOptions = syncOptions ?? config?.syncOptions;
+  if (!finalBaseURL) {
+    throw new Error("FrappeReportBuilder requires baseURL prop or FrappeProvider with baseURL");
+  }
+  const connectionConfig = {
+    baseURL: finalBaseURL,
+    socketPort: config?.socketPort,
+    auth: finalAuth,
+    syncOptions: finalSyncOptions,
+    fixtures: config?.fixtures
+  };
+  const {
+    meta,
+    isLoading: isMetaLoading
+  } = (0, import_frappe.useDocTypeMeta)(connectionConfig, doctype);
+  const allColumns = (0, import_react.useMemo)(() => {
+    if (initialColumns) return initialColumns;
+    if (!meta) return [];
+    return meta.fields.filter(f => f.fieldtype !== "Section Break" && f.fieldtype !== "Column Break" && f.fieldtype !== "Tab Break").map(f => ({
+      fieldname: f.fieldname,
+      label: f.label || f.fieldname,
+      fieldtype: f.fieldtype,
+      enabled: f.in_list_view ?? false
+    }));
+  }, [initialColumns, meta]);
+  const fetchFields = (0, import_react.useMemo)(() => {
+    const fieldNames = allColumns.map(c => c.fieldname);
+    if (!fieldNames.includes("name")) {
+      fieldNames.unshift("name");
+    }
+    return fieldNames;
+  }, [allColumns]);
+  const collection = (0, import_frappe.useFrappeCollection)(connectionConfig, doctype, {
+    fields: fetchFields,
+    filters
+  });
+  const {
+    data: rawData,
+    isLoading
+  } = (0, import_frappe.useLiveQuery)(q => collection ? q.from({
+    _list: collection
+  }) : null, [collection]);
+  const data = (0, import_react.useMemo)(() => rawData ?? [], [rawData]);
+  const [groupBy, setGroupBy] = (0, import_react.useState)(initialGroupBy ?? null);
+  const [enabledColumns, setEnabledColumns] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    if (allColumns.length > 0 && enabledColumns.length === 0) {
+      const initial = allColumns.filter(c => c.enabled).map(c => c.fieldname);
+      if (initial.length === 0) {
+        setEnabledColumns(allColumns.slice(0, 5).map(c => c.fieldname));
+      } else {
+        setEnabledColumns(initial);
+      }
+    }
+  }, [allColumns, enabledColumns.length]);
+  const [savedReports, setSavedReports] = (0, import_react.useState)([]);
+  const [saveDialogOpen, setSaveDialogOpen] = (0, import_react.useState)(false);
+  const [saveReportName, setSaveReportName] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    void (async () => {
+      const reports = await loadSavedReports(doctype);
+      if (!cancelled) {
+        setSavedReports(reports);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [doctype]);
+  const handleSaveReport = (0, import_react.useCallback)(() => {
+    if (!saveReportName.trim()) return;
+    const report = {
+      name: saveReportName.trim(),
+      columns: enabledColumns,
+      groupBy,
+      filters
+    };
+    const updated = [...savedReports.filter(r => r.name !== report.name), report];
+    setSavedReports(updated);
+    void persistSavedReports(doctype, updated);
+    setSaveDialogOpen(false);
+    setSaveReportName("");
+  }, [saveReportName, enabledColumns, groupBy, filters, savedReports, doctype]);
+  const handleLoadReport = (0, import_react.useCallback)(report => {
+    setEnabledColumns(report.columns);
+    setGroupBy(report.groupBy);
+  }, []);
+  const handleDeleteReport = (0, import_react.useCallback)(name => {
+    const updated = savedReports.filter(r => r.name !== name);
+    setSavedReports(updated);
+    void persistSavedReports(doctype, updated);
+  }, [savedReports, doctype]);
+  const handleExport = (0, import_react.useCallback)(exportData => {
+    if (onExport) {
+      onExport(exportData);
+      return;
+    }
+    const cols = allColumns.filter(c => enabledColumns.includes(c.fieldname));
+    const headers = cols.map(c => c.label);
+    const csvRows = [headers.join(",")];
+    for (const row of exportData) {
+      const values = cols.map(col => {
+        const val = row[col.fieldname];
+        if (val === null || val === void 0) return "";
+        const str = String(val);
+        if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+          return `"${str.replace(/"/g, '""')}"`;
+        }
+        return str;
+      });
+      csvRows.push(values.join(","));
+    }
+    const csvContent = csvRows.join("\n");
+    const blob = new Blob([csvContent], {
+      type: "text/csv;charset=utf-8;"
+    });
+    (0, import_platform.downloadBlob)(blob, `${doctype}_report.csv`);
+  }, [allColumns, enabledColumns, onExport, doctype]);
+  if (isMetaLoading) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      justifyContent: "center",
+      ...stackProps,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+        size: "large"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        marginTop: "$2",
+        children: t("Loading {{doctype}} schema...", {
+          doctype
+        })
+      })]
+    });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      ...stackProps,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+        size: "small"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        fontSize: "$2",
+        marginTop: "$1",
+        children: t("Loading data...")
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    flex: 1,
+    ...knobProps.borderRadius,
+    ...stackProps,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.panelPadding,
+      ...knobProps.surface,
+      ...knobProps.gap,
+      alignItems: "center",
+      borderBottomWidth: 1,
+      borderBottomColor: "$borderColor",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        flex: 1
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+        placement: "bottom-end",
+        open: saveDialogOpen,
+        onOpenChange: setSaveDialogOpen,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$2",
+            icon: import_react2.FloppyDiskIcon,
+            children: t("Save")
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
+          ...{
+            backgroundColor: "$background"
+          },
+          ...knobProps.borderRadius,
+          ...knobProps.panelPadding,
+          borderColor: "$borderColor",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
+            borderWidth: 1,
+            borderColor: "$borderColor"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ...knobProps.gap,
+            minWidth: 220,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontWeight: "600",
+              fontSize: "$2",
+              children: t("Save Report")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+              size: "$3",
+              placeholder: t("Report name"),
+              value: saveReportName,
+              onChangeText: setSaveReportName,
+              onSubmitEditing: handleSaveReport
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+              size: "$2",
+              theme: "active",
+              onPress: handleSaveReport,
+              disabled: !saveReportName.trim(),
+              children: t("Save")
+            })]
+          })]
+        })]
+      }), savedReports.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+        placement: "bottom-end",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+            size: "$2",
+            icon: import_react2.FolderOpenIcon,
+            children: t("Load")
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
+          ...{
+            backgroundColor: "$background"
+          },
+          ...knobProps.borderRadius,
+          ...knobProps.panelPadding,
+          borderColor: "$borderColor",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
+            borderWidth: 1,
+            borderColor: "$borderColor"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            gap: "$1",
+            minWidth: 180,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontWeight: "600",
+              fontSize: "$2",
+              color: "$color10",
+              padding: "$1",
+              children: t("Saved Reports")
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), savedReports.map(report => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "$2",
+              ...knobProps.borderRadius,
+              hoverStyle: {
+                backgroundColor: "$color2"
+              },
+              cursor: "pointer",
+              onPress: () => handleLoadReport(report),
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$2",
+                flex: 1,
+                children: report.name
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+                size: "$1",
+                chromeless: true,
+                icon: import_react2.TrashIcon,
+                onPress: e => {
+                  e.stopPropagation();
+                  handleDeleteReport(report.name);
+                },
+                "aria-label": t("Delete {{name}}", {
+                  name: report.name
+                })
+              })]
+            }, report.name))]
+          })]
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ReportBuilder, {
+      columns: allColumns,
+      data,
+      groupBy: groupBy ?? void 0,
+      onGroupByChange: setGroupBy,
+      onColumnsChange: setEnabledColumns,
+      onExport: handleExport,
+      showChart,
+      flex: 1
+    })]
+  });
+}