From 2b99ca73bce97017d20917342e77ea27f836b11f Mon Sep 17 00:00:00 2001
From: Marcel Meyer <m.meyer@it-frankfurt.com>
Date: Tue, 8 Nov 2022 13:47:34 +0100
Subject: [PATCH] added navbar component

---
 src/app/app.component.html                    | 29 +-------
 src/app/app.module.ts                         |  2 +
 .../add-member-form.component.html            | 39 ++++++++---
 .../add-member-form.component.ts              | 33 +++++----
 src/app/header/header.component.html          | 28 ++++++++
 src/app/header/header.component.scss          | 70 +++++++++++++++++++
 src/app/header/header.component.spec.ts       | 23 ++++++
 src/app/header/header.component.ts            | 15 ++++
 8 files changed, 184 insertions(+), 55 deletions(-)
 create mode 100644 src/app/header/header.component.html
 create mode 100644 src/app/header/header.component.scss
 create mode 100644 src/app/header/header.component.spec.ts
 create mode 100644 src/app/header/header.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 473c2c3..1e15754 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,29 +1,2 @@
-<nav>
-  <a aria-current="page" class="headline" routerLink="/">
-    <mat-icon>home</mat-icon>
-    <h1>Kletterhalle</h1>
-  </a>
-  <div>
-    <ul>
-      <li>
-        <a
-          [routerLinkActive]="'active'"
-          aria-current="page"
-          class="nav-link"
-          routerLink="/members"
-          >Members</a
-        >
-      </li>
-      <li>
-        <a
-          [routerLinkActive]="'active'"
-          aria-current="page"
-          class="nav-link"
-          routerLink="/routes"
-          >Routes</a
-        >
-      </li>
-    </ul>
-  </div>
-</nav>
+<app-header></app-header>
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a524df5..d86e055 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { MemberDetailsComponent } from './components/members/member-table/member
 import { AddMemberFormComponent } from './components/members/member-table/add-member-form/add-member-form.component';
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import { HeaderComponent } from './header/header.component';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
     RouteDetailPageComponent,
     MemberDetailsComponent,
     AddMemberFormComponent,
