@multiplatform.one/backoffice 6.4.3 → 6.7.0

package/dist/cjs/list/filter-editor.cjs

@@ -0,0 +1,389 @@
+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 filter_editor_exports = {};
+__export(filter_editor_exports, {
+  FilterEditorButton: () => FilterEditorButton,
+  FilterEditorPanel: () => FilterEditorPanel
+});
+module.exports = __toCommonJS(filter_editor_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_frappe_ui = require("@multiplatform.one/frappe-ui");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_filter_fields = require("./filter-fields.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FilterEditorPanel({
+  meta,
+  filters,
+  onFiltersChange,
+  onDone,
+  scrollRows = true
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const fields = (0, import_react2.useMemo)(() => (0, import_filter_fields.filterableFieldsFromMeta)(meta), [meta]);
+  const nextIdRef = (0, import_react2.useRef)(1);
+  const [rows, setRows] = (0, import_react2.useState)(() => filters.map(tuple => ({
+    ...(0, import_filter_fields.tupleToDraft)(tuple),
+    id: nextIdRef.current++
+  })));
+  const addRow = () => {
+    const first = fields[0];
+    if (!first) return;
+    setRows(prev => [...prev, {
+      id: nextIdRef.current++,
+      fieldname: first.fieldname,
+      operator: (0, import_filter_fields.defaultOperatorForKind)(first.kind),
+      value: "",
+      values: []
+    }]);
+  };
+  const updateRow = (id, patch) => setRows(prev => prev.map(row => row.id === id ? {
+    ...row,
+    ...patch
+  } : row));
+  const removeRow = id => setRows(prev => prev.filter(row => row.id !== id));
+  const kindOf = fieldname => fields.find(field => field.fieldname === fieldname)?.kind ?? "text";
+  const apply = () => {
+    const tuples = [];
+    for (const row of rows) {
+      const tuple = (0, import_filter_fields.draftToTuple)(row, kindOf(row.fieldname));
+      if (tuple) tuples.push(tuple);
+    }
+    onFiltersChange(tuples);
+    onDone?.();
+  };
+  const clearAll = () => {
+    setRows([]);
+    onFiltersChange([]);
+    onDone?.();
+  };
+  const rowList = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    gap: "$2",
+    children: rows.map(row => /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterEditorRow, {
+      row,
+      fields,
+      onChange: patch => updateRow(row.id, patch),
+      onRemove: () => removeRow(row.id)
+    }, row.id))
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    gap: "$3",
+    children: [rows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      color: "$color10",
+      fontSize: "$3",
+      children: t("list.filters.empty", "No filters applied")
+    }) : scrollRows ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+      maxHeight: 360,
+      children: rowList
+    }) : rowList, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$3",
+        chromeless: true,
+        icon: import_react.PlusIcon,
+        onPress: addRow,
+        children: t("list.filters.addFilter", "Add filter")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        gap: "$2",
+        alignItems: "center",
+        children: [rows.length === 0 && filters.length === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$3",
+          chromeless: true,
+          onPress: clearAll,
+          children: t("list.clearFilters", "Clear filters")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$3",
+          accent: true,
+          onPress: apply,
+          children: t("list.filters.apply", "Apply")
+        })]
+      })]
+    })]
+  });
+}
+function FilterEditorButton({
+  meta,
+  filters,
+  onFiltersChange
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [openGen, setOpenGen] = (0, import_react2.useState)(0);
+  const handleOpenChange = nextOpen => {
+    if (nextOpen) setOpenGen(generation => generation + 1);
+    setOpen(nextOpen);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.Popover, {
+    open,
+    onOpenChange: handleOpenChange,
+    placement: "bottom-start",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$3",
+        icon: import_react.FunnelIcon,
+        children: filters.length > 0 ? t("list.filters.filterCount", "Filter ({{count}})", {
+          count: filters.length
+        }) : t("list.filters.filter", "Filter")
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.PopoverContent, {
+      padding: "$3",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Popover.Arrow, {
+        borderWidth: 1,
+        borderColor: "$borderColor"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        width: 620,
+        maxWidth: "100%",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterEditorPanel, {
+          meta,
+          filters,
+          onFiltersChange,
+          onDone: () => setOpen(false)
+        }, openGen)
+      })]
+    })]
+  });
+}
+function FilterEditorRow({
+  row,
+  fields,
+  onChange,
+  onRemove
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const field = fields.find(candidate => candidate.fieldname === row.fieldname);
+  const kind = field?.kind ?? "text";
+  const fieldOptions = (0, import_react2.useMemo)(() => fields.map(candidate => ({
+    value: candidate.fieldname,
+    label: candidate.label
+  })), [fields]);
+  const operatorOptions = (0, import_react2.useMemo)(() => (0, import_filter_fields.operatorsForKind)(kind).map(operator => ({
+    value: operator,
+    label: t(`list.filters.op.${operator}`, import_filter_fields.DESK_OPERATOR_LABELS[operator])
+  })), [kind, t]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    gap: "$2",
+    alignItems: "center",
+    flexWrap: "wrap",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      width: 170,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        value: row.fieldname,
+        onChange: next => {
+          if (typeof next !== "string") return;
+          const nextField = fields.find(candidate => candidate.fieldname === next);
+          onChange({
+            fieldname: next,
+            operator: (0, import_filter_fields.defaultOperatorForKind)(nextField?.kind ?? "text"),
+            value: "",
+            values: []
+          });
+        },
+        options: fieldOptions,
+        size: "$3",
+        compact: true,
+        "aria-label": t("list.filters.field", "Filter field")
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      width: 150,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        value: row.operator,
+        onChange: next => {
+          if (typeof next !== "string") return;
+          onChange({
+            operator: next
+          });
+        },
+        options: operatorOptions,
+        size: "$3",
+        compact: true,
+        "aria-label": t("list.filters.condition", "Condition")
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      flex: 1,
+      minWidth: 170,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FilterValueEditor, {
+        row,
+        field,
+        onChange
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$2",
+      circular: true,
+      chromeless: true,
+      icon: import_react.XIcon,
+      onPress: onRemove,
+      "aria-label": t("list.filters.removeFilter", "Remove filter")
+    })]
+  });
+}
+function FilterValueEditor({
+  row,
+  field,
+  onChange
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const kind = field?.kind ?? "text";
+  const {
+    operator
+  } = row;
+  const valueLabel = t("list.filters.value", "Value");
+  if (operator === "is set" || operator === "is not set") return null;
+  if (operator === "between") {
+    const placeholder = kind === "date" ? "YYYY-MM-DD" : void 0;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      gap: "$2",
+      flex: 1,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        minWidth: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+          value: row.values[0] ?? "",
+          onChangeText: next => onChange({
+            values: [next, row.values[1] ?? ""]
+          }),
+          placeholder: placeholder ?? t("list.filters.from", "From"),
+          size: "$3",
+          compact: true,
+          "aria-label": t("list.filters.from", "From")
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        flex: 1,
+        minWidth: 0,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+          value: row.values[1] ?? "",
+          onChangeText: next => onChange({
+            values: [row.values[0] ?? "", next]
+          }),
+          placeholder: placeholder ?? t("list.filters.to", "To"),
+          size: "$3",
+          compact: true,
+          "aria-label": t("list.filters.to", "To")
+        })
+      })]
+    });
+  }
+  if (operator === "in" || operator === "not in") {
+    if (kind === "select") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        multiple: true,
+        dismissible: true,
+        value: row.values,
+        onChange: next => onChange({
+          values: Array.isArray(next) ? next : [next]
+        }),
+        options: (0, import_filter_fields.selectOptionsFromField)(field?.options),
+        placeholder: t("list.filters.selectValues", "Select values..."),
+        size: "$3",
+        compact: true,
+        "aria-label": valueLabel
+      });
+    }
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+      value: row.value,
+      onChangeText: next => onChange({
+        value: next
+      }),
+      placeholder: t("list.filters.commaValues", "Comma separated values"),
+      size: "$3",
+      compact: true,
+      "aria-label": valueLabel
+    });
+  }
+  if (operator !== "like" && operator !== "not like") {
+    if (kind === "select") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        value: row.value,
+        onChange: next => {
+          if (typeof next === "string") onChange({
+            value: next
+          });
+        },
+        options: (0, import_filter_fields.selectOptionsFromField)(field?.options),
+        placeholder: t("list.filters.selectValue", "Select..."),
+        size: "$3",
+        compact: true,
+        "aria-label": valueLabel
+      });
+    }
+    if (kind === "link") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_frappe_ui.Link, {
+        value: row.value,
+        onChange: next => onChange({
+          value: next
+        }),
+        doctype: field?.options ?? "",
+        placeholder: t("list.filters.searchValue", "Search..."),
+        compact: true
+      });
+    }
+    if (kind === "check") {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        value: row.value,
+        onChange: next => {
+          if (typeof next === "string") onChange({
+            value: next
+          });
+        },
+        options: [{
+          value: "1",
+          label: t("list.filters.yes", "Yes")
+        }, {
+          value: "0",
+          label: t("list.filters.no", "No")
+        }],
+        placeholder: t("list.filters.selectValue", "Select..."),
+        size: "$3",
+        compact: true,
+        "aria-label": valueLabel
+      });
+    }
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+    value: row.value,
+    onChangeText: next => onChange({
+      value: next
+    }),
+    placeholder: kind === "date" ? "YYYY-MM-DD" : t("list.filters.enterValue", "Enter value..."),
+    size: "$3",
+    compact: true,
+    "aria-label": valueLabel,
+    ...(kind === "number" ? {
+      keyboardType: "numeric"
+    } : {})
+  });
+}