@multiplatform.one/backoffice 6.4.3 → 6.6.0

package/dist/cjs/views/report-controls.cjs

@@ -0,0 +1,329 @@
+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 report_controls_exports = {};
+__export(report_controls_exports, {
+  REPORT_NUMERIC_FIELDTYPES: () => REPORT_NUMERIC_FIELDTYPES,
+  REPORT_PAGE_SIZES: () => REPORT_PAGE_SIZES,
+  ReportFooter: () => ReportFooter,
+  ReportToolbar: () => ReportToolbar
+});
+module.exports = __toCommonJS(report_controls_exports);
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const REPORT_NUMERIC_FIELDTYPES = /* @__PURE__ */new Set(["Int", "Float", "Currency", "Percent", "Rating", "Duration"]);
+const REPORT_PAGE_SIZES = [20, 100, 500];
+const AGGREGATIONS = ["count", "sum", "avg", "min", "max"];
+function filterChipLabel([fieldname, operator, value]) {
+  const rendered = typeof value === "string" ? value.replace(/^%|%$/g, "") : Array.isArray(value) ? value.map(String).join(", ") : JSON.stringify(value);
+  return `${fieldname} ${operator} ${rendered}`;
+}
+function ReportToolbar({
+  columns,
+  onToggleColumn,
+  groupBy,
+  onGroupByChange,
+  pageSize,
+  onPageSizeChange,
+  filters,
+  onClearFilters
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const enabledCount = columns.filter(column => column.enabled).length;
+  const numericColumns = columns.filter(column => REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype));
+  const groupByColumn = groupBy ? columns.find(column => column.fieldname === groupBy.field) : void 0;
+  const aggregationFieldColumn = groupBy?.aggregationField ? columns.find(column => column.fieldname === groupBy.aggregationField) : void 0;
+  const aggregationLabels = {
+    count: t("report.aggCount", "Count"),
+    sum: t("report.aggSum", "Sum"),
+    avg: t("report.aggAvg", "Average"),
+    min: t("report.aggMin", "Min"),
+    max: t("report.aggMax", "Max")
+  };
+  const selectGroupField = fieldname => {
+    if (!fieldname) {
+      onGroupByChange(null);
+      return;
+    }
+    onGroupByChange({
+      field: fieldname,
+      aggregation: groupBy?.aggregation ?? "count",
+      aggregationField: groupBy?.aggregationField
+    });
+  };
+  const selectAggregation = aggregation => {
+    if (!groupBy) return;
+    onGroupByChange({
+      ...groupBy,
+      aggregation,
+      aggregationField: aggregation === "count" ? void 0 : groupBy.aggregationField ?? numericColumns[0]?.fieldname
+    });
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+          size: "$2",
+          chromeless: true,
+          children: t("report.columns", {
+            defaultValue: "Columns ({{enabled}}/{{total}})",
+            enabled: enabledCount,
+            total: columns.length
+          })
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
+        maxHeight: 360,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
+          children: t("report.pickColumns", "Report columns")
+        }), columns.map(column => {
+          const lastEnabled = column.enabled && enabledCount === 1;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+            checked: column.enabled,
+            disabled: lastEnabled,
+            disabledReason: lastEnabled ? t("report.lastColumn", "At least one column stays visible") : void 0,
+            onCheckedChange: () => onToggleColumn(column.fieldname),
+            children: column.label
+          }, column.fieldname);
+        })]
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+          size: "$2",
+          chromeless: true,
+          children: groupByColumn ? t("report.groupByActive", {
+            defaultValue: "Group by: {{field}}",
+            field: groupByColumn.label
+          }) : t("report.groupBy", "Group by")
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
+        maxHeight: 360,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+          checked: !groupBy,
+          closeOnSelect: true,
+          onCheckedChange: () => selectGroupField(null),
+          children: t("report.groupByNone", "No grouping")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Separator, {}), columns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+          checked: groupBy?.field === column.fieldname,
+          closeOnSelect: true,
+          onCheckedChange: () => selectGroupField(column.fieldname),
+          children: column.label
+        }, column.fieldname))]
+      })]
+    }), groupBy && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+          size: "$2",
+          chromeless: true,
+          children: aggregationLabels[groupBy.aggregation]
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
+        children: AGGREGATIONS.map(aggregation => {
+          const needsNumeric = aggregation !== "count" && numericColumns.length === 0;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+            checked: groupBy.aggregation === aggregation,
+            closeOnSelect: true,
+            disabled: needsNumeric,
+            disabledReason: needsNumeric ? t("report.noNumericFields", "No numeric fields to aggregate") : void 0,
+            onCheckedChange: () => selectAggregation(aggregation),
+            children: aggregationLabels[aggregation]
+          }, aggregation);
+        })
+      })]
+    }), groupBy && groupBy.aggregation !== "count" && numericColumns.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+          size: "$2",
+          chromeless: true,
+          children: t("report.aggregationOf", {
+            defaultValue: "of {{field}}",
+            field: aggregationFieldColumn?.label ?? groupBy.aggregationField ?? t("report.pickField", "field")
+          })
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
+        maxHeight: 360,
+        children: numericColumns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+          checked: groupBy.aggregationField === column.fieldname,
+          closeOnSelect: true,
+          onCheckedChange: () => onGroupByChange({
+            ...groupBy,
+            aggregationField: column.fieldname
+          }),
+          children: column.label
+        }, column.fieldname))
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      flex: 1
+    }), filters.map((tuple, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      alignItems: "center",
+      backgroundColor: "$color3",
+      borderRadius: 999,
+      paddingHorizontal: "$2.5",
+      paddingVertical: "$1",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color11",
+        children: filterChipLabel(tuple)
+      })
+    }, `${tuple[0]}-${index}`)), onClearFilters && filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+      size: "$2",
+      chromeless: true,
+      onPress: onClearFilters,
+      children: t("report.clearFilters", "Clear filters")
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+          size: "$2",
+          chromeless: true,
+          children: t("report.pageSize", {
+            defaultValue: "{{count}} / page",
+            count: pageSize
+          })
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Content, {
+        children: REPORT_PAGE_SIZES.map(size => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+          checked: pageSize === size,
+          closeOnSelect: true,
+          onCheckedChange: () => onPageSizeChange(size),
+          children: String(size)
+        }, size))
+      })]
+    })]
+  });
+}
+const OPEN_MENU_LIMIT = 50;
+function formatTotalValue(value, fieldtype) {
+  switch (fieldtype) {
+    case "Currency":
+      return (0, import_theme.formatCurrency)(value);
+    case "Int":
+      return (0, import_theme.formatNumber)(Math.round(value), {
+        maximumFractionDigits: 0
+      });
+    case "Percent":
+      return (0, import_theme.formatPercent)(value, {
+        precision: 1
+      });
+    default:
+      return (0, import_theme.formatNumber)(value);
+  }
+}
+function ReportFooter({
+  page,
+  pageCount,
+  pageSize,
+  totalItems,
+  onPageChange,
+  records,
+  onOpenRecord,
+  totals
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const openRecords = records.slice(0, OPEN_MENU_LIMIT);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    gap: "$2",
+    children: [totals.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "$3",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        fontWeight: "600",
+        color: "$color10",
+        children: t("report.totals", "Totals")
+      }), totals.map(total => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color11",
+        children: [total.label, ":", " ", /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$2",
+          fontWeight: "600",
+          color: "$color12",
+          children: formatTotalValue(total.value, total.fieldtype)
+        })]
+      }, total.label))]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "$2",
+      children: [records.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
+          asChild: true,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+            size: "$2",
+            chromeless: true,
+            icon: import_react.ArrowSquareOutIcon,
+            children: t("report.openRecord", "Open")
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
+          maxHeight: 360,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
+            children: t("report.openRecordHint", "Open a record from this page")
+          }), openRecords.map(record => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
+            shortcut: record.title !== record.name ? record.name : void 0,
+            onSelect: () => onOpenRecord(record.name),
+            children: record.title
+          }, record.name)), records.length > OPEN_MENU_LIMIT && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
+            disabled: true,
+            disabledReason: t("report.openRecordOverflow", "Narrow with filters or a smaller page to reach the rest"),
+            children: t("report.moreRecords", {
+              defaultValue: "+{{count}} more on this page",
+              count: records.length - OPEN_MENU_LIMIT
+            })
+          })]
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        flex: 1
+      }), pageCount > 1 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Pagination, {
+        variant: "numbered",
+        total: pageCount,
+        page: page + 1,
+        onPageChange: nextPage => onPageChange(nextPage - 1),
+        totalItems,
+        pageSize,
+        showSummary: true
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color10",
+        children: t("report.recordCount", {
+          defaultValue: "{{count}} record(s)",
+          count: totalItems
+        })
+      })]
+    })]
+  });
+}