1. library.css: Add class 'inherit-color' (used in user notifications: uk-form-label).

2. mailPrefs.component: make functionality of buttons like manage-user-notifications.component of admin portal (when preferences change, save button remains clickable unless 'reset' is clicked).
3. manage-user-notifications.component: Change html (stop using table for proper layout - use form instead).
4. When Session expires, redirect to '/user-info'.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@53613 d315682c-612b-4755-9ff5-7f18f6832af3

connect/userEmailPreferences/mailPrefs.component.html

@@ -1,13 +1,16 @@
-<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
+<!-- <div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
   <div uk-grid uk-grid>
-    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first">
+    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first"> -->
       <div class="uk-container uk-margin-top">
         <div class="uk-article-title custom-article-title">
           User Email Preferences for Claims Notifications
         </div>
 
-        <div *ngIf="userValidMessage.length > 0 " class = "uk-alert uk-alert-danger " >
+        <div *ngIf="userValidMessage.length > 0" class = "uk-alert uk-alert-danger uk-animation-fade" role="alert">
-            User session is not valid. Please login again.
+            {{userValidMessage}}
+        </div>
+        <div *ngIf="savedMessage.length > 0" class="uk-alert uk-alert-success uk-animation-fade" role="alert">
+            {{savedMessage}}
         </div>
         <errorMessages [status]="[status]" [type]="'notification preferences'"></errorMessages>
 
@@ -20,7 +23,7 @@
                 <form class="uk-form-horizontal"><!-- [formGroup]="myForm"-->
                   <!--[ngClass]="{'has-error':!myForm.controls.notify.valid && myForm.controls.notify.dirty}"-->
                   <div class="uk-margin">
-                    <div class="uk-form-label">Do you want to receive e-mail notifications?</div>
+                    <div class="uk-form-label inherit-color">Notify for claims:</div>
                     <!-- <div class="uk-form-controls uk-form-controls-text">
                       <label>Yes <input class="uk-radio" type="radio" name="radio2" [checked]="notification.notify" (click)="changeNotify(notification, true)"></label>
                       <label>No  <input class="uk-radio" type="radio" name="radio2" [checked]="!notification.notify" (click)="changeNotify(notification, false)"></label>
@@ -28,23 +31,24 @@
                     <div class="uk-form-controls uk-form-controls-text" data-uk-button-group>
                         <button *ngIf="notification.notify" class="uk-button uk-button-primary uk-button-small"
                                  data-uk-button>ON</button>
-                        <button *ngIf="!notification.notify" class="uk-button-default uk-button-small"
+                        <button *ngIf="!notification.notify" class="uk-button uk-button-default uk-button-small"
-                                (click)="changeNotify(notification, true)" data-uk-button>ON</button>
+                                (click)="changeNotify(notification, true, i)" data-uk-button>ON</button>
                         <button *ngIf="!notification.notify" class="uk-button uk-button-danger uk-button-small"
                                  data-uk-button>OFF</button>
-                        <button *ngIf="notification.notify" class="uk-button-default uk-button-small"
+                        <button *ngIf="notification.notify" class="uk-button uk-button-default uk-button-small"
-                                (click)="changeNotify(notification, false)" data-uk-button>OFF</button>
+                                (click)="changeNotify(notification, false, i)" data-uk-button>OFF</button>
                     </div>
                   </div>
 
                   <!-- [ngClass]="{'has-error':!myForm.controls.frequency.valid && myForm.controls.frequency.dirty}" -->
                   <div [class]="notification.notify ? 'uk-margin' : 'uk-margin cursor-not-allowed'">
-                    <div class="uk-form-label" >How often?</div>
+                    <div class="uk-form-label inherit-color">Frequency:</div>
                     <div class="uk-form-controls">
-                      <select [class]="notification.notify ? 'uk-select' : 'uk-select uk-disabled'" id="form-horizontal-select" class="uk-select" [(ngModel)]="notification.frequency" name="select_frequency">
+                      <select [class]="notification.notify ? 'uk-select' : 'uk-select uk-disabled'" id="form-horizontal-select"
-                        <option [ngValue]="24" >Daily</option>
+                              [(ngModel)]="notification.frequency" name="select_frequency">
-                        <option [ngValue]="48" >Every two days</option>
+                        <option (click)="changeFrequency(24, i)" [ngValue]="24" >Daily</option>
-                        <option [ngValue]="168">Weekly</option>
+                        <option (click)="changeFrequency(48, i)" [ngValue]="48" >Every two days</option>
+                        <option (click)="changeFrequency(168, i)" [ngValue]="168">Weekly</option>
                       </select>
                     </div>
                   </div>
@@ -67,6 +71,6 @@
 
       <!-- {{notifications | json}} -->
       </div>
-    </div>
+    <!-- </div>
   </div>
-</div>
+</div> -->

connect/userEmailPreferences/mailPrefs.component.ts

@@ -9,6 +9,7 @@ import {EnvProperties} from '../../utils/properties/env-properties';
 import {MailPrefsService} from './mailPrefs.service';
 import {ConnectHelper} from '../connectHelper';
 import {ErrorCodes} from '../../utils/properties/errorCodes';
+import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
 
 declare var UIkit: any;
 
