@goplusvn/core 0.1.55 → 0.1.56

package/src/ui/filters/__tests__/advanced-filter-builder.test.tsx

@@ -0,0 +1,194 @@
+/**
+ * Nửa CLIENT của filter-tree DSL. Chốt hai thứ đắt nếu sai: biên ngày (lọc
+ * "đến hết 31/07" phải ôm trọn ngày 31) và việc chỉ phát cây khi bấm "Áp dụng"
+ * — mỗi ký tự gõ mà đẩy URL thì danh sách nhấp nháy và Back hỏng.
+ */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  AdvancedFilterBuilder,
+  countFilterTreeLeaves,
+} from "../advanced-filter-builder";
+import type {
+  AdvancedFilterField,
+  FilterTree,
+} from "../advanced-filter-builder";
+
+const FIELDS: AdvancedFilterField[] = [
+  { name: "code", label: "Mã phiếu", type: "text" },
+  { name: "total", label: "Thành tiền", type: "number" },
+  { name: "createdAt", label: "Ngày tạo", type: "date" },
+];
+
+function setup(value: FilterTree | null = null) {
+  const onApply = vi.fn();
+  render(
+    <AdvancedFilterBuilder
+      fields={FIELDS}
+      value={value}
+      onApply={onApply}
+      tzOffset="+07:00"
+    />,
+  );
+  return { onApply, apply: () => fireEvent.click(screen.getByText("Áp dụng")) };
+}
+
+describe("countFilterTreeLeaves", () => {
+  it("đếm lá xuyên qua nhóm lồng", () => {
+    expect(countFilterTreeLeaves(null)).toBe(0);
+    expect(
+      countFilterTreeLeaves({ field: "a", operator: "eq", value: 1 }),
+    ).toBe(1);
+    expect(
+      countFilterTreeLeaves({
+        $and: [
+          { field: "a", operator: "eq", value: 1 },
+          {
+            $or: [
+              { field: "b", operator: "eq" },
+              { field: "c", operator: "eq" },
+            ],
+          },
+        ],
+      }),
+    ).toBe(3);
+  });
+});
+
+describe("AdvancedFilterBuilder", () => {
+  it("không phát gì trong lúc gõ, chỉ phát khi bấm Áp dụng", () => {
+    const { onApply, apply } = setup();
+    fireEvent.click(screen.getByText("Thêm điều kiện"));
+    fireEvent.change(screen.getByPlaceholderText("Giá trị"), {
+      target: { value: "PN2026" },
+    });
+    expect(onApply).not.toHaveBeenCalled();
+
+    apply();
+    expect(onApply).toHaveBeenCalledWith({
+      field: "code",
+      operator: "contains",
+      value: "PN2026",
+    });
+  });
+
+  it('"đến hết ngày" lấy 23:59:59.999 giờ VN, không phải nửa đêm', () => {
+    const { onApply, apply } = setup({
+      field: "createdAt",
+      operator: "lte",
+      value: "2026-07-31T16:59:59.999Z",
+    });
+    apply();
+    // 23:59:59.999 +07:00 == 16:59:59.999Z cùng ngày
+    expect(onApply).toHaveBeenCalledWith({
+      field: "createdAt",
+      operator: "lte",
+      value: "2026-07-31T16:59:59.999Z",
+    });
+  });
+
+  it('"từ ngày" lấy đầu ngày giờ VN, mở ra bấm lại KHÔNG lùi ngày', () => {
+    // 31/07 00:00 +07:00 nằm ở 17:00Z ngày 30 — cắt thẳng chuỗi ISO sẽ hiện 30.
+    const { onApply, apply } = setup({
+      field: "createdAt",
+      operator: "gte",
+      value: "2026-07-30T17:00:00.000Z",
+    });
+    expect(screen.getByDisplayValue("2026-07-31")).toBeTruthy();
+
+    apply();
+    expect(onApply).toHaveBeenCalledWith({
+      field: "createdAt",
+      operator: "gte",
+      value: "2026-07-30T17:00:00.000Z",
+    });
+  });
+
+  it("dựng lại draft từ cây đang áp, giữ nguyên chế độ bất kỳ", () => {
+    const { onApply, apply } = setup({
+      $or: [
+        { field: "code", operator: "contains", value: "PN" },
+        { field: "total", operator: "gte", value: 1000000 },
+      ],
+    });
+    expect(screen.getAllByPlaceholderText("Giá trị")).toHaveLength(2);
+    apply();
+    expect(onApply).toHaveBeenCalledWith({
+      $or: [
+        { field: "code", operator: "contains", value: "PN" },
+        { field: "total", operator: "gte", value: 1000000 },
+      ],
+    });
+  });
+
+  it("số nhập vào là number chứ không phải chuỗi", () => {
+    const { onApply, apply } = setup({
+      field: "total",
+      operator: "gte",
+      value: 500,
+    });
+    fireEvent.change(screen.getByPlaceholderText("Giá trị"), {
+      target: { value: "1500000" },
+    });
+    apply();
+    expect(onApply).toHaveBeenCalledWith({
+      field: "total",
+      operator: "gte",
+      value: 1500000,
+    });
+  });
+
+  it("bỏ điều kiện chưa có giá trị; hết sạch thì phát null (xoá lọc)", () => {
+    const { onApply, apply } = setup();
+    fireEvent.click(screen.getByText("Thêm điều kiện"));
+    apply();
+    expect(onApply).toHaveBeenCalledWith(null);
+  });
+
+  it("đổi sang bất kỳ thì gói bằng $or", () => {
+    const { onApply, apply } = setup({
+      $and: [
+        { field: "code", operator: "contains", value: "PN" },
+        { field: "total", operator: "gte", value: 100 },
+      ],
+    });
+    fireEvent.click(screen.getByText("bất kỳ"));
+    apply();
+    expect(onApply.mock.calls[0][0]).toHaveProperty("$or");
+  });
+
+  it("nút xoá lọc chỉ hiện khi đang có lọc, và phát null", () => {
+    render(
+      <AdvancedFilterBuilder fields={FIELDS} value={null} onApply={vi.fn()} />,
+    );
+    expect(screen.queryByText("Xoá lọc nâng cao")).toBeNull();
+
+    const onApply = vi.fn();
+    render(
+      <AdvancedFilterBuilder
+        fields={FIELDS}
+        value={{ field: "code", operator: "contains", value: "PN" }}
+        onApply={onApply}
+      />,
+    );
+    fireEvent.click(screen.getByText("Xoá lọc nâng cao"));
+    expect(onApply).toHaveBeenCalledWith(null);
+  });
+
+  it("xoá một điều kiện thì cây còn lại thu về lá đơn", () => {
+    const { onApply, apply } = setup({
+      $and: [
+        { field: "code", operator: "contains", value: "PN" },
+        { field: "total", operator: "gte", value: 100 },
+      ],
+    });
+    fireEvent.click(screen.getAllByTitle("Xoá điều kiện")[1]);
+    apply();
+    expect(onApply).toHaveBeenCalledWith({
+      field: "code",
+      operator: "contains",
+      value: "PN",
+    });
+  });
+});

