@goplusvn/core 0.1.55 → 0.1.56

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

@@ -1,82 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { useCrudContext } from "../components/crud-provider";
-import { Calendar } from "../../ui/primitives/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "../../ui/primitives/popover";
-import { Button } from "../../ui/primitives/button";
-import { cn } from "../../utils";
-import { format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { FilterConfig } from "../../types";
-import { Label } from "../../ui/primitives/label"; // Imported Label
-import { DateRangePicker } from "../../ui/forms/date-range-picker"; // Imported DateRangePicker
-import { DatePicker } from "../../ui/forms/date-picker"; // Imported DatePicker
-
-export function DatetimeFilter({ filter, mode: propMode }: { filter: FilterConfig; mode?: string }) {
-  const { filters, setFilters, addFilter } = useCrudContext(); // Added addFilter
-  const currentFilter = filters.find((f: any) => f.name === filter.name);
-  // Since 'mode' is removed, we assume single date selection.
-  // Wait, the code uses 'mode'.
-  // "const operator = mode === 'range' ? ..."
-  // I need to define mode.
-  const mode = propMode || filter.mode || "single";
-
-  const [value, setValue] = useState<Date | [Date, Date] | null>(
-    currentFilter?.value ? (currentFilter.value as Date) : null,
-  );
-
-  useEffect(() => {
-    const externalFilter = filters.find((f) => f.name === filter.name);
-    if (externalFilter && externalFilter.value !== value) {
-      setValue(
-        mode === "range"
-          ? (externalFilter.value as [Date, Date])
-          : (externalFilter.value as Date),
-      );
-    }
-  }, [filters, filter.name, mode, value]);
-
-  const handleChange = (newValue: Date | [Date, Date] | null) => {
-    setValue(newValue);
-
-    if (!newValue) {
-      return;
-    }
-
-    const operator =
-      mode === "range" ? filter.operator || "between" : filter.operator || "eq";
-
-    addFilter({
-      name: filter.name,
-      value: newValue,
-      operator,
-    });
-  };
-
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={filter.name}>{filter.label}</Label>
-      {mode === "range" ? (
-        <DateRangePicker
-          value={
-            value && Array.isArray(value)
-              ? { from: value[0], to: value[1] }
-              : undefined
-          }
-          onValueChange={(range) => {
-            handleChange(
-              range?.from && range?.to ? [range.from, range.to] : null,
-            );
-          }}
-        />
-      ) : (
-        <DatePicker
-          value={(value as Date) || undefined}
-          onValueChange={(date) => handleChange(date || null)}
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,64 +0,0 @@
-"use client";
-
-import type { FilterConfig } from "../../types";
-
-import { CheckboxFilter } from "./checkbox-filter";
-import { DatetimeFilter } from "./datetime-filter";
-import { RadioFilter } from "./radio-filter";
-import { SelectFilter } from "./select-filter";
-import { TextFilter } from "./text-filter";
-
-interface FilterBuilderProps {
-  filters: FilterConfig[];
-}
-
-export function FilterBuilder({ filters }: FilterBuilderProps) {
-  if (!filters || filters.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-4">
-      {filters.map((filter) => {
-        switch (filter.type) {
-          case "text":
-            return <TextFilter key={filter.name} filter={filter} />;
-          case "datetime":
-            // Check if filter should be range based on operator
-            const isRange =
-              filter.operator === "between" ||
-              filter.name.toLowerCase().includes("range");
-            return (
-              <DatetimeFilter
-                key={filter.name}
-                filter={filter}
-                mode={isRange ? "range" : "single"}
-              />
-            );
-          case "select":
-            return <SelectFilter key={filter.name} filter={filter} />;
-          case "checkbox":
-            return <CheckboxFilter key={filter.name} filter={filter} />;
-          case "radio":
-            return <RadioFilter key={filter.name} filter={filter} />;
-          case "custom":
-            // Custom filter renderer
-            if (filter.renderFilter) {
-              return (
-                <div key={filter.name}>
-                  {filter.renderFilter({
-                    filter,
-                    name: filter.name,
-                    label: filter.label,
-                  })}
-                </div>
-              );
-            }
-            return null;
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-}

package/src/crud/crud-filters/index.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ChevronDown, Filter } from "lucide-react";
-
-import type { FilterConfig } from "../../types";
-
-import { Button } from "../../ui";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../ui";
-import { useCrudContext } from "../components/crud-provider";
-import { FilterBuilder } from "./filter-builder";
-
-interface CrudFiltersProps {
-  filters?: FilterConfig[];
-}
-
-export function renderFilterInput(filter: FilterConfig) {
-  // This function body needs to be implemented based on the actual rendering logic
-  // For now, returning null or a placeholder
-  return null;
-}
-
-export function CrudFilters({ filters }: CrudFiltersProps) {
-  const { filters: activeFilters, clearFilters } = useCrudContext();
-  const [isOpen, setIsOpen] = useState(false);
-
-  if (!filters || filters.length === 0) {
-    return null;
-  }
-
-  const hasActiveFilters = activeFilters.length > 0;
-
-  return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full">
-      <div className="flex items-center justify-between mb-2">
-        <CollapsibleTrigger asChild>
-          <Button variant="outline" size="sm" className="gap-2">
-            <Filter className="h-4 w-4" />
-            Filters
-            {hasActiveFilters && (
-              <span className="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
-                {activeFilters.length}
-              </span>
-            )}
-            <ChevronDown
-              className={`h-4 w-4 transition-transform ${
-                isOpen ? "transform rotate-180" : ""
-              }`}
-            />
-          </Button>
-        </CollapsibleTrigger>
-        {hasActiveFilters && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={clearFilters}
-            className="h-8"
-          >
-            Clear all
-          </Button>
-        )}
-      </div>
-      <CollapsibleContent className="space-y-4">
-        <div className="rounded-lg border p-4">
-          <FilterBuilder filters={filters} />
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
-// Export all filter components
-export { TextFilter } from "./text-filter";
-export { DatetimeFilter } from "./datetime-filter";
-export { SelectFilter } from "./select-filter";
-export { CheckboxFilter } from "./checkbox-filter";
-export { RadioFilter } from "./radio-filter";
-export { FilterBuilder } from "./filter-builder";

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

@@ -1,79 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { dataLoader } from "../lib/data-loader";
-
-import { useCrudContext } from "../components/crud-provider";
-import { RadioGroup, RadioGroupItem } from "../../ui/forms/radio-group";
-import { Label } from "../../ui/primitives/label";
-import { ScrollArea } from "../../ui/primitives/scroll-area";
-import { FilterConfig } from "../../types";
-
-export function RadioFilter({ 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 = (newValue: string) => {
-    setValue(newValue);
-
-    if (!newValue) {
-      return;
-    }
-
-    addFilter({
-      name: filter.name,
-      value: newValue,
-      operator: filter.operator || "eq",
-    });
-  };
-
-  return (
-    <div className="space-y-2">
-      <Label>{filter.label}</Label>
-      <RadioGroup value={value} onValueChange={handleChange}>
-        {options.map((option) => (
-          <div key={String(option.value)} className="flex items-center space-x-2">
-            <RadioGroupItem
-              value={String(option.value)}
-              id={`${filter.name}-${option.value}`}
-            />
-            <Label
-              htmlFor={`${filter.name}-${option.value}`}
-              className="font-normal cursor-pointer"
-            >
-              {option.label}
-            </Label>
-          </div>
-        ))}
-      </RadioGroup>
-    </div>
-  );
-}

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

@@ -1,148 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-import { useCrudContext } from "../components/crud-provider";
-import { Label } from "../../ui/primitives/label";
-import { FilterConfig } from "../../types";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/primitives/select";
-import { dataLoader } from "../lib/data-loader";
-
-export function SelectFilter({ filter }: { filter: FilterConfig }) {
-  const { filters, addFilter, removeFilter } = useCrudContext();
-  const currentFilter = filters.find((f: any) => f.name === filter.name);
-
-  // Determine if multiple selection is enabled
-  const multiple = (filter as any).multiple || (filter.type as string) === "select-multiple"; 
-
-  const [value, setValue] = useState<string | string[]>(
-    currentFilter?.value
-      ? multiple
-        ? (currentFilter.value as string[])
-        : (currentFilter.value as string)
-      : multiple
-        ? []
-        : "",
-  );
-  
-  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(
-        multiple
-          ? (externalFilter.value as string[])
-          : (externalFilter.value as string),
-      );
-    }
-  }, [filters, filter.name, multiple, value]);
-
-  const handleChange = (newValue: string | number | undefined) => {
-    if (newValue === undefined) {
-      removeFilter(filter.name);
-      return;
-    }
-
-    const stringValue = String(newValue);
-
-    if (multiple) {
-      const currentValues = Array.isArray(value) ? value : [];
-      const updatedValues = currentValues.includes(stringValue)
-        ? currentValues.filter((v) => v !== stringValue)
-        : [...currentValues, stringValue];
-
-      setValue(updatedValues);
-
-      if (updatedValues.length === 0) {
-        removeFilter(filter.name);
-        return;
-      }
-
-      addFilter({
-        name: filter.name,
-        value: updatedValues,
-        operator: filter.operator || "in",
-      });
-    } else {
-      setValue(stringValue);
-
-      if (!stringValue || stringValue === "") {
-        removeFilter(filter.name);
-        return;
-      }
-
-      addFilter({
-        name: filter.name,
-        value: stringValue,
-        operator: filter.operator || "eq",
-      });
-    }
-  };
-
-  if (multiple) {
-    const selectedValues = Array.isArray(value) ? value : [];
-    return (
-      <div className="space-y-2">
-        <Label>{filter.label}</Label>
-        <div className="space-y-2 max-h-40 overflow-y-auto border rounded p-2">
-          {options.map((option) => (
-            <label
-              key={String(option.value)}
-              className="flex items-center space-x-2 cursor-pointer"
-            >
-              <input
-                type="checkbox"
-                checked={selectedValues.includes(String(option.value))}
-                onChange={() => handleChange(String(option.value))}
-                className="rounded border-gray-300"
-              />
-              <span>{option.label}</span>
-            </label>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={filter.name}>{filter.label}</Label>
-      <Select
-        value={value as string}
-        onValueChange={handleChange}
-      >
-        <SelectTrigger id={filter.name}>
-          <SelectValue placeholder={`Select ${filter.label}`} />
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((option) => (
-            <SelectItem key={String(option.value)} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

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

@@ -1,81 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-import { useCrudContext } from "../components/crud-provider";
-import { Input } from "../../ui/primitives/input";
-import { Label } from "../../ui/primitives/label";
-import type { FilterConfig } from "../../types";
-
-export function TextFilter({ 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 as string) || (filter.defaultValue as string) || "",
-  );
-  const isExternalUpdate = useRef(false);
-  const debounceMs = 500; // Define debounce delay
-
-  useEffect(() => {
-    // Sync with context when filters change externally
-    const externalFilter = filters.find((f) => f.name === filter.name);
-    const externalValue = (externalFilter?.value as string) || "";
-    const currentValue = value || "";
-
-    if (externalValue !== currentValue) {
-      isExternalUpdate.current = true;
-      setValue(externalValue);
-    }
-  }, [filters, filter.name]);
-
-  // Debounced update filter
-  useEffect(() => {
-    // Skip debounce if this is an external update
-    if (isExternalUpdate.current) {
-      isExternalUpdate.current = false;
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      if (value.trim() === "") {
-        // Remove filter if empty
-        removeFilter(filter.name);
-      } else {
-        // Add or update filter
-        addFilter({
-          name: filter.name,
-          value: value,
-          operator: filter.operator || "contains",
-        });
-      }
-    }, debounceMs);
-
-    return () => clearTimeout(timer);
-  }, [
-    value,
-    filter.name,
-    filter.operator,
-    debounceMs,
-    addFilter,
-    removeFilter,
-  ]);
-
-  const handleChange = (newValue: string) => {
-    isExternalUpdate.current = false;
-    setValue(newValue);
-  };
-
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={filter.name}>{filter.label}</Label>
-      <Input
-        id={filter.name}
-        type="text"
-        placeholder={filter.label}
-        value={value}
-        onChange={(e) => handleChange(e.target.value)}
-        className="w-full"
-      />
-    </div>
-  );
-}