@goplusvn/core 0.1.0 → 0.1.2

package/src/crud/components/crud-form.tsx

@@ -0,0 +1,642 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { AlertCircle, Loader2, Save } from "lucide-react";
+
+import type { EntityConfig, FieldConfig } from "../../types";
+
+import { filterDisplayOnlyFields, sortFieldsByOrder } from "../lib/crud-utils";
+import {
+  buildSchemaFromConfig,
+  getDefaultValuesFromConfig,
+} from "../lib/crud-validator";
+import {
+  calculateFieldValue,
+  getDependentFields,
+} from "../lib/field-calculator";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../ui";
+import { Alert, AlertDescription, AlertTitle } from "../../ui";
+import { Badge } from "../../ui";
+import { Button } from "../../ui";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../ui";
+import { Form } from "../../ui";
+import { Progress } from "../../ui";
+import { CrudFieldRenderer } from "./crud-field-renderer";
+
+interface CrudFormProps {
+  config: EntityConfig;
+  initialData?: Record<string, unknown>;
+  onSubmit: (data: Record<string, unknown>) => Promise<void> | void;
+  onCancel?: () => void;
+  submitLabel?: string;
+  cancelLabel?: string;
+  submittingLabel?: string;
+  isSubmitting?: boolean;
+  mode?: "create" | "edit";
+  enableAutoSave?: boolean;
+  onFormReady?: (form: ReturnType<typeof useForm>) => void;
+}
+
+const CrudFormComponent = forwardRef<HTMLFormElement, CrudFormProps>(
+  function CrudForm(
+    {
+      config,
+      initialData,
+      onSubmit,
+      onCancel,
+      submitLabel = "Submit",
+      cancelLabel = "Cancel",
+      submittingLabel = "Submitting...",
+      isSubmitting: externalIsSubmitting,
+      mode = "create",
+      enableAutoSave = true,
+      onFormReady,
+    },
+    ref,
+  ) {
+    const computedFields = useMemo(() => {
+      return config.fields.map((field) => {
+        const disableForMode =
+          (mode === "create" && field.disableOnCreate) ||
+          (mode === "edit" && field.disableOnEdit);
+
+        const shouldDisable = field.disabled || Boolean(disableForMode);
+
+        if (shouldDisable === field.disabled) {
+          return field;
+        }
+
+        const modifiedField = {
+          ...field,
+          disabled: shouldDisable,
+        };
+
+        return modifiedField;
+      });
+    }, [config.fields, mode]);
+
+    const schema = buildSchemaFromConfig(computedFields);
+    const defaultValues = initialData || getDefaultValuesFromConfig(config);
+    const draftKey = `draft-${config.name}-${mode}`;
+    const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const [hasDraft, setHasDraft] = useState(false);
+    const [lastSaved, setLastSaved] = useState<Date | null>(null);
+
+    const form = useForm({
+      resolver: zodResolver(schema),
+      defaultValues,
+    });
+
+    // Notify parent when form is ready
+    useEffect(() => {
+      if (onFormReady) {
+        onFormReady(form);
+      }
+    }, [form, onFormReady]);
+
+    // Load draft from localStorage when form initializes (only for create mode)
+    useEffect(() => {
+      if (
+        mode === "create" &&
+        enableAutoSave &&
+        typeof window !== "undefined" &&
+        !initialData
+      ) {
+        try {
+          const draft = localStorage.getItem(draftKey);
+          if (draft) {
+            const draftData = JSON.parse(draft);
+            // Only load draft if it's not empty (has at least one non-empty field)
+            const hasData = Object.values(draftData).some(
+              (value) => value !== undefined && value !== null && value !== "",
+            );
+            if (hasData) {
+              form.reset(draftData);
+              setHasDraft(true);
+            }
+          }
+        } catch (error) {
+          console.error("Error loading draft:", error);
+        }
+      }
+    }, [mode, enableAutoSave, draftKey, initialData, form]);
+
+    // Auto-save draft to localStorage
+    useEffect(() => {
+      if (!enableAutoSave || mode !== "create") return;
+
+      let unsubscribe: (() => void) | { unsubscribe: () => void } | undefined;
+
+      try {
+        // form.watch() may return an unsubscribe function or a Subscription object
+        unsubscribe = form.watch((data: Record<string, unknown>) => {
+          // Clear existing timeout
+          if (saveTimeoutRef.current) {
+            clearTimeout(saveTimeoutRef.current);
+          }
+
+          // Debounce save to localStorage (1 second delay)
+          saveTimeoutRef.current = setTimeout(() => {
+            try {
+              if (typeof window !== "undefined") {
+                // Only save if there's actual data
+                const hasData = Object.values(data).some(
+                  (value) =>
+                    value !== undefined && value !== null && value !== "",
+                );
+                if (hasData) {
+                  localStorage.setItem(draftKey, JSON.stringify(data));
+                  setHasDraft(true);
+                  setLastSaved(new Date());
+                } else {
+                  // Remove draft if form is empty
+                  localStorage.removeItem(draftKey);
+                  setHasDraft(false);
+                  setLastSaved(null);
+                }
+              }
+            } catch (error) {
+              console.error("Error saving draft:", error);
+            }
+          }, 1000);
+        });
+      } catch (error) {
+        console.error("Error setting up form watch:", error);
+      }
+
+      return () => {
+        // Handle unsubscribe - can be a function or a Subscription object
+        if (unsubscribe) {
+          try {
+            if (typeof unsubscribe === "function") {
+              unsubscribe();
+            } else if (
+              unsubscribe &&
+              typeof unsubscribe === "object" &&
+              "unsubscribe" in unsubscribe
+            ) {
+              unsubscribe.unsubscribe();
+            }
+          } catch (error) {
+            console.error("Error unsubscribing from form watch:", error);
+          }
+        }
+        if (saveTimeoutRef.current) {
+          clearTimeout(saveTimeoutRef.current);
+        }
+      };
+    }, [form, enableAutoSave, mode, draftKey]);
+
+    // Clear draft after successful submit
+    const handleSubmit = async (data: Record<string, unknown>) => {
+      try {
+        // Filter out display-only fields before submitting to API
+        const filteredData = filterDisplayOnlyFields(data, config);
+
+        // Debug log for user-supplier form
+        if (config.name === "user-supplier") {
+          console.log("Form submit data:", {
+            userId: filteredData.userId,
+            supplierId: filteredData.supplierId,
+            userIdType: typeof filteredData.userId,
+            supplierIdType: typeof filteredData.supplierId,
+            fullData: filteredData,
+          });
+        }
+
+        await onSubmit(filteredData);
+        // Clear draft after successful submit
+        if (
+          mode === "create" &&
+          enableAutoSave &&
+          typeof window !== "undefined"
+        ) {
+          localStorage.removeItem(draftKey);
+          setHasDraft(false);
+          setLastSaved(null);
+        }
+      } catch (error) {
+        console.error("Form submission error:", error);
+      }
+    };
+
+    // Clear draft when canceling
+    const handleCancel = () => {
+      if (
+        mode === "create" &&
+        enableAutoSave &&
+        typeof window !== "undefined"
+      ) {
+        // Optionally clear draft on cancel (or keep it for next time)
+        // localStorage.removeItem(draftKey)
+      }
+      onCancel?.();
+    };
+
+    const { isSubmitting: formIsSubmitting, errors } = form.formState;
+    const isSubmitting = externalIsSubmitting ?? formIsSubmitting;
+
+    // ✅ Get all fields that need to be watched for calculations and showWhen
+    const fieldsToWatch = useMemo(() => {
+      const watchFields = new Set<string>();
+      computedFields.forEach((field) => {
+        // Watch fields for calculations
+        if (field.calculate?.dependsOn) {
+          field.calculate.dependsOn.forEach((depField) => {
+            watchFields.add(depField);
+          });
+        }
+        // Watch fields for cascading
+        if (field.cascade?.triggerField) {
+          watchFields.add(field.cascade.triggerField);
+        }
+        // Watch fields for showWhen conditions
+        if (field.showWhen?.field) {
+          watchFields.add(field.showWhen.field);
+        }
+      });
+      return Array.from(watchFields);
+    }, [computedFields]);
+
+    // ✅ Watch form values - watch() without args returns all values as an object
+    const formValues = form.watch();
+
+    // Handle field calculations
+    useEffect(() => {
+      computedFields.forEach((field) => {
+        if (field.calculate) {
+          const { dependsOn, mode = "onChange" } = field.calculate;
+
+          // Check if any dependent field has changed
+          const hasDependentValues = dependsOn.every(
+            (depField) =>
+              formValues[depField] !== undefined &&
+              formValues[depField] !== null &&
+              formValues[depField] !== "",
+          );
+
+          if (hasDependentValues) {
+            const calculatedValue = calculateFieldValue(field, formValues);
+            const currentValue = form.getValues(field.name);
+
+            // Only update if value changed
+            if (
+              calculatedValue !== currentValue &&
+              calculatedValue !== undefined
+            ) {
+              form.setValue(field.name, calculatedValue, {
+                shouldValidate: false,
+                shouldDirty: false,
+              });
+            }
+          }
+        }
+      });
+    }, [form, formValues, computedFields]);
+
+    // Handle field cascading
+    useEffect(() => {
+      computedFields.forEach((field) => {
+        if (field.cascade) {
+          const { triggerField, action } = field.cascade;
+          const triggerValue = formValues[triggerField];
+          const previousTriggerValue = form.getValues(
+            `_previous_${triggerField}`,
+          );
+
+          // Check if trigger field changed
+          if (triggerValue !== previousTriggerValue) {
+            if (action === "clear") {
+              form.setValue(field.name, undefined, {
+                shouldValidate: false,
+                shouldDirty: false,
+              });
+            } else if (action === "reset") {
+              const defaultValue = field.defaultValue;
+              form.setValue(field.name, defaultValue, {
+                shouldValidate: false,
+                shouldDirty: false,
+              });
+            }
+
+            // Store current trigger value for next comparison
+            form.setValue(`_previous_${triggerField}`, triggerValue, {
+              shouldValidate: false,
+              shouldDirty: false,
+            });
+          }
+        }
+      });
+    }, [form, formValues, computedFields]);
+
+    // Get field labels for error summary
+    const getFieldLabel = (fieldName: string) => {
+      const field = computedFields.find((f) => f.name === fieldName);
+      return field?.label || fieldName;
+    };
+
+    // Check if field should be visible based on showWhen condition
+    const isFieldVisible = useMemo(() => {
+      return (field: FieldConfig): boolean => {
+        if (!field.showWhen) return true;
+
+        const {
+          field: watchField,
+          value,
+          operator = "equals",
+        } = field.showWhen;
+        const watchValue = formValues[watchField];
+
+        switch (operator) {
+          case "equals":
+            return watchValue === value;
+          case "notEquals":
+            return watchValue !== value;
+          case "contains":
+            return String(watchValue).includes(String(value));
+          case "greaterThan":
+            return Number(watchValue) > Number(value);
+          case "lessThan":
+            return Number(watchValue) < Number(value);
+          case "isEmpty":
+            return (
+              watchValue === undefined ||
+              watchValue === null ||
+              watchValue === ""
+            );
+          case "isNotEmpty":
+            return (
+              watchValue !== undefined &&
+              watchValue !== null &&
+              watchValue !== ""
+            );
+          default:
+            return watchValue === value;
+        }
+      };
+    }, [formValues]);
+
+    // Error summary
+    const errorEntries = Object.entries(errors);
+    const hasErrors = errorEntries.length > 0;
+
+    // Group fields by section
+    const groupedFields = useMemo(() => {
+      // Sort fields by order first, then filter
+      const sortedFields = sortFieldsByOrder(computedFields);
+      // Filter out: hidden fields, display-only fields (DTO fields), and fields that don't meet visibility conditions
+      const visibleFields = sortedFields.filter(
+        (field) =>
+          !field.hideInForm && !field.isDisplayOnly && isFieldVisible(field),
+      );
+
+      // If formSections is defined, use it
+      if (config.formSections && config.formSections.length > 0) {
+        return config.formSections.map((section) => ({
+          ...section,
+          fields: visibleFields.filter((field) =>
+            section.fields.includes(field.name),
+          ),
+        }));
+      }
+
+      // Otherwise, group by field.section property
+      const sectionsMap = new Map<string, FieldConfig[]>();
+      const ungroupedFields: FieldConfig[] = [];
+
+      visibleFields.forEach((field) => {
+        if (field.section) {
+          if (!sectionsMap.has(field.section)) {
+            sectionsMap.set(field.section, []);
+          }
+          sectionsMap.get(field.section)!.push(field);
+        } else {
+          ungroupedFields.push(field);
+        }
+      });
+
+      const sections: Array<{
+        title: string;
+        description?: string;
+        fields: FieldConfig[];
+      }> = [];
+
+      // Add grouped sections
+      sectionsMap.forEach((fields, title) => {
+        sections.push({ title, fields });
+      });
+
+      // Add ungrouped fields as a default section if there are any
+      if (ungroupedFields.length > 0) {
+        sections.push({ title: "", fields: ungroupedFields });
+      }
+
+      return sections.length > 0
+        ? sections
+        : [{ title: "", fields: visibleFields }];
+    }, [computedFields, config.formSections, isFieldVisible]);
+
+    // ✅ Progress calculation - use form.getValues() to get all values, not just watched ones
+    const progress = useMemo(() => {
+      const allFormValues = form.getValues(); // Get all form values for progress calculation
+      // Filter out: hidden fields, display-only fields (DTO fields), and fields that don't meet visibility conditions
+      const visibleFields = computedFields.filter(
+        (field) =>
+          !field.hideInForm && !field.isDisplayOnly && isFieldVisible(field),
+      );
+      const totalFields = visibleFields.length;
+      if (totalFields === 0) return 100;
+
+      const filledFields = visibleFields.filter((field) => {
+        const value = allFormValues[field.name];
+        return (
+          value !== undefined &&
+          value !== null &&
+          value !== "" &&
+          !(Array.isArray(value) && value.length === 0)
+        );
+      }).length;
+
+      return Math.round((filledFields / totalFields) * 100);
+    }, [form, computedFields, isFieldVisible]);
+
+    // Render field with two-column layout
+    const renderField = (field: FieldConfig) => {
+      const fullWidth =
+        field.fullWidth ||
+        field.type === "textarea" ||
+        field.type === "multiselect" ||
+        (field.type === "text" && field.rows && field.rows > 3);
+
+      return (
+        <div key={field.name} className={fullWidth ? "md:col-span-2" : ""}>
+          <CrudFieldRenderer field={field} mode={mode} />
+        </div>
+      );
+    };
+
+    // Check if we should use sections (if more than 1 section or sections have titles)
+    const useSections =
+      groupedFields.length > 1 || groupedFields.some((s) => s.title);
+
+    return (
+      <Form {...form}>
+        <form
+          ref={ref}
+          onSubmit={form.handleSubmit(handleSubmit)}
+          className="space-y-6"
+        >
+          {/* Draft Indicator */}
+          {hasDraft && mode === "create" && enableAutoSave && (
+            <Alert className="mb-4 border-blue-200 bg-blue-50/50 dark:bg-blue-950/20">
+              <Save className="h-4 w-4 text-blue-600" />
+              <AlertTitle className="text-blue-900 dark:text-blue-100">
+                Draft saved
+              </AlertTitle>
+              <AlertDescription className="text-blue-800 dark:text-blue-200">
+                {lastSaved
+                  ? `Your changes were saved automatically at ${lastSaved.toLocaleTimeString()}.`
+                  : "Your changes are being saved automatically."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Error Summary */}
+          {hasErrors && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Please fix the following errors:</AlertTitle>
+              <AlertDescription>
+                <ul className="list-disc list-inside space-y-1 mt-2 text-sm">
+                  {errorEntries.map(([fieldName, error]) => (
+                    <li key={fieldName}>
+                      <strong>{getFieldLabel(fieldName)}</strong>:{" "}
+                      {error?.message as string}
+                    </li>
+                  ))}
+                </ul>
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {/* Form Fields with Sections */}
+          {useSections ? (
+            <Accordion
+              type="multiple"
+              defaultValue={groupedFields
+                .map((_, index) => `section-${index}`)
+                .filter(
+                  (_, index) =>
+                    config.formSections?.[index]?.defaultOpen !== false,
+                )}
+              className="space-y-4"
+            >
+              {groupedFields.map((section, sectionIndex) => {
+                if (section.fields.length === 0) return null;
+
+                return (
+                  <AccordionItem
+                    key={`section-${sectionIndex}`}
+                    value={`section-${sectionIndex}`}
+                    className="border rounded-lg px-4"
+                  >
+                    {section.title && (
+                      <AccordionTrigger className="hover:no-underline">
+                        <div className="flex flex-col items-start text-left">
+                          <CardTitle className="text-base font-semibold">
+                            {section.title}
+                          </CardTitle>
+                          {section.description && (
+                            <CardDescription className="text-xs mt-0.5">
+                              {section.description}
+                            </CardDescription>
+                          )}
+                        </div>
+                      </AccordionTrigger>
+                    )}
+                    <AccordionContent>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-2">
+                        {section.fields.map(renderField)}
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                );
+              })}
+            </Accordion>
+          ) : (
+            /* Simple two-column layout without sections */
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {groupedFields[0]?.fields.map(renderField)}
+            </div>
+          )}
+
+          {/* Form Actions */}
+          <div className="flex items-center justify-between gap-2 pt-4 border-t sticky bottom-0 bg-background -mx-4 sm:-mx-6 px-4 sm:px-6 pb-0">
+            {/* Draft indicator on left */}
+            {hasDraft && mode === "create" && enableAutoSave && (
+              <Badge variant="secondary" className="text-xs">
+                <Save className="mr-1 h-3 w-3" />
+                Draft saved
+              </Badge>
+            )}
+
+            {/* Action buttons on right */}
+            <div className="flex gap-2 ml-auto">
+              {onCancel && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancel}
+                  disabled={isSubmitting}
+                  className="min-w-[80px]"
+                >
+                  {cancelLabel}
+                </Button>
+              )}
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="min-w-[100px]"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    <span className="hidden sm:inline">{submittingLabel}</span>
+                    <span className="sm:hidden">...</span>
+                  </>
+                ) : (
+                  submitLabel
+                )}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    );
+  },
+);
+
+CrudFormComponent.displayName = "CrudForm";
+
+export const CrudForm = CrudFormComponent;