add first config cancel call api in qr-payment component

Author: Fxdonad

src/app/core/interceptors/config/ignoreApiHandleError.ts

@@ -4,6 +4,8 @@ export const IGNORE_ERROR_NOTIFICATION_URLS = [
   '/submission/exercise/quiz/', // Bỏ qua tất cả endpoint chứa pattern này
   '/profile/user/',
   '/submission/exercise/coding/',
+  '/notification/',
+  '/ai/chat/',
   // Ví dụ pattern regex: /\/submission\/exercise\/quiz\/\d+(\?.*)?$/
   // Thêm các endpoint khác nếu cần
 ];

src/app/core/services/socket-service/notification-socket.service.ts

@@ -14,7 +14,7 @@ export interface NotificationEvent {
 }
 
 @Injectable({ providedIn: 'root' })
-export class NotificationService {
+export class NotificationSocketService {
   private readonly url = `${NOTIFICATION_SOCKET_PORT}?token=${localStorage.getItem(
     'token'
   )}`;
@@ -26,4 +26,11 @@ export class NotificationService {
   listenNotifications(): Observable<NotificationEvent> {
     return this.socketService.on<NotificationEvent>(this.url, 'notification');
   }
+
+  listenNoticeCount(): Observable<{ unread: number }> {
+    return this.socketService.on<{ unread: number }>(
+      this.url,
+      'notification-unread'
+    );
+  }
 }

src/app/features/admin/user-management/pages/user-list/user-list.html

@@ -21,11 +21,12 @@
           [disabled]="false"
           [multiSelect]="true"
           [isDisplayCheckbox]="false"
+          [removeSingleSelected]="true"
           (onSelect)="handleSelect(filterRoleKey, $event)"
           [isOpen]="activeDropdown === filterRoleKey"
           (toggle)="toggleDropdown(filterRoleKey)"
           [isDisplaySelectedOpptionLabels]="true"
-          [isButtonControl]="true"
+          [isButtonControl]="false"
           [isSearchable]="true"
           [minHeight]="true"
           [needIndexColor]="true"
@@ -132,7 +133,7 @@
       [amountDataPerPage]="itemsPerPage"
       [needNo]="true"
       [needDelete]="true"
-      [needEdit]="true"
+      [needEdit]="false"
       [needViewResult]="false"
       [needswitch]="true"
       [idSelect]="'userId'"

src/app/features/admin/user-management/pages/user-list/user-list.ts

@@ -118,7 +118,7 @@ export class UserListComponent {
 
   // Pagination
   pageIndex: number = 1;
-  itemsPerPage: number = 8;
+  itemsPerPage: number = 10;
   totalDatas: number = 0;
   sortBy: EnumType['sort'] = 'CREATED_AT';
   asc: boolean = false;

src/app/features/organization/pages/org-blocks/org-blocks.component.ts

@@ -86,7 +86,12 @@ export class OrgBlocksComponent implements OnInit {
       next: (res) => {
         const result = res.result;
         this.totalPages = result.totalPages;
-        this.blocks = loadMore ? [...this.blocks, ...result.data] : result.data;
+        this.blocks = loadMore
+          ? [
+              ...this.blocks,
+              ...result.data.filter((data) => data.code !== 'UNASSIGNED'),
+            ]
+          : result.data.filter((data) => data.code !== 'UNASSIGNED');
         this.isLoading = false;
       },
       error: () => (this.isLoading = false),

src/app/features/service-payment/pages/qr-payment/qr-payment.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  inject,
+  DestroyRef,
+} from '@angular/core';
 import { Observable, Subscription, interval, of } from 'rxjs';
 
 import { Store } from '@ngrx/store';
@@ -20,6 +26,7 @@ import {
 } from '../../validate/qr-payment.utils';
 import { decodeJWT } from '../../../../shared/utils/stringProcess';
 import { ModalNoticeService } from '../../../../shared/store/modal-notice-state/modal-notice.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-qr-payment',
@@ -29,6 +36,8 @@ import { ModalNoticeService } from '../../../../shared/store/modal-notice-state/
   styleUrls: ['./qr-payment.component.scss'],
 })
 export class QrPaymentComponent implements OnInit, OnDestroy {
+  private destroyRef = inject(DestroyRef); //ngắt request khi thoát trang (thêm 2 dòng, dòng này và dòng pipe trong service)
+
   amount: number | null = null; // Số tiền VNĐ người dùng nhập
   maxAmount: number = 20000000;
   qrTimeOut: boolean = true;
@@ -90,15 +99,19 @@ export class QrPaymentComponent implements OnInit, OnDestroy {
     this.countdownInterval?.unsubscribe();
   }
 
+  //có ngắt request khi thoát trang, (còn lại là pipe dưới để ngắt request)
   fetchCurrentMoney() {
-    this.paymentService.getMyWallet().subscribe({
-      next: (res) => {
-        this.currentGp = res.result.balance;
-      },
-      error(err) {
-        console.log(err);
-      },
-    });
+    this.paymentService
+      .getMyWallet()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (res) => {
+          this.currentGp = res.result.balance;
+        },
+        error(err) {
+          console.log(err);
+        },
+      });
   }
 
   paymentFailed() {

src/app/shared/components/my-shared/header/header.ts

@@ -13,10 +13,7 @@ import { resetVariable } from '../../../store/variable-state/variable.actions';
 import { avatarUrlDefault } from '../../../../core/constants/value.constant';
 import { SetPasswordModalComponent } from '../../../../features/auth/components/modal/set-password-modal/set-password-modal.component';
 import { NotificationModalComponent } from './notification-modal/notification-modal.component';
-import {
-  NotificationEvent,
-  NotificationService,
-} from '../../../../core/services/socket-service/notification-socket.service';
+import { NotificationSocketService } from '../../../../core/services/socket-service/notification-socket.service';
 import { NotificationListService } from '../../../../core/services/api-service/notification-list.service';
 
 @Component({
@@ -51,7 +48,7 @@ export class HeaderComponent {
     private profileService: ProfileService,
     private themeService: ThemeService,
     private store: Store,
-    private notificationService: NotificationService,
+    private notificationService: NotificationSocketService,
     private notificationListService: NotificationListService
   ) {
     this.needReloadAvatar$ = this.store.select(
@@ -87,12 +84,12 @@ export class HeaderComponent {
 
     // 👇 Đăng ký lắng nghe notification từ socket
     this.notificationService
-      .listenNotifications()
-      .subscribe((event: NotificationEvent) => {
-        console.log('Header nhận notification:', event);
+      .listenNoticeCount()
+      .subscribe((event: { unread: number }) => {
+        console.log('Header nhận count notification:', event.unread);
 
         // Tăng counter
-        this.notificationCount++;
+        this.notificationCount = event.unread;
 
         // Nếu muốn push vào modal hoặc show toast
         // this.notifications.unshift(event);