test time

Áp dụng flipbook cho toàn bộ bài viết

Expectation:
Tất cả các bài viết khi đưa flipbook code vô đều có thể load ngoài FE

Plan chi tiết đã hoàn thiện

Tôi đã tìm thấy API getFlipbook(id) trong CmsService (dòng 326-328):

getFlipbook(id: number | string) {
  return this._http.get<any>(`${environment.apiUrl}/flipbooks/${id}`);
}

📋 Plan Implementation

Mục tiêu

Khi body content chứa shortcode

1. Detect và parse shortcode để lấy ID
2. Call API getFlipbook(4) để lấy PDF URL
3. Render FlipbookViewerComponent với PDF URL đó

Các bước thực hiện

Step 1: Cập nhật MenuPageDetailComponent

File: src/app/main/share-component/menu-page/shared/menu-page-detail/menu-page-detail.component.ts

Thay đổi:

1. Import FlipbookViewerModule và FlipbookViewerComponent
2. Thêm property để lưu flipbook data:
   

   flipbookData: { id: number; pdfUrl: string; elementId: string } | null = null;

3. Tạo method detectAndLoadFlipbook(body: string):
   • Parse shortcode pattern \[(dt_flipbook-(\d+))\]
   • Nếu tìm thấy, extract ID và call cmsService.getFlipbook(id)
   • Store response vào flipbookData
4. Sử dụng ViewContainerRef để dynamic load FlipbookViewerComponent sau khi có PDF URL
5. Update method applyArticleData() để call detectAndLoadFlipbook()

Step 2: Cập nhật Template

File: src/app/main/share-component/menu-page/shared/menu-page-detail/menu-page-detail.component.html

Thay đổi:

• Thêm placeholder div để render flipbook viewer:

<!-- Flipbook placeholder - will be dynamically populated -->
<div id="flipbook-container" class="article__flipbook" *ngIf="flipbookData"></div>
<!-- Body content (without flipbook shortcode) -->
<div #articleBody class="article__body entry" [innerHTML]="cachedBodyContent"></div>

Step 3: Import Module

File: src/app/main/share-component/menu-page/menu-page.module.ts (hoặc module tương ứng)

EST: 3 hours