From f49a8641fc680d57bbb78462e940d797eea0e12b Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 13 Oct 2025 14:22:20 +0330
Subject: [PATCH] fix:pagination shopw author name

---
 src/components/Pagination.tsx  | 46 ++++++++++++++-----------
 src/components/QuillEditor.tsx | 61 +++++++++++++++++++++++++++++++---
 src/langs/fa.json              |  3 +-
 src/pages/blog/BlogList.tsx    |  4 +++
 src/pages/blog/CreateBlog.tsx  |  2 ++
 src/pages/blog/Update.tsx      |  2 ++
 6 files changed, 94 insertions(+), 24 deletions(-)

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index c39cd30..1e6eb5a 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -13,31 +13,39 @@ const Pagination: React.FC<PaginationProps> = ({
 }) => {
     const getPageNumbers = () => {
         const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = 5; // تعداد حداکثری صفحات قابل مشاهده
+        const maxVisiblePages = 5;
 
         if (totalPages <= maxVisiblePages) {
+            // اگر تعداد صفحات کم است، همه را نشان بده
             for (let i = 1; i <= totalPages; i++) {
                 pageNumbers.push(i);
             }
         } else {
-            if (currentPage > 3) {
-                pageNumbers.push(1);
-                if (currentPage > 4) {
+            // همیشه صفحه اول را نشان بده
+            pageNumbers.push(1);
+
+            if (currentPage <= 3) {
+                // در صفحات اولیه (1, 2, 3)
+                for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
+                    pageNumbers.push(i);
+                }
+                if (totalPages > 5) {
                     pageNumbers.push("...");
                 }
-            }
-
-            const start = Math.max(2, currentPage - 1);
-            const end = Math.min(totalPages - 1, currentPage + 1);
-
-            for (let i = start; i <= end; i++) {
-                pageNumbers.push(i);
-            }
-
-            if (currentPage < totalPages - 2) {
-                if (currentPage < totalPages - 3) {
-                    pageNumbers.push("...");
+                pageNumbers.push(totalPages);
+            } else if (currentPage >= totalPages - 2) {
+                // در صفحات آخر
+                pageNumbers.push("...");
+                for (let i = totalPages - 3; i <= totalPages; i++) {
+                    pageNumbers.push(i);
                 }
+            } else {
+                // در صفحات وسط
+                pageNumbers.push("...");
+                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+                    pageNumbers.push(i);
+                }
+                pageNumbers.push("...");
                 pageNumbers.push(totalPages);
             }
         }
@@ -48,7 +56,7 @@ const Pagination: React.FC<PaginationProps> = ({
     const pageNumbers = getPageNumbers();
 
     return (
-        <div className="flex gap-2 text-xs justify-center items-center space-x-2 mt-4">
+        <div className="flex gap-2 text-xs justify-center items-center mt-4">
             {/* دکمه قبلی */}
             {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === 1
@@ -65,7 +73,7 @@ const Pagination: React.FC<PaginationProps> = ({
             {pageNumbers.map((page, index) =>
                 typeof page === "number" ? (
                     <button
-                        key={index}
+                        key={`page-${page}`}
                         className={`size-8 rounded-md ${currentPage === page
                             ? "bg-primary text-white"
                             : "text-primary bg-[#EAECF5] hover:bg-gray-100"
@@ -75,7 +83,7 @@ const Pagination: React.FC<PaginationProps> = ({
                         {page}
                     </button>
                 ) : (
-                    <span key={index} className="px-3 py-1 text-gray-500">
+                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
                         {page}
                     </span>
                 )
diff --git a/src/components/QuillEditor.tsx b/src/components/QuillEditor.tsx
index e7a3eaa..c38e1d7 100644
--- a/src/components/QuillEditor.tsx
+++ b/src/components/QuillEditor.tsx
@@ -13,6 +13,7 @@ interface QuillEditorProps {
     className?: string
     minHeight?: string
     id?: string
+    defaultAltText?: string // عنوان مقاله یا متن پیش‌فرض برای alt
 }
 
 const QuillEditor: FC<QuillEditorProps> = ({
@@ -21,7 +22,8 @@ const QuillEditor: FC<QuillEditorProps> = ({
     placeholder = '',
     className = '',
     minHeight = '200px',
-    id = 'quill-editor'
+    id = 'quill-editor',
+    defaultAltText = 'تصویر'
 }) => {
     const editorRef = useRef<HTMLDivElement>(null)
     const quillRef = useRef<Quill | null>(null)
@@ -29,10 +31,56 @@ const QuillEditor: FC<QuillEditorProps> = ({
     useEffect(() => {
         if (!editorRef.current) return
 
+        // تابع سفارشی برای مدیریت آپلود تصویر
+        const imageHandler = () => {
+            const input = document.createElement('input')
+            input.setAttribute('type', 'file')
+            input.setAttribute('accept', 'image/*')
+            input.click()
+
+            input.onchange = async () => {
+                const file = input.files?.[0]
+                if (file && quillRef.current) {
+                    // درخواست alt text از کاربر
+                    const altText = prompt('متن جایگزین (Alt Text) تصویر را وارد کنید:', defaultAltText)
+
+                    if (altText !== null) { // اگر کاربر Cancel نکرد
+                        const reader = new FileReader()
+                        reader.onload = (e) => {
+                            const imageUrl = e.target?.result as string
+                            const range = quillRef.current?.getSelection(true)
+
+                            if (range && quillRef.current) {
+                                // درج تصویر
+                                quillRef.current.insertEmbed(range.index, 'image', imageUrl)
+
+                                // اضافه کردن alt text به تصویر
+                                setTimeout(() => {
+                                    const images = quillRef.current?.root.querySelectorAll('img')
+                                    if (images && images.length > 0) {
+                                        const lastImage = images[images.length - 1]
+                                        lastImage.setAttribute('alt', altText || defaultAltText)
+                                    }
+
+                                    // فراخوانی onChange برای ذخیره تغییرات
+                                    if (quillRef.current) {
+                                        onChange?.(quillRef.current.root.innerHTML)
+                                    }
+                                }, 0)
+
+                                quillRef.current.setSelection(range.index + 1)
+                            }
+                        }
+                        reader.readAsDataURL(file)
+                    }
+                }
+            }
+        }
+
         // پیکربندی toolbar سفارشی
         const toolbarOptions = [
             ['bold', 'italic', 'underline'],
-            [{ 'header': 1 }, { 'header': 2 }],
+            [{ 'header': 1 }, { 'header': 2 }, { 'header': 3 }],
             [{ 'list': 'ordered' }, { 'list': 'bullet' }],
             [{ 'direction': 'rtl' }],
             [{ 'color': [] }, { 'background': [] }],
@@ -45,7 +93,12 @@ const QuillEditor: FC<QuillEditorProps> = ({
             theme: 'snow',
             placeholder,
             modules: {
-                toolbar: toolbarOptions
+                toolbar: {
+                    container: toolbarOptions,
+                    handlers: {
+                        image: imageHandler
+                    }
+                }
             }
         })
 
@@ -65,7 +118,7 @@ const QuillEditor: FC<QuillEditorProps> = ({
         return () => {
             quillRef.current = null
         }
-    }, [placeholder])
+    }, [placeholder, defaultAltText])
 
     // بروزرسانی محتوا از خارج
     useEffect(() => {
diff --git a/src/langs/fa.json b/src/langs/fa.json
index e22e6fe..e952ea5 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -443,7 +443,8 @@
     "comments": "نظرات",
     "user": "کاربر",
     "comment": "نظر",
-    "picture": "تصویر"
+    "picture": "تصویر",
+    "author": "نویسنده"
   },
   "receip": {
     "receips": "صورتحساب ها",
diff --git a/src/pages/blog/BlogList.tsx b/src/pages/blog/BlogList.tsx
index cb306a8..951153f 100644
--- a/src/pages/blog/BlogList.tsx
+++ b/src/pages/blog/BlogList.tsx
@@ -103,6 +103,7 @@ const BlogList: FC = () => {
                     <thead className='thead'>
                         <tr>
                             <Td text={t('blog.picture')} />
+                            <Td text={t('blog.author')} />
                             <Td text={t('blog.blog_title')} />
                             <Td text={t('blog.blog_summary')} />
                             <Td text={t('blog.category')} />
@@ -119,6 +120,9 @@ const BlogList: FC = () => {
                                         <Td text={''}>
                                             <img src={item.imageUrl} alt={item.title} className='w-20 rounded-lg' />
                                         </Td>
+                                        <Td text={''}>
+                                            <p className='max-w-[150px] truncate'>{item.author.firstName} {item.author.lastName}</p>
+                                        </Td>
                                         <Td text={''}>
                                             <p className='max-w-[150px] truncate'>{item.title}</p>
                                         </Td>
diff --git a/src/pages/blog/CreateBlog.tsx b/src/pages/blog/CreateBlog.tsx
index e44d6ba..c5934d3 100644
--- a/src/pages/blog/CreateBlog.tsx
+++ b/src/pages/blog/CreateBlog.tsx
@@ -147,6 +147,7 @@ const CreateBlog: FC = () => {
                             onChange={(content) => formik.setFieldValue('previewContent', content)}
                             placeholder={t('blog.enter_blog_summary')}
                             minHeight="120px"
+                            defaultAltText={formik.values.title || 'تصویر'}
                         />
                     </div>
 
@@ -164,6 +165,7 @@ const CreateBlog: FC = () => {
                             onChange={(content) => formik.setFieldValue('content', content)}
                             placeholder={t('blog.enter_blog_content')}
                             minHeight="200px"
+                            defaultAltText={formik.values.title || 'تصویر'}
                         />
                     </div>
 
diff --git a/src/pages/blog/Update.tsx b/src/pages/blog/Update.tsx
index 42da6d4..e94f3ad 100644
--- a/src/pages/blog/Update.tsx
+++ b/src/pages/blog/Update.tsx
@@ -155,6 +155,7 @@ const UpdateBlog: FC = () => {
                             onChange={(content) => formik.setFieldValue('previewContent', content)}
                             placeholder={t('blog.enter_blog_summary')}
                             minHeight="120px"
+                            defaultAltText={formik.values.title || 'تصویر'}
                         />
                     </div>
 
@@ -172,6 +173,7 @@ const UpdateBlog: FC = () => {
                             onChange={(content) => formik.setFieldValue('content', content)}
                             placeholder={t('blog.enter_blog_content')}
                             minHeight="200px"
+                            defaultAltText={formik.values.title || 'تصویر'}
                         />
                     </div>