sevago-library 1.2.2 → 1.2.4

package/dist/index.esm.js

@@ -75208,6 +75208,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 = useMemo(() => createDefaultState(fields), [fields]);
+  const fieldOptions = useMemo(() => fields.map((field) => ({ label: field.label, value: field.key })), [fields]);
+  const [rows, setRows] = useState(() => createRowsFromValue(fields, value));
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  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__ */ jsx(
+    Popover$1,
+    {
+      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__ */ jsx(Box, { sx: { backgroundColor: WHITE[50], padding: 2 }, children: /* @__PURE__ */ jsxs(StackAlignCenter, { sx: { alignItems: "stretch", gap: 2 }, children: [
+        /* @__PURE__ */ jsxs(StackRowAlignCenterJustBetween, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography$1, { sx: { ...TYPOGRAPHY.textMd.semiBold }, children: title }),
+          /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, sx: { padding: PADDING_GAP_ITEM_SMALL }, children: /* @__PURE__ */ jsx(IconElement, { icon: "close" }) })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsxs(
+            StackRowAlignCenter,
+            {
+              onDragOver: (event) => event.preventDefault(),
+              onDrop: () => handleDrop(index),
+              sx: { gap: 1, alignItems: "flex-end" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    draggable: true,
+                    onDragStart: () => setDraggingIndex(index),
+                    onDragEnd: () => setDraggingIndex(null),
+                    sx: { paddingBottom: "10px", cursor: "grab" },
+                    children: /* @__PURE__ */ jsx(IconElement, { icon: "drag_indicator", sx: { color: NEUTRAL[500] } })
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 220 }, children: /* @__PURE__ */ 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__ */ jsx(Box, { sx: { flex: 1, minWidth: 220 }, children: /* @__PURE__ */ 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__ */ jsx(IconButton$1, { onClick: () => handleRemove(index), children: /* @__PURE__ */ jsx(IconElement, { icon: "delete_outline" }) })
+              ]
+            },
+            row.id
+          );
+        }) }),
+        canAddRow && /* @__PURE__ */ jsx(
+          ButtonElement,
+          {
+            content: "Thêm điều kiện",
+            onClick: handleAdd,
+            startIcon: "add",
+            variant: "text",
+            sx: { color: PRIMARY[500], minWidth: 0, paddingX: 0 }
+          }
+        ),
+        /* @__PURE__ */ jsxs(StackRowAlignCenterJustBetween, { sx: { marginTop: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            ButtonElement,
+            {
+              content: "Mặc định",
+              onClick: handleReset,
+              variant: "text",
+              sx: { color: PRIMARY[500], minWidth: 0, paddingX: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsxs(StackRowAlignCenter, { sx: { gap: 1 }, children: [
+            /* @__PURE__ */ jsx(ButtonElement, { onClick: onClose, variant: "outlined", content: "Hủy" }),
+            /* @__PURE__ */ jsx(ButtonElement, { onClick: handleApply, variant: "contained", content: "Áp dụng" })
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
 const FilterValueInput = ({ field, rowValue, onChange }) => {
   switch (field.type) {
     case "select":
@@ -78425,6 +78639,7 @@ const SearchDropdownComponent = ({
 };
 export {
   apps_const as APPS,
+  AdvancedFilterDialog,
   AdvancedOperatorFilterDialog,
   AppGrid,
   AppGridItem,