@goplusvn/core 0.1.0 → 0.1.2

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

@@ -0,0 +1,122 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type {
+  ActiveFilter,
+  CrudPermissions,
+  CrudQueryParams,
+  EntityConfig,
+  SortingState,
+} from "../../types";
+
+// Translations interface for CRUD components
+export interface CrudTranslations {
+  edit?: string;
+  delete?: string;
+  save?: string;
+  cancel?: string;
+  create?: string;
+  update?: string;
+  creating?: string;
+  updating?: string;
+  deleting?: string;
+  savedSuccessfully?: string;
+  createdSuccessfully?: string;
+  updatedSuccessfully?: string;
+  confirmDeleteTitle?: string;
+  confirmBulkDeleteTitle?: string;
+  confirmDeleteDescription?: string;
+  confirmBulkDeleteDescription?: string;
+  deleteSelected?: string;
+  actions?: string;
+  add?: string;
+  addNew?: string;
+}
+
+// 1. Config Context (Static - rarely changes)
+export interface CrudConfigContextValue {
+  config: EntityConfig | null;
+  setConfig: (config: EntityConfig) => void;
+  permissions: CrudPermissions;
+  setPermissions: (permissions: CrudPermissions) => void;
+  translations: CrudTranslations;
+  setTranslations: (translations: CrudTranslations) => void;
+}
+
+export const CrudConfigContext = createContext<
+  CrudConfigContextValue | undefined
+>(undefined);
+
+export function useCrudConfig() {
+  const context = useContext(CrudConfigContext);
+  if (context === undefined) {
+    throw new Error("useCrudConfig must be used within CrudConfigProvider");
+  }
+  return context;
+}
+
+// 2. State Context (Dynamic - changes often)
+export interface CrudStateContextValue {
+  // Search
+  search: string;
+  setSearch: (search: string) => void;
+
+  // Filters
+  filters: ActiveFilter[];
+  setFilters: (filters: ActiveFilter[]) => void;
+  addFilter: (filter: ActiveFilter) => void;
+  removeFilter: (filterName: string) => void;
+  updateFilter: (filterName: string, value: unknown) => void;
+  clearFilters: () => void;
+
+  // Pagination
+  pagination: {
+    page: number;
+    pageSize: number;
+  };
+  setPagination: (pagination: { page: number; pageSize: number }) => void;
+  setPage: (page: number) => void;
+  setPageSize: (pageSize: number) => void;
+
+  // Sorting
+  sorting: SortingState | null;
+  setSorting: (sorting: SortingState | null) => void;
+
+  // Query params builder
+  getQueryParams: () => CrudQueryParams;
+}
+
+export const CrudStateContext = createContext<
+  CrudStateContextValue | undefined
+>(undefined);
+
+export function useCrudState() {
+  const context = useContext(CrudStateContext);
+  if (context === undefined) {
+    throw new Error("useCrudState must be used within CrudStateProvider");
+  }
+  return context;
+}
+
+// 3. Selection Context (Very Dynamic - changes frequently)
+export interface CrudSelectionContextValue {
+  selectedRows: Set<string>;
+  setSelectedRows: (selectedRows: Set<string>) => void;
+  toggleRowSelection: (rowId: string) => void;
+  selectAllRows: (rowIds: string[]) => void;
+  clearSelection: () => void;
+}
+
+export const CrudSelectionContext = createContext<
+  CrudSelectionContextValue | undefined
+>(undefined);
+
+export function useCrudSelection() {
+  const context = useContext(CrudSelectionContext);
+  if (context === undefined) {
+    throw new Error(
+      "useCrudSelection must be used within CrudSelectionProvider",
+    );
+  }
+  return context;
+}

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

