From 201db4730ee1f7393d9eeca58c89abf079783018 Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Fri, 16 Feb 2024 15:33:21 +0100
Subject: [PATCH] empty form components and modal calls

---
 matsen-tool/src/app/app-routing.module.ts     |  9 +++++++
 matsen-tool/src/app/app.module.ts             | 16 ++++++++++-
 .../contacts-detail.component.html            |  2 +-
 .../contacts-detail.component.ts              | 11 +++++++-
 .../src/app/contacts/contacts.component.html  |  2 ++
 .../app/documents/documents.component.html    |  4 +++
 .../src/app/documents/documents.component.ts  | 13 +++++++--
 .../new-document/new-document.component.html  |  1 +
 .../new-document/new-document.component.scss  |  0
 .../new-document.component.spec.ts            | 23 ++++++++++++++++
 .../new-document/new-document.component.ts    | 10 +++++++
 .../new-partner/new-partner.component.html    |  1 +
 .../new-partner/new-partner.component.scss    |  0
 .../new-partner/new-partner.component.spec.ts | 23 ++++++++++++++++
 .../new-partner/new-partner.component.ts      | 10 +++++++
 .../partners-detail.component.html            |  4 +--
 .../partners-detail.component.ts              | 12 +++++++++
 .../src/app/partners/partners.component.html  |  7 ++++-
 .../src/app/partners/partners.component.ts    | 27 +++++++++++++++++--
 .../new-posting/new-posting.component.html    |  1 +
 .../new-posting/new-posting.component.scss    |  0
 .../new-posting/new-posting.component.spec.ts | 23 ++++++++++++++++
 .../new-posting/new-posting.component.ts      | 10 +++++++
 .../src/app/postings/postings.component.html  |  3 +++
 .../src/app/postings/postings.component.scss  |  0
 .../app/postings/postings.component.spec.ts   | 23 ++++++++++++++++
 .../src/app/postings/postings.component.ts    | 10 +++++++
 .../new-product/new-product.component.html    |  1 +
 .../new-product/new-product.component.scss    |  0
 .../new-product/new-product.component.spec.ts | 23 ++++++++++++++++
 .../new-product/new-product.component.ts      | 10 +++++++
 .../src/app/products/products.component.html  |  4 +++
 .../src/app/products/products.component.ts    | 12 ++++++++-
 .../tasks/new-task/new-task.component.html    |  1 +
 .../tasks/new-task/new-task.component.scss    |  0
 .../tasks/new-task/new-task.component.spec.ts | 23 ++++++++++++++++
 .../app/tasks/new-task/new-task.component.ts  | 10 +++++++
 .../src/app/tasks/tasks.component.html        |  5 ++++
 .../src/app/tasks/tasks.component.scss        |  0
 .../src/app/tasks/tasks.component.spec.ts     | 23 ++++++++++++++++
 matsen-tool/src/app/tasks/tasks.component.ts  | 27 +++++++++++++++++++
 matsen-tool/src/assets/i18n/de.json           |  8 +++++-
 42 files changed, 380 insertions(+), 12 deletions(-)
 create mode 100644 matsen-tool/src/app/documents/new-document/new-document.component.html
 create mode 100644 matsen-tool/src/app/documents/new-document/new-document.component.scss
 create mode 100644 matsen-tool/src/app/documents/new-document/new-document.component.spec.ts
 create mode 100644 matsen-tool/src/app/documents/new-document/new-document.component.ts
 create mode 100644 matsen-tool/src/app/partners/new-partner/new-partner.component.html
 create mode 100644 matsen-tool/src/app/partners/new-partner/new-partner.component.scss
 create mode 100644 matsen-tool/src/app/partners/new-partner/new-partner.component.spec.ts
 create mode 100644 matsen-tool/src/app/partners/new-partner/new-partner.component.ts
 create mode 100644 matsen-tool/src/app/postings/new-posting/new-posting.component.html
 create mode 100644 matsen-tool/src/app/postings/new-posting/new-posting.component.scss
 create mode 100644 matsen-tool/src/app/postings/new-posting/new-posting.component.spec.ts
 create mode 100644 matsen-tool/src/app/postings/new-posting/new-posting.component.ts
 create mode 100644 matsen-tool/src/app/postings/postings.component.html
 create mode 100644 matsen-tool/src/app/postings/postings.component.scss
 create mode 100644 matsen-tool/src/app/postings/postings.component.spec.ts
 create mode 100644 matsen-tool/src/app/postings/postings.component.ts
 create mode 100644 matsen-tool/src/app/products/new-product/new-product.component.html
 create mode 100644 matsen-tool/src/app/products/new-product/new-product.component.scss
 create mode 100644 matsen-tool/src/app/products/new-product/new-product.component.spec.ts
 create mode 100644 matsen-tool/src/app/products/new-product/new-product.component.ts
 create mode 100644 matsen-tool/src/app/tasks/new-task/new-task.component.html
 create mode 100644 matsen-tool/src/app/tasks/new-task/new-task.component.scss
 create mode 100644 matsen-tool/src/app/tasks/new-task/new-task.component.spec.ts
 create mode 100644 matsen-tool/src/app/tasks/new-task/new-task.component.ts
 create mode 100644 matsen-tool/src/app/tasks/tasks.component.html
 create mode 100644 matsen-tool/src/app/tasks/tasks.component.scss
 create mode 100644 matsen-tool/src/app/tasks/tasks.component.spec.ts
 create mode 100644 matsen-tool/src/app/tasks/tasks.component.ts

