@goplusvn/core 0.1.0 → 0.1.1

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

@@ -0,0 +1,78 @@
+"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

@@ -0,0 +1,79 @@
+"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

@@ -0,0 +1,148 @@
+"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

@@ -0,0 +1,81 @@
+"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>
+  );
+}

package/src/crud/index.ts

@@ -0,0 +1,43 @@
+// @goerp/core/crud
+// Shared CRUD Logic and Components
+
+// Re-export components
+export * from "./components/crud-bulk-actions";
+export * from "./components/crud-card-view";
+export * from "./components/crud-context";
+export * from "./components/crud-delete-dialog";
+export * from "./components/crud-dialog";
+export * from "./components/crud-empty-state";
+export * from "./components/crud-export-button";
+export * from "./components/crud-field-renderer";
+export * from "./components/crud-filter-chips";
+export * from "./components/crud-form";
+export * from "./components/crud-import-dialog";
+export * from "./components/crud-infinite-scroll";
+export * from "./components/crud-page";
+export * from "./components/crud-provider";
+export * from "./components/crud-row-actions";
+export * from "./components/crud-search";
+export * from "./components/crud-sheet";
+export * from "./components/crud-table-skeleton";
+export * from "./components/crud-table-toolbar";
+export * from "./components/crud-table";
+export * from "./components/crud-virtual-table";
+
+// Re-export pages
+export { EntityCrudPage } from "./pages/entity-crud-page";
+
+// Re-export lib logic
+export * from "./lib/crud-service";
+export * from "./lib/crud-utils";
+export * from "./lib/crud-validator";
+export * from "./lib/data-loader";
+export * from "./lib/field-calculator";
+export * from "./lib/field-formatter";
+export * from "./lib/import-export-service";
+export * from "./lib/import-server-utils";
+export * from "./lib/lazy-loader";
+export * from "./lib/parse-filters";
+export * from "./lib/permissions";
+export * from "./lib/stream-loader";
+export * from "./lib/translate-config";