modal / new contact WIP

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">

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';

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>

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;
+        }
+    }
+}

matsen-tool/src/app/partners/new-contact/new-contact.component.html

@@ -1,5 +0,0 @@
-<h2>Neuer Kontakt</h2>
-<div>
-    Hier kommt ein Formular hin!
-</div>
-<button>Abschicken</button>

matsen-tool/src/app/partners/new-contact/new-contact.component.ts

@@ -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 {
-
-}

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";