Created component for process display & management

src/app/app.component.html

@@ -1,2 +1,3 @@
 <app-header></app-header>
+<app-process-header></app-process-header>
 <router-outlet></router-outlet>

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

@@ -0,0 +1,7 @@
+import { Process } from './process.model';
+
+describe('Process', () => {
+  it('should create an instance', () => {
+    expect(new Process()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,4 @@
+export class Process {
+    id: number;
+    name: string;
+}

src/app/layouts/header/header.component.scss

@@ -8,7 +8,7 @@
 
 .three-col-grid-container-fixed {
     display: grid;
-    grid-template-columns: auto min-content 40px;
+    grid-template-columns: auto min-content 30px;
     grid-column-gap: 1vh;
 }
 

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

@@ -0,0 +1,17 @@
+<div class="grid-container pt-5">
+  <div class="align-left pt-3">
+    <div class="process-grid-container">
+      <app-process-tab *ngFor="let process of processes" [process]="process"></app-process-tab>
+    </div>
+  </div>
+  <div class="align-right">
+    <div class="grid-container-fix-width-last-col">
+      <div class="pt-3">
+        <span *ngIf="processes.length == 0" class="process-span">{{startProcessLabel}}</span>
+      </div>
+      <div class="align-right">
+        <a (click)="addProcess()"><img class="process-icon" src="/assets/images/add-red.svg"></a>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+@import "../../../assets/scss/variables";
+
+.grid-container {
+    display: grid;
+    grid-template-columns: 70.5% auto;
+    grid-column-gap: 2vh;
+}
+
+.grid-container-fix-width-last-col {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-column-gap: 1vh;
+}
+
+.process-span {
+    color: $hima-color-red;
+    font-weight: bold;
+}
+
+.process-icon {
+    width: 20px;
+}
+
+.process-grid-container {
+    overflow: auto;
+    white-space: nowrap;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProcessHeaderComponent } from './process-header.component';
+
+describe('ProcessHeaderComponent', () => {
+  let component: ProcessHeaderComponent;
+  let fixture: ComponentFixture<ProcessHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProcessHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { Process } from 'src/app/core/models/process.model';
+
+@Component({
+  selector: 'app-process-header',
+  templateUrl: './process-header.component.html',
+  styleUrls: ['./process-header.component.scss']
+})
+export class ProcessHeaderComponent implements OnInit {
+
+  constructor() { }
+
+  startProcessLabel = 'VORGANG STARTEN';
+  processes: Array<Process> = [];
+
+  addProcess() {
+    const process: Process = new Process();
+    process.id = this.processes.length;
+    process.name = '# ' + this.processes.length;
+    this.processes.push(process);
+  }
+
+  getGridTemplateColumnsValue(): string {
+    if (this.processes.length === 0) {
+      return null;
+    }
+    const processWithLongestName = this.processes.reduce(this.getProcessWithLongestName);
+    return 'repeat(auto-fill, minmax(' + (processWithLongestName.name.length * 9.5) + 'px, 1fr))';
+  }
+
+  getProcessWithLongestName(firstProcess: Process, secondProcess: Process) {
+    return firstProcess.name.length > secondProcess.name.length ? firstProcess : secondProcess;
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,13 @@
+<div class="grid-item">
+  <div class="grid-container">
+    <div>
+      <img class="process-leading-icon" src="/assets/images/avatar_inactive.svg">
+    </div>
+    <div>{{process.name}}</div>
+    <div>
+      <a (click)="deleteProcess(process)">
+        <img class="process-delete-icon" src="/assets/images/close.svg">
+      </a>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+@import "../../../assets/scss/variables";
+
+.process-tab {
+    border-bottom: 2px solid black;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: min-content max-content min-content;
+    grid-column-gap: 1vh;
+}
+
+.process-delete-icon {
+    width: 12px;
+}
+
+.process-leading-icon {
+    width: 15px;
+}
+
+.grid-item {
+    display: inline-block;
+    padding-right: 6px;
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProcessTabComponent } from './process-tab.component';
+
+describe('ProcessTabComponent', () => {
+  let component: ProcessTabComponent;
+  let fixture: ComponentFixture<ProcessTabComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProcessTabComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Process } from 'src/app/core/models/process.model';
+
+@Component({
+  selector: 'app-process-tab',
+  templateUrl: './process-tab.component.html',
+  styleUrls: ['./process-tab.component.scss']
+})
+export class ProcessTabComponent implements OnInit {
+
+  constructor() { }
+
+  @Input() process: Process;
+  deleteProcess(process: Process) {
+    // TODO: implement delete process method ;
+    console.log(process);
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/modules/layouts/layouts.module.ts

@@ -1,13 +1,22 @@
 import { NgModule } from '@angular/core';
 import { HeaderComponent } from 'src/app/layouts/header/header.component';
+import { ProcessHeaderComponent } from 'src/app/layouts/process-header/process-header.component';
+import { ProcessTabComponent } from 'src/app/layouts/process-tab/process-tab.component';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   declarations: [
-    HeaderComponent
+    HeaderComponent,
+    ProcessHeaderComponent,
+    ProcessTabComponent
+  ],
+  imports: [
+    CommonModule
   ],
-  imports: [],
   exports: [
-    HeaderComponent
+    HeaderComponent,
+    ProcessHeaderComponent,
+    ProcessTabComponent
   ]
 })
 export class LayoutsModule { }