From 453a25d70ef92347362c27e7197358b84bec63ad Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MacBook-Pro-von-Florian.fritz.box>
Date: Thu, 8 Feb 2024 17:44:58 +0100
Subject: [PATCH] modal component

---
 .../_components/modal/modal.component.html    | 10 ++++++++
 .../_components/modal/modal.component.scss    |  0
 .../_components/modal/modal.component.spec.ts | 23 +++++++++++++++++++
 .../app/_components/modal/modal.component.ts  | 14 +++++++++++
 matsen-tool/src/app/app.module.ts             |  6 ++++-
 .../new-contact/new-contact.component.html    |  5 ++++
 .../new-contact/new-contact.component.scss    |  0
 .../new-contact/new-contact.component.spec.ts | 23 +++++++++++++++++++
 .../new-contact/new-contact.component.ts      | 10 ++++++++
 .../partners-detail.component.html            |  2 +-
 .../partners-detail.component.ts              | 21 +++++++++++++----
 11 files changed, 108 insertions(+), 6 deletions(-)
 create mode 100644 matsen-tool/src/app/_components/modal/modal.component.html
 create mode 100644 matsen-tool/src/app/_components/modal/modal.component.scss
 create mode 100644 matsen-tool/src/app/_components/modal/modal.component.spec.ts
 create mode 100644 matsen-tool/src/app/_components/modal/modal.component.ts
 create mode 100644 matsen-tool/src/app/partners/new-contact/new-contact.component.html
 create mode 100644 matsen-tool/src/app/partners/new-contact/new-contact.component.scss
 create mode 100644 matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts
 create mode 100644 matsen-tool/src/app/partners/new-contact/new-contact.component.ts

diff --git a/matsen-tool/src/app/_components/modal/modal.component.html b/matsen-tool/src/app/_components/modal/modal.component.html
new file mode 100644
index 0000000..27ade45
--- /dev/null
+++ b/matsen-tool/src/app/_components/modal/modal.component.html
@@ -0,0 +1,10 @@
+<div class="modal-header">
+    <h4 class="modal-title">Hi there!</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
+</div>
+<div class="modal-body">
+    <ng-container *ngComponentOutlet="dynamicComponent"></ng-container>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
+</div>
\ No newline at end of file
diff --git a/matsen-tool/src/app/_components/modal/modal.component.scss b/matsen-tool/src/app/_components/modal/modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/_components/modal/modal.component.spec.ts b/matsen-tool/src/app/_components/modal/modal.component.spec.ts
new file mode 100644
index 0000000..bbcf46d
--- /dev/null
+++ b/matsen-tool/src/app/_components/modal/modal.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/_components/modal/modal.component.ts b/matsen-tool/src/app/_components/modal/modal.component.ts
new file mode 100644
index 0000000..6579b76
--- /dev/null
+++ b/matsen-tool/src/app/_components/modal/modal.component.ts
@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrl: './modal.component.scss'
+})
+export class ModalComponent {
+  @Input() dynamicComponent: any;
+
+  constructor(public activeModal: NgbActiveModal) { }
+
+}
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts
index 6790800..35f0b6f 100644
--- a/matsen-tool/src/app/app.module.ts
+++ b/matsen-tool/src/app/app.module.ts
@@ -22,6 +22,8 @@ import {PartnersDetailComponent} from './partners/partners-detail/partners-detai
 import { ProductsComponent } from './products/products.component';
 import { ProductsDetailComponent } from './products/products-detail/products-detail.component';
 import { DocumentsComponent } from './documents/documents.component';
+import { NewContactComponent } from './partners/new-contact/new-contact.component';
+import { ModalComponent } from './_components/modal/modal.component';
 
 export function apiConfigFactory(): Configuration {
     const params: ConfigurationParameters = {
@@ -65,7 +67,9 @@ export function HttpLoaderFactory(http: HttpClient) {
         PartnersDetailComponent,
         ProductsComponent,
         ProductsDetailComponent,
-        DocumentsComponent
+        DocumentsComponent,
+        NewContactComponent,
+        ModalComponent
     ],
     providers: [
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
diff --git a/matsen-tool/src/app/partners/new-contact/new-contact.component.html b/matsen-tool/src/app/partners/new-contact/new-contact.component.html
new file mode 100644
index 0000000..086c501
--- /dev/null
+++ b/matsen-tool/src/app/partners/new-contact/new-contact.component.html
@@ -0,0 +1,5 @@
+<h2>Neuer Kontakt</h2>
+<div>
+    Hier kommt ein Formular hin!
+</div>
+<button>Abschicken</button>
diff --git a/matsen-tool/src/app/partners/new-contact/new-contact.component.scss b/matsen-tool/src/app/partners/new-contact/new-contact.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts b/matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts
new file mode 100644
index 0000000..034b0e6
--- /dev/null
+++ b/matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewContactComponent } from './new-contact.component';
+
+describe('NewContactComponent', () => {
+  let component: NewContactComponent;
+  let fixture: ComponentFixture<NewContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NewContactComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/matsen-tool/src/app/partners/new-contact/new-contact.component.ts b/matsen-tool/src/app/partners/new-contact/new-contact.component.ts
new file mode 100644
index 0000000..d737e9a
--- /dev/null
+++ b/matsen-tool/src/app/partners/new-contact/new-contact.component.ts
@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'app-new-contact',
+    templateUrl: './new-contact.component.html',
+    styleUrl: './new-contact.component.scss'
+})
+export class NewContactComponent {
+
+}
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 6aa49cb..be4f29f 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
@@ -31,7 +31,7 @@
 <div class="contacts">
     <div class="d-flex justify-content-between align-items-start">
         <h2>Kontakte</h2>
-        <button>Neuer Kontakt</button>
+        <button (click)="openModalNewContact()">Neuer Kontakt</button>
     </div>
     <div class="row">
         <div class="col-4">
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 c04c039..5495f1e 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
@@ -1,10 +1,23 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {ModalComponent} from "@app/_components/modal/modal.component";
+import {NewContactComponent} from "@app/partners/new-contact/new-contact.component";
 
 @Component({
-  selector: 'app-partners-detail',
-  templateUrl: './partners-detail.component.html',
-  styleUrl: './partners-detail.component.scss'
+    selector: 'app-partners-detail',
+    templateUrl: './partners-detail.component.html',
+    styleUrl: './partners-detail.component.scss'
 })
 export class PartnersDetailComponent {
+    private closeResult = '';
 
+    protected readonly ModalComponent = ModalComponent;
+    constructor(private modalService: NgbModal) {
+    }
+    openModalNewContact() {
+        const modalRef = this.modalService.open(ModalComponent);
+        modalRef.componentInstance.dynamicComponent = NewContactComponent;
+    }
+
+    ngOnInit() {}
 }