sevago-library 1.2.1 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # sevago-library
 
+## 1.2.3
+
+### Patch Changes
+
+- feat: add AdvancedFilterDialog component and its story
+
+## 1.2.2
+
+### Patch Changes
+
+- fix: update variable declaration for clarity in AdvancedOperatorFilterDialog
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -25893,6 +25893,57 @@ const other_util = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   lightenColor,
   scrollTo
 }, Symbol.toStringTag, { value: "Module" }));
+var relativeTime$2 = { exports: {} };
+var relativeTime$1 = relativeTime$2.exports;
+var hasRequiredRelativeTime;
+function requireRelativeTime() {
+  if (hasRequiredRelativeTime) return relativeTime$2.exports;
+  hasRequiredRelativeTime = 1;
+  (function(module2, exports2) {
+    !(function(r2, e) {
+      module2.exports = e();
+    })(relativeTime$1, (function() {
+      return function(r2, e, t) {
+        r2 = r2 || {};
+        var n = e.prototype, o = { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" };
+        function i(r3, e2, t2, o2) {
+          return n.fromToBase(r3, e2, t2, o2);
+        }
+        t.en.relativeTime = o, n.fromToBase = function(e2, n2, i2, d2, u) {
+          for (var f, a, s, l = i2.$locale().relativeTime || o, h = r2.thresholds || [{ l: "s", r: 44, d: "second" }, { l: "m", r: 89 }, { l: "mm", r: 44, d: "minute" }, { l: "h", r: 89 }, { l: "hh", r: 21, d: "hour" }, { l: "d", r: 35 }, { l: "dd", r: 25, d: "day" }, { l: "M", r: 45 }, { l: "MM", r: 10, d: "month" }, { l: "y", r: 17 }, { l: "yy", d: "year" }], m = h.length, c = 0; c < m; c += 1) {
+            var y = h[c];
+            y.d && (f = d2 ? t(e2).diff(i2, y.d, true) : i2.diff(e2, y.d, true));
+            var p = (r2.rounding || Math.round)(Math.abs(f));
+            if (s = f > 0, p <= y.r || !y.r) {
+              p <= 1 && c > 0 && (y = h[c - 1]);
+              var v = l[y.l];
+              u && (p = u("" + p)), a = "string" == typeof v ? v.replace("%d", p) : v(p, n2, y.l, s);
+              break;
+            }
+          }
+          if (n2) return a;
+          var M = s ? l.future : l.past;
+          return "function" == typeof M ? M(a) : M.replace("%s", a);
+        }, n.to = function(r3, e2) {
+          return i(r3, e2, this, true);
+        }, n.from = function(r3, e2) {
+          return i(r3, e2, this);
+        };
+        var d = function(r3) {
+          return r3.$u ? t.utc() : t();
+        };
+        n.toNow = function(r3) {
+          return this.to(d(this), r3);
+        }, n.fromNow = function(r3) {
+          return this.from(d(this), r3);
+        };
+      };
+    }));
+  })(relativeTime$2);
+  return relativeTime$2.exports;
+}
+var relativeTimeExports = requireRelativeTime();
+const relativeTime = /* @__PURE__ */ getDefaultExportFromCjs(relativeTimeExports);
 var utc$2 = { exports: {} };
 var utc$1 = utc$2.exports;
 var hasRequiredUtc;
@@ -25975,57 +26026,6 @@ function requireUtc() {
 }
 var utcExports = requireUtc();
 const utc = /* @__PURE__ */ getDefaultExportFromCjs(utcExports);
-var relativeTime$2 = { exports: {} };
-var relativeTime$1 = relativeTime$2.exports;
-var hasRequiredRelativeTime;
-function requireRelativeTime() {
-  if (hasRequiredRelativeTime) return relativeTime$2.exports;
-  hasRequiredRelativeTime = 1;
-  (function(module2, exports2) {
-    !(function(r2, e) {
-      module2.exports = e();
-    })(relativeTime$1, (function() {
-      return function(r2, e, t) {
-        r2 = r2 || {};
-        var n = e.prototype, o = { future: "in %s", past: "%s ago", s: "a few seconds", m: "a minute", mm: "%d minutes", h: "an hour", hh: "%d hours", d: "a day", dd: "%d days", M: "a month", MM: "%d months", y: "a year", yy: "%d years" };
-        function i(r3, e2, t2, o2) {
-          return n.fromToBase(r3, e2, t2, o2);
-        }
-        t.en.relativeTime = o, n.fromToBase = function(e2, n2, i2, d2, u) {
-          for (var f, a, s, l = i2.$locale().relativeTime || o, h = r2.thresholds || [{ l: "s", r: 44, d: "second" }, { l: "m", r: 89 }, { l: "mm", r: 44, d: "minute" }, { l: "h", r: 89 }, { l: "hh", r: 21, d: "hour" }, { l: "d", r: 35 }, { l: "dd", r: 25, d: "day" }, { l: "M", r: 45 }, { l: "MM", r: 10, d: "month" }, { l: "y", r: 17 }, { l: "yy", d: "year" }], m = h.length, c = 0; c < m; c += 1) {
-            var y = h[c];
-            y.d && (f = d2 ? t(e2).diff(i2, y.d, true) : i2.diff(e2, y.d, true));
-            var p = (r2.rounding || Math.round)(Math.abs(f));
-            if (s = f > 0, p <= y.r || !y.r) {
-              p <= 1 && c > 0 && (y = h[c - 1]);
-              var v = l[y.l];
-              u && (p = u("" + p)), a = "string" == typeof v ? v.replace("%d", p) : v(p, n2, y.l, s);
-              break;
-            }
-          }
-          if (n2) return a;
-          var M = s ? l.future : l.past;
-          return "function" == typeof M ? M(a) : M.replace("%s", a);
-        }, n.to = function(r3, e2) {
-          return i(r3, e2, this, true);
-        }, n.from = function(r3, e2) {
-          return i(r3, e2, this);
-        };
-        var d = function(r3) {
-          return r3.$u ? t.utc() : t();
-        };
-        n.toNow = function(r3) {
-          return this.to(d(this), r3);
-        }, n.fromNow = function(r3) {
-          return this.from(d(this), r3);
-        };
-      };
-    }));
-  })(relativeTime$2);
-  return relativeTime$2.exports;
-}
-var relativeTimeExports = requireRelativeTime();
-const relativeTime = /* @__PURE__ */ getDefaultExportFromCjs(relativeTimeExports);
 var timezone$2 = { exports: {} };
 var timezone$1 = timezone$2.exports;
 var hasRequiredTimezone;
@@ -75226,6 +75226,220 @@ const parseDateMacroToTimestamp = (macroStr) => {
   }
   return { fromDate: start2.unix(), toDate: end2.unix() };
 };
