#52 | Paging success & notification cussess | loading 85%

src/app/ObjectClass/object.ts

@@ -190,4 +190,14 @@ export interface ExamHistoryResponseDto {
   scores: number;
   completionTime: number;
   starDate:  string;
-}
+}
+
+export interface NotificationDto {
+  id?: string | null;
+  userId: string;
+  notificationId?: string | null;
+  idObject?: string | null;
+  content?: string | null;
+  date?: string | null;
+  url?: string | null;
+}

src/app/account/account/login/login.component.ts

@@ -9,6 +9,7 @@ import {MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angula
 import { ForgetpassComponent } from '../../forgetpass/forgetpass.component';
 import { SessionService } from 'src/app/service/session/session.service';
 import { Location } from '@angular/common';
+import { DataService } from 'src/app/service/datashare/data.service';
 
 @Component({
   selector: 'app-login',
@@ -18,7 +19,8 @@ import { Location } from '@angular/common';
 export class LoginComponent {
   constructor (private builder: FormBuilder, private  toastr: ToastrService,private userService: UserService,
     private service: AuthService, private router: Router,private jwtHelper: JwtHelperService 
-    ,private dialog: MatDialog, private sessionService: SessionService, private location: Location){
+    ,private dialog: MatDialog, private sessionService: SessionService, private location: Location,
+    private dataService: DataService, ){
   }
   userdata: any;
   hide = true;

src/app/app.component.css

@@ -33,6 +33,13 @@
 
 @media screen and (max-width: 600px) {
     .category-menu {
-      display: none; /* Ẩn thanh navbar khi chiều rộng màn hình nhỏ hơn 600px */
+      display: none;
     }
 }
+.new-notification {
+    color: #ff3e3e; 
+}
+
+.default-notification {
+    color: #7d7d7d;
+}

src/app/app.component.html

@@ -360,11 +360,24 @@
       </button>
     </mat-menu>
 
-<!-- <button class="bubbly-button">Hello</button>
-<button class="bubbly-button-1">Hello</button> -->
-    <button class="dis-flex" mat-icon-button matTooltip="Thông báo" matTooltipPosition="below">
-      <mat-icon matBadge="1" matBadgeColor="warn" style="color: #7d7d7d;">notifications</mat-icon>
+    <!-- NOTIFICATION -->
+    <button class="dis-flex" (click)="openNotification()"
+            matBadgeSize="small"  [matMenuTriggerFor]="menuNotification" 
+            mat-icon-button matTooltip="Thông báo" matTooltipPosition="below">
+            <mat-icon [ngClass]="{'new-notification': newNoti, 'default-notification': !newNoti}">notifications</mat-icon>
     </button>
+    <mat-menu #menuNotification="matMenu">
+      <span style="text-align: center;" class="dis-block mb">Thông báo</span>
+      <ul style="max-height: 400px;">
+        <li *ngFor="let noti of notifications" routerLink="" class="plr cursor-d mt mb" style="font-size: 14px;">
+          {{ noti.content }}
+          <span>{{ noti.date }}</span>
+        </li>
+        <hr>
+      </ul>
+    </mat-menu>
+
+    <!-- ACCOUNT -->
     <button mat-icon-button [matMenuTriggerFor]="menuUser" *ngIf="isLoggedIn(); else loginLink" class="btn-user" >
       <img *ngIf="avatar; else avatarcommon" [src]="avatar" alt="ảnh đại diện" class="img-user-small">
 

src/app/app.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit , DoCheck, ElementRef, ViewChild} from '@angular/core';
+import { Component, OnInit , DoCheck, ElementRef, ViewChild, OnDestroy} from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from './service/auth.service';
-import { AccountList, Category } from './ObjectClass/object';
+import { AccountList, Category, NotificationDto } from './ObjectClass/object';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { ToastrService } from 'ngx-toastr';
 import { UserService } from './service/user.service';
@@ -14,6 +14,12 @@ import { AnimationService } from './service/animations/animation.service';
 import { CreatedocumentComponent } from './document/createdocument/createdocument.component';
 import { CreateexamComponent } from './exam/createexam/createexam.component';
 import { Constant } from './service/constant';
+import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
+import { PublicserviceService } from './service/publicservice.service';
+import { format, parseISO } from 'date-fns';
+import viLocale from 'date-fns/locale/vi';
+import { Subscription } from 'rxjs';
+import { DataService } from './service/datashare/data.service';
 
 @Component({
   selector: 'app-root',
@@ -22,6 +28,8 @@ import { Constant } from './service/constant';
 })
 
 export class AppComponent implements OnInit, DoCheck{
+  newNoti!: boolean;
+  checkLoginOne!: boolean;
   title = 'VietNamHistory';
   username: any;
   email: any;
@@ -39,20 +47,41 @@ export class AppComponent implements OnInit, DoCheck{
     { categoryname: 'Diễn đàn', url: '/forum' },
     { categoryname: 'Tin tức', url: '/news' }
   ];
-
+  notifications: NotificationDto[] = [];
+  numberNotiNotSeen: number = 0;
+  private hubConnection!: HubConnection;
 
   constructor(private router : Router, private service: AuthService,
     private toastr: ToastrService, private sessionService: SessionService,
     private dialog: MatDialog,private animationService: AnimationService,
-    private breakpointObserver: BreakpointObserver){
-  }
+    private breakpointObserver: BreakpointObserver, private publicService: PublicserviceService){
 
+  }
   ngOnInit() {
     this.animationService.attachAnimationListener();
     this.animationService.attachAnimationListener_btn2();
     this.breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
       this.isScreenWideEnough = !result.matches;
     });
+    this.checkLoginOne = true;
+    this.newNoti = false;
+  }
+  getNotification() {
+    if(this.sessionService.getUserId() && this.checkLoginOne){
+      this.checkLoginOne = false;
+      this.publicService.GetMyNotification().subscribe(
+        (data: any) => {
+          if(data.isSuccessed){
+            this.notifications = this.ConvertNotisDate(data.resultObj);
+            this.getConnecttion();
+          } else {
+            this.toastr.error("Lỗi: " + data.message);
+          }
+        }, (error: any) => {
+          this.toastr.error("Lỗi: "+ error);
+        }
+      )
+    }
   }
 
   isMenuOpen = false;
@@ -143,9 +172,34 @@ export class AppComponent implements OnInit, DoCheck{
       this.username = this.sessionService.getName();
       this.email = this.sessionService.getEmail();
       this.avatar = this.avatar === '' ? null : this.avatar;
+      this.getNotification();
     }
     return this.service.IsLoggedIn();
   }
