Merge pull request #3432 from ita-social-projects/bugfix/#7702-user-n…

…otifications

[Bugfix] #7702 Fix read message, add ability to delete message, cover with tests

src/app/main/component/user/services/user-notification.service.ts

@@ -12,7 +12,7 @@ export class UserNotificationService {
   url: string = environment.backendLink;
   pickUpUrl: string = environment.backendUbsLink + '/';
 
-  constructor(private http: HttpClient) {}
+  constructor(private readonly http: HttpClient) {}
 
   getAllNotifications(params: HttpParams): Observable<NotificationArrayModel> {
     return this.http.get<NotificationArrayModel>(`${this.url}notifications`, { params });
@@ -23,13 +23,17 @@ export class UserNotificationService {
   }
 
   readNotification(id: number, isPickUp: boolean): Observable<void> {
-    const url = isPickUp ? this.pickUpUrl : this.url;
-    return this.http.post<void>(`${url}notifications/${id}/viewNotification`, {});
+    if (isPickUp) {
+      return this.http.patch<void>(`${this.pickUpUrl}notifications/${id}/viewNotification`, {});
+    }
+    return this.http.post<void>(`${this.url}notifications/${id}/viewNotification`, {});
   }
 
   unReadNotification(id: number, isPickUp: boolean): Observable<void> {
-    const url = isPickUp ? this.pickUpUrl : this.url;
-    return this.http.post<void>(`${url}notifications/${id}/unreadNotification`, {});
+    if (isPickUp) {
+      return this.http.patch<void>(`${this.pickUpUrl}notifications/${id}/unreadNotification`, {});
+    }
+    return this.http.post<void>(`${this.url}notifications/${id}/unreadNotification`, {});
   }
 
   deleteNotification(id: number, isPickUp: boolean): Observable<void> {

src/app/shared/ubs-base-sidebar/ubs-base-sidebar.component.html

@@ -39,11 +39,11 @@
             <img [src]="getIcon(listItem)" class="sidebar-list-item-icon" alt="{{ listItem.name | translate }} icon" />
             <span *ngIf="isExpanded" class="sidebar-list-item-desc">{{ listItem.name | translate }}</span>
             <span
-              *ngIf="listItem.name === 'ubs-user.messages' && serviceUserMessages.countOfNoReadeMessages && isExpanded"
+              *ngIf="listItem.name === 'ubs-user.messages' && serviceUserMessages.countOfNoReadMessages && isExpanded"
               class="count-unread-messages"
               aria-live="polite"
             >
-              ({{ serviceUserMessages.countOfNoReadeMessages }})
+              ({{ serviceUserMessages.countOfNoReadMessages }})
             </span>
           </a>
         </li>

src/app/shared/ubs-base-sidebar/ubs-base-sidebar.component.spec.ts

@@ -62,7 +62,7 @@ describe('UbsBaseSidebarComponent', () => {
     fixture = TestBed.createComponent(UbsBaseSidebarComponent);
     component = fixture.componentInstance;
     spyOn(global, 'setTimeout');
-    userMessagesService.countOfNoReadeMessages = 0;
+    userMessagesService.countOfNoReadMessages = 0;
     fixture.detectChanges();
   });
 
@@ -76,7 +76,7 @@ describe('UbsBaseSidebarComponent', () => {
   });
 
   it('should return default icon link', () => {
-    userMessagesService.countOfNoReadeMessages = 1;
+    userMessagesService.countOfNoReadMessages = 1;
     listItem.link = component.bellsNoneNotification;
     expect(component.getIcon(listItem)).toBe(component.bellsNotification);
   });

src/app/shared/ubs-base-sidebar/ubs-base-sidebar.component.ts

@@ -69,8 +69,8 @@ export class UbsBaseSidebarComponent implements AfterViewInit, AfterViewChecked,
     }
   }
 
-  getIcon(listItem): string {
-    return listItem.link === this.bellsNoneNotification && this.serviceUserMessages.countOfNoReadeMessages
+  getIcon(listItem: listElements): string {
+    return listItem.link === this.bellsNoneNotification && this.serviceUserMessages.countOfNoReadMessages
       ? this.bellsNotification
       : listItem.link;
   }
@@ -93,7 +93,7 @@ export class UbsBaseSidebarComponent implements AfterViewInit, AfterViewChecked,
           .getCountUnreadNotification()
           .pipe(takeUntil(this.destroy))
           .subscribe((response) => {
-            this.serviceUserMessages.countOfNoReadeMessages = response;
+            this.serviceUserMessages.countOfNoReadMessages = response;
           });
       } else {
         this.isAdmin = true;

src/app/ubs/ubs-user/services/user-messages.service.spec.ts

@@ -10,7 +10,6 @@ describe('UserMessagesService', () => {
   let httpMock: HttpTestingController;
   let service: UserMessagesService;
   let langMock = null;
-  const IDMock = 3900;
 
   const localStorageServiceMock: LocalStorageService = jasmine.createSpyObj('LocalStorageService', ['languageBehaviourSubject']);
   localStorageServiceMock.languageBehaviourSubject = new BehaviorSubject('en');
@@ -40,7 +39,7 @@ describe('UserMessagesService', () => {
   });
 
   it('should return 10 notifications', () => {
-    service.getNotification(0, 10).subscribe((data) => {
+    service.getNotification(0, 10, 'en').subscribe((data) => {
       expect(data).toBeDefined();
       expect(data.page.length).toBe(10);
     });
@@ -56,17 +55,19 @@ describe('UserMessagesService', () => {
     expect(req.request.method).toBe('GET');
   });
 
-  it('should return current notification', () => {
-    service.setReadNotification(IDMock).subscribe((data) => {
-      expect(data).toBeDefined();
-    });
-    const req = httpMock.expectOne(`${mainUbsLink}/notifications/${IDMock}?lang=en`);
-    expect(req.request.method).toBe('POST');
+  it('should call the correct URL and method for setReadNotification', () => {
+    const notificationId = 1;
+
+    service.markNotificationAsRead(notificationId).subscribe();
+    const req = httpMock.expectOne(`${service.url}/notifications/${notificationId}/viewNotification`);
+    expect(req.request.method).toBe('PATCH');
   });
 
-  it('onDestroy should be called', () => {
-    const spy = spyOn(service, 'ngOnDestroy');
-    service.ngOnDestroy();
-    expect(spy).toHaveBeenCalledTimes(1);
+  it('should call the correct URL and method for deleteNotification', () => {
+    const notificationId = 1;
+
+    service.deleteNotification(notificationId).subscribe();
+    const req = httpMock.expectOne(`${service.url}/notifications/${notificationId}`);
+    expect(req.request.method).toBe('DELETE');
   });
 });

src/app/ubs/ubs-user/services/user-messages.service.ts

@@ -3,35 +3,32 @@ import { Observable, ReplaySubject } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '@environment/environment';
 import { Notifications } from '../../../ubs/ubs-admin/models/ubs-user.model';
-import { LocalStorageService } from '@global-service/localstorage/local-storage.service';
-import { takeUntil } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class UserMessagesService implements OnDestroy {
   url = environment.backendUbsLink;
-  private destroyed$: ReplaySubject<any> = new ReplaySubject<any>(1);
-  countOfNoReadeMessages: any;
+  private readonly destroyed$: ReplaySubject<any> = new ReplaySubject<any>(1);
+  countOfNoReadMessages: any;
   language: string;
 
-  constructor(
-    private http: HttpClient,
-    private localStorageService: LocalStorageService
-  ) {
-    localStorageService.languageBehaviourSubject.pipe(takeUntil(this.destroyed$)).subscribe((language) => (this.language = language));
-  }
+  constructor(private readonly http: HttpClient) {}
 
-  getNotification(currentPage: number, size: number): Observable<Notifications> {
-    return this.http.get<Notifications>(`${this.url}/notifications?lang=${this.language}&page=${currentPage}&size=${size}`);
+  getNotification(currentPage: number, size: number, language: string): Observable<Notifications> {
+    return this.http.get<Notifications>(`${this.url}/notifications?lang=${language}&page=${currentPage}&size=${size}`);
   }
 
   getCountUnreadNotification(): Observable<number> {
     return this.http.get<number>(`${this.url}/notifications/quantityUnreadenNotifications`);
   }
 
-  setReadNotification(id: number): Observable<any> {
-    return this.http.post(`${this.url}/notifications/${id}?lang=${this.language}`, {});
+  markNotificationAsRead(id: number): Observable<void> {
+    return this.http.patch<void>(`${this.url}/notifications/${id}/viewNotification`, {});
+  }
+
+  deleteNotification(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.url}/notifications/${id}`);
   }
 
   ngOnDestroy() {

src/app/ubs/ubs-user/ubs-user-messages/ubs-user-messages.component.html

@@ -2,9 +2,9 @@
   <div class="content">
     <div class="main_header">{{ localization.title | translate }}</div>
     <div class="header-list">
-      <div class="col-2 pl-4 id">{{ localization.id | translate }}</div>
-      <div class="col-5 pl-3 theme">{{ localization.themeMessages | translate }}</div>
-      <div class="col-2 time">{{ localization.time | translate }}</div>
+      <div class="pl-4 id">{{ localization.id | translate }}</div>
+      <div class="pl-3 theme">{{ localization.themeMessages | translate }}</div>
+      <div class="pl-3 time">{{ localization.time | translate }}</div>
     </div>
     <div class="under-line"></div>
     <div class="load-spinner" *ngIf="isLoadSpinner">
@@ -27,7 +27,7 @@
                     totalItems: count
                   }
           "
-          (click)="setRead(notification.id, notification.read)"
+          (click)="setRead(notification)"
           (opened)="panelOpenState = true"
           (closed)="panelOpenState = false"
         >
@@ -38,14 +38,21 @@
             <mat-panel-description class="col-5 panel-description" [ngClass]="{ textColorTitle: !notification.read }">
               {{ notification.title }}
             </mat-panel-description>
-            <mat-panel-description class="date col-4" [ngClass]="{ textColorTitle: !notification.read }">
+            <mat-panel-description class="date col-2" [ngClass]="{ textColorTitle: !notification.read }">
               {{ notification.notificationTime | date: 'HH:mm dd.MM.yyyy' }}
             </mat-panel-description>
+            <mat-panel-description class="col-2 panel-delete">
+              <button
+                mat-icon-button
+                class="delete-icon"
+                (click)="deleteNotification($event, notification)"
+                (keydown)="deleteNotification($event, notification)"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </mat-panel-description>
           </mat-expansion-panel-header>
-          <div class="load-spinner small" *ngIf="isLoadSmallSpinner && !notification.isOpen">
-            <mat-spinner class="custom-spinner" diameter="60"></mat-spinner>
-          </div>
-          <div class="description" *ngIf="!isLoadSmallSpinner">
+          <div class="description">
             <app-notification-body [body]="notification.body" [orderId]="notification.orderId"> </app-notification-body>
           </div>
           <div *ngIf="notification.images?.length" class="description title-img">

src/app/ubs/ubs-user/ubs-user-messages/ubs-user-messages.component.scss

@@ -32,9 +32,12 @@
 }
 
 .header-list {
-  display: flex;
-  margin: -32px 0 5px;
-  padding-left: 35px;
+  display: grid;
+  grid-template-columns: 2fr 4fr 4fr 3fr;
+  align-items: center;
+  width: 100%;
+  gap: 40px;
+  padding: 0 95px 0 32px;
 
   div {
     color: var(--ubs-primary-grey);
@@ -139,10 +142,6 @@
   text-align: left;
 }
 
-.time {
-  margin-left: -32px;
-}
-
 .my-pagination::ng-deep .ngx-pagination {
   font-family: var(--primary-font);
   font-size: 16px;
@@ -217,6 +216,12 @@
   margin-top: 0;
 }
 
+.delete-icon mat-icon {
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
 :host ::ng-deep .custom-spinner circle {
   stroke: #e2e2e2;
 }