diff --git a/matsen-tool/src/app/app-routing.module.ts b/matsen-tool/src/app/app-routing.module.ts
index 6887fa8..0e44151 100644
--- a/matsen-tool/src/app/app-routing.module.ts
+++ b/matsen-tool/src/app/app-routing.module.ts
@@ -11,6 +11,7 @@ import {ProductsDetailComponent} from "@app/products/products-detail/products-de
 import {DocumentsComponent} from "@app/documents/documents.component";
 import {ContactsComponent} from "@app/contacts/contacts.component";
 import {ContactsDetailComponent} from "@app/contacts/contacts-detail/contacts-detail.component";
+import {TasksComponent} from "@app/tasks/tasks.component";
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 const usersModule = () => import('./users/users.module').then(x => x.UsersModule);
@@ -64,6 +65,14 @@ const routes: Routes = [
             {path: ':id', component: ProductsDetailComponent, data: {dataType: 'product-detail'}},
         ]
     },
+    {
+        path: 'tasks',
+        component: TwoColumnComponent,
+        canActivate: [AuthGuard],
+        children: [
+            {path: '', component: TasksComponent, data: {dataType: 'task'}},
+        ]
+    },
     {
         path: 'documents',
         component: TwoColumnComponent,
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts
index 210b331..318336c 100644
--- a/matsen-tool/src/app/app.module.ts
+++ b/matsen-tool/src/app/app.module.ts
@@ -30,6 +30,13 @@ import {PropertyInterceptor} from "@app/_helpers/property.interceptor";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import {MatSortModule} from "@angular/material/sort";
 import {MatTableModule} from "@angular/material/table";
+import { PostingsComponent } from './postings/postings.component';
+import { NewPostingComponent } from './postings/new-posting/new-posting.component';
+import { TasksComponent } from './tasks/tasks.component';
+import { NewTaskComponent } from './tasks/new-task/new-task.component';
+import { NewPartnerComponent } from './partners/new-partner/new-partner.component';
+import { NewDocumentComponent } from './documents/new-document/new-document.component';
+import { NewProductComponent } from './products/new-product/new-product.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -80,7 +87,14 @@ export function HttpLoaderFactory(http: HttpClient) {
         PartnersDetailComponent,
         NewContactComponent,
         ContactsComponent,
-        ContactsDetailComponent
+        ContactsDetailComponent,
+        PostingsComponent,
+        NewPostingComponent,
+        TasksComponent,
+        NewTaskComponent,
+        NewPartnerComponent,
+        NewDocumentComponent,
+        NewProductComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
diff --git a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
index d7ed3a3..2459bef 100644
--- a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
+++ b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
@@ -24,7 +24,7 @@
 <div class="posts">
     <div class="d-flex justify-content-between align-items-start">
         <h2>Notizen</h2>
-        <button>Neue Notiz</button>
+        <button (click)="openModalNewPosting()">Neue Notiz</button>
     </div>
     <div *ngFor="let post of posts">
         <div class="post mb-3">
diff --git a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
index 329b932..07116da 100644
--- a/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
+++ b/matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
@@ -5,6 +5,9 @@ import {Subscription} from "rxjs";
 import {ActivatedRoute} from "@angular/router";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
 import {MatTableDataSource} from "@angular/material/table";
+import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
     selector: 'app-contacts-detail',
@@ -30,7 +33,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     constructor(
         private contactService: ContactService,
         private route: ActivatedRoute,
-        private postService: PostService
+        private postService: PostService,
+        private modalService: NgbModal
     ) {
         this.id = "";
         this.contact = {} as ContactJsonld;
@@ -94,4 +98,9 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         this.postsPageSize = e.pageSize.valueOf();
         this.getPostsData();
     }
+
+    openModalNewPosting() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewPostingComponent;
+    }
 }
