Merge branch 'DEVELOP_FE' of ssh://172.18.22.160:29418/oK/PlannedGridMeasures/Frontend into DEVELOP_FE

# Conflicts:
#	src/app/lists/common-components/abstract-list/abstract-list.component.ts
#	src/app/lists/grid-measures/grid-measures.component.ts
#	src/app/pages/step/step.component.ts
diff --git a/package.json b/package.json
index a91db8f..b65498e 100644
--- a/package.json
+++ b/package.json
@@ -74,4 +74,4 @@
     "tslint": "5.9.1",
     "typescript": "2.5.3"
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/custom_modules/helpers/mode-validator.ts b/src/app/custom_modules/helpers/mode-validator.ts
index 7a2268f..161a825 100644
--- a/src/app/custom_modules/helpers/mode-validator.ts
+++ b/src/app/custom_modules/helpers/mode-validator.ts
@@ -61,9 +61,12 @@
 
     isCancelAllowed(gridmeasure: GridMeasure): boolean {
         const currRoles = this.sessionContext.getCurrUser().roles;
-        const allowedRolesForCancel = this.roleAccessHelper.getRoleAccessDefinitions().stornoSection.stornoRoles;
+        const stornoSection = this.roleAccessHelper.getRoleAccessDefinitions().stornoSection;
         let cancelAllowedForRole = false;
-        allowedRolesForCancel.forEach(allowedRole => {
+        if (!stornoSection) {
+            return;
+        }
+        stornoSection.stornoRoles.forEach(allowedRole => {
             if (currRoles.includes(allowedRole)) {
                 cancelAllowedForRole = true;
                 return;
diff --git a/src/app/lists/common-components/abstract-list/abstract-list.component.css b/src/app/lists/common-components/abstract-list/abstract-list.component.css
index 68b2931..5e32c2a 100644
--- a/src/app/lists/common-components/abstract-list/abstract-list.component.css
+++ b/src/app/lists/common-components/abstract-list/abstract-list.component.css
@@ -54,4 +54,4 @@
     word-wrap: break-word;
     /* All browsers since IE 5.5+ */
     overflow-wrap: break-word;
-}
\ No newline at end of file
+}
diff --git a/src/app/lists/common-components/abstract-list/abstract-list.component.ts b/src/app/lists/common-components/abstract-list/abstract-list.component.ts
index 40a61ea..746a1e0 100644
--- a/src/app/lists/common-components/abstract-list/abstract-list.component.ts
+++ b/src/app/lists/common-components/abstract-list/abstract-list.component.ts
@@ -11,7 +11,7 @@
 */
 import {
   Component, OnDestroy, OnInit,
-  Input, ChangeDetectorRef
+  Input, ChangeDetectorRef, AfterViewInit
 } from '@angular/core';
 
 
@@ -31,9 +31,10 @@
 import { ModeValidator } from '../../../custom_modules/helpers/mode-validator';
 import { GridOptions } from 'ag-grid/dist/lib/entities/gridOptions';
 import { StatusMainFilter } from '../../../model/status-main-filter';
-import { RowDragEndEvent } from '../../../../../node_modules/ag-grid';
+import { IGetRowsParams } from '../../../../../node_modules/ag-grid';
+import { ErrorType } from '../../../common/enums';
 import { ToasterMessageService } from '../../../services/toaster-message.service';
-import { MessageServiceCustom } from '../../../services/message.service';
+
 
 @Component({
   selector: 'app-abstract-list',
@@ -71,15 +72,21 @@
   roleAccessDefinition: RoleAccess;
   gridApi: any;
   gridColumnApi: any;
+  isFirstLoad = true;
+  windowHeight: number = window.innerHeight;
+
   protected globalGridOptions: any = <GridOptions>{
     context: {
       componentParent: this
     },
+    rowModelType: 'infinite',
+    rowBuffer: 0,
+    cacheBlockSize: 5,
+    infiniteInitialRowCount: 15,
     enableSorting: true,
     enableColResize: true,
     floatingFilter: true,
     rowHeight: 32,
-    // columnDefs: GridMeasuresAgGridConfiguration.createColumnDefs(this.sessionContext),
     localeText: {
       equals: 'ist gleich',
       contains: 'enthält',
@@ -114,34 +121,46 @@
       this.sessionContext.setFilterDirtyState(this.settingsIsDirty);
       this.columnState = model.columnApi.getColumnState();
     },
-    onGridReady: (params) => {
-      // this.onGridReady(params);
-
-      this.gridApi = params.api;
-      this.gridColumnApi = params.columnApi;
+    onGridReady: (gridParams) => {
+      this.gridApi = gridParams.api;
+      this.gridColumnApi = gridParams.columnApi;
       this.initAgGridStructure();
-
-    },
-    onRowDragEnd: (event: RowDragEndEvent) => {
-      this.onRowDragEnd(event);
+      this.gridMeasureService.getGridMeasures(this.statusMainFilter).subscribe(gms => {
+        const dataSource = {
+          rowCount: null,
+          getRows: (params: IGetRowsParams) => {
+            setTimeout(function () {
+              const rowsThisPage = gms.slice(params.startRow, params.endRow);
+              let lastRow = -1;
+              if (gms.length <= params.endRow) {
+                lastRow = gms.length;
+              }
+              params.successCallback(rowsThisPage, lastRow);
+            }, 500);
+          }
+        };
+        this.gridApi.setDatasource(dataSource);
+      }, error => {
+        console.log(error);
+        this.toasterMessageService.emitError(this.gridId, ErrorType.retrieve, error);
+      });
     }
   };
 
   protected gridOptions: GridOptions;
   constructor(
-    private ref: ChangeDetectorRef,
     protected userSettingsService: UserSettingsService,
     protected router: Router,
+    protected toasterMessageService: ToasterMessageService,
     protected gridMeasureService: GridMeasureService,
     protected reminderService: ReminderService,
     protected sessionContext: SessionContext,
     protected daterangepickerConfig: DaterangepickerConfig,
     protected roleAccessHelper: RoleAccessHelperService,
-    protected modeValidator: ModeValidator,
-    protected toasterMessageService: ToasterMessageService,
-    protected messageServiceCustom: MessageServiceCustom) {
+    protected modeValidator: ModeValidator) {
 
     this.gridOptions = <GridOptions>{};
+
   }
 
 
@@ -152,6 +171,7 @@
     this.stayCollapsedGridMeasures = this.sessionContext.getCollapseState(Globals.GRID_MEASURE_COLLAPSABLE);
     this.settingsIsDirty = this.sessionContext.getFilterDirtyState();
     this.init();
+
   }
 
   protected initAgGrid() { }
@@ -177,6 +197,9 @@
     });
     this.gridColumnApi.autoSizeColumns(allColumnIds);
   }
+  protected getRows(params: IGetRowsParams, data: any) {
+
+  }
   protected init() {
     this.user = this.sessionContext.getCurrUser();
 
@@ -193,7 +216,7 @@
           this.statusMainFilter = this.sessionContext.getStatusMainFilter() || res.value[SettingType.StatusFilter] || this.statusMainFilter;
         }
         this.retrieveData();
-        this.initAgGrid();
+
       },
         error => {
           console.log(error);
@@ -217,6 +240,13 @@
       }
     };
   }
