Merge branch 'develop' into iss-hipcms-quizBug

app/dashboard/dashboard.component.ts

@@ -33,7 +33,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       .then(
         (response: any) => {
           this.spinnerService.hide();
-          this.notifications = response;
+          this.notifications = response.array;
           this.notificationsResponseHandled = true;
         }
       ).catch(

app/mobile-content/shared/change-history/change-history-detailed/change-history-detailed.component.html

@@ -23,7 +23,7 @@ <h1 md-dialog-title>{{ (data.title ? data.title : ('' | translate) ) + " " +(' D
         <span class = "title">User:</span>
       </div>
       <div class = "tableColumn content">
-        <span class = "">{{ data.change.userId }}</span>
+        <span class = "">{{ data.change.userName }}</span>
       </div>
     </md-list-item>
     <md-list-item>

app/mobile-content/shared/change-history/change-history.component.html

@@ -1,49 +1,54 @@
-<h1 md-dialog-title>{{ (data.title ? data.title : ('no title' | translate) ) + " " +('change history' | translate)  }}</h1>
+<h1 md-dialog-title>{{ (data.title ? data.title : ('no title' | translate) ) + " " +('change history' | translate) }}</h1>
 
 <md-dialog-content>
   <div>
-    <p class = "title" >Created: </p>
-    <p  class = "text" >{{ data.data.created | date: "dd.MM.yyyy" }}</p>
+    <p class="title">Created: </p>
+    <p class="text">{{ data.data.created | date: "dd.MM.yyyy" }}</p>
   </div>
   <div>
-    <p class = "title" >Last modified: </p>
-    <p class = "text">{{ data.data.lastModified | date: "dd.MM.yyyy" }}</p>
+    <p class="title">Last modified: </p>
+    <p class="text">{{ data.data.lastModified | date: "dd.MM.yyyy" }}</p>
   </div>
   <div *ngIf="data.data.deleted">
-    <p class = "title" >Deleted: </p>
-    <p class = "text">{{ data.data.deleted | date: "dd.MM.yyyy" }}</p>
+    <p class="title">Deleted: </p>
+    <p class="text">{{ data.data.deleted | date: "dd.MM.yyyy" }}</p>
   </div>
-  <div >
-    <p class = "title" >Owner: </p>
-    <p class = "text">{{ data.data.owner }}</p>
+  <div>
+    <p class="title">Owner: </p>
+    <p class="text">{{ data.data.owner }}</p>
   </div>
-  <md-list >
+  <md-list>
     <md-list-item>
-      <div class = "tableColumn"><p class = "title">Description: </p>
+      <div class="tableColumn">
+        <p class="title">Description: </p>
       </div>
-      <div class = "tableColumn"><p class = "title" >Time Stamp: </p>
+      <div class="tableColumn">
+        <p class="title">Time Stamp: </p>
       </div>
-      <div class = "tableColumn"><p class = "title">User: </p>
+      <div class="tableColumn">
+        <p class="title">User: </p>
       </div>
-      <div class = "tableColumn"><p class = "title">Property: </p>
+      <div class="tableColumn">
+        <p class="title">Property: </p>
       </div>
-      <div class = "tableColumn"><p class = "title">Value: </p>
+      <div class="tableColumn">
+        <p class="title">Value: </p>
       </div>
     </md-list-item>
     <md-list-item *ngFor="let change of data.data.changes">
-      <div class = "tableColumn">
-        <p class = "text">{{ change.description }}</p>
+      <div class="tableColumn">
+        <p class="text">{{ change.description }}</p>
       </div>
-      <div class = "tableColumn">
-        <p class = "text">{{ change.timestamp | date: "dd.MM.yyyy" }}</p>
+      <div class="tableColumn">
+        <p class="text">{{ change.timestamp | date: "dd.MM.yyyy" }}</p>
       </div>
-      <div class = "tableColumn">
-        <p class = "text">{{ change.userId }}</p>
+      <div class="tableColumn">
+        <p class="text">{{ change.userName }}</p>
       </div>
-      <div class = "tableColumn">
-        <p class = "text">{{ change.property }}</p>
+      <div class="tableColumn">
+        <p class="text">{{ change.property }}</p>
       </div>
-      <div class = "tableColumn">
+      <div class="tableColumn">
         <readmore [change]="change"></readmore>
       </div>
     </md-list-item>

app/notifications/notification.model.ts

@@ -9,6 +9,7 @@ export class Notification {
   read: boolean;
   s1: string;
   s2: string;
+  totalItems: number;
 
   constructor(id: number,
               text: string,
@@ -28,11 +29,14 @@ export class Notification {
     this.s2 = s2;
   }
 
-  public static extractData(res: Response): Notification[] {
+  public static extractData(res: Response, currentPage = 1, pageSize = 0): any {
     let body = res.json();
     let notifications: Notification[] = [];
-    for (let notification of body) {
-      notifications.push(Notification.parseJSON(notification));
+    if (pageSize === 0) {
+      pageSize = body.length;
+    }
+    for (let i = (currentPage - 1) * pageSize ; i < currentPage * pageSize && i < body.length; i++) {
+      notifications.push(Notification.parseJSON(body[i]));
     }
     return notifications;
   }

app/notifications/notification.service.ts

@@ -14,20 +14,35 @@ export class NotificationService {
 
   constructor(private cmsApiService: CmsApiService) {}
 
+
   /**
-   * Get all notifications.
-   * @return all notifications
+   * With this function the User is able to get all available notifications
+   * @param page the page number
+   * @param pageSize the number of Notifications on one page
+   * @returns {Promise<AllEntities<Notifications>>} returns a AllEntities object that contains all available notifications
    */
-  public getAllNotifications() {
-    return this.cmsApiService.getUrl('/Api/Notifications/All', {})
+  public getAllNotifications(currentPage = 1, pageSize = 0, status = 'ALL') {
+    return this.cmsApiService.getUrl('/Api/Notifications/' + status, {})
       .toPromise()
       .then(
-        (response: any) => Notification.extractData(response)
+        (response: any) => {
+          let body = response.json();
+          let notifications: Notification[] = [];
+          if (pageSize === 0) {
+            pageSize = body.length;
+           }
+          for (let i = (currentPage - 1) * pageSize ; i < currentPage * pageSize && i < body.length; i++) {
+            notifications.push(Notification.parseJSON(body[i]));
+          }
+          return {
+            array : notifications,
+            total : body.length
+          };
+        }
       ).catch(
         (error: any) => this.handleError('Error during fetching all notifications', error)
       );
   }
-
   /**
    * Returns all notification types the current user is subscribed to.
    */
@@ -58,11 +73,24 @@ export class NotificationService {
    * Get all unread notifications.
    * @return unread notifications
    */
-  public getUnreadNotifications() {
-    return this.cmsApiService.getUrl('/Api/Notifications/Unread', {})
+  public getUnreadNotifications(currentPage = 1, pageSize = 0) {
+   return this.cmsApiService.getUrl('/Api/Notifications/Unread', {})
       .toPromise()
       .then(
-        (response: any) => Notification.extractData(response)
+        (response: any) => {
+          let body = response.json();
+          let notifications: Notification[] = [];
+          if (pageSize === 0) {
+            pageSize = body.length;
+           }
+          for (let i = (currentPage - 1) * pageSize ; i < currentPage * pageSize && i < body.length; i++) {
+            notifications.push(Notification.parseJSON(body[i]));
+          }
+          return {
+            array : notifications,
+            total : body.length
+          };
+        }
       ).catch(
         (error: any) => this.handleError('Error during fetching unread notifications', error)
       );

app/notifications/notifications-list/notifications-list.component.html

@@ -1,5 +1,8 @@
 <md-nav-list>
-  <md-list-item *ngFor="let notification of notifications">
+  <md-list-item *ngFor="let notification of notifications | paginate: { id: 'server',
+                                                          itemsPerPage: pageSize,
+                                                          currentPage: currentPage,
+                                                          totalItems: totalItems }">
     <h2 md-line>{{ notification.timestamp | date: 'dd.MM.yyyy HH:mm:ss' }} - {{ notification.type | translate }}</h2>
     <p *ngIf="notification.link != ''" md-line>
       <a [routerLink]="[ notification.link ]">
@@ -15,3 +18,4 @@ <h2 md-line>{{ notification.timestamp | date: 'dd.MM.yyyy HH:mm:ss' }} - {{ noti
     </button>
   </md-list-item>
 </md-nav-list>
+<hip-pagination (pageChange)="getPage($event)" *ngIf="notifications !== undefined && notifications.length > 0"></hip-pagination>

app/notifications/notifications-list/notifications-list.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, EventEmitter, SimpleChanges, OnChanges } from '@angular/core';
 import { ToasterService } from 'angular2-toaster';
 import { TranslateService } from 'ng2-translate';
 
 import { Notification } from '../notification.model';
 import { NotificationService } from '../notification.service';
+import { PaginationComponent } from '../../shared/pagination/pagination.component';
 
 @Component({
   moduleId: module.id,
@@ -13,8 +14,18 @@ import { NotificationService } from '../notification.service';
 })
 export class NotificationsListComponent {
   @Input() notifications: Notification[];
+  // @Input() selectedStatus: String;
+  // @Input() selectedNotificationType: String;
   translatedResponse: any;
 
+   // pagination parameters
+  currentPage = 1;
+  pageSize = 10;
+  totalItems: number;
+
+  // will contain the notification satisfying the selected status and type
+  filteredNotifications: Notification[] = [];
+
   constructor(private notificationService: NotificationService,
               private toasterService: ToasterService,
               private translateService: TranslateService) {}
@@ -24,8 +35,8 @@ export class NotificationsListComponent {
       .then(
         (response: any) => {
           let readNotification = this.notifications.filter(
-            function (item) {
-              return item.id === notificationId;
+            function (notification) {
+              return notification.id === notificationId;
             }
           )[0];
           readNotification.read = true;
@@ -48,4 +59,8 @@ export class NotificationsListComponent {
     );
     return this.translatedResponse;
   }
+
+  getPage(page: number) {
+    this.currentPage = page;
+  }
 }

app/notifications/notifications.component.html

@@ -3,12 +3,12 @@ <h1>{{ 'my notifications' | translate }}</h1>
 </md-card>
 <md-card class="default-card">
   <div *ngIf="notifications.length != 0">
-    <md-select class="select-type" [(ngModel)]="selectedNotificationType" placeholder="{{ 'Notification type' | translate }}">
+    <md-select (change)="onNotificationTypeChange($event.value)" class="select-type" [(ngModel)]="selectedNotificationType" placeholder="{{ 'Notification type' | translate }}">
       <md-option *ngFor="let notificationType of notificationTypes" [value]="notificationType">
         {{ notificationType | translate }}
       </md-option>
     </md-select>
-    <md-select class="select-status" [(ngModel)]="selectedStatus" placeholder="{{ 'Status' | translate }}">
+    <md-select (change)="onStatusChange($event.value)" class="select-status" [(ngModel)]="selectedStatus" placeholder="{{ 'Status' | translate }}">
       <md-option *ngFor="let statusOption of notificationStatusOptions" [value]="statusOption">
         {{ statusOption | translate }}
       </md-option>
@@ -21,5 +21,6 @@ <h1>{{ 'my notifications' | translate }}</h1>
     {{ 'no notifications for you' | translate }}
   </div>
   <hip-notifications-list
-      [notifications]="notifications | hipNotificationsFilter: selectedStatus: selectedNotificationType"></hip-notifications-list>
+      [notifications]="filteredNotifications">
+  </hip-notifications-list>
 </md-card>

app/notifications/notifications.component.ts

@@ -1,19 +1,21 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { ToasterService } from 'angular2-toaster';
 import { TranslateService } from 'ng2-translate';
 
 import { Notification } from '../notifications/notification.model';
 import { NotificationService } from '../notifications/notification.service';
 import { NgxSpinnerService } from 'ngx-spinner';
+import { MdSelectChange } from '@angular/material';
 
 @Component({
   moduleId: module.id,
   selector: 'hip-notifications',
   templateUrl: 'notifications.component.html',
   styleUrls: ['notifications.component.css']
 })
-export class NotificationsComponent implements OnInit, OnDestroy {
+export class NotificationsComponent implements OnInit, OnDestroy, OnChanges {
   private notifications: Notification[] = [];
+  private filteredNotifications: Notification[] = [];
   private notificationsResponseHandled = false;
   translatedResponse: any;
   selectedStatus = 'All';
@@ -33,7 +35,8 @@ export class NotificationsComponent implements OnInit, OnDestroy {
       .then(
         (response: any) => {
           this.spinnerService.hide();
-          this.notifications = response;
+          this.notifications = response.array;
+          this.filteredNotifications = this.filterNotifications();
           this.notificationsResponseHandled = true;
         }
       ).catch(
@@ -49,6 +52,30 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     this.spinnerService.hide();
   }
 
+  filterNotifications() {
+    let filtered = [];
+    if (this.selectedStatus === 'All') {
+      filtered = this.notifications;
+    } else {
+      let boolRead = this.selectedStatus === 'Read';
+      filtered = this.notifications.filter((notification) => {
+        return (notification.read === boolRead);
+      });
+    }
+
+    if (this.selectedNotificationType !== 'All') {
+      filtered = filtered.filter((notification) => {
+        return (notification.type === this.selectedNotificationType);
+      });
+    }
+
+    return filtered;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.filteredNotifications = this.filterNotifications();
+  }
+
   getTranslatedString(data: any) {
     this.translateService.get(data).subscribe(
       (value: any) => {
@@ -57,4 +84,12 @@ export class NotificationsComponent implements OnInit, OnDestroy {
     );
     return this.translatedResponse;
   }
+
+  onNotificationTypeChange(event: MdSelectChange) {
+    this.filteredNotifications = this.filterNotifications();
+  }
+
+  onStatusChange(event: MdSelectChange) {
+    this.filteredNotifications = this.filterNotifications();
+  }
 }

app/notifications/notifications.module.ts

@@ -10,6 +10,7 @@ import { NotificationsComponent } from './notifications.component';
 import { NotificationsFilter } from './pipes/notification-filter.pipe';
 import { NotificationsListComponent } from './notifications-list/notifications-list.component';
 import { NotificationService } from './notification.service';
+import { SharedPaginationModule } from '../shared/shared-pagination.module';
 
 @NgModule({
   imports: [
@@ -21,12 +22,13 @@ import { NotificationService } from './notification.service';
     MdListModule,
     MdSelectModule,
     notificationRouting,
-    TranslateModule
+    TranslateModule,
+    SharedPaginationModule,
   ],
   declarations: [
     NotificationsComponent,
     NotificationsListComponent,
-    NotificationsFilter
+    NotificationsFilter,
   ],
   exports: [
     NotificationsListComponent