diff --git a/matsen-tool/src/app/contacts/contacts.component.html b/matsen-tool/src/app/contacts/contacts.component.html
index e400718..8a5b0f6 100644
--- a/matsen-tool/src/app/contacts/contacts.component.html
+++ b/matsen-tool/src/app/contacts/contacts.component.html
@@ -1 +1,3 @@
 <p>contacts works!</p>
+<!-- This page is not used at the moment -->
+<!-- "all contacts" could be listed here -->
\ No newline at end of file
diff --git a/matsen-tool/src/app/documents/documents.component.html b/matsen-tool/src/app/documents/documents.component.html
index cec23c7..ae52797 100644
--- a/matsen-tool/src/app/documents/documents.component.html
+++ b/matsen-tool/src/app/documents/documents.component.html
@@ -1,3 +1,7 @@
+<div class="d-flex justify-content-between align-items-start">
+    <h2>Dokumente</h2>
+    <button (click)="openModalNewDocument()">Neues Dokument</button>
+</div>
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
        class="mat-elevation-z8">
 
diff --git a/matsen-tool/src/app/documents/documents.component.ts b/matsen-tool/src/app/documents/documents.component.ts
index 0948c55..f59ea2f 100644
--- a/matsen-tool/src/app/documents/documents.component.ts
+++ b/matsen-tool/src/app/documents/documents.component.ts
@@ -6,8 +6,11 @@ import {PartnerJsonld} from "@app/core/api/v1";
 import {Router, RouterLink, RouterLinkActive} from "@angular/router";
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
 import {OrderFilter} from "@app/_models/orderFilter";
-import {ApiConverter} from "@app/_helpers/api.converter";
 import {NgIf} from "@angular/common";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NewDocumentComponent} from "@app/documents/new-document/new-document.component";
 
 @Component({
     selector: 'app-documents',
@@ -33,7 +36,8 @@ export class DocumentsComponent {
     protected pageIndex: number;
 
     constructor(
-        private router: Router
+        private router: Router,
+        private modalService: NgbModal
     ) {
         this.sort = new MatSort();
         this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -121,4 +125,9 @@ export class DocumentsComponent {
         // console.log(ApiConverter.extractId(partner.id));
         // this.router.navigate(['/documents', ApiConverter.extractId(partner.id)]);
     }
+
+    openModalNewDocument() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewDocumentComponent;
+    }
 }
diff --git a/matsen-tool/src/app/documents/new-document/new-document.component.html b/matsen-tool/src/app/documents/new-document/new-document.component.html
new file mode 100644
index 0000000..7d3c2b3
--- /dev/null
+++ b/matsen-tool/src/app/documents/new-document/new-document.component.html
@@ -0,0 +1 @@
+<p>new-document works!</p>
diff --git a/matsen-tool/src/app/documents/new-document/new-document.component.scss b/matsen-tool/src/app/documents/new-document/new-document.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/documents/new-document/new-document.component.spec.ts b/matsen-tool/src/app/documents/new-document/new-document.component.spec.ts
new file mode 100644
index 0000000..40358b9
--- /dev/null
+++ b/matsen-tool/src/app/documents/new-document/new-document.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewDocumentComponent } from './new-document.component';
+
+describe('NewDocumentComponent', () => {
+  let component: NewDocumentComponent;
+  let fixture: ComponentFixture<NewDocumentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewDocumentComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewDocumentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/documents/new-document/new-document.component.ts b/matsen-tool/src/app/documents/new-document/new-document.component.ts
new file mode 100644
index 0000000..10d4e9e
--- /dev/null
+++ b/matsen-tool/src/app/documents/new-document/new-document.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-new-document',
+  templateUrl: './new-document.component.html',
+  styleUrl: './new-document.component.scss'
+})
+export class NewDocumentComponent {
+
+}
diff --git a/matsen-tool/src/app/partners/new-partner/new-partner.component.html b/matsen-tool/src/app/partners/new-partner/new-partner.component.html
new file mode 100644
index 0000000..0c6ec86
--- /dev/null
+++ b/matsen-tool/src/app/partners/new-partner/new-partner.component.html
@@ -0,0 +1 @@
+<p>new-partner works!</p>
diff --git a/matsen-tool/src/app/partners/new-partner/new-partner.component.scss b/matsen-tool/src/app/partners/new-partner/new-partner.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/partners/new-partner/new-partner.component.spec.ts b/matsen-tool/src/app/partners/new-partner/new-partner.component.spec.ts
new file mode 100644
index 0000000..0f485af
--- /dev/null
+++ b/matsen-tool/src/app/partners/new-partner/new-partner.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewPartnerComponent } from './new-partner.component';
+
+describe('NewPartnerComponent', () => {
+  let component: NewPartnerComponent;
+  let fixture: ComponentFixture<NewPartnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewPartnerComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewPartnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/partners/new-partner/new-partner.component.ts b/matsen-tool/src/app/partners/new-partner/new-partner.component.ts
new file mode 100644
index 0000000..ca1258e
--- /dev/null
+++ b/matsen-tool/src/app/partners/new-partner/new-partner.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-new-partner',
+  templateUrl: './new-partner.component.html',
+  styleUrl: './new-partner.component.scss'
+})
+export class NewPartnerComponent {
+
+}
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
index 2ea539e..626112a 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
@@ -83,7 +83,7 @@
 <div class="posts spt-accordion">
     <div class="d-flex justify-content-between align-items-start">
         <h2>Aufgaben</h2>
