[CST-5249] fix ssr rendering

Author: FrancescoMolinaro

src/app/suggestion-notifications/suggestions-notification/suggestions-notification.component.html

@@ -1,8 +1,9 @@
 <ng-container *ngIf="(suggestionsRD$ | async) as suggestions">
   <ng-container *ngFor="let suggestion of suggestions" class="alert alert-info">
     <div class="alert alert-success d-block" *ngIf="suggestion.total > 0">
-      <div [innerHTML]="'notification.suggestion' | translate: getNotificationSuggestionInterpolation(suggestion)">
-      </div>
+      <div [innerHTML]="'notification.suggestion' | translate: getNotificationSuggestionInterpolation(suggestion)"></div>
+      {{ 'notification.suggestion.please' | translate }}
+      <a [routerLink]="getNotificationSuggestionInterpolation(suggestion).url"> {{ 'notification.suggestion.review' | translate}} </a>
     </div>
   </ng-container>
 </ng-container>

src/app/suggestion-notifications/suggestions-notification/suggestions-notification.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { SuggestionTarget } from '../../core/suggestion-notifications/models/suggestion-target.model';
-import { TranslateService } from '@ngx-translate/core';
 import { SuggestionTargetsStateService } from '../suggestion-targets/suggestion-targets.state.service';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { SuggestionsService } from '../suggestions.service';
 import { Observable } from 'rxjs';
 
@@ -22,9 +20,7 @@ export class SuggestionsNotificationComponent implements OnInit {
   suggestionsRD$: Observable<SuggestionTarget[]>;
 
   constructor(
-    private translateService: TranslateService,
     private suggestionTargetsStateService: SuggestionTargetsStateService,
-    private notificationsService: NotificationsService,
     private suggestionsService: SuggestionsService
   ) { }
 

src/app/suggestion-notifications/suggestions-popup/suggestions-popup.component.html

@@ -1 +1,27 @@
+<div class="notifications-wrapper position-fixed top right" *ngIf="suggestionsRD$ | async">
+  <div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
+    <button (click)="removePopup()"
+            type="button" class="close pt-0 pr-1 pl-0 pb-0" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+
+    <div class="d-flex flex-row">
+      <div class="d-flex flex-column justify-content-center align-items-center">
+        <div class="notification-icon d-flex justify-content-center"><i class="fas fa-2x fa-check-circle"></i></div>
+      </div>
+      <div class="d-flex flex-column justify-content-center align-content-stretch text-left p-2">
+        <ng-container *ngIf="(suggestionsRD$ | async) as suggestions">
+          <ng-container *ngFor="let suggestion of suggestions" class="alert alert-info">
+            <div *ngIf="suggestion.total > 0">
+              <div [innerHTML]="'notification.suggestion' | translate: getNotificationSuggestionInterpolation(suggestion)"></div>
+              {{ 'notification.suggestion.please' | translate }}
+              <a [routerLink]="getNotificationSuggestionInterpolation(suggestion).url"> {{ 'notification.suggestion.review' | translate}} </a>
+            </div>
+          </ng-container>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>
+
 

src/app/suggestion-notifications/suggestions-popup/suggestions-popup.component.spec.ts

@@ -3,8 +3,6 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SuggestionsPopupComponent } from './suggestions-popup.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { SuggestionTargetsStateService } from '../suggestion-targets/suggestion-targets.state.service';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { of as observableOf } from 'rxjs';
 import { mockSuggestionTargetsObjectOne } from '../../shared/mocks/publication-claim-targets.mock';
