From ebb6c1c9c6f98e1196742c0f775178f6daf5a50f Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sat, 23 May 2026 12:33:02 +0330 Subject: [PATCH] preview page in pages sections --- .../catalogue/components/CatalogPreview.tsx | 55 +++++++-- src/pages/editor/Editor.tsx | 6 +- src/pages/editor/components/LayersPanel.tsx | 5 +- src/pages/editor/components/PagesPanel.tsx | 34 ++++-- src/pages/home/Home.tsx | 106 ++++++++---------- src/pages/home/types/Types.ts | 1 + 6 files changed, 126 insertions(+), 81 deletions(-) diff --git a/src/pages/catalogue/components/CatalogPreview.tsx b/src/pages/catalogue/components/CatalogPreview.tsx index ef32795..8ff443c 100644 --- a/src/pages/catalogue/components/CatalogPreview.tsx +++ b/src/pages/catalogue/components/CatalogPreview.tsx @@ -4,6 +4,8 @@ import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer import { getPaperDimensions } from '@/config/paperSizes' import type { CatalogItemType } from '../types/Types' import type { PageData } from '@/pages/viewer/types' +import type { Page } from '@/pages/editor/store/editorStore.types' +import { clx } from '@/helpers/utils' const PREVIEW_WIDTH = 64 const PREVIEW_HEIGHT = 89 @@ -20,30 +22,57 @@ function getFirstPageFromContent(content: string | undefined): PageData | null { } } -type Props = { - item: CatalogItemType +function getPageDataFromEditorPage(page: Page): PageData | null { + const transformed = transformViewerDataToPages({ + pages: [ + { + id: page.id, + name: page.name, + backgroundType: page.backgroundType, + backgroundColor: page.backgroundColor, + backgroundGradient: page.backgroundGradient, + backgroundImageUrl: page.backgroundImageUrl, + objects: page.objects, + }, + ], + }) + return transformed[0] ?? null } -const CatalogPreview: FC = ({ item }) => { - const firstPage = useMemo( - () => getFirstPageFromContent(item.content), - [item.content] - ) +type Props = { + item?: CatalogItemType + page?: Page + size?: string + className?: string + selected?: boolean +} + +const CatalogPreview: FC = ({ item, page, size, className, selected }) => { + const catalogSize = item?.size ?? size ?? 'a4' + + const firstPage = useMemo(() => { + if (page) return getPageDataFromEditorPage(page) + return getFirstPageFromContent(item?.content) + }, [item?.content, page]) const { pageWidth, pageHeight, previewScale } = useMemo(() => { - const { width, height } = getPaperDimensions(item.size ?? 'a4') + const { width, height } = getPaperDimensions(catalogSize) const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height) return { pageWidth: width, pageHeight: height, previewScale: scale, } - }, [item.size]) + }, [catalogSize]) if (!firstPage) { return (
بدون پیش‌نمایش @@ -53,7 +82,11 @@ const CatalogPreview: FC = ({ item }) => { return (
diff --git a/src/pages/editor/Editor.tsx b/src/pages/editor/Editor.tsx index fc6fa88..d2166df 100644 --- a/src/pages/editor/Editor.tsx +++ b/src/pages/editor/Editor.tsx @@ -104,7 +104,11 @@ const Editor: FC = () => {
) : null} - + diff --git a/src/pages/editor/components/LayersPanel.tsx b/src/pages/editor/components/LayersPanel.tsx index 809f4a3..2a66722 100644 --- a/src/pages/editor/components/LayersPanel.tsx +++ b/src/pages/editor/components/LayersPanel.tsx @@ -10,6 +10,7 @@ type TabType = 'pages' | 'layers' | 'settings' type LayersPanelProps = { isOpen: boolean setIsOpen: (isOpen: boolean) => void + catalogSize?: string } const TAB_LABELS: Record = { @@ -18,7 +19,7 @@ const TAB_LABELS: Record = { settings: 'تنظیمات', } -const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => { +const LayersPanel = ({ isOpen, setIsOpen, catalogSize }: LayersPanelProps) => { const [activeTab, setActiveTab] = useState('pages') if (!isOpen) { @@ -98,7 +99,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => { - {activeTab === 'pages' && } + {activeTab === 'pages' && } {activeTab === 'layers' && } {activeTab === 'settings' && } diff --git a/src/pages/editor/components/PagesPanel.tsx b/src/pages/editor/components/PagesPanel.tsx index 1233cb7..483d727 100644 --- a/src/pages/editor/components/PagesPanel.tsx +++ b/src/pages/editor/components/PagesPanel.tsx @@ -1,8 +1,13 @@ -import { DocumentText, Copy, Trash, AddSquare } from 'iconsax-react' +import { Copy, Trash, AddSquare, DocumentText } from 'iconsax-react' import { useEditorStore } from '../store/editorStore' import { clx } from '@/helpers/utils' +import CatalogPreview from '@/pages/catalogue/components/CatalogPreview' -const PagesPanel = () => { +type PagesPanelProps = { + catalogSize?: string +} + +const PagesPanel = ({ catalogSize }: PagesPanelProps) => { const { pages, currentPageId, @@ -37,6 +42,7 @@ const PagesPanel = () => { ) : ( pages.map((page) => { const isSelected = currentPageId === page.id + const isEmpty = page.objects.length === 0 return (
{ isSelected && ' rounded-lg p-0.5' )} > -
- -
+ {isEmpty ? ( +
+ +
+ ) : ( + + )}
{page.name}
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 731fb6a..f677232 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -9,20 +9,29 @@ import { useCreateCatalog } from './hooks/useHomeData' import { useNavigate } from 'react-router-dom' import { Paths } from '@/config/Paths' import DirectLogin from '../auth/components/DirectLogin' -import { extractErrorMessage } from '@/helpers/utils' +import { clx, extractErrorMessage } from '@/helpers/utils' + +const CATALOG_SIZES = [ + { id: 'a4', label: 'A4' }, + { id: 'a3', label: 'A3' }, + { id: 'a5', label: 'A5' }, +] as const const Home: FC = () => { const navigate = useNavigate() const [active, setActive] = useState('a4') const [name, setName] = useState('') + const [slug, setSlug] = useState('') const { mutate: createCatalog, isPending } = useCreateCatalog() const handleSubmit = () => { if (!name) { toast('نام کاتالوگ را وارد کنید', 'error') + } else if (!slug) { + toast('اسلاگ کاتالوگ را وارد کنید', 'error') } else { - createCatalog({ name: name, size: active, content: '' }, { + createCatalog({ name, slug, size: active, content: '' }, { onSuccess: (data) => { toast('کاتالوگ با موفقیت ساخته شد', 'success') navigate(Paths.editor + `/${data?.data?.id}`) @@ -36,75 +45,58 @@ const Home: FC = () => { return (
-
-

+
+

ساخت کاتالوگ ب ویرایشگر داناک

-
-
+
+
سایز و نام مورد نظر را انتخاب کنبد و یک کاتالوگ زیبا با ویرایشگر داناک بسازید
-
-
setActive('a4')} className={` - w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center - ${active === 'a4' && 'border-black!'} - `}> -
-
- +
+ {CATALOG_SIZES.map(({ id, label }) => ( +
-
-
setActive('a3')} className={` - w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center - ${active === 'a3' && 'border-black!'} - `}> -
-
- -
- -
- A3 -
-
-
-
setActive('a5')} className={` - w-[160px] h-[166px] rounded-[20px] border border-border flex items-center justify-center - ${active === 'a5' && 'border-black!'} - `}> -
-
- -
- -
- A5 -
-
-
+ + ))}
-
+
setName(e.target.value)} /> + setSlug(e.target.value)} + />
-
- + -
-
- upload -
+
+
+ upload +
آپلود PDF
-
+
رایگان
diff --git a/src/pages/home/types/Types.ts b/src/pages/home/types/Types.ts index f1dda6e..10eb7a4 100644 --- a/src/pages/home/types/Types.ts +++ b/src/pages/home/types/Types.ts @@ -1,5 +1,6 @@ export type CreateCatalogParamsType = { name: string; + slug: string; size: string; content?: string; id?: string;