-        <button>Neue Aufgabe</button>
+        <button (click)="openModalNewTask()">Neue Aufgabe</button>
     </div>
     <div class="card mb-3 p-3">
         <div class="position-relative" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@@ -128,7 +128,7 @@
 <div class="posts">
     <div class="d-flex justify-content-between align-items-start">
         <h2>Notizen</h2>
-        <button>Neue Notiz</button>
+        <button (click)="openModalNewPosting()">Neue Notiz</button>
     </div>
     <div *ngFor="let post of posts">
         <div class="post mb-3">
diff --git a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
index 053de27..818f093 100644
--- a/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
+++ b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
@@ -9,6 +9,8 @@ import {environment} from "@environments/environment";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
 import {MatTableDataSource} from "@angular/material/table";
+import {NewPostingComponent} from "@app/postings/new-posting/new-posting.component";
+import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
 
 @Component({
     selector: 'app-partners-detail',
@@ -96,6 +98,16 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         modalRef.componentInstance.dynamicComponent = NewContactComponent;
     }
 
+    openModalNewPosting() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewPostingComponent;
+    }
+
+    openModalNewTask() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewTaskComponent;
+    }
+
     ngOnInit() {
         this.route.params.subscribe(params => {
             this.id = params['id'];
diff --git a/matsen-tool/src/app/partners/partners.component.html b/matsen-tool/src/app/partners/partners.component.html
index 203ffa3..5f6cb14 100644
--- a/matsen-tool/src/app/partners/partners.component.html
+++ b/matsen-tool/src/app/partners/partners.component.html
@@ -1,3 +1,7 @@
+<div class="d-flex justify-content-between align-items-start">
+    <h2>{{ partnerName }}</h2>
+    <button (click)="openModalNewPartner()">Neuer {{ partnerNameOne }}</button>
+</div>
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
        class="mat-elevation-z8">
 
@@ -14,7 +18,8 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Nach Partner sortieren">
             Partner
         </th>
-        <td mat-cell *matCellDef="let element"><span (click)="navigateToPartnerDetails(element)">{{ element.name }}</span></td>
+        <td mat-cell *matCellDef="let element"><span
+                (click)="navigateToPartnerDetails(element)">{{ element.name }}</span></td>
     </ng-container>
 
     <ng-container matColumnDef="address">
diff --git a/matsen-tool/src/app/partners/partners.component.ts b/matsen-tool/src/app/partners/partners.component.ts
index 5a9c6e1..a8db875 100644
--- a/matsen-tool/src/app/partners/partners.component.ts
+++ b/matsen-tool/src/app/partners/partners.component.ts
@@ -8,13 +8,17 @@ import {MatPaginator, MatPaginatorIntl, MatPaginatorModule, PageEvent} from "@an
 import {OrderFilter} from "@app/_models/orderFilter";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {NgIf} from "@angular/common";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NewPartnerComponent} from "@app/partners/new-partner/new-partner.component";
+import {TranslateModule, TranslateService} from "@ngx-translate/core";
 
 @Component({
     selector: 'app-partners',
     templateUrl: './partners.component.html',
     styleUrl: './partners.component.scss',
     standalone: true,
-    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive, NgIf],
+    imports: [MatTableModule, MatSortModule, MatPaginatorModule, RouterLink, RouterLinkActive, NgIf, TranslateModule],
 })
 export class PartnersComponent implements OnInit, AfterViewInit {
     @ViewChild(MatSort) sort;
@@ -28,6 +32,8 @@ export class PartnersComponent implements OnInit, AfterViewInit {
     protected websiteOrderAsc: OrderFilter;
 
     protected dataType!: string;
+    protected partnerName: string;
+    protected partnerNameOne: string;
     protected displayedColumns: string[];
 
     protected dataSource;
@@ -39,7 +45,9 @@ export class PartnersComponent implements OnInit, AfterViewInit {
     constructor(
         private route: ActivatedRoute,
         private partnerService: PartnerService,
-        private router: Router
+        private router: Router,
+        private modalService: NgbModal,
+        private translateService: TranslateService
     ) {
         this.sort = new MatSort();
         this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -57,10 +65,20 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         this.pageEvent = new PageEvent();
         this.pageSize = 10;
         this.pageIndex = 0;
+
+        this.partnerName = "";
+        this.partnerNameOne = "";
     }
 
     ngOnInit() {
         this.dataType = this.route.snapshot.data['dataType'];
+        // this.translateService.use(this.translateService.getDefaultLang());
+        this.translateService.get('basic.' + this.dataType).subscribe((translation: string) => {
+            this.partnerName = translation;
+        });
+        this.translateService.get('basic.' + this.dataType + 'One').subscribe((translation: string) => {
+            this.partnerNameOne = translation;
+        });
         this.getData();
     }
 
@@ -133,4 +151,9 @@ export class PartnersComponent implements OnInit, AfterViewInit {
         console.log(ApiConverter.extractId(partner.id));
         this.router.navigate(['/' + partner.type, ApiConverter.extractId(partner.id)]);
     }
+
+    openModalNewPartner() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewPartnerComponent;
+    }
 }
diff --git a/matsen-tool/src/app/postings/new-posting/new-posting.component.html b/matsen-tool/src/app/postings/new-posting/new-posting.component.html
new file mode 100644
index 0000000..3061f00
--- /dev/null
+++ b/matsen-tool/src/app/postings/new-posting/new-posting.component.html
@@ -0,0 +1 @@
+<p>new-posting works!</p>
diff --git a/matsen-tool/src/app/postings/new-posting/new-posting.component.scss b/matsen-tool/src/app/postings/new-posting/new-posting.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/postings/new-posting/new-posting.component.spec.ts b/matsen-tool/src/app/postings/new-posting/new-posting.component.spec.ts
new file mode 100644
index 0000000..c212d6b
--- /dev/null
+++ b/matsen-tool/src/app/postings/new-posting/new-posting.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewPostingComponent } from './new-posting.component';
+
+describe('NewPostingComponent', () => {
+  let component: NewPostingComponent;
+  let fixture: ComponentFixture<NewPostingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewPostingComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewPostingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/postings/new-posting/new-posting.component.ts b/matsen-tool/src/app/postings/new-posting/new-posting.component.ts
new file mode 100644
index 0000000..476733d
--- /dev/null
+++ b/matsen-tool/src/app/postings/new-posting/new-posting.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-new-posting',
+  templateUrl: './new-posting.component.html',
+  styleUrl: './new-posting.component.scss'
+})
+export class NewPostingComponent {
+
+}
diff --git a/matsen-tool/src/app/postings/postings.component.html b/matsen-tool/src/app/postings/postings.component.html
new file mode 100644
index 0000000..1124943
--- /dev/null
+++ b/matsen-tool/src/app/postings/postings.component.html
@@ -0,0 +1,3 @@
+<p>postings works!</p>
+<!-- This page is not used at the moment -->
+<!-- "all postings" could be listed here -->
\ No newline at end of file
diff --git a/matsen-tool/src/app/postings/postings.component.scss b/matsen-tool/src/app/postings/postings.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/postings/postings.component.spec.ts b/matsen-tool/src/app/postings/postings.component.spec.ts
new file mode 100644
index 0000000..fa9c023
--- /dev/null
+++ b/matsen-tool/src/app/postings/postings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostingsComponent } from './postings.component';
+
+describe('PostingsComponent', () => {
+  let component: PostingsComponent;
+  let fixture: ComponentFixture<PostingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PostingsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(PostingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/postings/postings.component.ts b/matsen-tool/src/app/postings/postings.component.ts
new file mode 100644
index 0000000..2dcc5d9
--- /dev/null
+++ b/matsen-tool/src/app/postings/postings.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-postings',
+  templateUrl: './postings.component.html',
+  styleUrl: './postings.component.scss'
+})
+export class PostingsComponent {
+
+}
diff --git a/matsen-tool/src/app/products/new-product/new-product.component.html b/matsen-tool/src/app/products/new-product/new-product.component.html
new file mode 100644
index 0000000..daed989
--- /dev/null
+++ b/matsen-tool/src/app/products/new-product/new-product.component.html
@@ -0,0 +1 @@
+<p>new-product works!</p>
diff --git a/matsen-tool/src/app/products/new-product/new-product.component.scss b/matsen-tool/src/app/products/new-product/new-product.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/products/new-product/new-product.component.spec.ts b/matsen-tool/src/app/products/new-product/new-product.component.spec.ts
new file mode 100644
index 0000000..509e014
--- /dev/null
+++ b/matsen-tool/src/app/products/new-product/new-product.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewProductComponent } from './new-product.component';
+
+describe('NewProductComponent', () => {
+  let component: NewProductComponent;
+  let fixture: ComponentFixture<NewProductComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewProductComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/products/new-product/new-product.component.ts b/matsen-tool/src/app/products/new-product/new-product.component.ts
new file mode 100644
index 0000000..fd8f40d
--- /dev/null
+++ b/matsen-tool/src/app/products/new-product/new-product.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-new-product',
+  templateUrl: './new-product.component.html',
+  styleUrl: './new-product.component.scss'
+})
+export class NewProductComponent {
+
+}
diff --git a/matsen-tool/src/app/products/products.component.html b/matsen-tool/src/app/products/products.component.html
index 703774d..d24e469 100644
--- a/matsen-tool/src/app/products/products.component.html
+++ b/matsen-tool/src/app/products/products.component.html
@@ -1,3 +1,7 @@
+<div class="d-flex justify-content-between align-items-start">
+    <h2>Produkte</h2>
+    <button (click)="openModalNewProduct()">Neues Produkt</button>
+</div>
 <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)"
        class="mat-elevation-z8">
 