@@ -13,7 +11,6 @@ import { SuggestionsService } from '../suggestions.service';
 describe('SuggestionsPopupComponent', () => {
   let component: SuggestionsPopupComponent;
   let fixture: ComponentFixture<SuggestionsPopupComponent>;
-  let notificationsService: NotificationsService;
 
   const suggestionStateService = jasmine.createSpyObj('SuggestionTargetsStateService', {
     hasUserVisitedSuggestions: jasmine.createSpy('hasUserVisitedSuggestions'),
@@ -35,7 +32,6 @@ describe('SuggestionsPopupComponent', () => {
       providers: [
         { provide: SuggestionTargetsStateService, useValue: suggestionStateService },
         { provide: SuggestionsService, useValue: suggestionService },
-        { provide: NotificationsService, useValue: new NotificationsServiceStub() },
       ],
       schemas: [NO_ERRORS_SCHEMA]
 
@@ -69,12 +65,10 @@ describe('SuggestionsPopupComponent', () => {
 
       fixture = TestBed.createComponent(SuggestionsPopupComponent);
       component = fixture.componentInstance;
-      notificationsService = (component as any).notificationsService;
       fixture.detectChanges();
     });
 
     it('should show a notification when new publication suggestions are available', () => {
-      expect(notificationsService.success).toHaveBeenCalled();
       expect(suggestionStateService.dispatchRefreshUserSuggestionsAction).toHaveBeenCalled();
       expect(suggestionStateService.dispatchMarkUserSuggestionsAsVisitedAction).toHaveBeenCalled();
     });

src/app/suggestion-notifications/suggestions-popup/suggestions-popup.component.ts

@@ -1,31 +1,39 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 import { SuggestionTargetsStateService } from '../suggestion-targets/suggestion-targets.state.service';
-import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { SuggestionsService } from '../suggestions.service';
 import { take, takeUntil } from 'rxjs/operators';
 import { SuggestionTarget } from '../../core/suggestion-notifications/models/suggestion-target.model';
 import { isNotEmpty } from '../../shared/empty.util';
-import { combineLatest, Subject } from 'rxjs';
+import { combineLatest, Observable, of, Subject } from 'rxjs';
+import { trigger } from '@angular/animations';
+
+
+import { fromTopEnter } from '../../shared/animations/fromTop';
 
 /**
  * Show suggestions on a popover window, used on the homepage
  */
 @Component({
   selector: 'ds-suggestions-popup',
   templateUrl: './suggestions-popup.component.html',
-  styleUrls: ['./suggestions-popup.component.scss']
+  styleUrls: ['./suggestions-popup.component.scss'],
+  animations: [
+    trigger('enterLeave', [
+      fromTopEnter
+    ])
+  ],
 })
 export class SuggestionsPopupComponent implements OnInit, OnDestroy {
 
   labelPrefix = 'notification.';
 
   subscription;
 
+  suggestionsRD$: Observable<SuggestionTarget[]>;
+
+
   constructor(
-    private translateService: TranslateService,
     private suggestionTargetsStateService: SuggestionTargetsStateService,
-    private notificationsService: NotificationsService,
     private suggestionsService: SuggestionsService
   ) { }
 
@@ -42,7 +50,7 @@ export class SuggestionsPopupComponent implements OnInit, OnDestroy {
       this.suggestionTargetsStateService.dispatchRefreshUserSuggestionsAction();
       if (isNotEmpty(suggestions)) {
         if (!visited) {
-          suggestions.forEach((suggestionTarget: SuggestionTarget) => this.showNotificationForNewSuggestions(suggestionTarget));
+          this.suggestionsRD$ = of(suggestions);
           this.suggestionTargetsStateService.dispatchMarkUserSuggestionsAsVisitedAction();
           notifier.next(null);
           notifier.complete();
@@ -51,21 +59,24 @@ export class SuggestionsPopupComponent implements OnInit, OnDestroy {
     });
   }
 
-  /**
-   * Show a notification to user for a new suggestions detected
-   * @param suggestionTarget
-   * @private
-   */
-  private showNotificationForNewSuggestions(suggestionTarget: SuggestionTarget): void {
-    const content = this.translateService.instant(this.labelPrefix + 'suggestion',
-      this.suggestionsService.getNotificationSuggestionInterpolation(suggestionTarget));
-    this.notificationsService.success('', content, {timeOut:0}, true);
-  }
-
   ngOnDestroy() {
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
   }
 
+  /**
+   * Interpolated params to build the notification suggestions notification.
+   * @param suggestionTarget
+   */
+  public getNotificationSuggestionInterpolation(suggestionTarget: SuggestionTarget): any {
+    return this.suggestionsService.getNotificationSuggestionInterpolation(suggestionTarget);
+  }
+
+  /**
+   * Hide popup from view
+   */
+  public removePopup() {
+    this.suggestionsRD$ = null;
+  }
 }

src/assets/i18n/en.json5

@@ -3120,7 +3120,11 @@
 
   "mydspace.import": "Import",
 
-  "notification.suggestion": "We found <b>{{count}} publications</b> in the {{source}} that seems to be related to your profile.<br> Please <a href='{{ url }}'>review the suggestions</a>",
+  "notification.suggestion": "We found <b>{{count}} publications</b> in the {{source}} that seems to be related to your profile.<br>",
+
+  "notification.suggestion.review": "review the suggestions",
+
+  "notification.suggestion.please": "Please",
 
   "nav.browse.header": "All of DSpace",