@ayasofyazilim/ui 0.0.0

package/src/custom/master-data-grid/components/filters/inline-column-filter.tsx

@@ -0,0 +1,233 @@
+import type { Column } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../../../components/dropdown-menu";
+import type {
+  ColumnFilter,
+  ColumnMeta,
+  FilterOperator,
+  MasterDataGridResources,
+} from "../../types";
+import {
+  getFilterOperators,
+  validateFilterValue,
+} from "../../utils/filter-fns";
+import { getTranslations } from "../../utils/translation-utils";
+import { FilterInput } from "./filter-input";
+
+interface InlineColumnFilterProps<TData> {
+  column: Column<TData, unknown>;
+  t?: MasterDataGridResources;
+}
+
+export function InlineColumnFilter<TData>({
+  column,
+  t,
+}: InlineColumnFilterProps<TData>) {
+  const meta = column.columnDef.meta as ColumnMeta | undefined;
+  const schemaProperty = meta?.schemaProperty;
+  const filterOperators = meta?.filterOperators;
+
+  const availableOperators = useMemo<FilterOperator[]>(() => {
+    return (
+      filterOperators ||
+      (schemaProperty
+        ? getFilterOperators(schemaProperty.type, schemaProperty.format)
+        : ["contains"])
+    );
+  }, [filterOperators, schemaProperty?.type, schemaProperty?.format]);
+
+  const currentFilter = column.getFilterValue() as ColumnFilter | undefined;
+  const [operator, setOperator] = useState<FilterOperator>(
+    currentFilter?.operator || availableOperators[0] || "contains"
+  );
+  const [value, setValue] = useState<string>(
+    String(currentFilter?.value || "")
+  );
+  const [value2, setValue2] = useState<string>(
+    String(currentFilter?.value2 || "")
+  );
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isRangeOperator = operator === "between" || operator === "inRange";
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      setValue(newValue);
+
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        if (!newValue && !isRangeOperator) {
+          column.setFilterValue(undefined);
+          return;
+        }
+
+        if (isRangeOperator) {
+          if (
+            newValue &&
+            value2 &&
+            validateFilterValue(operator, newValue, value2)
+          ) {
+            const filter: ColumnFilter = {
+              id: column.id,
+              operator,
+              value: newValue,
+              value2,
+            };
+            column.setFilterValue(filter);
+          }
+        } else if (validateFilterValue(operator, newValue)) {
+          const filter: ColumnFilter = {
+            id: column.id,
+            operator,
+            value: newValue,
+          };
+          column.setFilterValue(filter);
+        }
+      }, 300);
+    },
+    [column, operator, value2, isRangeOperator]
+  );
+
+  const handleValue2Change = useCallback(
+    (newValue2: string) => {
+      setValue2(newValue2);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        if (
+          value &&
+          newValue2 &&
+          validateFilterValue(operator, value, newValue2)
+        ) {
+          const filter: ColumnFilter = {
+            id: column.id,
+            operator,
+            value,
+            value2: newValue2,
+          };
+          column.setFilterValue(filter);
+        }
+      }, 300);
+    },
+    [column, operator, value]
+  );
+
+  const handleSliderChange = (values: number[]) => {
+    const [min, max] = values;
+    setValue(String(min));
+    setValue2(String(max));
+
+    const filter: ColumnFilter = {
+      id: column.id,
+      operator,
+      value: String(min),
+      value2: String(max),
+    };
+    column.setFilterValue(filter);
+  };
+
+  const handleClear = () => {
+    setValue("");
+    setValue2("");
+    column.setFilterValue(undefined);
+  };
+
+  const handleOperatorChange = (newOperator: FilterOperator) => {
+    setOperator(newOperator);
+
+    const isNewRangeOperator =
+      newOperator === "between" || newOperator === "inRange";
+    const needsNoInputNew =
+      newOperator === "isEmpty" || newOperator === "isNotEmpty";
+
+    if (needsNoInputNew) {
+      const filter: ColumnFilter = {
+        id: column.id,
+        operator: newOperator,
+        value: "",
+      };
+      column.setFilterValue(filter);
+    } else if (isNewRangeOperator) {
+      if (value && value2 && validateFilterValue(newOperator, value, value2)) {
+        const filter: ColumnFilter = {
+          id: column.id,
+          operator: newOperator,
+          value,
+          value2,
+        };
+        column.setFilterValue(filter);
+      } else {
+        column.setFilterValue(undefined);
+      }
+    } else {
+      if (value && validateFilterValue(newOperator, value)) {
+        const filter: ColumnFilter = {
+          id: column.id,
+          operator: newOperator,
+          value,
+        };
+        column.setFilterValue(filter);
+      } else {
+        column.setFilterValue(undefined);
+      }
+    }
+  };
+  const showOperatorSelect = availableOperators.length > 1;
+
+  return (
+    <div className="space-y-2">
+      {showOperatorSelect && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="w-full px-2 py-1.5 text-xs font-medium hover:bg-accent rounded-md flex items-center justify-between">
+              {getTranslations(`filter.operator.${operator}`, t)}
+              <ChevronDown className="size-3" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {availableOperators.map((op) => (
+              <DropdownMenuItem
+                key={op}
+                onClick={() => handleOperatorChange(op)}
+                className="text-xs"
+              >
+                {getTranslations(`filter.operator.${op}`, t)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+
+      <FilterInput
+        operator={operator}
+        value={value}
+        value2={value2}
+        columnMeta={meta}
+        onValueChange={handleValueChange}
+        onValue2Change={handleValue2Change}
+        onSliderChange={handleSliderChange}
+        onClear={handleClear}
+        t={t}
+        variant="inline"
+      />
+    </div>
+  );
+}

package/src/custom/master-data-grid/components/filters/multi-filter-dialog.tsx

@@ -0,0 +1,90 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@repo/ayasofyazilim-ui/components/tabs";
+import type { Table } from "@tanstack/react-table";
+
+import { useIsMobile } from "@repo/ayasofyazilim-ui/hooks/use-mobile";
+import { useState } from "react";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../../../../components/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../components/popover";
+import type { MasterDataGridConfig } from "../../types";
+import { getTranslations } from "../../utils/translation-utils";
+import { ClientFilterContent } from "./client-filter";
+import { ServerFilterContent } from "./server-filter";
+
+export interface BaseMultiFilterDialogProps<TData> {
+  table: Table<TData>;
+  config: MasterDataGridConfig<TData>;
+}
+interface MultiFilterDialogProps<TData>
+  extends BaseMultiFilterDialogProps<TData> {
+  children: React.ReactNode;
+}
+
+export function MultiFilterDialog<TData>({
+  table,
+  config,
+  children,
+}: MultiFilterDialogProps<TData>) {
+  const { t } = config;
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+
+  const filterContent = (
+    <Tabs defaultValue="client">
+      {config.serverFilters && (
+        <TabsList>
+          <TabsTrigger value="client">{t?.["toolbar.client"]}</TabsTrigger>
+          <TabsTrigger value="server">{t?.["toolbar.server"]}</TabsTrigger>
+        </TabsList>
+      )}
+      <TabsContent value="client" className="w-full">
+        <ClientFilterContent setOpen={setOpen} table={table} config={config} />
+      </TabsContent>
+      <TabsContent
+        value="server"
+        className="w-full min-w-lg max-w-lg [&>fieldset]:p-0"
+      >
+        <ServerFilterContent table={table} config={config} />
+      </TabsContent>
+    </Tabs>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{children}</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>{getTranslations("filter.title", t)}</DrawerTitle>
+          </DrawerHeader>
+          <div className="px-4 pb-4 max-h-[70vh] overflow-y-auto">
+            {filterContent}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-auto max-w-3xl" align="end">
+        {filterContent}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/custom/master-data-grid/components/filters/server-filter.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+} from "@repo/ayasofyazilim-ui/components/field";
+import { Selectable } from "@repo/ayasofyazilim-ui/custom/selectable";
+import { Loader2, RotateCcw, Search, XCircle } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useState, useTransition } from "react";
+import { ServerFilterConfig } from "../../types";
+import { BaseMultiFilterDialogProps } from "./multi-filter-dialog";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@repo/ayasofyazilim-ui/components/input-group";
+import {
+  ScrollArea,
+  ScrollBar,
+} from "@repo/ayasofyazilim-ui/components/scroll-area";
+import { getTranslations } from "../../utils";
+
+type FilterValue = string | number | boolean | string[] | undefined;
+
+export function ServerFilterContent<TData>({
+  config,
+}: BaseMultiFilterDialogProps<TData>) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  const { serverFilters } = config;
+  if (!serverFilters) return null;
+
+  const [resetCount, setResetCount] = useState(0);
+
+  const [localValues, setLocalValues] = useState<Record<string, FilterValue>>(
+    () => {
+      const initial: Record<string, FilterValue> = {};
+      serverFilters.forEach((filter) => {
+        const val = searchParams.get(filter.key);
+        if (filter.type === "array") {
+          initial[filter.key] = searchParams.getAll(filter.key);
+        } else if (filter.type === "boolean") {
+          initial[filter.key] =
+            val === "true" ? true : val === "false" ? false : undefined;
+        } else if (filter.type === "number") {
+          initial[filter.key] = val ? Number(val) : undefined;
+        } else {
+          initial[filter.key] = val || undefined;
+        }
+      });
+      return initial;
+    }
+  );
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const onValueChange = useCallback(
+    (filter: ServerFilterConfig, rawValue: FilterValue) => {
+      let processedValue: FilterValue = rawValue;
+      if (
+        rawValue === "" ||
+        (Array.isArray(rawValue) && rawValue.length === 0)
+      ) {
+        processedValue = undefined;
+      }
+
+      if (filter.validator) {
+        const result = filter.validator.safeParse(processedValue);
+        setErrors((prev) => ({
+          ...prev,
+          [filter.key]: result.success
+            ? ""
+            : result.error.issues[0]?.message || "Hata",
+        }));
+      }
+
+      setLocalValues((prev) => ({ ...prev, [filter.key]: processedValue }));
+    },
+    []
+  );
+
+  const handleApply = () => {
+    const params = new URLSearchParams(searchParams.toString());
+    let hasValidationError = false;
+
+    serverFilters.forEach((filter) => {
+      const val = localValues[filter.key];
+      params.delete(filter.key);
+      const isEmpty =
+        val === undefined ||
+        val === null ||
+        val === "" ||
+        (Array.isArray(val) && val.length === 0);
+
+      if (!isEmpty) {
+        if (filter.validator) {
+          const result = filter.validator.safeParse(val);
+          if (!result.success) {
+            hasValidationError = true;
+            setErrors((prev) => ({
+              ...prev,
+              [filter.key]: result.error.issues[0]?.message || "Hata",
+            }));
+            return;
+          }
+        }
+        if (Array.isArray(val)) {
+          val.forEach((v) => params.append(filter.key, String(v)));
+        } else {
+          params.set(filter.key, String(val));
+        }
+      } else {
+        setErrors((prev) => ({ ...prev, [filter.key]: "" }));
+      }
+    });
+    if (hasValidationError) return;
+    params.delete("page");
+    startTransition(() => {
+      router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    });
+  };
+
+  const handleReset = () => {
+    const initial: Record<string, FilterValue> = {};
+    serverFilters.forEach((f) => {
+      initial[f.key] = f.type === "array" ? [] : undefined;
+    });
+    setLocalValues(initial);
+    setErrors({});
+    setResetCount((prev) => prev + 1);
+    startTransition(() => router.push(pathname, { scroll: false }));
+  };
+
+  const clearSingleFilter = useCallback((filter: ServerFilterConfig) => {
+    const emptyValue =
+      filter.type === "array" ? [] : filter.type === "boolean" ? undefined : "";
+    setLocalValues((prev) => ({ ...prev, [filter.key]: emptyValue }));
+    setErrors((prev) => ({ ...prev, [filter.key]: "" }));
+    if (["select", "array", "boolean"].includes(filter.type)) {
+      setResetCount((prev) => prev + 1);
+    }
+  }, []);
+
+  return (
+    <FieldSet className="p-2">
+      <ScrollArea className="pr-4">
+        <ScrollBar />
+        <FieldGroup className={"gap-3 max-h-80"}>
+          {serverFilters.map((filter) => {
+            const value = localValues[filter.key];
+
+            const isSelectable =
+              filter.type === "select" ||
+              filter.type === "array" ||
+              filter.type === "boolean";
+            if (isSelectable) {
+              return (
+                <Field key={filter.key} className="gap-1">
+                  <FieldLabel htmlFor={filter.key}>{filter.label}</FieldLabel>
+                  <Selectable
+                    id={filter.key}
+                    key={`${filter.key}-${resetCount}`}
+                    singular={filter.type !== "array"}
+                    options={filter.options}
+                    defaultValue={filter.options.filter((opt) =>
+                      Array.isArray(value)
+                        ? value.includes(opt.value)
+                        : String(value) === opt.value
+                    )}
+                    getKey={(opt) => opt.value}
+                    getLabel={(opt) => opt.label}
+                    onChange={(selected) => {
+                      const values = selected.map((s) => s.value);
+                      onValueChange(
+                        filter,
+                        filter.type === "array"
+                          ? values
+                          : values[0] || undefined
+                      );
+                    }}
+                    searchPlaceholderText={filter.placeholder}
+                    makeAChoiceText={filter.placeholder}
+                  />
+                  {errors[filter.key] && (
+                    <FieldError>{errors[filter.key]}</FieldError>
+                  )}
+                </Field>
+              );
+            }
+            return (
+              <Field key={filter.key} className="gap-1">
+                <FieldLabel htmlFor={filter.key}>{filter.label}</FieldLabel>
+                <InputGroup>
+                  <InputGroupInput
+                    id={filter.key}
+                    type={filter.type === "number" ? "number" : "text"}
+                    value={
+                      typeof value === "boolean" || typeof value === "object"
+                        ? ""
+                        : value ?? ""
+                    }
+                    placeholder={filter.placeholder}
+                    onKeyDown={(e) => e.key === "Enter" && handleApply()}
+                    onChange={(e) => onValueChange(filter, e.target.value)}
+                    className={errors[filter.key] ? "border-destructive" : ""}
+                  />
+                  {localValues[filter.key] && (
+                    <InputGroupAddon align="inline-end">
+                      <InputGroupButton
+                        onClick={() => clearSingleFilter(filter)}
+                      >
+                        <XCircle />
+                      </InputGroupButton>
+                    </InputGroupAddon>
+                  )}
+                </InputGroup>
+                {errors[filter.key] && (
+                  <FieldError>{errors[filter.key]}</FieldError>
+                )}
+              </Field>
+            );
+          })}
+        </FieldGroup>
+      </ScrollArea>
+      <Field orientation="horizontal">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={handleReset}
+          disabled={isPending}
+        >
+          <RotateCcw className="mr-2 h-4 w-4" />{" "}
+          {getTranslations("filter.clear", config.t)}
+        </Button>
+        <Button type="button" onClick={handleApply} disabled={isPending}>
+          {isPending ? (
+            <Loader2 className="animate-spin" />
+          ) : (
+            <Search className="mr-2 h-4 w-4" />
+          )}
+          {getTranslations("filter.apply", config.t)}
+        </Button>
+      </Field>
+    </FieldSet>
+  );
+}