@@ -0,0 +1,145 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+
+import type { EntityConfig } from "../../types";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../ui";
+
+interface CrudDeleteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: EntityConfig;
+  itemData?: Record<string, unknown>;
+  itemCount?: number;
+  onConfirm: () => void;
+  loading?: boolean;
+  translations?: {
+    confirmDeleteTitle?: string;
+    confirmBulkDeleteTitle?: string;
+    confirmDeleteDescription?: string;
+    confirmBulkDeleteDescription?: string;
+    cancel?: string;
+    delete?: string;
+    deleting?: string;
+  };
+}
+
+export function CrudDeleteDialog({
+  open,
+  onOpenChange,
+  config,
+  itemData,
+  itemCount,
+  onConfirm,
+  loading = false,
+  translations,
+}: CrudDeleteDialogProps) {
+  const isBulkDelete = itemCount !== undefined && itemCount > 1;
+  const displayValue = itemData
+    ? String(
+        itemData[config.displayField] ||
+          itemData[config.idField] ||
+          "this item",
+      )
+    : undefined;
+
+  // Translation helpers with fallbacks
+  const t = {
+    cancel: translations?.cancel || "Cancel",
+    delete: translations?.delete || "Delete",
+    deleting: translations?.deleting || "Deleting...",
+  };
+
+  // Build title
+  const getTitle = () => {
+    if (isBulkDelete) {
+      if (translations?.confirmBulkDeleteTitle) {
+        return translations.confirmBulkDeleteTitle
+          .replace("{{count}}", String(itemCount))
+          .replace("{{entities}}", config.pluralLabel.toLowerCase());
+      }
+      return `Delete ${itemCount} ${config.pluralLabel.toLowerCase()}?`;
+    } else {
+      if (translations?.confirmDeleteTitle) {
+        return translations.confirmDeleteTitle.replace(
+          "{{entity}}",
+          config.label,
+        );
+      }
+      return `Delete ${config.label}?`;
+    }
+  };
+
+  // Build description
+  const getDescription = () => {
+    if (isBulkDelete) {
+      if (translations?.confirmBulkDeleteDescription) {
+        return translations.confirmBulkDeleteDescription
+          .replace("{{count}}", String(itemCount))
+          .replace("{{entities}}", config.pluralLabel.toLowerCase());
+      }
+      return (
+        <>
+          Are you sure you want to delete <strong>{itemCount}</strong>{" "}
+          {config.pluralLabel.toLowerCase()}? This action cannot be undone.
+        </>
+      );
+    } else {
+      if (translations?.confirmDeleteDescription && displayValue) {
+        return translations.confirmDeleteDescription.replace(
+          "{{name}}",
+          displayValue,
+        );
+      }
+      return (
+        <>
+          Are you sure you want to delete{" "}
+          {displayValue ? (
+            <strong>&quot;{displayValue}&quot;</strong>
+          ) : (
+            `this ${config.label.toLowerCase()}`
+          )}
+          ? This action cannot be undone.
+        </>
+      );
+    }
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="rounded-full bg-destructive/10 p-2">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+            </div>
+            <AlertDialogTitle>{getTitle()}</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="pt-2">
+            {getDescription()}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>{t.cancel}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={loading}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {loading ? t.deleting : t.delete}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,406 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { CheckCircle2, Loader2 } from "lucide-react";
+
+import type { EntityConfig } from "../../types";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../ui";
+import { DynamicIcon } from "../../ui";
+import { CrudForm } from "./crud-form";
+import { useCrudConfig } from "./crud-context";
+
+interface CrudDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  config: EntityConfig;
+  initialData?: Record<string, unknown>;
+  mode?: "create" | "edit";
+  onSubmit: (data: Record<string, unknown>) => Promise<void> | void;
+}
+
+export function CrudDialog({
+  open,
+  onOpenChange,
+  config,
+  initialData,
+  mode = "create",
+  onSubmit,
+}: CrudDialogProps) {
+  const { translations } = useCrudConfig();
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formProgress, setFormProgress] = useState<number | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const progressSubscriptionRef = useRef<(() => void) | null>(null);
+  const successTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Track open state to handle race conditions
+  const isOpenRef = useRef(open);
+  useEffect(() => {
+    isOpenRef.current = open;
+  }, [open]);
+
+  const handleSubmit = async (data: Record<string, unknown>) => {
+    try {
+      setIsSubmitting(true);
+      await onSubmit(data);
+
+      // Check if dialog was closed by parent (CrudPage) during submission
+      if (!isOpenRef.current) {
+        setIsSubmitting(false);
+        return;
+      }
+
+      setIsSubmitting(false);
+      setShowSuccess(true);
+
+      // Clear any existing timeout
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+      }
+
+      successTimeoutRef.current = setTimeout(() => {
+        // Double check open state before closing
+        if (isOpenRef.current) {
+          setShowSuccess(false);
+          onOpenChange(false);
+        }
+        successTimeoutRef.current = null;
+      }, 1500);
+    } catch (error) {
+      if (isOpenRef.current) {
+        setIsSubmitting(false);
+      }
+      // Error handling is done in CrudForm
+    }
+  };
+
+  const handleCancel = () => {
+    if (!isSubmitting) {
+      onOpenChange(false);
+    }
+  };
+
+  // Focus management - focus vào field đầu tiên khi mở dialog
+  useEffect(() => {
+    if (open) {
+      // Clear any existing timeout
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+      }
+
+      focusTimeoutRef.current = setTimeout(() => {
+        const firstInput = document.querySelector<HTMLInputElement>(
+          'form input:not([type="hidden"]), form textarea, form select',
+        );
+        firstInput?.focus();
+        focusTimeoutRef.current = null;
+      }, 100);
+    } else {
+      // Reset states when dialog closes
+      setShowSuccess(false);
+      setIsSubmitting(false);
+      setFormProgress(null);
+      // Cleanup progress subscription
+      if (
+        progressSubscriptionRef.current &&
+        typeof progressSubscriptionRef.current === "function"
+      ) {
+        try {
+          progressSubscriptionRef.current();
+        } catch (error) {
+          console.error("Error cleaning up progress subscription:", error);
+        }
+        progressSubscriptionRef.current = null;
+      }
+    }
+
+    // Cleanup timeouts when component unmounts or dialog closes
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+        successTimeoutRef.current = null;
+      }
+      if (focusTimeoutRef.current) {
+        clearTimeout(focusTimeoutRef.current);
+        focusTimeoutRef.current = null;
+      }
+    };
+  }, [open]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't handle keyboard events if user is typing in a popover (combobox search)
+      const target = e.target as HTMLElement;
+      if (
+        target.closest('[data-slot="popover-content"]') ||
+        target.closest('[data-slot="command-input"]') ||
+        target.closest('[data-slot="command-input-wrapper"]')
+      ) {
+        return; // Let popover handle keyboard events
+      }
+
+      // Esc to close (only if not submitting)
+      if (e.key === "Escape" && !showSuccess && !isSubmitting) {
+        onOpenChange(false);
+        return;
+      }
+
+      // Ctrl/Cmd + Enter to submit
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter" && !isSubmitting) {
+        e.preventDefault();
+        const submitButton = formRef.current?.querySelector<HTMLButtonElement>(
+          'button[type="submit"]',
+        );
+        if (submitButton && !submitButton.disabled) {
+          submitButton.click();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, showSuccess, isSubmitting, onOpenChange]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} modal={true}>
+      <DialogContent
+        className="max-w-2xl max-h-[90vh] sm:max-h-[90vh] h-[100vh] sm:h-auto rounded-none sm:rounded-lg overflow-hidden flex flex-col p-0"
+        onInteractOutside={(e) => {
+          // Prevent closing dialog when submitting or clicking on Popover
+          if (isSubmitting || showSuccess) {
+            e.preventDefault();
+            return;
+          }
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-slot="popover-content"]')) {
+            e.preventDefault();
+          }
+        }}
+        onEscapeKeyDown={(e) => {
+          // Don't close dialog if popover is open or submitting
+          if (isSubmitting || showSuccess) {
+            e.preventDefault();
+            return;
+          }
+          const popoverOpen = document.querySelector(
+            '[data-slot="popover-content"][data-state="open"]',
+          );
+          if (popoverOpen) {
+            e.preventDefault();
+            return;
+          }
+        }}
+        onPointerDownOutside={(e) => {
+          // Prevent closing dialog when submitting or clicking on Popover
+          if (isSubmitting || showSuccess) {
+            e.preventDefault();
+            return;
+          }
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-slot="popover-content"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        {/* Loading Overlay */}
+        {isSubmitting && (
+          <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 rounded-lg">
+            <div className="flex flex-col items-center gap-3 animate-in fade-in zoom-in-95 duration-200">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              <p className="text-sm font-medium text-muted-foreground">
+                {mode === "create"
+                  ? translations?.creating || "Creating..."
+                  : translations?.updating || "Updating..."}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Success Animation Overlay */}
+        {showSuccess && (
+          <div className="absolute inset-0 bg-background/95 backdrop-blur-sm flex items-center justify-center z-50 rounded-lg">
+            <div className="flex flex-col items-center gap-3 animate-in fade-in zoom-in-95 duration-300">
+              <CheckCircle2 className="h-12 w-12 text-green-500" />
+              <p className="text-lg font-semibold">
+                {translations?.savedSuccessfully || "Saved successfully!"}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Sticky Header với Icon */}
+        <DialogHeader className="sticky top-0 z-10 bg-background border-b px-4 sm:px-6 pt-4 sm:pt-6 pb-3 sm:pb-4 mb-0">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 sm:gap-3">
+                {config.iconName && (
+                  <div className="p-1.5 rounded-lg bg-primary/10 shrink-0">
+                    <DynamicIcon
+                      name={config.iconName as any}
+                      className="h-4 w-4 sm:h-5 sm:w-5 text-primary"
+                    />
+                  </div>
+                )}
+                <DialogTitle className="text-lg sm:text-xl font-bold">
+                  {mode === "create"
+                    ? translations?.add
+                      ? `${translations.add} ${config.label}`
+                      : `Create ${config.label}`
+                    : translations?.edit
+                      ? `${translations.edit} ${config.label}`
+                      : `Edit ${config.label}`}
+                </DialogTitle>
+              </div>
+              <DialogDescription className="mt-1 text-xs text-muted-foreground">
+                {mode === "create"
+                  ? translations?.addNew
+                    ? `${translations.addNew} ${config.label.toLowerCase()}`
+                    : `Add a new ${config.label.toLowerCase()}`
+                  : translations?.update
+                    ? `${translations.update} ${config.label.toLowerCase()}`
+                    : `Update ${config.label.toLowerCase()} information`}
+              </DialogDescription>
+            </div>
+            {/* Form Progress in Header */}
+            {formProgress !== null && (
+              <div className="shrink-0">
+                <div className="flex items-center gap-2 min-w-[80px]">
+                  <div className="flex-1 min-w-[60px]">
+                    <div className="h-1.5 w-full bg-muted rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-primary transition-all duration-300"
+                        style={{ width: `${formProgress}%` }}
+                      />
+                    </div>
+                  </div>
+                  <span className="text-xs font-semibold text-muted-foreground tabular-nums whitespace-nowrap">
+                    {formProgress}%
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </DialogHeader>
+
+        {/* Scrollable Form Content */}
+        <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-4">
+          <CrudForm
+            key={`${config.name}-${mode}-${initialData?.id || "new"}`}
+            ref={formRef}
+            config={config}
+            initialData={initialData}
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+            submitLabel={
+              mode === "create"
+                ? translations?.create || "Create"
+                : translations?.update || "Update"
+            }
+            submittingLabel={
+              mode === "create"
+                ? translations?.creating || "Creating..."
+                : translations?.updating || "Updating..."
+            }
+            cancelLabel={translations?.cancel || "Cancel"}
+            isSubmitting={isSubmitting}
+            mode={mode}
+            enableAutoSave={true}
+            onFormReady={(form) => {
+              // Cleanup previous subscription if exists
+              if (
+                progressSubscriptionRef.current &&
+                typeof progressSubscriptionRef.current === "function"
+              ) {
+                try {
+                  progressSubscriptionRef.current();
+                } catch (error) {
+                  console.error(
+                    "Error cleaning up previous subscription:",
+                    error,
+                  );
+                }
+                progressSubscriptionRef.current = null;
+              }
+
+              // Watch form values and update progress
+              // Filter out: hidden fields and display-only fields (DTO fields)
+              const visibleFields = config.fields.filter(
+                (field) => !field.hideInForm && !field.isDisplayOnly,
+              );
+              const totalFields = visibleFields.length;
+
+              if (totalFields > 5) {
+                // Calculate initial progress
+                const initialValues = form.getValues();
+                const initialFilledFields = visibleFields.filter((field) => {
+                  const value = initialValues[field.name];
+                  return (
+                    value !== undefined &&
+                    value !== null &&
+                    value !== "" &&
+                    !(Array.isArray(value) && value.length === 0)
+                  );
+                }).length;
+                setFormProgress(
+                  Math.round((initialFilledFields / totalFields) * 100),
+                );
+
+                // Watch only visible fields instead of all fields for better performance
+                const visibleFieldNames = visibleFields.map(
+                  (field) => field.name,
+                );
+                try {
+                  // form.watch() returns an unsubscribe function directly, not an object with unsubscribe()
+                  const unsubscribe = form.watch(
+                    visibleFieldNames,
+                    (formValues: Record<string, unknown>) => {
+                      const filledFields = visibleFields.filter((field) => {
+                        const value = formValues[field.name];
+                        return (
+                          value !== undefined &&
+                          value !== null &&
+                          value !== "" &&
+                          !(Array.isArray(value) && value.length === 0)
+                        );
+                      }).length;
+
+                      const progress = Math.round(
+                        (filledFields / totalFields) * 100,
+                      );
+                      setFormProgress(progress);
+                    },
+                  );
+
+                  // Store unsubscribe function directly, but only if it's actually a function
+                  if (typeof unsubscribe === "function") {
+                    progressSubscriptionRef.current = unsubscribe;
+                  } else {
+                    progressSubscriptionRef.current = null;
+                  }
+                } catch (error) {
+                  console.error("Error setting up form watch:", error);
+                  progressSubscriptionRef.current = null;
+                }
+              } else {
+                setFormProgress(null);
+                progressSubscriptionRef.current = null;
+              }
+            }}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}