From 1cb6495d3d2d82b7ad7966f7bfc7d460012a87cb Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Fri, 16 Feb 2024 10:36:15 +0100
Subject: [PATCH] modal / new contact WIP

---
 .../_components/modal/modal.component.html    |  2 +-
 matsen-tool/src/app/app.module.ts             |  2 +-
 .../new-contact/new-contact.component.html    | 45 +++++++++++++++++++
 .../new-contact/new-contact.component.scss    |  0
 .../new-contact/new-contact.component.spec.ts |  0
 .../new-contact/new-contact.component.ts      | 39 ++++++++++++++++
 .../new-contact/new-contact.component.html    |  5 ---
 .../new-contact/new-contact.component.ts      | 10 -----
 .../partners-detail.component.ts              |  2 +-
 9 files changed, 87 insertions(+), 18 deletions(-)
 create mode 100644 matsen-tool/src/app/contacts/new-contact/new-contact.component.html
 rename matsen-tool/src/app/{partners => contacts}/new-contact/new-contact.component.scss (100%)
 rename matsen-tool/src/app/{partners => contacts}/new-contact/new-contact.component.spec.ts (100%)
 create mode 100644 matsen-tool/src/app/contacts/new-contact/new-contact.component.ts
 delete mode 100644 matsen-tool/src/app/partners/new-contact/new-contact.component.html
 delete 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
index 27ade45..1bf5593 100644
--- a/matsen-tool/src/app/_components/modal/modal.component.html
+++ b/matsen-tool/src/app/_components/modal/modal.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title">Hi there!</h4>
+<!--    <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">
diff --git a/matsen-tool/src/app/app.module.ts b/matsen-tool/src/app/app.module.ts
index 8fb0adc..210b331 100644
--- a/matsen-tool/src/app/app.module.ts
+++ b/matsen-tool/src/app/app.module.ts
@@ -22,7 +22,7 @@ import {ProductsDetailComponent} from './products/products-detail/products-detai
 import {DocumentsComponent} from './documents/documents.component';
 import {PartnersComponent} from './partners/partners.component';
 import {PartnersDetailComponent} from './partners/partners-detail/partners-detail.component';
-import {NewContactComponent} from './partners/new-contact/new-contact.component';
+import {NewContactComponent} from './contacts/new-contact/new-contact.component';
 import {ContactsComponent} from './contacts/contacts.component';
 import {ContactsDetailComponent} from './contacts/contacts-detail/contacts-detail.component';
 import {ModalComponent} from './_components/modal/modal.component';
diff --git a/matsen-tool/src/app/contacts/new-contact/new-contact.component.html b/matsen-tool/src/app/contacts/new-contact/new-contact.component.html
new file mode 100644
index 0000000..a960147
--- /dev/null
+++ b/matsen-tool/src/app/contacts/new-contact/new-contact.component.html
@@ -0,0 +1,45 @@
+<h2>Neuer Kontakt</h2>
+<div>
+    <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
+        <div>
+            <label for="firstName">Vorname:</label>
+            <input type="text" id="firstName" formControlName="firstName" />
+            <div *ngIf="contactForm.get('firstName')?.invalid && contactForm.get('firstName')?.touched">
+                Vorname ist erforderlich.
+            </div>
+        </div>
+
+        <div>
+            <label for="lastName">Nachname:</label>
+            <input type="text" id="lastName" formControlName="lastName" />
+            <div *ngIf="contactForm.get('lastName')?.invalid && contactForm.get('lastName')?.touched">
+                Nachname ist erforderlich.
+            </div>
+        </div>
+
+        <div>
+            <label for="email">E-Mail:</label>
+            <input type="email" id="email" formControlName="email" />
+            <div *ngIf="contactForm.get('email')?.invalid && contactForm.get('email')?.touched">
+                Geben Sie eine gültige E-Mail-Adresse ein.
+            </div>
+        </div>
+
+        <div>
+            <label for="lastName">Telefon:</label>
+            <input type="text" id="phone" formControlName="phone" />
+        </div>
+
+        <div>
+            <label for="lastName">Position:</label>
+            <input type="text" id="position" formControlName="position" />
+        </div>
+
+        <div>
+            <label for="image">Bild hochladen:</label>
+            <input type="file" id="image" (change)="onFileSelected($event)" accept="image/*" />
+        </div>
+
+        <button type="submit" [disabled]="contactForm.invalid">Abschicken</button>
+    </form>
+</div>
diff --git a/matsen-tool/src/app/partners/new-contact/new-contact.component.scss b/matsen-tool/src/app/contacts/new-contact/new-contact.component.scss
similarity index 100%
rename from matsen-tool/src/app/partners/new-contact/new-contact.component.scss
rename to matsen-tool/src/app/contacts/new-contact/new-contact.component.scss
diff --git a/matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts b/matsen-tool/src/app/contacts/new-contact/new-contact.component.spec.ts
similarity index 100%
rename from matsen-tool/src/app/partners/new-contact/new-contact.component.spec.ts
rename to matsen-tool/src/app/contacts/new-contact/new-contact.component.spec.ts
diff --git a/matsen-tool/src/app/contacts/new-contact/new-contact.component.ts b/matsen-tool/src/app/contacts/new-contact/new-contact.component.ts
new file mode 100644
index 0000000..da10f42
--- /dev/null
+++ b/matsen-tool/src/app/contacts/new-contact/new-contact.component.ts
@@ -0,0 +1,39 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+
+@Component({
+    selector: 'app-new-contact',
+    templateUrl: './new-contact.component.html',
+    styleUrl: './new-contact.component.scss'
+})
+export class NewContactComponent {
+    protected contactForm: FormGroup;
+    protected selectedImage: File | null;
+    constructor(
+        private fb: FormBuilder
+    ) {
+        this.contactForm = this.fb.group({
+            firstName: ['', [Validators.required]],
+            lastName: ['', [Validators.required]],
+            email: ['', [Validators.required, Validators.email]],
+            phone: [''],
+            position: [''],
+        });
+        this.selectedImage = null;
+    }
+
+    onSubmit() {
+        if (this.contactForm.valid) {
+            // Hier können Sie die Daten senden oder weitere Aktionen durchführen
+            console.log(this.selectedImage);
+            console.log('Formular wurde gesendet:', this.contactForm.value);
+        }
+    }
+
+    onFileSelected(event: any) {
+        const file: File = event.target.files[0];
+        if (file) {
+            this.selectedImage = file;
+        }
+    }
+}
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
deleted file mode 100644
index 086c501..0000000
--- a/matsen-tool/src/app/partners/new-contact/new-contact.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<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.ts b/matsen-tool/src/app/partners/new-contact/new-contact.component.ts
deleted file mode 100644
index d737e9a..0000000
--- a/matsen-tool/src/app/partners/new-contact/new-contact.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-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.ts b/matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
index a387f6e..053de27 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,7 +1,7 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} 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";
+import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {ContactJsonld, ContactService, PartnerJsonld, PartnerService, PostJsonld, PostService} from "@app/core/api/v1";
 import {Subscription} from "rxjs";