diff --git a/matsen-tool/src/app/products/products.component.ts b/matsen-tool/src/app/products/products.component.ts
index a403c9f..cd91096 100644
--- a/matsen-tool/src/app/products/products.component.ts
+++ b/matsen-tool/src/app/products/products.component.ts
@@ -8,6 +8,10 @@ import {ApiConverter} from "@app/_helpers/api.converter";
 import {Router, RouterLink, RouterLinkActive} from "@angular/router";
 import {NgIf} from "@angular/common";
 import {Subscription} from "rxjs";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {NewProductComponent} from "@app/products/new-product/new-product.component";
 
 @Component({
     selector: 'app-products',
@@ -33,7 +37,8 @@ export class ProductsComponent implements OnInit, AfterViewInit {
     protected pageIndex: number;
 
     constructor(
-        private router: Router
+        private router: Router,
+        private modalService: NgbModal
     ) {
         this.sort = new MatSort();
         this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -122,4 +127,9 @@ export class ProductsComponent implements OnInit, AfterViewInit {
         // this.router.navigate(['/products', ApiConverter.extractId(product.id)]);
         this.router.navigate(['/products', '1']);
     }
+
+    openModalNewProduct() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewProductComponent;
+    }
 }
diff --git a/matsen-tool/src/app/tasks/new-task/new-task.component.html b/matsen-tool/src/app/tasks/new-task/new-task.component.html
new file mode 100644
index 0000000..a9b6748
--- /dev/null
+++ b/matsen-tool/src/app/tasks/new-task/new-task.component.html
@@ -0,0 +1 @@
+<p>new-task works!</p>
diff --git a/matsen-tool/src/app/tasks/new-task/new-task.component.scss b/matsen-tool/src/app/tasks/new-task/new-task.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/tasks/new-task/new-task.component.spec.ts b/matsen-tool/src/app/tasks/new-task/new-task.component.spec.ts
new file mode 100644
index 0000000..9d2d716
--- /dev/null
+++ b/matsen-tool/src/app/tasks/new-task/new-task.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewTaskComponent } from './new-task.component';
+
+describe('NewTaskComponent', () => {
+  let component: NewTaskComponent;
+  let fixture: ComponentFixture<NewTaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewTaskComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewTaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/tasks/new-task/new-task.component.ts b/matsen-tool/src/app/tasks/new-task/new-task.component.ts
new file mode 100644
index 0000000..e3c15b9
--- /dev/null
+++ b/matsen-tool/src/app/tasks/new-task/new-task.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-new-task',
+  templateUrl: './new-task.component.html',
+  styleUrl: './new-task.component.scss'
+})
+export class NewTaskComponent {
+
+}
diff --git a/matsen-tool/src/app/tasks/tasks.component.html b/matsen-tool/src/app/tasks/tasks.component.html
new file mode 100644
index 0000000..4b93c8f
--- /dev/null
+++ b/matsen-tool/src/app/tasks/tasks.component.html
@@ -0,0 +1,5 @@
+<div class="d-flex justify-content-between align-items-start">
+    <h2>Aufgaben</h2>
+    <button (click)="openModalNewTask()">Neue Aufgabe</button>
+</div>
+<p>tasks works!</p>
diff --git a/matsen-tool/src/app/tasks/tasks.component.scss b/matsen-tool/src/app/tasks/tasks.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/tasks/tasks.component.spec.ts b/matsen-tool/src/app/tasks/tasks.component.spec.ts
new file mode 100644
index 0000000..2c2a26c
--- /dev/null
+++ b/matsen-tool/src/app/tasks/tasks.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TasksComponent } from './tasks.component';
+
+describe('TasksComponent', () => {
+  let component: TasksComponent;
+  let fixture: ComponentFixture<TasksComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TasksComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TasksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/tasks/tasks.component.ts b/matsen-tool/src/app/tasks/tasks.component.ts
new file mode 100644
index 0000000..ecf567c
--- /dev/null
+++ b/matsen-tool/src/app/tasks/tasks.component.ts
@@ -0,0 +1,27 @@
+import {Component, OnInit} from '@angular/core';
+import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+
+@Component({
+  selector: 'app-tasks',
+  templateUrl: './tasks.component.html',
+  styleUrl: './tasks.component.scss'
+})
+export class TasksComponent implements OnInit {
+
+  constructor(
+      private modalService: NgbModal
+  ) {
+
+  }
+
+  ngOnInit() {
+
+  }
+
+  openModalNewTask() {
+    const modalRef = this.modalService.open(ModalComponent);
+    modalRef.componentInstance.dynamicComponent = NewTaskComponent;
+  }
+}
diff --git a/matsen-tool/src/assets/i18n/de.json b/matsen-tool/src/assets/i18n/de.json
index a40f8f7..90cc699 100644
--- a/matsen-tool/src/assets/i18n/de.json
+++ b/matsen-tool/src/assets/i18n/de.json
@@ -2,6 +2,12 @@
   "basic":
   {
     "logout": "Logout",
-    "company-name": "MATSEN CHEMIE AG"
+    "company-name": "MATSEN CHEMIE AG",
+    "customer": "Kunden",
+    "supplier": "Dienstleister",
+    "service": "Lieferanten",
+    "customerOne": "Kunde",
+    "supplierOne": "Dienstleister",
+    "serviceOne": "Lieferant"
   }
 }
\ No newline at end of file