+    HeaderComponent,
   ],
     imports: [
         BrowserModule,
diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.html b/src/app/components/members/member-table/add-member-form/add-member-form.component.html
index eab0a71..30c15f7 100644
--- a/src/app/components/members/member-table/add-member-form/add-member-form.component.html
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Add Member Form</h2>
 <ng-container class="add-member-form">
-  <form class="example-container" [formGroup]="addMemberForm" (ngSubmit)="onSubmit()">
+  <form novalidate class="example-container" [formGroup]="addMemberForm" (ngSubmit)="onSubmit()">
     <mat-form-field class="example-full-width" appearance="fill">
       <mat-label>Firstname</mat-label>
       <input matInput placeholder="Firstname" formControlName="firstName">
@@ -10,11 +10,9 @@
       <mat-label>Lastname</mat-label>
       <input matInput placeholder="Lastname" formControlName="lastName">
     </mat-form-field>
+      <br>
 
-
-      <ng-container formArrayName="addressDto">
-        <ng-container  *ngFor="let addressForm of addressDto.controls; let i = index;">
-
+      <ng-container class="example-container" formGroupName="addressDto">
             <mat-form-field class="example-full-width" appearance="fill">
               <mat-label>Street</mat-label>
               <input matInput placeholder="Street" formControlName="street">
@@ -25,13 +23,10 @@
             </mat-form-field>
             <mat-form-field class="example-full-width" appearance="fill">
               <mat-label>Post Code</mat-label>
-              <input matInput placeholder="Post Code" formControlName="postCode">
+              <input class="form-control" matInput placeholder="Post Code" formControlName="postCode">
             </mat-form-field>
-
-
-        </ng-container>
       </ng-container>
-
+    <br>
 
     <div class="button-row">
       <button mat-raised-button color="primary" type="submit">Submit</button> |
@@ -41,3 +36,27 @@
 </ng-container>
 
 
+<!--<form [formGroup]="addMemberForm" >-->
+<!--  <div class="form-group">-->
+<!--    <label for="Firstname">Firstname</label>-->
+<!--    <input type="text" id="Firstname" formControlName="firstName" class="form-control">-->
+<!--  </div>-->
+<!--  <div class="form-group">-->
+<!--    <label for="Lastname">Firstname</label>-->
+<!--    <input type="text" id="Lastname" formControlName="lastName" class="form-control">-->
+<!--  </div>-->
+<!--  <div formGroupName="addressDto">-->
+<!--    <div class="form-group">-->
+<!--      <label for="street">Username</label>-->
+<!--      <input type="text" id="street" value="street" formControlName="street" class="form-control">-->
+<!--    </div>-->
+<!--    <div class="form-group">-->
+<!--      <label for="HouseNumber">Username</label>-->
+<!--      <input type="text" id="Housenumber" value="houseNumber" formControlName="houseNumber" class="form-control">-->
+<!--    </div>-->
+<!--    <div class="form-group">-->
+<!--      <label for="Postcode">Username</label>-->
+<!--      <input type="text" id="Postcode" value="postCode" formControlName="postCode" class="form-control">-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</form>-->
diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
index 022941e..f90f554 100644
--- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
@@ -3,6 +3,7 @@ import {FormGroup, FormBuilder, Validators, FormArray, AbstractControl} from "@a
 import {MemberService} from "../../../../services/member.service";
 import {Router} from "@angular/router";
 import {Address} from "../../../../models/address";
+import {Member} from "../../../../models/member";
 
 
 @Component({
@@ -12,6 +13,7 @@ import {Address} from "../../../../models/address";
 })
 export class AddMemberFormComponent implements OnInit {
 
+  member!: Member;
   addMemberForm!: FormGroup;
 
   constructor(private formBuilder: FormBuilder, private memberService: MemberService, private router: Router) { }
@@ -20,35 +22,32 @@ export class AddMemberFormComponent implements OnInit {
     this.addMemberForm = this.formBuilder.group({
       firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
       lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
-      addressDto: this.formBuilder.array([this.formBuilder.group({
+      addressDto: this.formBuilder.group([{
         street: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
         houseNumber:['', [Validators.required, Validators.minLength(1), Validators.maxLength(5)]],
         postCode:['', [Validators.required, Validators.minLength(1), Validators.maxLength(5)]]
-      })]
+      }]
       )})
+
+    this.saveMember()
   }
 
-  get addressDto() {
-    return this.addMemberForm.controls["addressDto"] as FormArray;
+  saveMember() {
+    this.memberService.addMember(this.member).subscribe( data => {
+      console.log(data);
+      this.redirectToMemberList();
+    },
+      error => console.log(error));
   }
 
-  // addAddress() {
-  //   const addressForm = this.formBuilder.group({
-  //     street: ['', Validators.required],
-  //     houseNumber: ['', Validators.required],
-  //     postCode: ['', Validators.required]
-  //   });
-  //   this.addressDto.push(addressForm);
-  // }
-  //
-  // deleteAddress(addressIndex: number) {
-  //   this.addressDto.removeAt(addressIndex);
-  // }
+  redirectToMemberList() {
+    this.router.navigate(['/members'])
+  }
 
   onSubmit() {
       console.log("submitted")
       console.log(this.addMemberForm.value)
-
+      this.saveMember();
 
     }
 
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
new file mode 100644
index 0000000..6666f6d
--- /dev/null
+++ b/src/app/header/header.component.html
@@ -0,0 +1,28 @@
+<nav>
+  <a aria-current="page" class="headline" routerLink="/">
+    <mat-icon>home</mat-icon>
+    <h1>Kletterhalle</h1>
+  </a>
+  <div>
+    <ul>
+      <li>
+        <a
+          [routerLinkActive]="'active'"
+          aria-current="page"
+          class="nav-link"
+          routerLink="/members"
+          >Members</a
+        >
+      </li>
+      <li>
+        <a
+          [routerLinkActive]="'active'"
+          aria-current="page"
+          class="nav-link"
+          routerLink="/routes"
+          >Routes</a
+        >
+      </li>
+    </ul>
+  </div>
+</nav>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
new file mode 100644
index 0000000..0ca85dc
--- /dev/null
+++ b/src/app/header/header.component.scss
@@ -0,0 +1,70 @@
+nav {
+  height: 60px;
+  width: 100%;
+  background-color: rgba(40, 42, 53, 1);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
+  rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+
+  .headline {
+    width: 20%;
+    padding-left: 15px;
+    padding-top: 15px;
+    display: flex;
+    justify-content: left;
+    text-decoration: none;
+
+    h1 {
+      font-size: 1.3rem;
+      color: white;
+    }
+
+    mat-icon {
+      color: white;
+      margin-top: 2.7px;
+      margin-right: 10px;
+    }
+  }
+
+  .headline:active {
+    color: darkred;
+
+    h1 {
+      font-size: 1.3rem;
+      color: white;
+    }
+
+    mat-icon {
+      color: darkred;
+    }
+  }
+
+  ul {
+    display: flex;
+    width: 600px;
+    height: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      width: 50%;
+      height: 100%;
+      text-decoration: none;
+
+      a {
+        color: white;
+        text-align:center;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        font-size: 1.3rem;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts
new file mode 100644
index 0000000..1fd30b4
--- /dev/null
+++ b/src/app/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
new file mode 100644
index 0000000..7ab4cf7
--- /dev/null
+++ b/src/app/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
-- 
GitLab