From b4273fa734983b9b8c82748fefd62a5fd5793dfe Mon Sep 17 00:00:00 2001 From: Yana De Pauw Date: Thu, 26 Jan 2023 15:41:45 +0100 Subject: [PATCH] 97425: Implement feedback --- .../system-wide-alert-banner.component.ts | 11 ++++-- .../system-wide-alert-form.component.html | 3 +- .../system-wide-alert-form.component.spec.ts | 36 ++++++++++++++++++- .../system-wide-alert-form.component.ts | 33 ++++++++++++++--- 4 files changed, 74 insertions(+), 9 deletions(-) diff --git a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.ts b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.ts index 57a9604f90..a19d2a7e41 100644 --- a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.ts +++ b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core'; import { SystemWideAlertDataService } from '../../core/data/system-wide-alert-data.service'; import { getAllSucceededRemoteDataPayload } from '../../core/shared/operators'; import { filter, map, switchMap } from 'rxjs/operators'; @@ -7,6 +7,7 @@ import { SystemWideAlert } from '../system-wide-alert.model'; import { hasValue, isNotEmpty } from '../../shared/empty.util'; import { BehaviorSubject, EMPTY, interval, Subscription } from 'rxjs'; import { zonedTimeToUtc } from 'date-fns-tz'; +import { isPlatformBrowser } from '@angular/common'; /** * Component responsible for rendering a banner and the countdown for an active system-wide alert @@ -44,6 +45,7 @@ export class SystemWideAlertBannerComponent implements OnInit, OnDestroy { subscriptions: Subscription[] = []; constructor( + @Inject(PLATFORM_ID) protected platformId: Object, protected systemWideAlertDataService: SystemWideAlertDataService ) { } @@ -65,7 +67,12 @@ export class SystemWideAlertBannerComponent implements OnInit, OnDestroy { const timeDifference = date.getTime() - new Date().getTime(); if (timeDifference > 0) { this.allocateTimeUnits(timeDifference); - return interval(1000); + if (isPlatformBrowser(this.platformId)) { + return interval(1000); + } else { + return EMPTY; + } + } } // Reset the countDown times to 0 and return EMPTY to prevent unnecessary countdown calculations diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html index d6eeaf5046..169081e277 100644 --- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html +++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html @@ -7,7 +7,7 @@ + (change)="setActive($event)">
@@ -44,6 +44,7 @@ placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date" + [minDate]="minDate" ngbDatepicker #d="ngbDatepicker" (ngModelChange)="updatePreviewTime()" diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.spec.ts b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.spec.ts index 4fc79c1caa..505990b445 100644 --- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.spec.ts +++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.spec.ts @@ -149,8 +149,19 @@ describe('SystemWideAlertFormComponent', () => { }); }); + describe('setActive', () => { + it('should set whether the alert is active and save the current alert', () => { + spyOn(comp, 'save'); + spyOn(comp.formActive, 'patchValue'); + comp.setActive(true); + + expect(comp.formActive.patchValue).toHaveBeenCalledWith(true); + expect(comp.save).toHaveBeenCalledWith(false); + }); + }); + describe('save', () => { - it('should update the exising alert with the form values and show a success notification on success', () => { + it('should update the exising alert with the form values and show a success notification on success and navigate back', () => { spyOn(comp, 'back'); comp.currentAlert = systemWideAlert; @@ -173,6 +184,29 @@ describe('SystemWideAlertFormComponent', () => { expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('systemwidealerts'); expect(comp.back).toHaveBeenCalled(); }); + it('should update the exising alert with the form values and show a success notification on success and not navigate back when false is provided to the save method', () => { + spyOn(comp, 'back'); + comp.currentAlert = systemWideAlert; + + comp.formMessage.patchValue('New message'); + comp.formActive.patchValue(true); + comp.time = {hour: 4, minute: 26}; + comp.date = {year: 2023, month: 1, day: 25}; + + const expectedAlert = new SystemWideAlert(); + expectedAlert.alertId = systemWideAlert.alertId; + expectedAlert.message = 'New message'; + expectedAlert.active = true; + const countDownTo = new Date(2023, 0, 25, 4, 26); + expectedAlert.countdownTo = utcToZonedTime(countDownTo, 'UTC').toUTCString(); + + comp.save(false); + + expect(systemWideAlertDataService.put).toHaveBeenCalledWith(expectedAlert); + expect(notificationsService.success).toHaveBeenCalled(); + expect(requestService.setStaleByHrefSubstring).toHaveBeenCalledWith('systemwidealerts'); + expect(comp.back).not.toHaveBeenCalled(); + }); it('should update the exising alert with the form values but add an empty countdown date when disabled and show a success notification on success', () => { spyOn(comp, 'back'); comp.currentAlert = systemWideAlert; diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts index 6e0d2030fd..db517ef8cd 100644 --- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts +++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts @@ -46,6 +46,11 @@ export class SystemWideAlertFormComponent implements OnInit { */ date: NgbDateStruct; + /** + * The minimum date for the countdown timer + */ + minDate: NgbDateStruct; + /** * Object to store the countdown time part */ @@ -90,6 +95,10 @@ export class SystemWideAlertFormComponent implements OnInit { ); this.createForm(); + const currentDate = new Date(); + this.minDate = {year: currentDate.getFullYear(), month: currentDate.getMonth() + 1, day: currentDate.getDate()}; + + this.systemWideAlert$.subscribe((alert) => { this.currentAlert = alert; this.initFormValues(alert); @@ -125,6 +134,16 @@ export class SystemWideAlertFormComponent implements OnInit { } + /** + * Set whether the system-wide alert is active + * Will also save the info in the current system-wide alert + * @param active + */ + setActive(active: boolean) { + this.formActive.patchValue(active); + this.save(false); + } + /** * Set whether the countdown timer is enabled or disabled. This will also update the counter in the preview * @param enabled - Whether the countdown timer is enabled or disabled. @@ -180,8 +199,10 @@ export class SystemWideAlertFormComponent implements OnInit { * Save the system-wide alert present in the form * When no alert is present yet on the server, a new one will be created * When one already exists, the existing one will be updated + * + * @param navigateToHomePage - Whether the user should be navigated back on successful save or not */ - save() { + save(navigateToHomePage = true) { const alert = new SystemWideAlert(); alert.message = this.formMessage.value; alert.active = this.formActive.value; @@ -193,20 +214,22 @@ export class SystemWideAlertFormComponent implements OnInit { } if (hasValue(this.currentAlert)) { const updatedAlert = Object.assign(new SystemWideAlert(), this.currentAlert, alert); - this.handleResponse(this.systemWideAlertDataService.put(updatedAlert), 'system-wide-alert.form.update'); + this.handleResponse(this.systemWideAlertDataService.put(updatedAlert), 'system-wide-alert.form.update', navigateToHomePage); } else { - this.handleResponse(this.systemWideAlertDataService.create(alert), 'system-wide-alert.form.create'); + this.handleResponse(this.systemWideAlertDataService.create(alert), 'system-wide-alert.form.create', navigateToHomePage); } } - private handleResponse(response$: Observable>, messagePrefix) { + private handleResponse(response$: Observable>, messagePrefix, navigateToHomePage: boolean) { response$.pipe( getFirstCompletedRemoteData() ).subscribe((response: RemoteData) => { if (response.hasSucceeded) { this.notificationsService.success(this.translateService.get(`${messagePrefix}.success`)); this.requestService.setStaleByHrefSubstring('systemwidealerts'); - this.back(); + if (navigateToHomePage) { + this.back(); + } } else { this.notificationsService.error(this.translateService.get(`${messagePrefix}.error`, response.errorMessage)); }