+  getConnecttion() {
+    this.hubConnection = new HubConnectionBuilder()
+        .withUrl(this.publicService.getChatSignRl())
+        .build();
+
+    this.hubConnection
+      .start()
+      .then(() => {
+        console.log('Kết nối thành công!');
+        this.hubConnection.invoke('AddToGroup', this.sessionService.getUserId());
+      })
+      .catch(err => console.error('Lỗi khi thiết lập kết nối:', err));
+
+    this.hubConnection.on('ReceiveNoti', (data: any) => {
+      if (data.userId === this.sessionService.getUserId()) {
+        this.notifications.push(this.ConvertNotiDate(data));
+        this.numberNotiNotSeen += 1;
+        this.newNoti = true;
+      }
+    });
+  }
+  openNotification(){
+    this.newNoti = false;
+  }
   isCheckAdmin(){
     return this.sessionService.getRole() === Constant.adminRole;
   }
@@ -154,6 +208,7 @@ export class AppComponent implements OnInit, DoCheck{
       this.sessionService.clearSessionStorage();
       this.service.logout();
       this.avatar = null;
+      this.notifications = [];
       this.router.navigate(['/login']);
     },
     (error: any) => {
@@ -178,4 +233,23 @@ export class AppComponent implements OnInit, DoCheck{
       this.router.navigate(['/mycategory/examhistory']);
     }
   }
