feat(admin): صفحهٔ اختصاصی ویرایش/ساخت پروژه + گالری فقط با آپلود به MinIO

- /admin/projects/new و /admin/projects/:id — همهٔ فیلدها در یک صفحه با ورودی دوزبانهٔ صریح (فارسی/English)، ذخیره، حذف - GalleryField تازه: گالری چندتصویری فقط با آپلود به MinIO (حذف/جابه‌جایی/ افزودن چندفایلی) — فیلد «هر خط یک URL» دیگر استفاده نمی‌شود - مدادِ کارت پروژه و دکمهٔ «افزودن پروژه» به صفحهٔ اختصاصی هدایت می‌شوند؛ دکمهٔ ویرایش روی صفحهٔ جزئیات هم لینک همان صفحه است
2026-09-28 10:33:05 +00:00
parent edcbd0dc58
commit 0c87a287a3
6 changed files with 521 additions and 10 deletions
@@ -0,0 +1,153 @@
+import { useRef, useState } from 'react'
+import { ArrowDownIcon, ArrowUpIcon, ImagePlusIcon, Loader2Icon, XIcon } from 'lucide-react'
+import { adminApi } from '../../admin/adminClient'
+
+type GalleryFieldProps = {
+  label: string
+  value: string[]
+  /** فهرست کامل نشانی‌ها را ذخیره می‌کند — همه از MinIO */
+  onSave: (urls: string[]) => Promise<boolean>
+  /** پیشوند نام ذخیره‌سازی فایل‌ها — مثلاً اسلاگ پروژه */
+  namePrefix?: string
+}
+
+/**
+ * گالری چندتصویری — فقط آپلود به MinIO.
+ * هیچ ورودی URL وجود ندارد؛ نشانی‌ها فقط از آپلود ساخته می‌شوند.
+ * هر تصویر: حذف، جابه‌جایی بالا/پایین. چند فایل همزمان قابل آپلود است.
+ */
+export function GalleryField({ label, value, onSave, namePrefix = 'image' }: GalleryFieldProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [uploading, setUploading] = useState(0)
+  const [error, setError] = useState('')
+
+  const commit = async (urls: string[]) => {
+    if (!(await onSave(urls))) setError('ذخیرهٔ گالری ناموفق بود — دوباره تلاش کنید')
+  }
+
+  const addFiles = async (files: FileList | null) => {
+    if (!files || files.length === 0) return
+    setError('')
+    setUploading(files.length)
+    const next = [...value]
+    try {
+      let i = 0
+      for (const file of Array.from(files)) {
+        i += 1
+        const base = file.name.replace(/\.[^.]+$/, '')
+        const name = `${namePrefix}-${Date.now()}-${i}`
+        try {
+          const { url } = await adminApi.upload(file, `${name}-${base}`)
+          next.push(url)
+        } catch {
+          setError(`آپلود «${file.name}» ناموفق بود`)
+        } finally {
+          setUploading((n) => n - 1)
+        }
+      }
+      if (next.length !== value.length) await commit(next)
+    } finally {
+      setUploading(0)
+      if (inputRef.current) inputRef.current.value = ''
+    }
+  }
+
+  const removeAt = async (index: number) => {
+    const next = value.filter((_, i) => i !== index)
+    await commit(next)
+  }
+
+  const move = async (index: number, delta: number) => {
+    const target = index + delta
+    if (target < 0 || target >= value.length) return
+    const next = [...value]
+    ;[next[index], next[target]] = [next[target], next[index]]
+    await commit(next)
+  }
+
+  return (
+    <div>
+      <p className="text-xs font-bold text-ivory/80">{label}</p>
+
+      {value.length === 0 ? (
+        <div className="mt-2 flex h-24 w-full flex-col items-center justify-center gap-1 border border-dashed border-ivory/20 text-ivory/30">
+          <ImagePlusIcon className="h-5 w-5" aria-hidden="true" />
+          <span className="text-[11px] font-light">تصویری در گالری نیست</span>
+        </div>
+      ) : (
+        <ul className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
+          {value.map((url, index) => (
+            <li key={`${url}-${index}`} className="group relative overflow-hidden rounded-lg border border-ivory/15 bg-char">
+              <img src={url} alt="" className="h-24 w-full object-cover" />
+              <div className="absolute inset-x-0 bottom-0 flex items-center justify-between bg-char/80 px-1.5 py-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                <div className="flex gap-1">
+                  <button
+                    type="button"
+                    aria-label="انتقال به قبل"
+                    title="انتقال به قبل"
+                    disabled={index === 0}
+                    onClick={() => void move(index, -1)}
+                    className="flex h-6 w-6 items-center justify-center border border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char disabled:opacity-40"
+                  >
+                    <ArrowUpIcon className="h-3 w-3" />
+                  </button>
+                  <button
+                    type="button"
+                    aria-label="انتقال به بعد"
+                    title="انتقال به بعد"
+                    disabled={index === value.length - 1}
+                    onClick={() => void move(index, 1)}
+                    className="flex h-6 w-6 items-center justify-center border border-copper/50 bg-ink/90 text-copper hover:bg-copper hover:text-char disabled:opacity-40"
+                  >
+                    <ArrowDownIcon className="h-3 w-3" />
+                  </button>
+                </div>
+                <button
+                  type="button"
+                  aria-label="حذف تصویر"
+                  title="حذف تصویر"
+                  onClick={() => void removeAt(index)}
+                  className="flex h-6 w-6 items-center justify-center border border-red-400/40 bg-ink/90 text-red-300 hover:bg-red-500/20"
+                >
+                  <XIcon className="h-3 w-3" />
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        disabled={uploading > 0}
+        className="mt-3 flex items-center gap-2 border border-ivory/20 px-4 py-2 text-xs font-light text-ivory/80 transition-colors duration-200 hover:border-copper hover:text-copper disabled:opacity-50"
+      >
+        {uploading > 0 ? (
+          <>
+            <Loader2Icon className="h-3.5 w-3.5 animate-spin" />
+            در حال آپلود {uploading} تصویر…
+          </>
+        ) : (
+          <>
+            <ImagePlusIcon className="h-3.5 w-3.5" />
+            افزودن تصویر به گالری (آپلود به MinIO)
+          </>
+        )}
+      </button>
+
+      {error && <p className="mt-2 text-xs text-red-300">{error}</p>}
+
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+        className="hidden"
+        onChange={(event) => {
+          void addFiles(event.target.files)
+        }}
+      />
+    </div>
+  )
+}