add saved posts list page

Fxdonad · Fxdonad · commit 738e4ac2a1be · 2025-09-02T02:26:49.000+07:00
diff --git a/src/app/core/models/post.models.ts b/src/app/core/models/post.models.ts
@@ -13,6 +13,7 @@ export interface PostCardInfo {
   downvote: number;
   public: boolean;
   allowComment: boolean;
+  isSaved?: boolean;
 }
 
 export interface Tag {
@@ -164,3 +165,13 @@ export interface PostDataCreateRequest {
   isLectureVideo: boolean;
   isTextbook: boolean;
 }
+
+export type SavedPostResponse = {
+  id: string;
+  saveAt: string;
+  post: {
+    id: string;
+    postId: string;
+    title: string;
+  };
+};
diff --git a/src/app/core/router-manager/vetical-menu-dynamic/post-vertical-menu.ts b/src/app/core/router-manager/vetical-menu-dynamic/post-vertical-menu.ts
@@ -3,14 +3,14 @@ import { SidebarItem } from '../../models/data-handle';
 export function sidebarPosts(role: string): SidebarItem[] {
   return [
     {
-      id: 'populat',
-      path: 'exercise/popular',
-      label: 'Bài viết phổ biến',
+      id: 'saved-posts',
+      path: '/post-features/saved-posts-list',
+      label: 'Bài viết đã lưu',
       icon: 'fas fa-file-alt',
     },
     {
       id: 'exercise',
-      path: '/post-management/post-list',
+      path: '/post-features/post-list',
       label: 'Quản lý bài viết',
       icon: 'fas fa-tasks',
     },
diff --git a/src/app/core/services/api-service/post.service.ts b/src/app/core/services/api-service/post.service.ts
@@ -11,6 +11,7 @@ import {
   CreatePostRequest,
   postData,
   PostResponse,
+  SavedPostResponse,
 } from '../../models/post.models';
 
 @Injectable({
@@ -142,4 +143,23 @@ export class PostService {
       API_CONFIG.ENDPOINTS.DELETE.DELETE_POST(id)
     );
   }
+
+  savePost(postId: string) {
+    return this.api.post<ApiResponse<null>>(
+      API_CONFIG.ENDPOINTS.POST.SAVE_POST(postId),
+      null
+    );
+  }
+
+  unSavePost(postId: string) {
+    return this.api.delete<ApiResponse<null>>(
+      API_CONFIG.ENDPOINTS.POST.SAVE_POST(postId)
+    );
+  }
+
+  getSavedPosts(page: number, size: number) {
+    return this.api.get<ApiResponse<IPaginationResponse<SavedPostResponse[]>>>(
+      API_CONFIG.ENDPOINTS.GET.GET_SAVED_POSTS(page, size)
+    );
+  }
 }
diff --git a/src/app/core/services/config-service/api.enpoints.ts b/src/app/core/services/config-service/api.enpoints.ts
@@ -129,6 +129,8 @@ export const API_CONFIG = {
       GET_CHAT_MESSAGES: (page: number, size: number, conversationId: string) =>
         `/chat/messages?page=${page}&size=${size}&conversationId=${conversationId}`,
       GET_POST_DETAILS: (postId: string) => `/post/${postId}`,
+      GET_SAVED_POSTS: (page: number, size: number) =>
+        `/profile/posts/saved?page=${page}&size=${size}`,
       GET_COMMENT_BY_POST_ID: (
         postId: string,
         page: number,
@@ -202,6 +204,7 @@ export const API_CONFIG = {
       SET_ROLE_FOR_USER_CHAT: (groupId: string) =>
         `/chat/conversation/group/${groupId}/role`,
       REACTION_POST: (postId: string) => `/post/${postId}/reaction/toggle`,
+      SAVE_POST: (postId: string) => `/profile/post/${postId}/save`,
       ADD_COMMENT_POST: (postId: string) => `/post/${postId}/comment`,
       ADD_REPLY_COMMENT_POST: (postId: string, commentId: string) =>
         `/post/${postId}/comment/${commentId}`,
@@ -242,6 +245,7 @@ export const API_CONFIG = {
       DELETE_GROUP_CHAT: (groupId: string) =>
         `/chat/conversation/group/${groupId}`,
       DELETE_POST: (postId: string) => `/post/${postId}`,
+      UNSAVE_POST: (postId: string) => `/profile/post/${postId}/save`,
       DELETE_COMMENT_POST: (commentId: string) => `/post/comment/${commentId}`,
       UNSAVE_EXERCISE: (exerciseId: string) =>
         `/profile/exercise/${exerciseId}/save`,
diff --git a/src/app/features/auth/pages/login/login.html b/src/app/features/auth/pages/login/login.html
@@ -113,10 +113,10 @@ <h2>CodeCampus</h2>
         <img src="/auth-assets/Google.png" alt="" class="google-icon" />
         Đăng nhập bằng Google
       </button>
-      <button class="social-btn facebook" (click)="onFacebookLogin()">
+      <!-- <button class="social-btn facebook" (click)="onFacebookLogin()">
         <img src="/auth-assets/Facebook.png" alt="" class="google-icon" />Đăng
         nhập bằng Facebook
-      </button>
+      </button> -->
 
       <div class="signup-link">
         Bạn chưa có tài khoản?
diff --git a/src/app/features/conversation-chat/pages/chat/chat.component.html b/src/app/features/conversation-chat/pages/chat/chat.component.html
@@ -75,7 +75,7 @@ <h2>Chats</h2>
             <img
               class="avatar"
               [src]="convo.conversationAvatar || avatarUrlDefault"
-              alt="User Avatar"
+              alt=""
             />
 
             <div *ngIf="convo.unreadCount > 0" class="unread-wrapper">
diff --git a/src/app/features/post/pages/post-list/post-list.html b/src/app/features/post/pages/post-list/post-list.html
@@ -75,6 +75,7 @@
             (upvote)="handleUpVote(post.id)"
             (downvote)="handleDownVote(post.id)"
             (mainClick)="goToDetail($event)"
+            (save)="handleToggleSave(post.id)"
           ></app-post-card>
         </div>
       </div>
@@ -96,40 +97,11 @@
         </ng-lottie>
         <p>Không có dữ liệu</p>
       </div>
-
-      <!-- Phân trang (bỏ chú thích nếu cần) -->
-      <!-- <div class="list-post-pagination">
-      <app-pagination
-        [totalData]="posts.length"
-        [amountDataPerPage]="10"
-        [currentPageIndex]="1"
-        (onPageChange)="handlePageChange($event)"
-      ></app-pagination>
-    </div> -->
     </div>
   </div>
 
   <div class="popular">
-    <!-- <div class="note-card">
-      <div class="note-card-item">
-        <div class="line" style="background-color: #09d3ae"></div>
-        <span>Đã duyệt</span>
-      </div>
-
-      <div class="note-card-item">
-        <div class="line" style="background-color: #f5d905"></div>
-        <span>Chờ duyệt</span>
-      </div>
-      <div class="note-card-item">
-        <div class="line" style="background-color: #ff7a7c"></div>
-        <span>Đã từ chối</span>
-      </div>
-    </div> -->
     <div class="popular-content">
-      <!-- <app-popular-content
-          [numTags]="fakeTags.length"
-          [tags]="fakeTags"
-        ></app-popular-content> -->
       <app-trending
         [items]="trendingData"
         title="Popular Technologies"
diff --git a/src/app/features/post/pages/post-list/post-list.ts b/src/app/features/post/pages/post-list/post-list.ts
@@ -241,6 +241,35 @@ export class PostListComponent {
     });
   }
 
+  handleToggleSave(postId: string) {
+    const post = this.posts.find((p) => p.id === postId);
+    if (!post) return;
+
+    // Nếu đang lưu thì gọi unSave
+    if (post.isSaved) {
+      this.postservice.unSavePost(postId).subscribe({
+        next: () => {
+          post.isSaved = false; // ✅ cập nhật lại trạng thái
+          console.log(`Unsave thành công post: ${postId}`);
+        },
+        error: (err) => {
+          console.error('Unsave thất bại', err);
+        },
+      });
+    } else {
+      // Nếu chưa lưu thì gọi save
+      this.postservice.savePost(postId).subscribe({
+        next: () => {
+          post.isSaved = true;
+          console.log(`Save thành công post: ${postId}`);
+        },
+        error: (err) => {
+          console.error('Save thất bại', err);
+        },
+      });
+    }
+  }
+
   handleInputChange(value: string | number): void {
     this.postname = value.toString();
 
diff --git a/src/app/features/post/pages/saved-posts-list/saved-posts-list.component.html b/src/app/features/post/pages/saved-posts-list/saved-posts-list.component.html
@@ -0,0 +1,22 @@
+<div class="saved-posts-container" appScrollEnd (appScrollEnd)="onScrollEnd()">
+  <div
+    class="saved-post-card"
+    *ngFor="let item of savedPosts"
+    (click)="navigateToDetails(item.post.postId)"
+  >
+    <div class="card-content">
+      <h3 class="post-title">{{ item.post.title }}</h3>
+      <p class="save-date">Đã lưu: {{ item.saveAt | date : "short" }}</p>
+    </div>
+  </div>
+
+  <div class="loading-spinner" *ngIf="loading">
+    <div class="spinner"></div>
+  </div>
+
+  <div *ngIf="!loading" class="no-data-container">
+    <ng-lottie [options]="lottieOptions" style="width: 200px; height: 200px">
+    </ng-lottie>
+    <p>Không có dữ liệu</p>
+  </div>
+</div>
diff --git a/src/app/features/post/pages/saved-posts-list/saved-posts-list.component.scss b/src/app/features/post/pages/saved-posts-list/saved-posts-list.component.scss
@@ -0,0 +1,70 @@
+.saved-posts-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 16px;
+  overflow-y: auto;
+  height: calc(100vh - 180px);
+
+  .saved-post-card {
+    background: #fff;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+    }
+
+    .card-content {
+      display: flex;
+      flex-direction: column;
+
+      .post-title {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #222;
+        margin-bottom: 6px;
+      }
+
+      .save-date {
+        font-size: 0.85rem;
+        color: #777;
+      }
+    }
+  }
+
+  .loading-spinner {
+    display: flex;
+    justify-content: center;
+    padding: 1rem;
+
+    .spinner {
+      width: 24px;
+      height: 24px;
+      border: 3px solid #ddd;
+      border-top: 3px solid #007bff;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+  }
+
+  .no-data-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    padding: 20px;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/app/features/post/pages/saved-posts-list/saved-posts-list.component.ts b/src/app/features/post/pages/saved-posts-list/saved-posts-list.component.ts
@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { SavedPostResponse } from '../../../../core/models/post.models';
+import { ScrollEndDirective } from '../../../../shared/directives/scroll-end.directive';
+import { PostService } from '../../../../core/services/api-service/post.service';
+import { lottieOptions2 } from '../../../../core/constants/value.constant';
+import { LottieComponent } from 'ngx-lottie';
+
+@Component({
+  selector: 'app-saved-posts',
+  standalone: true,
+  imports: [CommonModule, ScrollEndDirective, LottieComponent],
+  templateUrl: './saved-posts-list.component.html',
+  styleUrls: ['./saved-posts-list.component.scss'],
+})
+export class SavedPostsListComponent implements OnInit {
+  savedPosts: SavedPostResponse[] = [];
+  currentPage = 0;
+  totalPages = 0;
+  pageSize = 10;
+  loading = false;
+
+  lottieOptions = lottieOptions2;
+
+  constructor(private postService: PostService, private router: Router) {}
+
+  ngOnInit(): void {
+    this.loadSavedPosts();
+  }
+
+  loadSavedPosts(): void {
+    if (
+      this.loading ||
+      (this.totalPages && this.currentPage >= this.totalPages)
+    )
+      return;
+
+    this.loading = true;
+    this.postService.getSavedPosts(this.currentPage, this.pageSize).subscribe({
+      next: (res) => {
+        this.savedPosts = [...this.savedPosts, ...res.result.data];
+        this.totalPages = res.result.totalPages;
+        this.currentPage++;
+        this.loading = false;
+      },
+      error: () => {
+        this.loading = false;
+      },
+    });
+  }
+
+  navigateToDetails(postId: string) {
+    this.router.navigate([`/post-features/post-details/${postId}`]);
+  }
+
+  onScrollEnd() {
+    this.loadSavedPosts();
+  }
+}
diff --git a/src/app/features/post/post-routing.module.ts b/src/app/features/post/post-routing.module.ts
@@ -4,6 +4,7 @@ import { PostListComponent } from './pages/post-list/post-list';
 import { PostDetailComponent } from './pages/post-detail/post-detail';
 import { PostCreatePageComponent } from './pages/post-create/post-create';
 import { PostLayoutComponent } from './post-layout/post-layout.component';
+import { SavedPostsListComponent } from './pages/saved-posts-list/saved-posts-list.component';
 
 const routes: Routes = [
   {
@@ -28,6 +29,12 @@ const routes: Routes = [
         data: { breadcrumb: 'Tạo bài đăng' },
         title: 'Đăng bài',
       },
+      {
+        path: 'saved-posts-list',
+        component: SavedPostsListComponent,
+        data: { breadcrumb: 'Bài đăng đã lưu' },
+        title: 'Danh sách lưu',
+      },
     ],
   },
 
diff --git a/src/app/layouts/layout-pages/app-layout/app-layout.component.scss b/src/app/layouts/layout-pages/app-layout/app-layout.component.scss
@@ -25,12 +25,12 @@
       width: 70vw;
       display: flex;
       justify-content: end;
+      z-index: 3;
       // Bỏ sự kiện cho toàn container
       pointer-events: none;
 
       .chat-box {
         pointer-events: auto; // Chỉ phần này thao tác được
-        z-index: 3;
       }
     }
   }