+
+  ConvertNotiDate(notification: NotificationDto): NotificationDto{
+
+      const parsedDate = parseISO(notification.date ?? "");
+      if (!isNaN(parsedDate.getTime())) {
+        notification.date = format(parsedDate, 'dd-MM-yyyy hh:mm', { locale: viLocale });
+      }
+    return notification;
+  }
+
+  ConvertNotisDate(notifications: NotificationDto[]): NotificationDto[]{
+    notifications?.forEach(element => {
+      const parsedDate = parseISO(element.date ?? "");
+      if (!isNaN(parsedDate.getTime())) {
+        element.date = format(parsedDate, 'dd-MM-yyyy hh:mm', { locale: viLocale });
+      }
+    });
+    return notifications;
+  }
 }

src/app/discover/chat/chat.component.ts

@@ -64,9 +64,9 @@ export class ChatComponent {
     this.hubConnection
       .start()
       .then(() => {
-        console.log('Connection started!');
+        console.log('Kết nối thành công!');
       })
-      .catch(err => console.error('Error while establishing connection:', err));
+      .catch(err => console.error('Lỗi khi thiết lập kết nối:', err));
 
     // Listen to SignalR events
       this.hubConnection.on('ReceiveComment', (data: any) => {

src/app/discover/discover.component.html

@@ -56,7 +56,7 @@
             <mat-paginator [pageSize]="pageSize" 
                         [pageIndex]="currentPage - 1" 
                         [length]="posts.length" 
-                        [pageSizeOptions]="[3,5, 10]"
+                        [pageSizeOptions]="[10, 20, 50]"
                         (page)="pageEvent($event)"></mat-paginator>
 
         </div>

src/app/discover/discover.component.ts

@@ -28,7 +28,7 @@ export class DiscoverComponent {
 
   postNews: PostResponse[] = [];
   currentPage: number = 1;
-  pageSize: number = 3;
+  pageSize: number = 10;
 
   constructor(private router: Router, private service: PublicserviceService, private dataService: DataService,
     private session: SessionService, private toastr: ToastrService) {

src/app/discover/postdetail/postdetail.component.html

@@ -64,7 +64,7 @@
                         edit
                     </span>
                 </button>
-                <button class="dis-flex" matTooltip="Xóa bài" matTooltipPosition="left" mat-icon-button  style="display: block;">
+                <button class="dis-flex" matTooltip="Xóa bài" matTooltipPosition="left" mat-icon-button  (click)="deletePost()" style="display: block;">
                     <span class="material-symbols-outlined">
                         delete
                     </span>

src/app/discover/postdetail/postdetail.component.ts

@@ -210,6 +210,20 @@ export class PostdetailComponent implements OnInit{
       width: '60%'
     });
   }
+  deletePost(){
+    this.service.DeletePost(this.postData?.id ?? '').subscribe(
+      (data: any) => {
+        if(data.isSuccessed){
+          this.toastr.success("Xóa bài thành công");
+          this.router.navigate(['/discover']);
+        } else {
+          this.toastr.error("Lỗi: " + data.message);
+        }
+      }, (error: any) => {
+        this.toastr.error("Lỗi: "+ error);
+      }
+    )
+  }
   copyToClipboard() {
     this.clipboardService.copy(this.service.getUrl() + this.currentUrl);
     this.toastr.info("Đã sao chép đường link");

src/app/discover/searchpage/searchpage.component.html

@@ -64,7 +64,7 @@
             <mat-paginator [pageSize]="pageSize" 
                         [pageIndex]="currentPage - 1" 
                         [length]="posts.length" 
-                        [pageSizeOptions]="[3,5, 10]"
+                        [pageSizeOptions]="[10, 20, 50]"
                         (page)="pageEvent($event)"></mat-paginator>
         </div>
     </div>

src/app/discover/searchpage/searchpage.component.ts

@@ -26,7 +26,7 @@ export class SearchpageComponent implements OnInit{
 
   postNews: PostResponse[] = [];
   currentPage: number = 1;
-  pageSize: number = 3;
+  pageSize: number = 10;
 
   constructor(private router: Router,private service: PublicserviceService,private route: ActivatedRoute
     , private dataService: DataService,private session: SessionService,private toastr: ToastrService){

src/app/document/document.component.html

@@ -43,7 +43,7 @@
                 <mat-paginator [pageSize]="pageSize" 
                         [pageIndex]="currentPage - 1" 
                         [length]="documents.length" 
-                        [pageSizeOptions]="[3,5, 10]"
+                        [pageSizeOptions]="[10,20,50]"
                         (page)="pageEvent($event)"></mat-paginator>
             </ul>
 

src/app/document/document.component.ts

@@ -25,7 +25,7 @@ export class DocumentComponent {
   countResult!: number;
   documentNews: DocumentResponseDto[] = [];
   currentPage: number = 1;
-  pageSize: number = 3;
+  pageSize: number = 10;
 
   constructor(private router: Router, private service: PublicserviceService,
     private session: SessionService, private toastr: ToastrService){

src/app/exam/exam.component.html

@@ -24,7 +24,7 @@
         <img src="assets/Icon/banner_exam.jpg" alt="" class="b-exam">
     </div>
     <div class="flex-center-h" style="flex-wrap: wrap;">
-        <a *ngFor="let exam of exams" (click)="GetExamDetail(exam)"
+        <a *ngFor="let exam of examNews" (click)="GetExamDetail(exam)"
             class="underline-none exam-card mlr mt-1 plr pt pb cursor-p">
             <div class="flex-center-h">
                 <img src="assets/Icon/exam.png" alt="" style="width: 64px;">
@@ -45,5 +45,10 @@
                 <ng-template class="pl-1" #fullname>{{exam.userShort?.fullName}}</ng-template>
             </div>
         </a>
+        <mat-paginator [pageSize]="pageSize" 
+                        [pageIndex]="currentPage - 1" 
+                        [length]="exams.length" 
+                        [pageSizeOptions]="[16,32,48]"
+                        (page)="pageEvent($event)"></mat-paginator>
     </div>
 </div>

src/app/exam/exam.component.ts

@@ -3,6 +3,7 @@ import { PublicserviceService } from '../service/publicservice.service';
 import { MultipleChoiceResponseDto } from '../ObjectClass/object';
 import { Router } from '@angular/router';
 import { SessionService } from '../service/session/session.service';
+import { PageEvent } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-exam',
@@ -13,6 +14,10 @@ export class ExamComponent {
   keyWord!: string | null;
   exams!: MultipleChoiceResponseDto[];
   countResult!: number;
+  examNews: MultipleChoiceResponseDto[] = [];
+  currentPage: number = 1;
+  pageSize: number = 16;
+
 
   constructor(private service: PublicserviceService, private router: Router,private session: SessionService ){
     this.keyWord = session.getKeyWordDocument();
@@ -51,4 +56,15 @@ export class ExamComponent {
     const examId = exam.id;
     this.router.navigate(['/exam', examId]);
   }
+
+  pageEvent(event: PageEvent) {
+    this.currentPage = event.pageIndex + 1;
+    this.pageSize = event.pageSize;
+    this.updatePagedExams();
+  }
+  updatePagedExams() {
+    const startIndex = (this.currentPage - 1) * this.pageSize;
+    const endIndex = startIndex + this.pageSize;
+    this.examNews = this.exams.slice(startIndex, endIndex);
+  }
 }

src/app/forum/forum-create/forum-create.component.ts

@@ -33,7 +33,7 @@ export class ForumCreateComponent implements OnInit{
 
   public editorConfig = {
     toolbar: ['undo','redo', '|','heading', '|', 'bold', 'italic', 'link','insertTable','blockQuote','mediaEmbed'],
-    placeholder: 'Miêu tả thêm ở đây... (không bắt buộc)',
+    placeholder: 'Miêu tả thêm ở đây... (bắt buộc)',
     language: 'vi',
   }
   public Editor = ClassicEditor;

src/app/forum/forum-foryou/forum-foryou.component.html

@@ -39,6 +39,6 @@
     <mat-paginator [pageSize]="pageSize" 
                         [pageIndex]="currentPage - 1" 
                         [length]="questions.length" 
-                        [pageSizeOptions]="[3,5, 10]"
+                        [pageSizeOptions]="[10,20,50]"
                         (page)="pageEvent($event)"></mat-paginator>
 </div>