@@ -27,10 +28,11 @@ export class MailPrefsComponent {
 
   public notifications = [];
   public initialNotifications = [];
+  public prefsChanged = {};
 
-  public showErrorMessage:boolean = false;
   //public showForbiddenMessage:boolean = false;
   public userValidMessage:string = "";
+  public savedMessage: string = "";
 
   public fetchId:string;
 
@@ -68,8 +70,12 @@ export class MailPrefsComponent {
   getEmailPreferences() {
     if(!Session.isLoggedIn()){
       this.userValidMessage = "User session has expired. Please login again.";
+      if(this.showSaveResetButtons) {
+        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
+      }
     }else{
       this.status = this.errorCodes.LOADING;
+      this.savedMessage = "";
 
       if(this.communityId && this.communityId != "openaire") {
         this.preferencesFor = "community";
@@ -116,58 +122,90 @@ export class MailPrefsComponent {
     }
   }
 
-  changeNotify(notification: any, checked: boolean) {
+  changeNotify(notification: any, checked: boolean, index: number) {
+    this.savedMessage = "";
+    this.status = this.errorCodes.DONE;
     notification.notify = checked;
+    this.prefsChanged[index] = true;
+  }
+
+  changeFrequency(value: number, index: number) {
+    this.savedMessage = "";
+    this.status = this.errorCodes.DONE;
+    if(this.initialNotifications[index].frequency != value) {
+      this.prefsChanged[index] = true;
+    }
   }
 
   saveNotification(index: number) {
-    if(JSON.stringify(this.notifications[index]) != JSON.stringify(this.initialNotifications[index])) {
+    if(this.notifications.length > 0 && this.initialNotifications.length > 0) {
-      if(!Session.isLoggedIn()){
+      if(JSON.stringify(this.notifications[index]) != JSON.stringify(this.initialNotifications[index])) {
-        this.userValidMessage = "User session has expired. Please login again.";
+        if(!Session.isLoggedIn()){
-
+          this.userValidMessage = "User session has expired. Please login again.";
-      }else{
+          if(this.showSaveResetButtons) {
-        this.status = this.errorCodes.LOADING;
+            this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-
-        console.info("Send notification to db: ", this.notifications[index]);
-
-        this._mailPrefsService.saveUserEmailPreferences(this.notifications[index], this.properties.claimsAPIURL).subscribe(
-          data => {
-            console.info("Notification saved successfully");
-            this.initialNotifications[index] = JSON.parse(JSON.stringify( this.notifications[index] ));
-
-            this.status = this.errorCodes.DONE;
-
-            UIkit.notification({
-                message : '<strong>Your email preferences for '+this.notifications[index].openaireName+' have been successfully changed<strong>',
-                status  : 'success',
-                timeout : 3000,
-                pos     : 'top-center'
-            });
-          },
-          err => {
-            console.log(err);
-            this.status = this.errorCodes.NOT_SAVED;
           }
-        );
+        }else{
+          this.status = this.errorCodes.LOADING;
+          this.savedMessage = "";
+          console.info("Send notification to db: ", this.notifications[index]);
+
+          this._mailPrefsService.saveUserEmailPreferences(this.notifications[index], this.properties.claimsAPIURL).subscribe(
+            data => {
+              console.info("Notification saved successfully");
+              this.initialNotifications[index] = JSON.parse(JSON.stringify( this.notifications[index] ));
+
+              this.status = this.errorCodes.DONE;
+
+              /*UIkit.notification({
+                  message : '<strong>Your email preferences for '+this.notifications[index].openaireName+' have been successfully changed<strong>',
+                  status  : 'success',
+                  timeout : 3000,
+                  pos     : 'top-center'
+              });*/
+              this.savedMessage = "Notification settings for claims saved!";
+            },
+            err => {
+              console.log(err);
+              this.status = this.errorCodes.NOT_SAVED;
+            }
+          );
+        }
+      } else {
+        console.info("Notification not changed: ", this.notifications[index]);
+        /*UIkit.notification({
+            message : '<strong>No changes selected for '+this.notifications[index].openaireName+' email preferences<strong>',
+            status  : 'primary',
+            timeout : 3000,
+            pos     : 'top-center'
+        });*/
+        this.savedMessage = "Notification settings for claims saved!";
       }
-    } else {
-      console.info("Notification not changed: ", this.notifications[index]);
-      UIkit.notification({
-          message : '<strong>No changes selected for '+this.notifications[index].openaireName+' email preferences<strong>',
-          status  : 'primary',
-          timeout : 3000,
-          pos     : 'top-center'
-      });
     }
   }
 
   restoreNotification(index: number) {
-    console.info("Restore Notification");
+    if(this.notifications.length > 0 && this.initialNotifications.length > 0) {
-    console.info(this.notifications[index]);
+      this.status = this.errorCodes.LOADING;
-    this.notifications[index] = JSON.parse(JSON.stringify( this.initialNotifications[index] ));
+      this.savedMessage = "";
-    console.info(this.initialNotifications[index]);
+      console.info("Restore Notification");
+      console.info(this.notifications[index]);
+      this.notifications[index] = JSON.parse(JSON.stringify( this.initialNotifications[index] ));
+      console.info(this.initialNotifications[index]);
+      this.status = this.errorCodes.DONE;
+      this.prefsChanged[index] = false;
+    }
   }
-
+/*
+  prefsChanged(index: number) : boolean {
+    if(this.notifications.length > 0 && this.initialNotifications.length > 0) {
+      if(JSON.stringify(this.notifications[index]) != JSON.stringify(this.initialNotifications[index])) {
+        return true;
+      }
+    }
+    return false;
+  }
+*/
   ngOnDestroy() {
     if(this.sub) {
       this.sub.unsubscribe();
@@ -177,11 +215,13 @@ export class MailPrefsComponent {
   handleErrors(err){
     //this.showErrorMessage = true;
     //try{
-      var error =  err.json()
+      var code = "";
-      //var code = error.code;
+      if(!err.status) {
-
+        var error =  err.json();
-      console.info(err);
+        code = error.code;
-      var code = error.code;
+      } else {
+        code = err.status;
+      }
       console.info(code);
       if(code == "403") {
         this.status = this.errorCodes.FORBIDDEN;