@multiplatform.one/frappe-ui 6.0.0

package/dist/cjs/FrappeTable.cjs

@@ -0,0 +1,328 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FrappeTable_exports = {};
+__export(FrappeTable_exports, {
+  FrappeTable: () => FrappeTable
+});
+module.exports = __toCommonJS(FrappeTable_exports);
+var import_frappe = require("@multiplatform.one/frappe");
+var import_table = require("@multiplatform.one/table");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = __toESM(require("react"));
+var import_react_i18next = require("react-i18next");
+var import_tamagui = require("tamagui");
+var import_table2 = require("@multiplatform.one/table");
+var import_FrappeProvider = require("./FrappeProvider.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function mapFilterOperator(op) {
+  const m = {
+    contains: "like",
+    doesNotContain: "not like",
+    is: "=",
+    isNot: "!=",
+    startsWith: "like",
+    endsWith: "like",
+    isEmpty: "=",
+    isNotEmpty: "!=",
+    isLessThan: "<",
+    isGreaterThan: ">",
+    isLessThanOrEqual: "<=",
+    isGreaterThanOrEqual: ">="
+  };
+  return m[op] ?? "=";
+}
+function stateToFrappeParams(state) {
+  const {
+    pagination,
+    sorting,
+    filters,
+    columnFilters,
+    globalFilter
+  } = state;
+  const limitStart = pagination.pageIndex * pagination.pageSize;
+  const limit = pagination.pageSize;
+  const frappeFilters = [];
+  if (filters?.length) {
+    for (const f of filters) {
+      const op = mapFilterOperator(f.value?.operator ?? "is");
+      const val = f.value?.value;
+      if (op === "like" && typeof val === "string" && !val.includes("%")) {
+        frappeFilters.push([f.columnId, op, `%${val}%`]);
+      } else {
+        frappeFilters.push([f.columnId, op, val]);
+      }
+    }
+  }
+  for (const cf of columnFilters ?? []) {
+    if (cf.value != null && cf.value !== "") {
+      frappeFilters.push([cf.id, "=", cf.value]);
+    }
+  }
+  if (globalFilter && typeof globalFilter === "string" && globalFilter.trim()) {
+    frappeFilters.push(["name", "like", `%${globalFilter}%`]);
+  }
+  const orderBy = sorting?.length && sorting[0] ? sorting.map(s => ({
+    field: s.id,
+    order: s.desc ? import_frappe.Order.Desc : import_frappe.Order.Asc
+  })) : void 0;
+  return {
+    limitStart,
+    limit,
+    filters: frappeFilters,
+    orderBy
+  };
+}
+function FrappeTable({
+  baseURL,
+  auth,
+  syncOptions,
+  doctype,
+  columns,
+  fields,
+  filters: initialFilters,
+  onRowClick,
+  loading,
+  error,
+  savedFilters = false,
+  canCreateGlobalFilters = false,
+  userId,
+  serverSide = false,
+  onStateChange: onStateChangeProp,
+  ...dataTableProps
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const [errorState, setErrorState] = import_react.default.useState(null);
+  const [activeFilters, setActiveFilters] = import_react.default.useState(initialFilters);
+  const config = (0, import_FrappeProvider.useFrappeConfig)();
+  const finalBaseURL = baseURL ?? config?.baseURL;
+  const finalAuth = auth ?? config?.auth;
+  const finalSyncOptions = syncOptions ?? config?.syncOptions;
+  if (!finalBaseURL) {
+    throw new Error("FrappeTable requires baseURL prop or FrappeProvider with baseURL");
+  }
+  const frappeApp = (0, import_react.useMemo)(() => {
+    if (!serverSide || !finalBaseURL) return null;
+    return new import_frappe.FrappeApp(finalBaseURL, finalAuth ?? {});
+  }, [serverSide, finalBaseURL, finalAuth]);
+  const [serverData, setServerData] = (0, import_react.useState)([]);
+  const [serverRowCount, setServerRowCount] = (0, import_react.useState)(0);
+  const [serverLoading, setServerLoading] = (0, import_react.useState)(serverSide);
+  const lastFetchKey = (0, import_react.useRef)("");
+  const fetchServerData = (0, import_react.useCallback)(async state => {
+    if (!frappeApp || !serverSide) return;
+    const params = stateToFrappeParams(state);
+    const key = JSON.stringify(params);
+    if (key === lastFetchKey.current) return;
+    lastFetchKey.current = key;
+    setServerLoading(true);
+    try {
+      const [data, count] = await Promise.all([frappeApp.db().getDocList(doctype, {
+        fields: fields ?? ["name"],
+        filters: params.filters.length ? params.filters : void 0,
+        limitStart: params.limitStart,
+        limit: params.limit,
+        orderBy: params.orderBy
+      }), frappeApp.db().getCount(doctype, params.filters.length ? params.filters : void 0)]);
+      setServerData(data);
+      setServerRowCount(count);
+      setErrorState(null);
+    } catch (err) {
+      setErrorState(err instanceof Error ? err : new Error(String(err)));
+      setServerData([]);
+      setServerRowCount(0);
+    } finally {
+      setServerLoading(false);
+    }
+  }, [frappeApp, serverSide, doctype, fields]);
+  const handleStateChange = (0, import_react.useCallback)(state => {
+    onStateChangeProp?.(state);
+    if (serverSide) fetchServerData(state);
+  }, [onStateChangeProp, serverSide, fetchServerData]);
+  (0, import_react.useEffect)(() => {
+    if (serverSide && frappeApp) {
+      lastFetchKey.current = "";
+      fetchServerData({
+        data: [],
+        columns,
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10
+        },
+        sorting: [],
+        filters: [],
+        columnFilters: [],
+        columnVisibility: {},
+        columnOrder: columns.map(c => c.id ?? ""),
+        columnSizing: {}
+      });
+    }
+  }, [serverSide, !!frappeApp, fetchServerData]);
+  const savedFiltersHook = savedFilters ? (0, import_table2.useSavedFilters)({
+    userId
+  }) : null;
+  const collection = (0, import_frappe.useFrappeCollection)(serverSide ? void 0 : {
+    baseURL: finalBaseURL,
+    socketPort: config?.socketPort,
+    auth: finalAuth,
+    syncOptions: finalSyncOptions,
+    fixtures: config?.fixtures
+  }, serverSide ? "" : doctype, serverSide ? void 0 : {
+    fields,
+    filters: activeFilters
+  });
+  const {
+    data: rawData,
+    isLoading: isRowsLoading
+  } = (0, import_frappe.useLiveQuery)(q => collection ? q.from({
+    _list: collection
+  }) : null, [collection]);
+  const clientRows = (0, import_react.useMemo)(() => rawData ?? [], [rawData]);
+  const rows = serverSide ? serverData : clientRows;
+  const isRowsLoadingResolved = serverSide ? serverLoading : isRowsLoading;
+  const handleSelectFilter = filter => {
+    if (filter) {
+      setActiveFilters(filter.filters);
+    } else {
+      setActiveFilters(initialFilters);
+    }
+  };
+  const handleSaveFilter = async (filterName, isGlobal) => {
+    if (!savedFiltersHook || !activeFilters) return;
+    const filterArray = Array.isArray(activeFilters) ? activeFilters : Object.entries(activeFilters).map(([key, value]) => [key, "=", value]);
+    await savedFiltersHook.saveFilter(filterName, filterArray, isGlobal);
+  };
+  const handleDeleteFilter = async name => {
+    if (!savedFiltersHook) return;
+    await savedFiltersHook.deleteFilter(name);
+  };
+  if (errorState && error) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: error(errorState)
+    });
+  }
+  if (errorState) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$red10",
+        children: t("Error loading {{doctype}}", {
+          doctype
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        fontSize: "$2",
+        children: errorState.message
+      })]
+    });
+  }
+  if (isRowsLoadingResolved) {
+    if (loading) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children: loading
+      });
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      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}}...", {
+          doctype
+        })
+      })]
+    });
+  }
+  const rowData = rows ?? [];
+  if (rowData.length === 0) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: "$color10",
+        children: t("No {{doctype}} records found", {
+          doctype
+        })
+      })
+    });
+  }
+  const columnsWithClick = onRowClick ? columns.map(col => ({
+    ...col,
+    cell: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      onPress: () => onRowClick(props.row.original),
+      cursor: "pointer",
+      hoverStyle: {
+        backgroundColor: "$color2"
+      },
+      children: typeof col.cell === "function" ? col.cell(props) : props.getValue()
+    })
+  })) : columns;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    flex: 1,
+    children: [savedFilters && savedFiltersHook && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      ...knobProps.gap,
+      padding: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table2.SavedFilterDropdown, {
+        filters: savedFiltersHook.filters,
+        selectedFilter: null,
+        onSelectFilter: handleSelectFilter,
+        onDeleteFilter: handleDeleteFilter
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table2.FilterManager, {
+        currentFilters: Array.isArray(activeFilters) ? activeFilters : activeFilters ? Object.entries(activeFilters).map(([key, value]) => [key, "=", value]) : [],
+        onSaveFilter: handleSaveFilter,
+        canCreateGlobal: canCreateGlobalFilters
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.DataTable, {
+      data: rowData,
+      columns: columnsWithClick,
+      ...(serverSide && {
+        manualFiltering: true,
+        manualPagination: true,
+        manualSorting: true,
+        rowCount: serverRowCount,
+        onStateChange: handleStateChange
+      }),
+      ...dataTableProps
+    })]
+  });
+}