Query Filter

"use client";

import { useState } from "react";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";

export function QueryFilterMinimalDemo() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null);
  return (
    <div className="w-full space-y-4">
      <QueryFilter onFinish={(values) => setSubmitted(values)}>
        <FormField kind="text" name="keyword" label="Keyword" />
        <FormField
          kind="select"
          name="status"
          label="Status"
          componentProps={{
            options: [
              { label: "Active", value: "active" },
              { label: "Archived", value: "archived" },
            ],
          }}
        />
      </QueryFilter>
      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useState } from "react";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";
import { STATUS_VARIANTS } from "@/features/demo-orders/demo-data";

const STATUS_OPTIONS = Object.entries(STATUS_VARIANTS).map(([value, variant]) => ({
  label: variant.label,
  value,
}));

export function QueryFilterLabelWidthDemo() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null);

  return (
    <div className="w-full space-y-4">
      <QueryFilter
        orientation="horizontal"
        labelWidth="5rem"
        columns={{ base: 1, md: 2, lg: 3 }}
        onFinish={setSubmitted}
      >
        <FormField kind="text" name="orderNumber" label="Order #" />
        <FormField kind="text" name="customer" label="Customer" />
        <FormField
          kind="select"
          name="status"
          label="Status"
          componentProps={{ options: STATUS_OPTIONS, placeholder: "Any" }}
        />
      </QueryFilter>
      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";

export function QueryFilterCollapseDemo() {
  return (
    <QueryFilter
      columns={{ base: 1, md: 2, lg: 3 }}
      collapsedRows={1}
      onFinish={() => {}}
    >
      <FormField kind="text" name="name" label="Name" />
      <FormField kind="text" name="email" label="Email" />
      <FormField kind="text" name="company" label="Company" />
      <FormField kind="text" name="city" label="City" />
      <FormField kind="text" name="country" label="Country" />
      <FormField kind="text" name="tag" label="Tag" />
    </QueryFilter>
  );
}

"use client";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";

export function QueryFilterActionsNewlineDemo() {
  return (
    <QueryFilter
      actionsLayout="newLine"
      columns={{ base: 1, md: 2, lg: 3 }}
      onFinish={() => {}}
    >
      <FormField kind="text" name="name" label="Name" />
      <FormField kind="text" name="email" label="Email" />
      <FormField kind="text" name="company" label="Company" />
    </QueryFilter>
  );
}

"use client";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";

const FIELDS = [
  "Name", "Email", "Company", "City", "Country", "Tag",
  "Owner", "Channel", "Sku", "Warehouse", "Priority", "Note",
] as const;

export function QueryFilterExpandedCapDemo() {
  return (
    <QueryFilter
      columns={{ base: 1, md: 2, lg: 3 }}
      collapsedRows={1}
      defaultCollapsed={false}
      maxExpandedRows={3}
      onFinish={() => {}}
    >
      {FIELDS.map((label) => (
        <FormField
          key={label}
          kind="text"
          name={label.toLowerCase()}
          label={label}
        />
      ))}
    </QueryFilter>
  );
}

"use client";

import { useState } from "react";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";
import { STATUS_VARIANTS } from "@/features/demo-orders/demo-data";

const STATUS_OPTIONS = Object.entries(STATUS_VARIANTS).map(([value, variant]) => ({
  label: variant.label,
  value,
}));

export function QueryFilterFieldKindsDemo() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null);
  return (
    <div className="w-full space-y-4">
      <QueryFilter columns={{ base: 1, md: 3 }} onFinish={(v) => setSubmitted(v)}>
        <FormField kind="text" name="keyword" label="Keyword" />
        <FormField
          kind="select"
          name="status"
          label="Status"
          componentProps={{
            options: STATUS_OPTIONS,
            placeholder: "Any status",
          }}
        />
        <FormField kind="dateRange" name="created" label="Created" />
      </QueryFilter>
      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useState } from "react";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";

function minLengthWhenFilled(min: number, message: string) {
  return (value: string | undefined) => {
    const trimmed = String(value ?? "").trim();
    if (!trimmed) return "";
    return trimmed.length >= min ? "" : message;
  };
}