package/src/ui/filters/advanced-filter-builder.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus, X } from "lucide-react";
+
+import type { FilterTreeNode } from "../../crud/lib/filter-tree";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/select";
+
+/**
+ * Bộ lọc nâng cao dạng điều kiện ghép (trường + toán tử + giá trị, thoả TẤT CẢ
+ * hoặc BẤT KỲ) — sinh cây khớp `FilterTreeNode` cho `compileFilterTree` phía
+ * server (`@goerp/core/crud/server`). Đây là NỬA CLIENT của DSL đó.
+ *
+ * MVP một nhóm phẳng; DSL server đã hỗ trợ lồng sâu cho caller gọi API trực
+ * tiếp. Draft giữ cục bộ, chỉ phát ra khi bấm "Áp dụng" — gõ tới đâu đẩy URL
+ * tới đó thì mỗi ký tự là một lần điều hướng.
+ */
+
+export interface AdvancedFilterField {
+  name: string;
+  label: string;
+  type: "text" | "number" | "date" | "select";
+  options?: { value: string; label: string }[];
+}
+
+/**
+ * CHÍNH LÀ kiểu server nhận (`import type` bị xoá lúc build nên không có
+ * module server nào lọt vào bundle client) — hai nửa không thể trôi khỏi nhau.
+ */
+export type FilterTree = FilterTreeNode;
+
+interface ConditionDraft {
+  field: string;
+  operator: string;
+  value: string;
+}
+
+const OPERATORS: Record<
+  AdvancedFilterField["type"],
+  { value: string; label: string; needsValue?: boolean }[]
+> = {
+  text: [
+    { value: "contains", label: "chứa" },
+    { value: "eq", label: "bằng" },
+    { value: "ne", label: "khác" },
+    { value: "startsWith", label: "bắt đầu bằng" },
+    { value: "isNull", label: "đang trống", needsValue: false },
+    { value: "isNotNull", label: "có giá trị", needsValue: false },
+  ],
+  number: [
+    { value: "eq", label: "=" },
+    { value: "ne", label: "≠" },
+    { value: "gte", label: "≥" },
+    { value: "lte", label: "≤" },
+    { value: "gt", label: ">" },
+    { value: "lt", label: "<" },
+  ],
+  date: [
+    { value: "gte", label: "từ ngày" },
+    { value: "lte", label: "đến hết ngày" },
+  ],
+  select: [
+    { value: "eq", label: "là" },
+    { value: "ne", label: "không là" },
+  ],
+};
+
+const VALUELESS = new Set(["isNull", "isNotNull"]);
+
+/** Múi giờ mặc định của các app GoERP. */
+const DEFAULT_TZ_OFFSET = "+07:00";
+
+/**
+ * Người dùng gõ ngày theo giờ địa phương; server so bằng mốc tuyệt đối. Quy về
+ * ĐÚNG BIÊN ngày: "đến hết ngày" phải là 23:59:59.999, không phải 00:00 (nếu
+ * không thì lọc "đến 31/07" bỏ mất toàn bộ chứng từ ngày 31).
+ */
+function dateLeafValue(
+  operator: string,
+  ymd: string,
+  tzOffset: string,
+): string {
+  return operator === "lte" || operator === "lt"
+    ? new Date(`${ymd}T23:59:59.999${tzOffset}`).toISOString()
+    : new Date(`${ymd}T00:00:00${tzOffset}`).toISOString();
+}
+
+function offsetMinutes(tzOffset: string): number {
+  const m = tzOffset.match(/^([+-])(\d{2}):?(\d{2})$/);
+  if (!m) return 0;
+  return (m[1] === "-" ? -1 : 1) * (Number(m[2]) * 60 + Number(m[3]));
+}
+
+/**
+ * Chiều ngược của `dateLeafValue`. Phải quy về NGÀY THEO MÚI GIỜ đó rồi mới
+ * cắt: đầu ngày VN nằm ở 17:00Z HÔM TRƯỚC, nên cắt thẳng chuỗi ISO sẽ hiện lùi
+ * một ngày — và mỗi lần mở ra bấm lại là lùi thêm một ngày nữa.
+ */
+function ymdInZone(value: unknown, tzOffset: string): string {
+  const raw = String(value);
+  const d = new Date(raw);
+  if (isNaN(d.getTime())) return raw.slice(0, 10);
+  return new Date(d.getTime() + offsetMinutes(tzOffset) * 60_000)
+    .toISOString()
+    .slice(0, 10);
+}
+
+function buildTree(
+  mode: "$and" | "$or",
+  drafts: ConditionDraft[],
+  fields: AdvancedFilterField[],
+  tzOffset: string,
+): FilterTree | null {
+  const leaves: FilterTree[] = [];
+  for (const d of drafts) {
+    const field = fields.find((f) => f.name === d.field);
+    if (!field || !d.operator) continue;
+    if (VALUELESS.has(d.operator)) {
+      leaves.push({ field: d.field, operator: d.operator });
+      continue;
+    }
+    if (d.value === "") continue;
+    let value: unknown = d.value;
+    if (field.type === "number") {
+      const n = Number(d.value);
+      if (!Number.isFinite(n)) continue;
+      value = n;
+    } else if (field.type === "date") {
+      value = dateLeafValue(d.operator, d.value, tzOffset);
+    }
+    leaves.push({ field: d.field, operator: d.operator, value });
+  }
+  if (leaves.length === 0) return null;
+  if (leaves.length === 1) return leaves[0];
+  return mode === "$and" ? { $and: leaves } : { $or: leaves };
+}
+
+/** Đếm số điều kiện trong cây — dùng cho badge trên toolbar. */
+export function countFilterTreeLeaves(tree: FilterTree | null): number {
+  if (!tree) return 0;
+  if ("$and" in tree)
+    return tree.$and.reduce((s, c) => s + countFilterTreeLeaves(c), 0);
+  if ("$or" in tree)
+    return tree.$or.reduce((s, c) => s + countFilterTreeLeaves(c), 0);
+  return 1;
+}
+
+function draftsFromTree(
+  tree: FilterTree | null,
+  fields: AdvancedFilterField[],
+  tzOffset: string,
+): { mode: "$and" | "$or"; drafts: ConditionDraft[] } {
+  if (!tree) return { mode: "$and", drafts: [] };
+  const mode: "$and" | "$or" = "$or" in tree ? "$or" : "$and";
+  const children =
+    "$and" in tree ? tree.$and : "$or" in tree ? tree.$or : [tree];
+  const drafts: ConditionDraft[] = [];
+  for (const child of children) {
+    if ("$and" in child || "$or" in child) continue; // MVP không dựng lại nhóm lồng
+    const field = fields.find((f) => f.name === child.field);
+    if (!field) continue;
+    let value = "";
+    if (child.value !== undefined && child.value !== null) {
+      value =
+        field.type === "date"
+          ? ymdInZone(child.value, tzOffset)
+          : String(child.value);
+    }
+    drafts.push({ field: child.field, operator: child.operator, value });
+  }
+  return { mode, drafts };
+}
+
+export interface AdvancedFilterBuilderProps {
+  fields: AdvancedFilterField[];
+  /** Cây đang áp (từ URL) — dựng lại draft khi mở. */
+  value: FilterTree | null;
+  /** `null` = xoá bộ lọc nâng cao. */
+  onApply: (tree: FilterTree | null) => void;
+  /** Múi giờ quy biên ngày, mặc định `+07:00`. */
+  tzOffset?: string;
+}
+
+export function AdvancedFilterBuilder({
+  fields,
+  value,
+  onApply,
+  tzOffset = DEFAULT_TZ_OFFSET,
+}: AdvancedFilterBuilderProps) {
+  const [{ mode, drafts }, setState] = useState(() =>
+    draftsFromTree(value, fields, tzOffset),
+  );
+  // URL đổi từ ngoài (Back/reset) → đồng bộ lại draft.
+  useEffect(() => {
+    setState(draftsFromTree(value, fields, tzOffset));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  const setMode = (m: "$and" | "$or") => setState({ mode: m, drafts });
+  const setDraft = (i: number, patch: Partial<ConditionDraft>) =>
+    setState({
+      mode,
+      drafts: drafts.map((d, idx) => (idx === i ? { ...d, ...patch } : d)),
+    });
+  const addDraft = () =>
+    setState({
+      mode,
+      drafts: [
+        ...drafts,
+        {
+          field: fields[0]?.name ?? "",
+          operator: OPERATORS[fields[0]?.type ?? "text"][0].value,
+          value: "",
+        },
+      ],
+    });
+  const removeDraft = (i: number) =>
+    setState({ mode, drafts: drafts.filter((_, idx) => idx !== i) });
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <span>Thoả</span>
+        <div className="flex overflow-hidden rounded-md border border-border">
+          <button
+            type="button"
+            onClick={() => setMode("$and")}
+            className={`px-2 py-1 transition-colors ${mode === "$and" ? "bg-muted font-semibold text-foreground" : "bg-card hover:text-foreground"}`}
+          >
+            tất cả
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode("$or")}
+            className={`border-l border-border px-2 py-1 transition-colors ${mode === "$or" ? "bg-muted font-semibold text-foreground" : "bg-card hover:text-foreground"}`}
+          >
+            bất kỳ
+          </button>
+        </div>
+        <span>điều kiện dưới đây</span>
+      </div>
+
+      {drafts.map((draft, i) => {
+        const field = fields.find((f) => f.name === draft.field) ?? fields[0];
+        const ops = OPERATORS[field.type];
+        const op = ops.find((o) => o.value === draft.operator) ?? ops[0];
+        return (
+          <div key={i} className="flex items-center gap-1.5">
+            <Select
+              value={draft.field}
+              onValueChange={(name) => {
+                const nf = fields.find((f) => f.name === name)!;
+                setDraft(i, {
+                  field: name,
+                  operator: OPERATORS[nf.type][0].value,
+                  value: "",
+                });
+              }}
+            >
+              <SelectTrigger className="h-8 w-[38%] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {fields.map((f) => (
+                  <SelectItem key={f.name} value={f.name} className="text-xs">
+                    {f.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <Select
+              value={draft.operator}
+              onValueChange={(operator) => setDraft(i, { operator })}
+            >
+              <SelectTrigger className="h-8 w-[26%] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {ops.map((o) => (
+                  <SelectItem key={o.value} value={o.value} className="text-xs">
+                    {o.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {op.needsValue === false ? (
+              <div className="flex-1" />
+            ) : field.type === "select" ? (
+              <Select
+                value={draft.value}
+                onValueChange={(v) => setDraft(i, { value: v })}
+              >
+                <SelectTrigger className="h-8 flex-1 text-xs">
+                  <SelectValue placeholder="Chọn..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {(field.options ?? []).map((o) => (
+                    <SelectItem
+                      key={o.value}
+                      value={o.value}
+                      className="text-xs"
+                    >
+                      {o.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <Input
+                type={
+                  field.type === "number"
+                    ? "number"
+                    : field.type === "date"
+                      ? "date"
+                      : "text"
+                }
+                value={draft.value}
+                onChange={(e) => setDraft(i, { value: e.target.value })}
+                className="h-8 flex-1 text-xs"
+                placeholder="Giá trị"
+              />
+            )}
+
+            <button
+              type="button"
+              onClick={() => removeDraft(i)}
+              className="shrink-0 text-muted-foreground hover:text-destructive"
+              title="Xoá điều kiện"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        );
+      })}
+
+      <div className="flex items-center justify-between pt-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 px-2 text-xs"
+          onClick={addDraft}
+        >
+          <Plus className="mr-1 h-3.5 w-3.5" /> Thêm điều kiện
+        </Button>
+        <div className="flex gap-1.5">
+          {value && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-xs text-muted-foreground"
+              onClick={() => onApply(null)}
+            >
+              Xoá lọc nâng cao
+            </Button>
+          )}
+          <Button
+            type="button"
+            size="sm"
+            className="h-7 px-3 text-xs"
+            onClick={() => onApply(buildTree(mode, drafts, fields, tzOffset))}
+          >
+            Áp dụng
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/filters/index.ts

@@ -0,0 +1,7 @@
+export {
+  AdvancedFilterBuilder,
+  countFilterTreeLeaves,
+  type AdvancedFilterBuilderProps,
+  type AdvancedFilterField,
+  type FilterTree,
+} from "./advanced-filter-builder";

package/src/ui/index.tsx

@@ -10,6 +10,7 @@ export * from "./primitives/client";
 export * from "./forms";
 export * from "./data-display";
 export * from "./feedback";
+export * from "./filters";
 export * from "./layout";
 export * from "./auth";
 // export * from "./crud"

package/src/crud/crud-filters/checkbox-filter.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { dataLoader } from "../lib/data-loader";
-
-import { useCrudContext } from "../components/crud-provider";
-import { Checkbox } from "../../ui/primitives/checkbox";
-import { Label } from "../../ui/primitives/label";
-import { ScrollArea } from "../../ui/primitives/scroll-area";
-import type { FilterConfig } from "../../types";
-
-export function CheckboxFilter({ filter }: { filter: FilterConfig }) {
-  const { filters, addFilter, removeFilter } = useCrudContext();
-  const currentFilter = filters.find((f: any) => f.name === filter.name);
-  const [value, setValue] = useState<string[]>(
-    currentFilter?.value
-      ? (currentFilter.value as string[])
-      : (filter.defaultValue as string[]) || [],
-  );
-  const [options, setOptions] = useState<
-    Array<{ label: string; value: string | number | boolean }>
-  >(filter.options || []);
-
-  // Load options from API if dataSource is provided
-  useEffect(() => {
-    if (filter.dataSource) {
-      dataLoader
-        .loadOptions(filter.dataSource)
-        .then(setOptions)
-        .catch((error) => {
-          console.error("Error loading filter options:", error);
-        });
-    }
-  }, [filter.dataSource]);
-
-  useEffect(() => {
-    const externalFilter = filters.find((f) => f.name === filter.name);
-    if (externalFilter && externalFilter.value !== value) {
-      setValue((externalFilter.value as string[]) || []);
-    }
-  }, [filters, filter.name, value]);
-
-  const handleChange = (optionValue: string | number, checked: boolean) => {
-    const stringValue = String(optionValue);
-    const updatedValues = checked
-      ? [...value, stringValue]
-      : value.filter((v) => v !== stringValue);
-
-    setValue(updatedValues);
-
-    if (updatedValues.length === 0) {
-      return;
-    }
-
-    addFilter({
-      name: filter.name,
-      value: updatedValues,
-      operator: filter.operator || "in",
-    });
-  };
-
-  return (
-    <div className="space-y-2">
-      <Label>{filter.label}</Label>
-      <div className="space-y-2">
-        {options.map((option) => (
-          <div key={String(option.value)} className="flex items-center space-x-2">
-            <Checkbox
-              id={`${filter.name}-${option.value}`}
-              checked={value.includes(String(option.value))}
-              onCheckedChange={(checked) =>
-                handleChange(String(option.value), checked === true)
-              }
-            />
-            <Label
-              htmlFor={`${filter.name}-${option.value}`}
-              className="font-normal cursor-pointer"
-            >
-              {option.label}
-            </Label>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}