Added @ngrx/store for state managment & refactored functionalities "add process", "delete process" & "select process" to use ngrx/store

package.json

@@ -19,6 +19,8 @@
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
+    "@ngrx/effects": "^7.0.0",
+    "@ngrx/store": "^7.0.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
@@ -29,9 +31,9 @@
     "@angular/cli": "~7.2.1",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.module.ts

@@ -5,6 +5,12 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LayoutsModule } from './modules/layouts/layouts.module';
 import { MenuComponent } from './layouts/menu/menu.component';
+import { processReducer } from './core/reducers/process.reducer';
+import { StoreModule } from '@ngrx/store';
+
+const rootReducer = {
+  processes: processReducer
+};
 
 @NgModule({
   declarations: [
@@ -14,7 +20,8 @@ import { MenuComponent } from './layouts/menu/menu.component';
   imports: [
     BrowserModule,
     AppRoutingModule,
-    LayoutsModule
+    LayoutsModule,
+    StoreModule.forRoot(rootReducer)
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.state.ts

@@ -0,0 +1,5 @@
+import { Process } from './core/models/process.model';
+
+export class AppState {
+    readonly processes: Process[];
+}

src/app/core/actions/process.actions.ts

@@ -0,0 +1,24 @@
+import { Action } from '@ngrx/store';
+import { Process } from '../models/process.model';
+
+export const ADD_PROCESS = 'ADD_PROCESS';
+export const DELETE_PROCESS = 'DELETE_PROCESS';
+export const SELECT_PROCESS = 'SELECT_PROCESS';
+
+export class AddProcess implements Action {
+    public type: string;
+
+    constructor(public payload: Process) {}
+}
+
+export class DeleteProcess implements Action {
+    public type: string;
+
+    constructor(public payload: Process) {}
+}
+
+export class SelectProcess implements Action {
+    public type: string;
+
+    constructor(public payload: Process) {}
+}

src/app/core/models/process.model.ts

@@ -1,4 +1,4 @@
-export class Process {
+export interface Process {
     id: number;
     name: string;
     selected: boolean;

src/app/core/reducers/process.reducer.ts

@@ -0,0 +1,35 @@
+import { Process } from '../models/process.model';
+import { ADD_PROCESS, DELETE_PROCESS, SELECT_PROCESS } from '../actions/process.actions';
+
+export function processReducer(processes: Process[] = [], action: any) {
+    switch (action.type) {
+        case ADD_PROCESS:
+            return [...processes, action.payload];
+        case DELETE_PROCESS:
+            return deleteProcessHandler(processes, action.payload);
+        case SELECT_PROCESS:
+            return selectProcessHandler(processes, action.payload);
+        default:
+            return processes;
+    }
+}
+
+function deleteProcessHandler(currentProcessesState:  Process[], process: Process): Process[] {
+    const processes = [...currentProcessesState];
+    processes.splice(processes.indexOf(process), 1);
+    // if deleted process is selected set first process as selected
+    if (process.selected === true && processes.length > 0) {
+      processes[0].selected = true;
+    }
+    return processes;
+}
+
+function selectProcessHandler(currentProcessesState: Process[], process: Process): Process[] {
+    const processes = [...currentProcessesState];
+    // remove previous process selection
+    processes.find(function(p): boolean {
+        return p.selected === true;
+    }).selected = false;
+    processes[processes.indexOf(process)].selected = true;
+    return processes;
+}

src/app/layouts/process-header/process-header.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { Process } from 'src/app/core/models/process.model';
+import { Store } from '@ngrx/store';
+import { AppState } from 'src/app/app.state';
+import { Observable, of } from 'rxjs';
+import { reduce } from 'rxjs/operators';
+import { ADD_PROCESS } from 'src/app/core/actions/process.actions';
 
 @Component({
   selector: 'app-process-header',
@@ -8,23 +13,33 @@ import { Process } from 'src/app/core/models/process.model';
 })
 export class ProcessHeaderComponent implements OnInit {
 
-  constructor() { }
-
   startProcessLabel = 'VORGANG STARTEN';
-  processes: Array<Process> = [];
+  processObs: Observable<Process[]>;
+  processes: Process[];
+
+  constructor(private store: Store<AppState>) {
+    this.processObs = store.select('processes');
+    this.processObs.subscribe(
+      (data: any) => this.loadProcesses(data),
+      (err) => console.log(err)
+    );
+  }
+
+  loadProcesses(data: Process[]) {
+    this.processes = data;
+  }
 
   addProcess() {
-    const process: Process = new Process();
-    const itemNr = this.processes.length + 1;
-    process.id = itemNr;
-    process.name = '# ' + itemNr;
-    // if this is the first process created set it as active
-    if (this.processes.length === 0) {
-      process.selected = true;
-    } else {
-      process.selected = false;
-    }
-    this.processes.push(process);
+    // find the next bigest id
+    const itemNo = this.processes.length === 0 ? 1 : this.processes[this.processes.length - 1].id + 1;
+    this.store.dispatch({
+      type: ADD_PROCESS,
+      payload: <Process>{
+        id: itemNo,
+        name: '# ' + itemNo,
+        selected: this.processes.length === 0 ? true : false
+      }
+    });
   }
 
   ngOnInit() {

src/app/layouts/process-tab/process-tab.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Process } from 'src/app/core/models/process.model';
+import { Store } from '@ngrx/store';
+import { AppState } from 'src/app/app.state';
+import { DELETE_PROCESS, SELECT_PROCESS } from 'src/app/core/actions/process.actions';
 
 @Component({
   selector: 'app-process-tab',
@@ -8,31 +11,23 @@ import { Process } from 'src/app/core/models/process.model';
 })
 export class ProcessTabComponent implements OnInit {
 
-  constructor() { }
-
   @Input() process: Process;
   @Input() processes: Array<Process>;
 
+  constructor(private store: Store<AppState>) { }
+
   deleteProcess(process: Process) {
-    this.processes.splice(this.processes.indexOf(process), 1);
-    // if deleted process is selected set first process as selected
-    if (process.selected === true && this.processes.length > 0) {
-      this.processes[0].selected = true;
-    }
+    this.store.dispatch({
+      type: DELETE_PROCESS,
+      payload: process
+    });
   }
 
   selectProcess(process: Process): void {
-    this.removeCurrentProcessSelection();
-    process.selected = true;
-  }
-
-  removeCurrentProcessSelection(): void {
-    const selectedProcess = this.processes.find(function(process): boolean {
-      return process.selected === true;
+    this.store.dispatch({
+      type: SELECT_PROCESS,
+      payload: process
     });
-    if (selectedProcess) {
-      selectedProcess.selected = false;
-    }
   }
 
   ngOnInit() {