+  public calcGridHeight(): number {
+    const gridOffset = document.getElementsByTagName('ag-grid-angular')[0].getBoundingClientRect().top;
+    const appOffset = 130;
+
+    const gridHeight = this.windowHeight - appOffset - gridOffset;
+    return gridHeight;
+  }
   public saveSettings() {
 
     if (!this.userSettings) {
@@ -249,18 +279,8 @@
     });
 
   }
-
-  protected onGridReady(params) {
-    console.log('onGridReady called with:' + params);
-    this.gridApi = params.api;
-    this.gridColumnApi = params.columnApi;
-    this.initAgGridStructure();
+  onGridReady(params) {
   }
-
-  protected onRowDragEnd(e) {
-    console.log('onRowDragEnd', e);
-  }
-
   protected selectionChanged(): void {
 
   }
diff --git a/src/app/lists/email-distribution-list/email-distribution-list.component.spec.ts b/src/app/lists/email-distribution-list/email-distribution-list.component.spec.ts
index 86b3ac8..562c2aa 100644
--- a/src/app/lists/email-distribution-list/email-distribution-list.component.spec.ts
+++ b/src/app/lists/email-distribution-list/email-distribution-list.component.spec.ts
@@ -22,7 +22,7 @@
 import { GridMeasureService } from '../../services/grid-measure.service';
 import { ReminderService } from '../../services/reminder.service';
 import { LockService } from '../../services/lock.service';
-import { MessageServiceCustom } from '../../services/message.service';
+import { MessageService } from '../../services/message.service';
 import { UserSettingsService } from '../../services/user-settings.service';
 import { GRIDMEASURE } from '../../test-data/grid-measures';
 import { AbstractMockObservableService } from '../../testing/abstract-mock-observable.service';
@@ -35,7 +35,6 @@
 import { EmailDistributionListComponent } from './email-distribution-list.component';
 import { RoleAccessHelperService } from '../../services/jobs/role-access-helper.service';
 import { ModeValidator } from '../../custom_modules/helpers/mode-validator';
-import { ToasterMessageService } from '../../services/toaster-message.service';
 
 
 class FakeRouter {
@@ -131,15 +130,14 @@
             providers: [
                 ModeValidator,
                 { provide: SessionContext, useValue: sessionContext },
-                MessageServiceCustom,
+                MessageService,
                 { provide: UserSettingsService, useValue: mockUserSettingService },
                 { provide: Router, useValue: routerStub },
                 { provide: GridMeasureService, useValue: mockGridMeasureService },
                 { provide: ReminderService, useValue: mockReminderService },
                 { provide: LockService, useValue: mockLockService },
                 { provide: DaterangepickerConfig, useClass: DaterangepickerConfig },
-                { provide: RoleAccessHelperService, useValue: roleAccessHelper },
-                { provide: ToasterMessageService }
+                { provide: RoleAccessHelperService, useValue: roleAccessHelper }
             ]
         }).compileComponents();
     }));
