@goplusvn/core 0.1.0 → 0.1.2

package/src/crud/components/crud-field-renderer.tsx

@@ -0,0 +1,653 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { CheckCircle2, Copy, HelpCircle, Sparkles, X } from "lucide-react";
+
+import type { FieldConfig } from "../../types";
+import type { ChangeEvent } from "react";
+
+import { dataLoader } from "../lib/data-loader";
+import { formatFieldValue } from "../lib/field-formatter";
+import { cn } from "../../utils";
+
+import { Button } from "../../ui";
+import { Combobox } from "../../ui/primitives/client";
+import { DatePicker } from "../../ui";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui";
+import { Input } from "../../ui";
+import { Switch } from "../../ui/primitives/client";
+import { Textarea } from "../../ui";
+import { InputNumber } from "../../ui/primitives/client";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../ui/primitives/client";
+import { MultiSelect } from "../../ui";
+import type { MultiSelectOption } from "../../ui";
+
+interface CrudFieldRendererProps {
+  field: FieldConfig;
+  mode?: "create" | "edit";
+}
+
+export function CrudFieldRenderer({
+  field,
+  mode = "create",
+}: CrudFieldRendererProps) {
+  const form = useFormContext();
+  const { control } = form;
+
+  // Calculate if field should be disabled based on mode-specific settings
+  const isFieldDisabled =
+    field.disabled ||
+    (mode === "create" && field.disableOnCreate) ||
+    (mode === "edit" && field.disableOnEdit);
+
+  // Normalize options: convert string[] to { label: string; value: string }[]
+  const normalizeOptions = (
+    opts?: FieldConfig["options"],
+  ): Array<{ label: string; value: string | number | boolean }> => {
+    if (!opts) return [];
+    return opts.map((opt) =>
+      typeof opt === "object" ? opt : { label: String(opt), value: opt },
+    );
+  };
+
+  const [options, setOptions] = useState<
+    Array<{ label: string; value: string | number | boolean }>
+  >(normalizeOptions(field.options));
+
+  // Create a stable key from dataSource to prevent unnecessary re-fetches
+  const dataSourceKey = useMemo(() => {
+    if (!field.dataSource) return null;
+    if (field.dataSource.type === "static") {
+      return `static-${field.name}`;
+    }
+    if (field.dataSource.type === "api") {
+      const params = field.dataSource.params
+        ? JSON.stringify(field.dataSource.params)
+        : "";
+      return `${field.dataSource.endpoint}-${field.dataSource.labelField}-${field.dataSource.valueField}-${params}`;
+    }
+    return null;
+  }, [field.dataSource, field.name]);
+
+  // Track if we're currently loading to prevent duplicate requests
+  const isLoadingRef = useRef(false);
+
+  // Load options from API if dataSource is provided
+  useEffect(() => {
+    if (!field.dataSource || !dataSourceKey) {
+      return;
+    }
+
+    // Prevent duplicate requests - check if already loading or if options already loaded
+    if (isLoadingRef.current) {
+      return;
+    }
+
+    isLoadingRef.current = true;
+    dataLoader
+      .loadOptions(field.dataSource)
+      .then((loadedOptions) => {
+        setOptions(loadedOptions);
+        isLoadingRef.current = false;
+      })
+      .catch((error) => {
+        console.error("Error loading field options:", error);
+        isLoadingRef.current = false;
+      });
+
+    // Cleanup function to reset loading state if component unmounts or dataSourceKey changes
+    return () => {
+      isLoadingRef.current = false;
+    };
+  }, [dataSourceKey, field.dataSource]); // Only depend on dataSourceKey to prevent unnecessary re-fetches
+
+  // Render field label with help system
+  const renderFieldLabel = () => {
+    if (!field.label) return null;
+
+    return (
+      <div className="flex items-center gap-2">
+        <FormLabel className="font-semibold">{field.label}</FormLabel>
+        {field.help && (
+          <>
+            {field.help.tooltip && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <HelpCircle className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs">
+                  <p className="text-xs">{field.help.tooltip}</p>
+                  {field.help.examples && field.help.examples.length > 0 && (
+                    <div className="mt-2 pt-2 border-t border-primary/20">
+                      <p className="text-xs font-medium mb-1">Examples:</p>
+                      <ul className="list-disc list-inside space-y-0.5">
+                        {field.help.examples.map((example, idx) => (
+                          <li key={idx} className="text-xs">
+                            {example}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+                </TooltipContent>
+              </Tooltip>
+            )}
+            {field.help.link && (
+              <a
+                href={field.help.link.url}
+                target={field.help.link.openInNewTab ? "_blank" : "_self"}
+                rel="noopener noreferrer"
+                className="text-xs text-primary hover:underline"
+              >
+                {field.help.link.text}
+              </a>
+            )}
+          </>
+        )}
+      </div>
+    );
+  };
+
+  // Render field actions
+  const renderFieldActions = (formField: {
+    value: unknown;
+    onChange: (value: unknown) => void;
+  }) => {
+    if (!field.actions || field.actions.length === 0) return null;
+
+    const { value, onChange } = formField;
+
+    const handleAction = async (
+      action: NonNullable<FieldConfig["actions"]>[number],
+    ) => {
+      if (action.action === "clear") {
+        onChange(undefined);
+      } else if (action.action === "copy" && value) {
+        await navigator.clipboard.writeText(String(value));
+      } else if (action.action === "generate") {
+        // Generate random value based on field type
+        if (field.type === "text" || field.type === "email") {
+          onChange(`generated_${Math.random().toString(36).substring(7)}`);
+        } else if (field.type === "number" || field.type === "integer") {
+          onChange(Math.floor(Math.random() * 1000));
+        }
+      } else if (action.handler) {
+        // Get latest form data when handler is called
+        const currentFormData = form.getValues();
+        await action.handler(field, currentFormData);
+      }
+    };
+
+    return (
+      <div className="flex items-center gap-1 mt-1">
+        {field.actions.map((action, idx) => {
+          // Check visibility condition
+          if (action.visibleWhen) {
+            const {
+              field: watchField,
+              operator,
+              value: conditionValue,
+            } = action.visibleWhen;
+            const watchValue = form.getValues(watchField);
+            let shouldShow = false;
+
+            switch (operator) {
+              case "equals":
+                shouldShow = watchValue === conditionValue;
+                break;
+              case "notEquals":
+                shouldShow = watchValue !== conditionValue;
+                break;
+              case "isEmpty":
+                shouldShow =
+                  watchValue === undefined ||
+                  watchValue === null ||
+                  watchValue === "";
+                break;
+              case "isNotEmpty":
+                shouldShow =
+                  watchValue !== undefined &&
+                  watchValue !== null &&
+                  watchValue !== "";
+                break;
+            }
+
+            if (!shouldShow) return null;
+          }
+
+          const getIcon = () => {
+            if (action.icon) {
+              // Use DynamicIcon if icon is a string
+              return null; // Will be handled separately
+            }
+            switch (action.action) {
+              case "clear":
+                return <X className="h-3 w-3" />;
+              case "copy":
+                return <Copy className="h-3 w-3" />;
+              case "generate":
+                return <Sparkles className="h-3 w-3" />;
+              case "validate":
+                return <CheckCircle2 className="h-3 w-3" />;
+              default:
+                return null;
+            }
+          };
+
+          return (
+            <Tooltip key={idx}>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0"
+                  onClick={() => handleAction(action)}
+                >
+                  {getIcon()}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">{action.label}</p>
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </div>
+    );
+  };
+
+  // Custom render function
+  if (field.renderForm) {
+    const renderForm = field.renderForm;
+
+    return (
+      <FormField
+        control={control}
+        name={field.name}
+        render={({ field: formField }) => (
+          <FormItem>
+            {renderFieldLabel()}
+            <FormControl>
+              <div className="space-y-2">
+                {
+                  renderForm({
+                    ...formField,
+                    field,
+                  }) as any
+                }
+                {renderFieldActions(formField)}
+              </div>
+            </FormControl>
+            {(field.helpText || field.help?.text) && (
+              <FormDescription className="text-xs text-muted-foreground mt-1">
+                {field.help?.text || field.helpText}
+              </FormDescription>
+            )}
+            <FormMessage className="text-xs flex items-center gap-1 mt-1" />
+          </FormItem>
+        )}
+      />
+    );
+  }
+
+  // Custom input renderer
+  if (field.renderInput) {
+    const renderInput = field.renderInput;
+
+    return (
+      <FormField
+        control={control}
+        name={field.name}
+        render={({ field: formField }) => {
+          // Apply input transformation
+          let displayValue = formField.value;
+          if (field.transform?.input && formField.value !== undefined) {
+            displayValue = field.transform.input(formField.value);
+          }
+
+          // Apply formatting for display (if readonly or disabled)
+          if (isFieldDisabled && field.format) {
+            displayValue = formatFieldValue(displayValue, field);
+          }
+
+          return (
+            <FormItem>
+              {renderFieldLabel()}
+              <FormControl>
+                <div className="space-y-2">
+                  {renderInput(displayValue, formField.onChange) as any}
+                  {renderFieldActions(formField)}
+                </div>
+              </FormControl>
+              {(field.helpText || field.help?.text) && (
+                <FormDescription className="text-xs text-muted-foreground mt-1">
+                  {field.help?.text || field.helpText}
+                </FormDescription>
+              )}
+              <FormMessage className="text-xs flex items-center gap-1 mt-1" />
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  // Default field rendering based on type
+  switch (field.type) {
+    case "text":
+    case "email":
+    case "url":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField, fieldState }) => (
+            <FormItem>
+              {field.label && (
+                <FormLabel className="font-semibold">{field.label}</FormLabel>
+              )}
+              <FormControl>
+                <Input
+                  type={field.type}
+                  placeholder={field.placeholder}
+                  disabled={isFieldDisabled}
+                  className={cn(
+                    "transition-colors",
+                    fieldState.error &&
+                      "border-destructive focus-visible:ring-destructive",
+                    fieldState.isDirty &&
+                      !fieldState.error &&
+                      "border-green-500/50",
+                  )}
+                  {...formField}
+                  value={formField.value ?? ""}
+                />
+              </FormControl>
+              {field.helpText && (
+                <FormDescription className="text-xs text-muted-foreground mt-1">
+                  {field.helpText}
+                </FormDescription>
+              )}
+              <FormMessage className="text-xs flex items-center gap-1 mt-1" />
+            </FormItem>
+          )}
+        />
+      );
+
+    case "textarea":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField, fieldState }) => {
+            // Apply input transformation
+            let displayValue = formField.value;
+            if (field.transform?.input && formField.value !== undefined) {
+              displayValue = field.transform.input(formField.value);
+            }
+
+            const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+              let value: unknown = e.target.value;
+              // Apply output transformation before saving
+              if (field.transform?.output) {
+                value = field.transform.output(value);
+              }
+              formField.onChange(value);
+            };
+
+            return (
+              <FormItem>
+                {renderFieldLabel()}
+                <FormControl>
+                  <div className="space-y-2">
+                    <Textarea
+                      placeholder={field.placeholder}
+                      rows={field.rows || 3}
+                      disabled={isFieldDisabled || !!field.calculate}
+                      value={displayValue ?? ""}
+                      onChange={handleChange}
+                      className={cn(
+                        "transition-colors",
+                        fieldState.error &&
+                          "border-destructive focus-visible:ring-destructive",
+                        fieldState.isDirty &&
+                          !fieldState.error &&
+                          "border-green-500/50",
+                        field.calculate && "bg-muted cursor-not-allowed",
+                      )}
+                    />
+                    {renderFieldActions(formField)}
+                  </div>
+                </FormControl>
+                {(field.helpText || field.help?.text) && (
+                  <FormDescription className="text-xs text-muted-foreground mt-1">
+                    {field.help?.text || field.helpText}
+                  </FormDescription>
+                )}
+                {field.calculate && (
+                  <FormDescription className="text-xs text-muted-foreground mt-1 italic">
+                    This field is calculated automatically
+                  </FormDescription>
+                )}
+                <FormMessage className="text-xs flex items-center gap-1 mt-1" />
+              </FormItem>
+            );
+          }}
+        />
+      );
+
+    case "number":
+    case "integer":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField }) => (
+            <FormItem>
+              {field.label && <FormLabel>{field.label}</FormLabel>}
+              <FormControl>
+                <InputNumber
+                  placeholder={field.placeholder}
+                  disabled={isFieldDisabled}
+                  value={formField.value}
+                  onChange={(val) => formField.onChange(val)}
+                  decimalScale={field.type === "integer" ? 0 : 2}
+                />
+              </FormControl>
+              {field.helpText && (
+                <FormDescription>{field.helpText}</FormDescription>
+              )}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case "boolean":
+    case "switch":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField }) => (
+            <FormItem>
+              {field.label && <FormLabel>{field.label}</FormLabel>}
+              <FormControl>
+                <div className="flex items-center gap-2 pt-2">
+                  <Switch
+                    checked={
+                      field.type === "switch"
+                        ? formField.value === "active"
+                        : (formField.value ?? false)
+                    }
+                    onCheckedChange={(checked) => {
+                      if (field.type === "switch") {
+                        formField.onChange(checked ? "active" : "inactive");
+                      } else {
+                        formField.onChange(checked);
+                      }
+                    }}
+                    disabled={isFieldDisabled}
+                  />
+                </div>
+              </FormControl>
+              {field.helpText && (
+                <FormDescription>{field.helpText}</FormDescription>
+              )}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case "date":
+    case "datetime":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField }) => (
+            <FormItem>
+              {field.label && <FormLabel>{field.label}</FormLabel>}
+              <FormControl>
+                <DatePicker
+                  value={
+                    formField.value ? new Date(formField.value) : undefined
+                  }
+                  onValueChange={(date) =>
+                    formField.onChange(date ? date.toISOString() : null)
+                  }
+                />
+              </FormControl>
+              {field.helpText && (
+                <FormDescription>{field.helpText}</FormDescription>
+              )}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case "select":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField }) => (
+            <FormItem>
+              {field.label && <FormLabel>{field.label}</FormLabel>}
+              <FormControl>
+                <Combobox
+                  options={options}
+                  value={formField.value ?? ""}
+                  onValueChange={(val) => {
+                    // Convert to string if value exists, otherwise set to undefined
+                    // This ensures empty values are undefined, not empty strings
+                    const stringValue =
+                      val !== null && val !== undefined && val !== ""
+                        ? String(val)
+                        : undefined;
+                    // Call onChange directly - no setTimeout needed
+                    formField.onChange(stringValue);
+                  }}
+                  placeholder={field.placeholder || `Select ${field.label}`}
+                  searchPlaceholder={`Search ${field.label.toLowerCase()}...`}
+                  emptyText={`No ${field.label.toLowerCase()} found.`}
+                  disabled={isFieldDisabled}
+                />
+              </FormControl>
+              {field.helpText && (
+                <FormDescription>{field.helpText}</FormDescription>
+              )}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+
+    case "multiselect":
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField }) => {
+            // Normalize value to array
+            const selectedValues: string[] = Array.isArray(formField.value)
+              ? (formField.value as unknown[]).map((v) => String(v))
+              : [];
+
+            // Map options CRUD -> MultiSelectOption
+            const multiSelectOptions: MultiSelectOption[] = options.map(
+              (opt) => ({
+                label: String(opt.label),
+                value: String(opt.value),
+              }),
+            );
+
+            return (
+              <FormItem>
+                {renderFieldLabel()}
+                <FormControl>
+                  <MultiSelect
+                    options={multiSelectOptions}
+                    value={selectedValues}
+                    onValueChange={(vals) => {
+                      formField.onChange(vals);
+                    }}
+                    placeholder={
+                      field.placeholder || `Chọn ${field.label.toLowerCase()}`
+                    }
+                    disabled={isFieldDisabled}
+                  />
+                </FormControl>
+                {(field.helpText || field.help?.text) && (
+                  <FormDescription className="text-xs text-muted-foreground mt-1">
+                    {field.help?.text || field.helpText}
+                  </FormDescription>
+                )}
+                <FormMessage className="text-xs flex items-center gap-1 mt-1" />
+              </FormItem>
+            );
+          }}
+        />
+      );
+
+    default:
+      return (
+        <FormField
+          control={control}
+          name={field.name}
+          render={({ field: formField }) => (
+            <FormItem>
+              {field.label && <FormLabel>{field.label}</FormLabel>}
+              <FormControl>
+                <Input
+                  placeholder={field.placeholder}
+                  disabled={isFieldDisabled}
+                  {...formField}
+                  value={formField.value ?? ""}
+                />
+              </FormControl>
+              {field.helpText && (
+                <FormDescription>{field.helpText}</FormDescription>
+              )}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      );
+  }
+}