@goplusvn/core 0.1.0 → 0.1.1

package/src/crud/components/crud-import-dialog.tsx

@@ -0,0 +1,440 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { AlertCircle, Download, FileText, Upload, X } from "lucide-react";
+
+import type { EntityConfig, ImportOptions, ImportResult } from "../../types";
+
+import {
+  downloadFile,
+  generateCSVTemplate,
+  generateJSONTemplate,
+  generateXLSXTemplate,
+  parseFile,
+  validateImportData,
+} from "../lib/import-export-service";
+
+import { Alert, AlertDescription } from "../../ui";
+import { Button } from "../../ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../ui";
+
+interface CrudImportDialogProps {
+  config: EntityConfig;
+  endpoint: string;
+  canImport?: boolean;
+  onSuccess?: () => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function CrudImportDialog({
+  config,
+  endpoint,
+  canImport = true,
+  onSuccess,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+}: CrudImportDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [file, setFile] = useState<File | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const [format, setFormat] = useState<ImportOptions["format"]>("xlsx");
+  const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = isControlled ? controlledOnOpenChange! : setInternalOpen;
+
+  if (!canImport) {
+    return null;
+  }
+
+  const requiredLabels = useMemo(() => {
+    return config.fields
+      .filter((f) => !f.hideInForm && f.required)
+      .map((f) => f.label);
+  }, [config.fields]);
+
+  const handleFileSelect = useCallback((selectedFile: File) => {
+    setFile(selectedFile);
+    setResult(null);
+
+    // Detect format from file extension
+    const extension = selectedFile.name.split(".").pop()?.toLowerCase();
+    if (extension === "xlsx" || extension === "xls") {
+      setFormat("xlsx");
+    } else if (extension === "json") {
+      setFormat("json");
+    } else if (extension === "csv") {
+      setFormat("csv");
+    } else {
+      setFormat("xlsx");
+    }
+  }, []);
+
+  const clearSelectedFile = () => {
+    setFile(null);
+    setResult(null);
+  };
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const first = acceptedFiles[0];
+      if (first) {
+        handleFileSelect(first);
+      }
+    },
+    [handleFileSelect],
+  );
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open: openFilePicker,
+  } = useDropzone({
+    onDrop,
+    multiple: false,
+    maxFiles: 1,
+    noClick: true,
+    accept: {
+      "text/csv": [".csv"],
+      "application/json": [".json"],
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
+        ".xlsx",
+      ],
+      "application/vnd.ms-excel": [".xls"],
+    },
+  });
+
+  const handleDownloadTemplate = async (
+    templateFormat: ImportOptions["format"] = format,
+  ) => {
+    try {
+      let blob: Blob;
+      let filename: string;
+
+      switch (templateFormat) {
+        case "csv": {
+          const csvContent = generateCSVTemplate(config);
+          blob = new Blob([csvContent], { type: "text/csv" });
+          filename = `${config.name}_template.csv`;
+          break;
+        }
+        case "json": {
+          const jsonContent = JSON.stringify(
+            generateJSONTemplate(config),
+            null,
+            2,
+          );
+          blob = new Blob([jsonContent], { type: "application/json" });
+          filename = `${config.name}_template.json`;
+          break;
+        }
+        case "xlsx": {
+          blob = await generateXLSXTemplate(config);
+          filename = `${config.name}_template.xlsx`;
+          break;
+        }
+      }
+
+      downloadFile(blob, filename);
+    } catch (error) {
+      console.error("Error generating template:", error);
+    }
+  };
+
+  const handleQuickDownloadTemplate = async (
+    nextFormat: ImportOptions["format"],
+  ) => {
+    setFormat(nextFormat);
+    await handleDownloadTemplate(nextFormat);
+  };
+
+  const handleImport = async () => {
+    if (!file) return;
+
+    setLoading(true);
+    setResult(null);
+
+    try {
+      // Parse file
+      const data = await parseFile(file, format);
+
+      // Validate data
+      const validationResult = validateImportData(data, config, {
+        format,
+        skipErrors: false,
+      });
+
+      if (!validationResult.success && validationResult.errors.length > 0) {
+        setResult(validationResult);
+        setLoading(false);
+        return;
+      }
+
+      // Parse endpoint to preserve query params (e.g., supplierId)
+      const url = new URL(endpoint, window.location.origin);
+      const importUrl = `${url.pathname}${url.search}`;
+
+      // Upload to API
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("format", format);
+
+      const response = await fetch(importUrl, {
+        method: "POST",
+        body: formData,
+      });
+
+      const importResult = await response.json();
+
+      if (!response.ok) {
+        // API returned an error - show the error message if available
+        const errorMessage =
+          importResult?.errors?.[0]?.message ||
+          importResult?.error ||
+          `Import failed with status ${response.status}`;
+        throw new Error(errorMessage);
+      }
+
+      setResult(importResult);
+
+      if (importResult.success) {
+        // Clear any existing timeout
+        if (successTimeoutRef.current) {
+          clearTimeout(successTimeoutRef.current);
+        }
+
+        successTimeoutRef.current = setTimeout(() => {
+          setOpen(false);
+          setFile(null);
+          setResult(null);
+          onSuccess?.();
+          successTimeoutRef.current = null;
+        }, 2000);
+      }
+    } catch (error) {
+      console.error("Import error:", error);
+      setResult({
+        success: false,
+        imported: 0,
+        failed: 0,
+        errors: [
+          {
+            row: 0,
+            field: "",
+            message: error instanceof Error ? error.message : "Import failed",
+          },
+        ],
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Cleanup timeout when component unmounts or dialog closes
+  useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+        successTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Upload className="mr-2 h-4 w-4" />
+          Import
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[640px]">
+        <DialogHeader>
+          <DialogTitle>Import {config.pluralLabel}</DialogTitle>
+          <DialogDescription>
+            Làm theo 2 bước: tải file mẫu, điền dữ liệu rồi chọn file để import.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Step 1: Template */}
+          <div className="rounded-lg border bg-muted/20 p-4 space-y-3">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 text-muted-foreground" />
+                  <p className="font-medium">Bước 1: Tải file mẫu</p>
+                </div>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Tải mẫu đúng cột, điền dữ liệu rồi quay lại chọn file để
+                  import.
+                </p>
+              </div>
+              <div className="shrink-0 text-xs text-muted-foreground">
+                Định dạng:{" "}
+                <span className="font-medium uppercase">{format}</span>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <Button
+                type="button"
+                variant={format === "xlsx" ? "default" : "outline"}
+                size="sm"
+                onClick={() => handleQuickDownloadTemplate("xlsx")}
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Tải mẫu XLSX
+              </Button>
+              {/* <Button
+                type="button"
+                variant={format === "csv" ? "default" : "outline"}
+                size="sm"
+                onClick={() => handleQuickDownloadTemplate("csv")}
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Tải mẫu CSV
+              </Button>
+              <Button
+                type="button"
+                variant={format === "json" ? "default" : "outline"}
+                size="sm"
+                onClick={() => handleQuickDownloadTemplate("json")}
+              >
+                <Download className="mr-2 h-4 w-4" />
+                Tải mẫu JSON
+              </Button> */}
+            </div>
+
+            {requiredLabels.length > 0 && (
+              <p className="text-xs text-muted-foreground">
+                Trường bắt buộc:{" "}
+                <span className="font-medium">{requiredLabels.join(", ")}</span>
+              </p>
+            )}
+          </div>
+
+          {/* Step 2: Upload */}
+          <div className="rounded-lg border p-4 space-y-3">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <Upload className="h-4 w-4 text-muted-foreground" />
+                  <p className="font-medium">Bước 2: Chọn file để import</p>
+                </div>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Kéo thả file vào vùng bên dưới hoặc bấm “Chọn file”.
+                </p>
+              </div>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={openFilePicker}
+              >
+                Chọn file
+              </Button>
+            </div>
+
+            {/* Omit popover to fix React 18 type mismatch */}
+            <div
+              {...(() => {
+                const { popover, ...rest } = getRootProps() as any;
+                return rest;
+              })()}
+              className={[
+                "rounded-lg border-2 border-dashed p-4 transition-colors",
+                "bg-background hover:bg-muted/30",
+                isDragActive ? "border-primary bg-muted/30" : "border-input",
+              ].join(" ")}
+            >
+              <input
+                {...(() => {
+                  const { popover, ...rest } = getInputProps() as any;
+                  return rest;
+                })()}
+              />
+              {file ? (
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium truncate">{file.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      Đã nhận diện định dạng:{" "}
+                      <span className="font-medium uppercase">{format}</span>
+                    </p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="icon"
+                    onClick={clearSelectedFile}
+                    aria-label="Remove"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ) : (
+                <div className="py-6 text-center">
+                  <p className="text-sm font-medium">
+                    Kéo thả file vào đây để import
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Hỗ trợ: .xlsx, .csv, .json
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {result && (
+            <Alert variant={result.success ? "default" : "destructive"}>
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                <div className="space-y-1">
+                  <div>Import thành công: {result.imported}</div>
+                  <div>Lỗi: {result.failed}</div>
+                  {result.errors.length > 0 && (
+                    <div className="mt-2 max-h-32 overflow-y-auto">
+                      {result.errors.slice(0, 5).map((error, index) => (
+                        <div key={index} className="text-xs">
+                          Dòng {error.row}: {error.message}
+                        </div>
+                      ))}
+                      {result.errors.length > 5 && (
+                        <div className="text-xs">
+                          ... và {result.errors.length - 5} lỗi khác
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Đóng
+          </Button>
+          <Button onClick={handleImport} disabled={!file || loading}>
+            {loading ? "Đang import..." : "Import"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/crud/components/crud-infinite-scroll.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+import type { CrudQueryParams } from "../../types";
+
+import { lazyLoader } from "../lib/lazy-loader";
+
+import { Button } from "../../ui";
+
+interface CrudInfiniteScrollProps {
+  endpoint: string;
+  queryParams: CrudQueryParams;
+  onLoadMore: (data: unknown[]) => void;
+  mode?: "auto" | "button";
+}
+
+export function CrudInfiniteScroll({
+  endpoint,
+  queryParams,
+  onLoadMore,
+  mode = "auto",
+}: CrudInfiniteScrollProps) {
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const observerTarget = useRef<HTMLDivElement>(null);
+
+  // Memoize queryParams key to avoid recreating observer
+  const queryParamsKey = useMemo(() => {
+    return JSON.stringify({
+      page: queryParams.page,
+      pageSize: queryParams.pageSize,
+      search: queryParams.search,
+      sort: queryParams.sort,
+      filters: queryParams.filters,
+    });
+  }, [
+    queryParams.page,
+    queryParams.pageSize,
+    queryParams.search,
+    queryParams.sort,
+    queryParams.filters,
+  ]);
+
+  const loadMore = useCallback(async () => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
+    try {
+      const response = await lazyLoader.loadMore(endpoint, queryParams);
+      onLoadMore(response.data);
+      setHasMore(lazyLoader.hasMore(endpoint));
+    } catch (error) {
+      console.error("Error loading more:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading, hasMore, endpoint, queryParams, onLoadMore]);
+
+  // Intersection Observer for auto-load mode
+  useEffect(() => {
+    if (mode !== "auto" || !observerTarget.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loading) {
+          loadMore();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(observerTarget.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [mode, hasMore, loading, endpoint, queryParamsKey, loadMore]);
+
+  if (!hasMore && !loading) {
+    return null;
+  }
+
+  if (mode === "button") {
+    return (
+      <div className="flex justify-center py-4">
+        <Button
+          onClick={loadMore}
+          disabled={loading || !hasMore}
+          variant="outline"
+        >
+          {loading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Loading...
+            </>
+          ) : (
+            "Load More"
+          )}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={observerTarget} className="flex justify-center py-4">
+      {loading && (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span>Loading more...</span>
+        </div>
+      )}
+    </div>
+  );
+}