diff --git a/src/app/lists/grid-measures/grid-measures-ag-grid-configuration.ts b/src/app/lists/grid-measures/grid-measures-ag-grid-configuration.ts
index bdba2c8..5133af5 100644
--- a/src/app/lists/grid-measures/grid-measures-ag-grid-configuration.ts
+++ b/src/app/lists/grid-measures/grid-measures-ag-grid-configuration.ts
@@ -32,6 +32,9 @@
                 headerName: 'Beginnt am',
                 field: 'plannedStarttimeFirstSinglemeasure',
                 valueFormatter: function (params) {
+                    if (!params || !params.data) {
+                        return;
+                    }
                     return datePipe.transform(params.data.plannedStarttimeFirstSinglemeasure, 'DD.MM.YYYY HH:mm');
 
                 },
@@ -40,6 +43,9 @@
                 suppressFilter: true,
                 colId: 'plannedStarttimeFirstSinglemeasure',
                 cellStyle: function (params) {
+                    if (!params || !params.data) {
+                        return;
+                    }
                     const shortterm = sessionContext.isShorttermNotification(params.data.id);
                     const overdue = sessionContext.isOverdueNotification(params.data.id);
                     if (overdue) {
@@ -65,6 +71,10 @@
                 field: 'branchId',
                 filter: 'agTextColumnFilter',
                 valueGetter: function (params) {
+
+                    if (!params || !params.data) {
+                        return;
+                    }
                     const branch = sessionContext.getBranchById(params.data.branchId);
                     if (branch) {
                         return branch.name;
@@ -73,6 +83,9 @@
                     }
                 },
                 cellStyle: function (params) {
+                    if (!params || !params.data) {
+                        return;
+                    }
                     const branch = sessionContext.getBranchById(params.data.branchId);
                     if (branch) {
                         return {
@@ -118,6 +131,9 @@
                 headerName: 'Status',
                 field: 'statusId',
                 valueGetter: function (params) {
+                    if (!params || !params.data) {
+                        return;
+                    }
                     const status = sessionContext.getStatusById(params.data.statusId);
                     if (status) {
                         return status.name;
@@ -141,7 +157,9 @@
         const editBtnStyle = 'style="width: 32px;height: 28px;"';
         const cancelBtnDisabledStyle = 'style="background-color:white;color:grey;width: 32px;height: 28px;"';
         const cancelBtnStyle = 'style="background-color:#f79e60;width: 32px;height: 28px;"';
-
+        if (!params || !params.data) {
+            return;
+        }
         const isEditMode = params.context.componentParent.modeValidator.isEditModeAllowed(params.data);
         const isCancelAllowed = params.context.componentParent.modeValidator.isCancelAllowed(params.data);
         const span = document.createElement('span');
diff --git a/src/app/lists/grid-measures/grid-measures.component.css b/src/app/lists/grid-measures/grid-measures.component.css
index 54d73bd..5047cef 100644
--- a/src/app/lists/grid-measures/grid-measures.component.css
+++ b/src/app/lists/grid-measures/grid-measures.component.css
@@ -104,4 +104,4 @@
 
 .slider.round:before {
     border-radius: 50%;
-}
\ No newline at end of file
+}
diff --git a/src/app/lists/grid-measures/grid-measures.component.html b/src/app/lists/grid-measures/grid-measures.component.html
index 5e9bf8c..0a5cd3a 100644
--- a/src/app/lists/grid-measures/grid-measures.component.html
+++ b/src/app/lists/grid-measures/grid-measures.component.html
@@ -46,10 +46,9 @@
   </div>
   <div id="collapse4" style="width:100%; " class="panel-collapse collapse in " [ngClass]="{ 'in': !isCollapsible || !stayCollapsedGridMeasures} ">
     <div id="grid-wrapper " class="panel-body " style="width:100%; ">
-      <ag-grid-angular *ngIf="!showSpinner " [style.height.px]="calcGridHeight() " class="ag-theme-balham
-          " [gridOptions]="gridOptions " [rowData]="gridmeasures ">
+      <ag-grid-angular [style.height.px]="calcGridHeight()" class="ag-theme-balham
+          " [gridOptions]="gridOptions " [rowData]="gridmeasures " (gridReady)="onGridReady($event)">
       </ag-grid-angular>
-      <app-loading-spinner *ngIf="showSpinner "></app-loading-spinner>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/lists/grid-measures/grid-measures.component.spec.ts b/src/app/lists/grid-measures/grid-measures.component.spec.ts
index d702059..6caadff 100644
--- a/src/app/lists/grid-measures/grid-measures.component.spec.ts
+++ b/src/app/lists/grid-measures/grid-measures.component.spec.ts
@@ -22,7 +22,7 @@
 import { GridMeasureService } from '../../services/grid-measure.service';
 import { ReminderService } from '../../services/reminder.service';
 import { LockService } from '../../services/lock.service';
-import { MessageServiceCustom } from '../../services/message.service';
+import { MessageService } from '../../services/message.service';
 import { UserSettingsService } from '../../services/user-settings.service';
 import { GRIDMEASURE } from '../../test-data/grid-measures';
 import { AbstractMockObservableService } from '../../testing/abstract-mock-observable.service';
@@ -35,8 +35,6 @@
 import { RoleAccessHelperService } from '../../services/jobs/role-access-helper.service';
 import { ModeValidator } from '../../custom_modules/helpers/mode-validator';
 import { StatusMainFilter } from '../../model/status-main-filter';
-import { ToasterMessageService } from '../../services/toaster-message.service';
-import { MessageService } from 'primeng/api';
 
 class FakeRouter {
     navigate(commands: any[]) {
@@ -102,18 +100,16 @@
     let mockUserSettingService;
     let mockLockService: MockLockService;
     let roleAccessHelper: RoleAccessHelperService;
-    let toasterMessageService: ToasterMessageService;
-    let messageService: MessageService;
+
     beforeEach(async(() => {
         router = new FakeRouter() as any as Router;
         sessionContext = new SessionContext();
-        messageService = new MessageService;
+
         mockGridMeasureService = new MockService();
         mockReminderService = new MockReminderService();
         mockUserSettingService = new MockUserSettingService();
         mockLockService = new MockLockService();
         roleAccessHelper = new RoleAccessHelperService();
-        toasterMessageService = new ToasterMessageService(sessionContext, messageService);
 
         TestBed.configureTestingModule({
             imports: [
@@ -132,15 +128,14 @@
             providers: [
                 ModeValidator,
                 { provide: SessionContext, useValue: sessionContext },
-                MessageServiceCustom,
+                MessageService,
                 { provide: UserSettingsService, useValue: mockUserSettingService },
                 { provide: Router, useValue: routerStub },
                 { provide: GridMeasureService, useValue: mockGridMeasureService },
                 { provide: ReminderService, useValue: mockReminderService },
                 { provide: LockService, useValue: mockLockService },
                 { provide: DaterangepickerConfig, useClass: DaterangepickerConfig },
-                { provide: RoleAccessHelperService, useValue: roleAccessHelper },
-                { provide: ToasterMessageService, useValue: toasterMessageService }
+                { provide: RoleAccessHelperService, useValue: roleAccessHelper }
             ]
         }).compileComponents();
     }));
@@ -266,7 +261,7 @@
     }));
 
     it('should raise an message on error in retrieveData (gridmeasures)', fakeAsync(() => {
-        spyOn((component as any).toasterMessageService, 'showError');
+        let msgRisen = false;
         sessionContext.setUserAuthenticated(true);
         mockGridMeasureService.error = 'Error in GridmeasureService';
         const abstractComp: any = component; // used to access privates
@@ -285,16 +280,21 @@
         };
         mockUserSettingService.savedUserSettings = {};
 
+        (component as any).messageService.errorOccured$.subscribe((msg: BannerMessage) => {
+            expect(msg.status).toBe(BannerMessageStatusEn.error);
+            msgRisen = true;
+        });
+
         abstractComp.saveSettings();
         component.retrieveData();
         fixture.detectChanges();
         tick();
-        expect((component as any).toasterMessageService.showError).toHaveBeenCalled();
+        expect(msgRisen).toBeTruthy('Error message was risen');
 
     }));
 
     it('should raise an message on error in retrieveData (reminders)', fakeAsync(() => {
-        spyOn((component as any).toasterMessageService, 'showError');
+        let msgRisen = false;
         sessionContext.setUserAuthenticated(true);
         mockGridMeasureService.content = JSON.parse(JSON.stringify(GRIDMEASURE));
         mockReminderService.error = 'Error in ReminderService';
@@ -314,11 +314,16 @@
         };
         mockUserSettingService.savedUserSettings = {};
 
+        (component as any).messageService.errorOccured$.subscribe((msg: BannerMessage) => {
+            expect(msg.status).toBe(BannerMessageStatusEn.error);
+            msgRisen = true;
+        });
+
         abstractComp.saveSettings();
         component.retrieveData();
         fixture.detectChanges();
         tick();
-        expect((component as any).toasterMessageService.showError).toHaveBeenCalled();
+        expect(msgRisen).toBeTruthy('Error message was risen');
 
     }));
 
diff --git a/src/app/lists/grid-measures/grid-measures.component.ts b/src/app/lists/grid-measures/grid-measures.component.ts
index 843d154..c076047 100644
--- a/src/app/lists/grid-measures/grid-measures.component.ts
+++ b/src/app/lists/grid-measures/grid-measures.component.ts
@@ -28,7 +28,7 @@
   Globals = Globals;
   gridmeasures: any;
   currentDate = new Date();
-  windowHeight: number = window.innerHeight;
+
   isCancelClosedFilterButtons: boolean;
 
   ngOnInit() {
@@ -36,8 +36,10 @@
     if (this.sessionContext.getStatusMainFilter() !== null) {
       this.statusMainFilter = this.sessionContext.getStatusMainFilter();
     }
-
+    this.initAgGrid();
     Observable.fromEvent(window, 'resize').debounceTime(100).subscribe(() => this.windowHeight = window.innerHeight);
+    const rowsCount = Math.round(this.calcGridHeight() / this.gridOptions.rowHeight);
+    this.gridOptions.cacheBlockSize = rowsCount;
   }
 
   initAgGrid() {
@@ -58,32 +60,17 @@
       this.sessionContext.setCurrentReminders(currentrems);
     }, error => {
       console.log(error);
-      this.toasterMessageService.showError(ErrorType.retrieve, this.gridId, error);
+      this.messageService.emitError(this.gridId, ErrorType.retrieve, error);
     });
 
     await this.reminderService.getExpiredReminders().subscribe(expiredrems => {
       this.sessionContext.setExpiredReminders(expiredrems);
     }, error => {
       console.log(error);
-      this.toasterMessageService.showError(ErrorType.retrieve, this.gridId, error);
-    });
-
-    this.gridMeasureService.getGridMeasures(this.statusMainFilter).subscribe(gms => {
-      this.gridmeasures = gms;
-      this.showSpinner = false;
-    }, error => {
-      console.log(error);
-      this.toasterMessageService.showError(ErrorType.retrieve, this.gridId, error);
+      this.messageService.emitError(this.gridId, ErrorType.retrieve, error);
     });
 
     this.sessionContext.setStatusMainFilter(this.statusMainFilter);
-
-    if (this.gridApi) {
-      setTimeout(() => {
-        this.gridApi.setFilterModel(this.filteringSearchText);
-        this.gridApi.onFilterChanged();
-      }, 1000);
-    }
   }
 
   setDirty() {
@@ -91,12 +78,7 @@
     this.sessionContext.setFilterDirtyState(true);
   }
 
-  calcGridHeight(): number {
-    const gridOffset = document.getElementsByTagName('ag-grid-angular')[0].getBoundingClientRect().top;
-    const appOffset = 130;
 
-    return this.windowHeight - appOffset - gridOffset;
-  }
 
   changeAllSelection(): void {
     if (this.selectAll) {
diff --git a/src/app/lists/status-changes/status-changes.component.spec.ts b/src/app/lists/status-changes/status-changes.component.spec.ts
index 890b7e6..6c23860 100644
--- a/src/app/lists/status-changes/status-changes.component.spec.ts
+++ b/src/app/lists/status-changes/status-changes.component.spec.ts
@@ -22,7 +22,7 @@
 import { GridMeasureService } from '../../services/grid-measure.service';
 import { ReminderService } from '../../services/reminder.service';
 import { LockService } from '../../services/lock.service';
-import { MessageServiceCustom } from '../../services/message.service';
+import { MessageService } from '../../services/message.service';
 import { UserSettingsService } from '../../services/user-settings.service';
 import { GRIDMEASURE } from '../../test-data/grid-measures';
 import { AbstractMockObservableService } from '../../testing/abstract-mock-observable.service';
@@ -36,8 +36,6 @@
 import { RoleAccessHelperService } from '../../services/jobs/role-access-helper.service';
 import { ModeValidator } from '../../custom_modules/helpers/mode-validator';
 import { STATUSCHANGES } from '../../test-data/status-changes';
-import { ToasterMessageService } from '../../services/toaster-message.service';
-import { MessageService } from 'primeng/api';
 
 class FakeRouter {
     navigate(commands: any[]) {
@@ -104,8 +102,7 @@
     let mockUserSettingService;
     let mockLockService: MockLockService;
     let roleAccessHelper: RoleAccessHelperService;
-    let toasterMessageService: ToasterMessageService;
-    let messageService: MessageService;
+
     beforeEach(async(() => {
         router = new FakeRouter() as any as Router;
         sessionContext = new SessionContext();
@@ -115,8 +112,7 @@
         mockUserSettingService = new MockUserSettingService();
         mockLockService = new MockLockService();
         roleAccessHelper = new RoleAccessHelperService();
-        messageService = new MessageService;
-        toasterMessageService = new ToasterMessageService(sessionContext, messageService);
+
         TestBed.configureTestingModule({
             imports: [
                 FormsModule
@@ -135,15 +131,14 @@
             providers: [
                 ModeValidator,
                 { provide: SessionContext, useValue: sessionContext },
-                MessageServiceCustom,
+                MessageService,
                 { provide: UserSettingsService, useValue: mockUserSettingService },
                 { provide: Router, useValue: routerStub },
                 { provide: GridMeasureService, useValue: mockGridMeasureService },
                 { provide: ReminderService, useValue: mockReminderService },
                 { provide: LockService, useValue: mockLockService },
                 { provide: DaterangepickerConfig, useClass: DaterangepickerConfig },
-                { provide: RoleAccessHelperService, useValue: roleAccessHelper },
-                { provide: ToasterMessageService, useValue: toasterMessageService }
+                { provide: RoleAccessHelperService, useValue: roleAccessHelper }
             ]
         }).compileComponents();
     }));
@@ -228,7 +223,7 @@
     }));
 
     it('should raise an message on error in retrieveData (statuschanges)', fakeAsync(() => {
-        spyOn((component as any).toasterMessageService, 'showError');
+        let msgRisen = false;
         sessionContext.setUserAuthenticated(true);
         mockGridMeasureService.error = 'Error in GridmeasureService';
         const abstractComp: any = component; // used to access privates
@@ -247,11 +242,16 @@
         };
         mockUserSettingService.savedUserSettings = {};
 
+        (component as any).messageService.errorOccured$.subscribe((msg: BannerMessage) => {
+            expect(msg.status).toBe(BannerMessageStatusEn.error);
+            msgRisen = true;
+        });
+
         abstractComp.saveSettings();
         component.retrieveData();
         fixture.detectChanges();
         tick();
-        expect((component as any).toasterMessageService.showError).toHaveBeenCalled();
+        expect(msgRisen).toBeTruthy('Error message was risen');
 
     }));
 
diff --git a/src/app/pages/step/step.component.ts b/src/app/pages/step/step.component.ts
index 3fd7afe..5779b95 100644
--- a/src/app/pages/step/step.component.ts
+++ b/src/app/pages/step/step.component.ts
@@ -15,15 +15,15 @@
 import { SingleGridMeasure } from '../../model/single-grid-measure';
 import { Step } from '../../model/step';
 import * as X2JS from '../../../assets/js/xml2json.min.js';
-import { ErrorType } from '../../common/enums';
+import { ErrorType, MessageScopeEn } from '../../common/enums';
 import { CimCacheService } from '../../services/cim-cache.service';
+import { MessageService } from '../../services/message.service';
 import { PowerSystemResource } from './../../model/power-system-resource';
 import { FormGroup } from '@angular/forms';
 import { SessionContext } from './../../common/session-context';
 import { Subscription } from 'rxjs/Subscription';
 import { TreeModel, Tree } from 'ng2-tree';
 import { TreeModelImpl } from './../../model/TreeModelImpl';
-import { ToasterMessageService } from '../../services/toaster-message.service';
 
 @Component({
   selector: 'app-step',
@@ -59,8 +59,9 @@
   @ViewChild('stepForm') stepForm: FormGroup;
 
   constructor(private cimCacheService: CimCacheService,
+    private messageService: MessageService,
     private sessionContext: SessionContext,
-    private toasterMessageService: ToasterMessageService) { }
+    private cd: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.inactiveFields = this.sessionContext.getInactiveFields();
@@ -103,6 +104,7 @@
   }
 
   ngOnDestroy() {
+    this.messageService.clearDecisionBannerLocalEvent$.emit(true);
   }
 
   public onUseRessourceBtnClick(selectedVal: any) {
@@ -134,7 +136,7 @@
 
       this.storageInProgress = false;
     } else {
-      this.toasterMessageService.showWarn('Bitte alle Felder in Schrittsequenz aufüllen!');
+      this.messageService.emitWarning('Bitte alle Felder in Schrittsequenz auffüllen!', MessageScopeEn.local);
     }
 
   }
@@ -168,8 +170,7 @@
       this.processRessourceTypesResponse(res);
     },
       error => {
-        // this.messageService.emitError('CimCache', ErrorType.retrieve);
-        this.toasterMessageService.showError(ErrorType.retrieve, 'CimCache');
+        this.messageService.emitError('CimCache', ErrorType.retrieve);
         console.log(error);
       });
   }
