@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/DataTable/DataTableEditCell.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import * as React from "react"
+import { Input } from "../input"
+import { Textarea } from "../textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
+import { Checkbox } from "../checkbox"
+import { Switch } from "../switch"
+import { Calendar } from "../calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "../popover"
+import { Button } from "../button"
+import { CalendarIcon, Check, X } from "lucide-react"
+import { format } from "date-fns"
+import { cn } from "./utils"
+
+export interface EditCellConfig {
+  type: "text" | "number" | "email" | "url" | "textarea" | "select" | "checkbox" | "switch" | "date" | "datetime"
+  options?: Array<{ value: string; label: string }>
+  placeholder?: string
+  min?: number
+  max?: number
+  step?: number
+  rows?: number
+  disabled?: boolean
+  required?: boolean
+  pattern?: string
+  title?: string
+}
+
+export interface DataTableEditCellProps<TData> {
+  value: any
+  field: keyof TData
+  config: EditCellConfig
+  isEditing: boolean
+  error?: string
+  onChange: (value: any) => void
+  onStartEdit: () => void
+  onSave: () => void
+  onCancel: () => void
+  className?: string
+}
+
+export function DataTableEditCell<TData>({
+  value,
+  field,
+  config,
+  isEditing,
+  error,
+  onChange,
+  onStartEdit,
+  onSave,
+  onCancel,
+  className,
+}: DataTableEditCellProps<TData>) {
+  const [tempValue, setTempValue] = React.useState(value)
+  const [isDatePickerOpen, setIsDatePickerOpen] = React.useState(false)
+
+  // Synchroniser la valeur temporaire avec la valeur externe
+  React.useEffect(() => {
+    setTempValue(value)
+  }, [value])
+
+  const handleSave = () => {
+    onChange(tempValue)
+    onSave()
+  }
+
+  const handleCancel = () => {
+    setTempValue(value)
+    onCancel()
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleSave()
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      handleCancel()
+    }
+  }
+
+  // Si pas en mode édition, afficher la valeur avec possibilité de clic
+  if (!isEditing) {
+    return (
+      <div
+        className={cn(
+          "cursor-pointer hover:bg-muted/50 p-1 rounded transition-colors",
+          className
+        )}
+        onClick={onStartEdit}
+      >
+        {renderDisplayValue(value, config)}
+      </div>
+    )
+  }
+
+  // Rendu selon le type de champ
+  const renderInput = () => {
+    switch (config.type) {
+      case "textarea":
+        return (
+          <Textarea
+            value={tempValue || ""}
+            onChange={(e) => setTempValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={config.placeholder}
+            rows={config.rows || 3}
+            disabled={config.disabled}
+            className={cn(error && "border-destructive")}
+          />
+        )
+
+      case "select":
+        return (
+          <Select
+            value={tempValue || ""}
+            onValueChange={setTempValue}
+            disabled={config.disabled}
+          >
+            <SelectTrigger className={cn(error && "border-destructive")}>
+              <SelectValue placeholder={config.placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {config.options?.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )
+
+      case "checkbox":
+        return (
+          <Checkbox
+            checked={Boolean(tempValue)}
+            onCheckedChange={setTempValue}
+            disabled={config.disabled}
+          />
+        )
+
+      case "switch":
+        return (
+          <Switch
+            checked={Boolean(tempValue)}
+            onCheckedChange={setTempValue}
+            disabled={config.disabled}
+          />
+        )
+
+      case "date":
+      case "datetime":
+        return (
+          <Popover open={isDatePickerOpen} onOpenChange={setIsDatePickerOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                className={cn(
+                  "w-full justify-start text-left font-normal",
+                  !tempValue && "text-muted-foreground",
+                  error && "border-destructive"
+                )}
+              >
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                {tempValue ? format(new Date(tempValue), "PPP") : config.placeholder}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={tempValue ? new Date(tempValue) : undefined}
+                onSelect={(date) => {
+                  if (date) {
+                    setTempValue(config.type === "datetime" ? date.toISOString() : date.toISOString().split('T')[0])
+                    setIsDatePickerOpen(false)
+                  }
+                }}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+        )
+
+      default:
+        return (
+          <Input
+            type={config.type}
+            value={tempValue || ""}
+            onChange={(e) => setTempValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={config.placeholder}
+            min={config.min}
+            max={config.max}
+            step={config.step}
+            disabled={config.disabled}
+            required={config.required}
+            pattern={config.pattern}
+            title={config.title}
+            className={cn(error && "border-destructive")}
+          />
+        )
+    }
+  }
+
+  return (
+    <div className={cn("relative", className)}>
+      {renderInput()}
+      
+      {/* Boutons d'action */}
+      <div className="absolute right-1 top-1/2 -translate-y-1/2 flex gap-1">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-6 w-6 p-0"
+          onClick={handleSave}
+        >
+          <Check className="h-3 w-3 text-green-600" />
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="h-6 w-6 p-0"
+          onClick={handleCancel}
+        >
+          <X className="h-3 w-3 text-red-600" />
+        </Button>
+      </div>
+
+      {/* Message d'erreur */}
+      {error && (
+        <p className="text-xs text-destructive mt-1">{error}</p>
+      )}
+    </div>
+  )
+}
+
+// Fonction utilitaire pour afficher la valeur selon le type
+function renderDisplayValue(value: any, config: EditCellConfig): React.ReactNode {
+  if (value === null || value === undefined) {
+    return <span className="text-muted-foreground italic">Non défini</span>
+  }
+
+  switch (config.type) {
+    case "checkbox":
+    case "switch":
+      return (
+        <span className={cn(
+          "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium",
+          value ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+        )}>
+          {value ? "Oui" : "Non"}
+        </span>
+      )
+
+    case "date":
+    case "datetime":
+      try {
+        const date = new Date(value)
+        return format(date, config.type === "datetime" ? "PPP p" : "PPP")
+      } catch {
+        return value
+      }
+
+    case "select":
+      const option = config.options?.find(opt => opt.value === value)
+      return option ? option.label : value
+
+    case "textarea":
+      return (
+        <div className="max-w-xs">
+          <p className="truncate">{value}</p>
+        </div>
+      )
+
+    default:
+      return value
+  }
+}