fix resource details

Author: Fxdonad

public/assets/lottie-animation/505.json

@@ -114,4 +114,10 @@ export const lottieOptionsLoading1 = {
   loop: true,
 };
 
+export const lottieOptionsServerError = {
+  path: 'assets/lottie-animation/505.json',
+  autoplay: true,
+  loop: true,
+};
+
 export const avatarUrlDefault: string = 'auth-assets/avatar_placeholder.png';

src/app/core/constants/value.constant.ts

@@ -35,8 +35,17 @@
 
     <div class="resource-content">
       <!-- Nếu là video -->
-      @if (!isDocument && !isImage && resource.hlsUrl) {
-      <app-video-player [videoSrc]="resource.hlsUrl || ''"></app-video-player>
+      @if (!isDocument && !isImage) { @if( resource.hlsUrl){<app-video-player
+        [videoSrc]="resource.hlsUrl || ''"
+      ></app-video-player
+      >} @else {
+      <div class="no-data-container">
+        <ng-lottie [options]="lottieOption" style="width: 200px; height: 200px">
+        </ng-lottie>
+        <div class="no-available-video">Video hiện không khả dụng</div>
+      </div>
+
+      }
       <div class="resource-detail-content">
         <markdown [data]="resource.description"></markdown>
       </div>
@@ -112,7 +121,13 @@
         </div>
         }
       </div>
-      } @if (isLoading) {
+      @if(hasMore && !isLoadingMore){
+      <div class="load-more-container">
+        <button class="load-more-btn" (click)="loadOtherResource()">
+          Xem thêm
+        </button>
+      </div>
+      } } @if (isLoading) {
       <div class="list-resource-card">
         <app-skeleton-loading type="card" [count]="8"></app-skeleton-loading>
       </div>

src/app/features/resource-learning/pages/resource-detail/resource-detail.html

@@ -72,6 +72,20 @@
         background-color: #fff;
       }
     }
+
+    .no-data-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      text-align: center;
+      padding: 20px;
+      background-color: oklch(from var(--hover-color) calc(l * 1.2) c h);
+      .no-available-video {
+        color: var(--reverse-color-text);
+      }
+    }
   }
 
   .resource-video-info {
@@ -212,5 +226,29 @@
         width: 100%;
       }
     }
+
+    .load-more-container {
+      text-align: center;
+      margin: 16px 0;
+
+      .load-more-btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        background: #007bff;
+        color: #fff;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s ease;
+
+        &:hover {
+          background: #0056b3;
+        }
+      }
+    }
+
+    .loading-more {
+      margin: 16px 0;
+    }
   }
 }

src/app/features/resource-learning/pages/resource-detail/resource-detail.scss

@@ -19,6 +19,10 @@ import {
 import { sendNotification } from '../../../../shared/utils/notification';
 import { MarkdownModule } from 'ngx-markdown';
 import { DEFAULT_AVATAR } from '../../../../core/models/user.models';
+import { forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { lottieOptionsServerError } from '../../../../core/constants/value.constant';
+import { LottieComponent } from 'ngx-lottie';
 
 @Component({
   selector: 'app-resource-detail',
@@ -32,16 +36,19 @@ import { DEFAULT_AVATAR } from '../../../../core/models/user.models';
     SkeletonLoadingComponent,
     InputComponent,
     MarkdownModule,
+    LottieComponent,
   ],
   standalone: true,
 })
 export class ResourceDetail implements OnInit {
   avatarDefault = DEFAULT_AVATAR;
+  lottieOption = lottieOptionsServerError;
   [x: string]: any;
   resourceId: string | null = null;
   resource!: MediaResource;
 
   listResource: MediaResource[] = [];
+  searchAbleList: MediaResource[] = [];
   searchTerm: string = '';
   searchTermError: string | null = null;
   avatarAuthor = '';
@@ -166,21 +173,37 @@ export class ResourceDetail implements OnInit {
 
     this.isLoadingMore = true;
 
-    this.resourceService
-      .getAllResourceLearning(this.pageSize, this.currentPage)
+    forkJoin([
+      this.resourceService.getVideoResources(),
+      this.resourceService.getDocumentResources(),
+    ])
+      .pipe(
+        map(([videosRes, docsRes]) => {
+          const videos = videosRes.result ?? [];
+          const docs = docsRes.result ?? [];
+          return [...videos, ...docs]; // gộp
+        })
+      )
       .subscribe({
-        next: (res) => {
-          const pagination = res.result;
-          this.listResource.push(...pagination.data);
-          this.hasMore = pagination.hasNextPage;
+        next: (allResources) => {
+          // tổng dữ liệu từ cả video + document
+          const start = (this.currentPage - 1) * this.pageSize;
+          const end = this.currentPage * this.pageSize;
+
+          // cắt dữ liệu theo trang
+          const pageData = allResources.slice(start, end);
+
+          this.listResource.push(...pageData);
+          this.searchAbleList = this.listResource;
+          this.hasMore = end < allResources.length;
           this.currentPage++;
           this.isLoadingMore = false;
         },
         error: (err) => {
           console.error(err);
           sendNotification(
             this.store,
-            'Lỗi lấy danh sách video',
+            'Lỗi lấy danh sách tài nguyên',
             err.message,
             'error'
           );
@@ -190,13 +213,27 @@ export class ResourceDetail implements OnInit {
   }
 
   goToDetail = (resourceId: string) => {
-    this.router.navigate(['/resource-management/resource', resourceId]);
+    this.router.navigate(['/resource-learning/resource', resourceId]);
     this.resourceId = resourceId;
     this.loadResource();
   };
 
   handleInputChange(value: string | number): void {
-    this.searchTerm = value.toString();
+    this.searchTerm = value.toString().trim().toLowerCase();
+
+    if (this.searchTerm) {
+      this.listResource = this.searchAbleList.filter(
+        (data) =>
+          (data.description ?? '').toLowerCase().includes(this.searchTerm) ||
+          (data.fileName ?? '').toLowerCase().includes(this.searchTerm) ||
+          (data.userProfile?.displayName ?? '')
+            .toLowerCase()
+            .includes(this.searchTerm)
+      );
+    } else {
+      // Nếu clear ô tìm kiếm thì reset về danh sách gốc
+      this.listResource = [...this.searchAbleList];
+    }
   }
 
   downloadDocument() {