@@ -178,8 +179,7 @@
     const newTreeModel: TreeModel = new TreeModelImpl();
 
     const xmlStringRes = await this.cimCacheService.getRessourcesWithType(value).toPromise().catch(error => {
-      // this.messageService.emitError('CimCache', ErrorType.retrieve);
-      this.toasterMessageService.showError(ErrorType.retrieve, 'CimCache');
+      this.messageService.emitError('CimCache', ErrorType.retrieve);
     });
 
     this.stepAffectedResourcesList = this.processRessourceWithTypeResponse(xmlStringRes);
@@ -256,8 +256,7 @@
 
     // ...deswegen Fake Childs atm fest auf 'ac-line-segment'
     const xmlStringRes = await this.cimCacheService.getRessourcesWithType('ac-line-segment').toPromise().catch(error => {
-      // this.messageService.emitError('CimCache', ErrorType.retrieve);
-      this.toasterMessageService.showError(ErrorType.retrieve, 'CimCache');
+      this.messageService.emitError('CimCache', ErrorType.retrieve);
     });
 
     const newTreeChildren = await this.prepareTreeModel(this.processRessourceWithTypeResponse(xmlStringRes), nodeIdNr);
diff --git a/src/styles.css b/src/styles.css
index a419d96..436359e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -172,7 +172,9 @@
     width: 10%;
     text-align: center;
 }
-
+.ag-layout-normal .ag-body-viewport{
+  height: 99%!important;
+}
 .table-striped>tbody>tr:nth-of-type(odd) {
     background: #e9f0f9;
 }