export function QueryFilterValidationDemo() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null);
  const [attempts, setAttempts] = useState(0);

  return (
    <div className="w-full space-y-4">
      <p className="text-muted-foreground text-xs">
        Click <strong>Search</strong> with keyword <code>a</code> or email{" "}
        <code>not-an-email</code> — validation blocks <code>onFinish</code>. Fix the
        fields, then Search again.
      </p>
      <QueryFilter
        onFinish={(values) => {
          setSubmitted(values);
          setAttempts((n) => n + 1);
        }}
        onReset={() => {
          setSubmitted(null);
          setAttempts(0);
        }}
      >
        <FormField
          kind="text"
          name="keyword"
          label="Keyword"
          description="Optional — at least 2 characters when filled"
          validator={minLengthWhenFilled(2, "Enter at least 2 characters")}
        />
        <FormField
          kind="email"
          name="customerEmail"
          label="Customer email"
          description="Optional — format checked on blur"
          componentProps={{ placeholder: "buyer@example.com" }}
        />
        <FormField
          kind="currency"
          name="minAmount"
          label="Min amount"
          description="Optional — must be zero or positive"
          componentProps={{ currency: "USD", placeholder: "0.00" }}
          validator={(value) => {
            if (value === undefined || value === null || value === "") return "";
            return Number(value) >= 0 ? "" : "Amount cannot be negative";
          }}
        />
      </QueryFilter>
      <div className="text-muted-foreground space-y-2 text-xs">
        <p>
          Search attempts: <strong>{attempts}</strong> — only increments when validation
          passes and <code>onFinish</code> runs.
        </p>
        {submitted ? (
          <pre className="bg-muted overflow-auto rounded-md p-3">
            <code>{JSON.stringify(submitted, null, 2)}</code>
          </pre>
        ) : (
          <p>No successful query yet.</p>
        )}
      </div>
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";
import { STATUS_VARIANTS } from "@/features/demo-orders/demo-data";

const STATUS_OPTIONS = Object.entries(STATUS_VARIANTS).map(([value, variant]) => ({
  label: variant.label,
  value,
}));

const CHANNEL_OPTIONS = [
  { label: "Web", value: "web" },
  { label: "Retail", value: "retail" },
  { label: "Partner", value: "partner" },
];

export function QueryFilterReactionsDemo() {
  const [submitted, setSubmitted] = useState<Record<string, unknown> | null>(null);
  const statusOptions = useMemo(() => STATUS_OPTIONS, []);

  return (
    <div className="w-full space-y-4">
      <p className="text-muted-foreground text-xs">
        Pick <strong>Cancelled</strong> to reveal a required reason field, or{" "}
        <strong>Shipped</strong> to reveal channel — powered by Formily{" "}
        <code>reactions</code> on each <code>FormField</code>.
      </p>
      <QueryFilter columns={{ base: 1, md: 2, lg: 3 }} onFinish={setSubmitted}>
        <FormField kind="text" name="keyword" label="Keyword" />
        <FormField
          kind="select"
          name="status"
          label="Status"
          componentProps={{ options: statusOptions, placeholder: "Any status" }}
        />
        <FormField
          kind="text"
          name="cancelReason"
          label="Cancel reason"
          description="Required when status is Cancelled"
          reactions={(field) => {
            const isCancelled = field.query(".status").value() === "cancelled";
            field.visible = isCancelled;
            field.required = isCancelled;
          }}
        />
        <FormField
          kind="select"
          name="channel"
          label="Channel"
          description="Shown when status is Shipped"
          componentProps={{ options: CHANNEL_OPTIONS, placeholder: "Any channel" }}
          reactions={(field) => {
            field.visible = field.query(".status").value() === "shipped";
          }}
        />
      </QueryFilter>
      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";

import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { SchemaField } from "@/components/f-ui/formily/schema-field";
import { STATUS_VARIANTS } from "@/features/demo-orders/demo-data";

const STATUS_OPTIONS = Object.entries(STATUS_VARIANTS).map(([value, variant]) => ({
  label: variant.label,
  value,
}));

const filterSchema = {
  type: "object",
  properties: {
    keyword: {
      type: "string",
      title: "Keyword",
      "x-decorator": "FormItem",
      "x-component": "Input",
      "x-component-props": { placeholder: "Order # or customer" },
    },
    status: {
      type: "string",
      title: "Status",
      "x-decorator": "FormItem",
      "x-component": "Select",
      "x-component-props": { options: STATUS_OPTIONS, placeholder: "Any status" },
    },
    created: {
      type: "string",
      title: "Created",
      "x-decorator": "FormItem",
      "x-component": "DateRangePicker",
    },
  },
} as const;

interface FilterValues {
  keyword?: string;
  status?: string;
  created?: [string, string];
}

export function QueryFilterSchemaDemo() {
  const form = useMemo(() => createForm<FilterValues>(), []);
  const [submitted, setSubmitted] = useState<Partial<FilterValues> | null>(null);

  return (
    <div className="w-full space-y-4">
      <p className="text-muted-foreground text-xs">
        Backend-driven filters: pass a JSON Schema to <code>SchemaField</code> inside{" "}
        <code>QueryFilter</code> — uses the same schema component registry as Form (Formily).
      </p>
      <QueryFilter form={form} columns={{ base: 1, md: 3 }} onFinish={setSubmitted}>
        <SchemaField schema={filterSchema} />
      </QueryFilter>
      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";

import { useDataList } from "@/components/f-ui/data-list-internals/use-data-list";
import { isListInteractionLocked } from "@/components/f-ui/data-list-internals/lib/resolve-list-loading";
import { defineDataListSchema } from "@/components/f-ui/data-list-internals/schema/define-data-list-schema";
import { Table } from "@/components/f-ui/table/table";
import { QueryFilter } from "@/components/f-ui/query-filter/query-filter";
import { FormField } from "@/components/f-ui/formily/form-field";
import { type Order, SEED_ORDERS, STATUS_VARIANTS } from "@/features/demo-orders/demo-data";
import { TableDemoQueryProvider } from "@/demos/table/samples";
import { f } from "@/components/f-ui/field-types/catalog";

const STATUS_OPTIONS = Object.entries(STATUS_VARIANTS).map(([value, variant]) => ({
  label: variant.label,
  value,
}));

function filterOrders(
  orders: readonly Order[],
  query: Record<string, unknown> | null,
): Order[] {
  if (!query) return [...orders];

  let result = [...orders];
  const keyword = String(query.keyword ?? "").trim();
  if (keyword) {
    const lower = keyword.toLowerCase();
    result = result.filter(
      (row) =>
        row.orderNumber.toLowerCase().includes(lower) ||
        row.customer.toLowerCase().includes(lower),
    );
  }

  const status = query.status;
  if (status !== undefined && status !== null && status !== "") {
    result = result.filter((row) => row.status === status);
  }

  return result;
}

const orderSchema = defineDataListSchema<Order>({
  orderNumber: f.text({ label: "Order #", sortable: true }),
  customer: f.text({ label: "Customer", sortable: true }),
  status: f.enum({ render: "status", label: "Status", sortable: true, variants: STATUS_VARIANTS }),
  amount: f.currency({ label: "Amount", currency: "USD", sortable: true }),
});

export function QueryFilterWithTableDemo() {
  return (
    <TableDemoQueryProvider>
      <QueryFilterWithTableDemoInner />
    </TableDemoQueryProvider>
  );
}

function QueryFilterWithTableDemoInner() {
  const [lastQuery, setLastQuery] = useState<Record<string, unknown> | null>(null);

  const filteredData = useMemo(
    () => filterOrders(SEED_ORDERS, lastQuery),
    [lastQuery],
  );

  const handle = useDataList({
    schema: orderSchema,
    listCode: "docs-query-filter-with-table",
    data: filteredData,
    getRowId: (r) => r.id,
    defaultPageSize: 8,
    features: { pagination: { mode: "offset" } },
  });

  return (
    <div className="space-y-3">
      <p className="text-muted-foreground text-xs">
        <code>QueryFilter</code> is independent of <code>Table</code>. Wire{" "}
        <code>onFinish</code> to your fetch or params — this demo filters in memory so you can see
        the table react after Search.
      </p>
      <QueryFilter
        loading={isListInteractionLocked(handle.data.status)}
        onFinish={(values) => {
          setLastQuery(values);
          handle.setParams({ page: 1 });
        }}
        onReset={() => {
          setLastQuery(null);
          handle.setParams({ page: 1 });
        }}
      >
        <FormField kind="text" name="keyword" label="Keyword" />
        <FormField
          kind="select"
          name="status"
          label="Status"
          componentProps={{ options: STATUS_OPTIONS }}
        />
      </QueryFilter>
      <Table dataList={handle} className="min-h-0" />
      {lastQuery ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(lastQuery, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}