+const createDefaultState = (fields) => {
+  return fields.reduce((acc, field) => {
+    acc[field.key] = field.defaultValue;
+    return acc;
+  }, {});
+};
+const createRowsFromValue = (fields, value) => {
+  const activeRows = fields.filter((field) => ((value == null ? void 0 : value[field.key]) ?? field.defaultValue) !== field.defaultValue).map((field) => ({
+    id: generateId(),
+    fieldKey: field.key,
+    value: (value == null ? void 0 : value[field.key]) ?? field.defaultValue
+  }));
+  if (activeRows.length > 0) return activeRows;
+  const firstField = fields[0];
+  if (!firstField) return [];
+  return [
+    {
+      id: generateId(),
+      fieldKey: firstField.key,
+      value: (value == null ? void 0 : value[firstField.key]) ?? firstField.defaultValue
+    }
+  ];
+};
+const AdvancedFilterDialog = ({
+  open: open2,
+  title = "Tùy chỉnh bộ lọc",
+  fields,
+  value,
+  anchorEl,
+  offset: offset2,
+  onClose,
+  onApply
+}) => {
+  const defaults = React.useMemo(() => createDefaultState(fields), [fields]);
+  const fieldOptions = React.useMemo(() => fields.map((field) => ({ label: field.label, value: field.key })), [fields]);
+  const [rows, setRows] = React.useState(() => createRowsFromValue(fields, value));
+  const [draggingIndex, setDraggingIndex] = React.useState(null);
+  React.useEffect(() => {
+    if (open2) {
+      setRows(createRowsFromValue(fields, value));
+      setDraggingIndex(null);
+    }
+  }, [fields, open2, value]);
+  const handleReset = () => {
+    const firstField = fields[0];
+    if (!firstField) {
+      setRows([]);
+      return;
+    }
+    setRows([{ id: generateId(), fieldKey: firstField.key, value: firstField.defaultValue }]);
+  };
+  const handleRemove = (index) => {
+    setRows((prev) => {
+      const next = prev.filter((_, currentIndex) => currentIndex !== index);
+      if (next.length > 0) return next;
+      const firstField = fields[0];
+      if (!firstField) return [];
+      return [{ id: generateId(), fieldKey: firstField.key, value: firstField.defaultValue }];
+    });
+  };
+  const handleAdd = () => {
+    setRows((prev) => {
+      const usedFieldKeys = new Set(prev.map((row) => row.fieldKey));
+      const nextField = fields.find((field) => !usedFieldKeys.has(field.key));
+      if (!nextField) return prev;
+      return [...prev, { id: generateId(), fieldKey: nextField.key, value: nextField.defaultValue }];
+    });
+  };
+  const handleDrop = (dropIndex) => {
+    if (draggingIndex === null || dropIndex === draggingIndex) return;
+    setRows((prev) => {
+      const next = [...prev];
+      const [movedRow] = next.splice(draggingIndex, 1);
+      next.splice(dropIndex, 0, movedRow);
+      return next;
+    });
+    setDraggingIndex(null);
+  };
+  const handleApply = () => {
+    const mergedValue = { ...defaults };
+    rows.forEach((row) => {
+      if (row.fieldKey) mergedValue[row.fieldKey] = row.value;
+    });
+    onApply(mergedValue);
+    onClose();
+  };
+  const canAddRow = rows.length < fields.length;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Popover,
+    {
+      open: open2,
+      anchorEl,
+      onClose,
+      disableScrollLock: true,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      slotProps: {
+        paper: {
+          sx: {
+            mt: `${(offset2 == null ? void 0 : offset2.y) ?? 8}px`,
+            ml: `${(offset2 == null ? void 0 : offset2.x) ?? 0}px`,
+            minWidth: 320,
+            maxWidth: "calc(100vw - 48px)",
+            borderRadius: BORDER_RADIUS_ELEMENT_MIDDLE,
+            border: `1px solid ${NEUTRAL[300]}`,
+            boxShadow: "0 8px 24px rgba(15, 23, 42, 0.12)",
+            overflow: "hidden"
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { backgroundColor: WHITE[50], padding: 2 }, children: /* @__PURE__ */ jsxRuntime.jsxs(StackAlignCenter, { sx: { alignItems: "stretch", gap: 2 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenterJustBetween, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textMd.semiBold }, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, sx: { padding: PADDING_GAP_ITEM_SMALL }, children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "close" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(StackAlignCenter, { sx: { alignItems: "stretch", gap: 1.25 }, children: rows.map((row, index) => {
+          const field = fields.find((currentField) => currentField.key === row.fieldKey);
+          if (!field) return null;
+          const usedFieldKeys = new Set(rows.map((currentRow) => currentRow.fieldKey));
+          const selectableFieldOptions = fieldOptions.filter(
+            (option) => option.value === row.fieldKey || !usedFieldKeys.has(option.value)
+          );
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            StackRowAlignCenter,
+            {
+              onDragOver: (event) => event.preventDefault(),
+              onDrop: () => handleDrop(index),
+              sx: { gap: 1, alignItems: "flex-end" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    draggable: true,
+                    onDragStart: () => setDraggingIndex(index),
+                    onDragEnd: () => setDraggingIndex(null),
+                    sx: { paddingBottom: "10px", cursor: "grab" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "drag_indicator", sx: { color: NEUTRAL[500] } })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flex: 1, minWidth: 220 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  TextFieldSelectElement,
+                  {
+                    label: "",
+                    value: row.fieldKey,
+                    options: selectableFieldOptions,
+                    placeholder: "",
+                    onChange: (event) => {
+                      const nextFieldKey = event.target.value;
+                      const nextField = fields.find((currentField) => currentField.key === nextFieldKey);
+                      if (!nextField) return;
+                      setRows(
+                        (prev) => prev.map(
+                          (currentRow, currentIndex) => currentIndex === index ? {
+                            ...currentRow,
+                            fieldKey: nextFieldKey,
+                            value: nextField.defaultValue
+                          } : currentRow
+                        )
+                      );
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flex: 1, minWidth: 220 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  TextFieldSelectElement,
+                  {
+                    label: "",
+                    value: row.value ?? field.defaultValue,
+                    options: field.options,
+                    placeholder: "Tất cả",
+                    onChange: (event) => {
+                      const nextValue = event.target.value;
+                      setRows(
+                        (prev) => prev.map(
+                          (currentRow, currentIndex) => currentIndex === index ? { ...currentRow, value: nextValue } : currentRow
+                        )
+                      );
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => handleRemove(index), children: /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: "delete_outline" }) })
+              ]
+            },
+            row.id
+          );
+        }) }),
+        canAddRow && /* @__PURE__ */ jsxRuntime.jsx(
+          ButtonElement,
+          {
+            content: "Thêm điều kiện",
+            onClick: handleAdd,
+            startIcon: "add",
+            variant: "text",
+            sx: { color: PRIMARY[500], minWidth: 0, paddingX: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenterJustBetween, { sx: { marginTop: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ButtonElement,
+            {
+              content: "Mặc định",
+              onClick: handleReset,
+              variant: "text",
+              sx: { color: PRIMARY[500], minWidth: 0, paddingX: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(StackRowAlignCenter, { sx: { gap: 1 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { onClick: onClose, variant: "outlined", content: "Hủy" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ButtonElement, { onClick: handleApply, variant: "contained", content: "Áp dụng" })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
 const FilterValueInput = ({ field, rowValue, onChange }) => {
   switch (field.type) {
     case "select":
@@ -75472,7 +75686,7 @@ const AdvancedOperatorFilterDialog = ({
                       placeholder: "",
                       onChange: (e) => {
                         const nextOp = e.target.value;
-                        let nextValue = row.value;
+                        const nextValue = row.value;
                         handleUpdateRow(index, { operator: nextOp, value: nextValue });
                       },
                       sx: { width: OPERATOR_WIDTH }
@@ -78442,6 +78656,7 @@ const SearchDropdownComponent = ({
   ] });
 };
 exports.APPS = apps_const;
+exports.AdvancedFilterDialog = AdvancedFilterDialog;
 exports.AdvancedOperatorFilterDialog = AdvancedOperatorFilterDialog;
 exports.AppGrid = AppGrid;
 exports.AppGridItem = AppGridItem;