Send patient

package.json

@@ -10,30 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.4",
-    "@angular/common": "^14.2.4",
-    "@angular/compiler": "^14.2.4",
-    "@angular/core": "^14.2.4",
-    "@angular/forms": "^14.2.4",
-    "@angular/platform-browser": "^14.2.4",
-    "@angular/platform-browser-dynamic": "^14.2.4",
-    "@angular/router": "^14.2.4",
-    "rxjs": "~7.5.7",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.11.8"
+    "@angular/animations": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/material": "^7.0.0",
+    "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/router": "^14.0.0",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.4",
-    "@angular/cli": "~14.2.4",
-    "@angular/compiler-cli": "^14.2.4",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.4.0",
-    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.1",
+    "@angular-devkit/build-angular": "^14.0.6",
+    "@angular/cli": "~14.0.6",
+    "@angular/compiler-cli": "^14.0.0",
+    "@types/jasmine": "~4.0.0",
+    "jasmine-core": "~4.1.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
+    "karma-jasmine": "~5.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
     "prettier": "^2.8.0",
-    "typescript": "~4.8.4"
+    "typescript": "~4.7.2"
   }
-}
+}

src/app/Patient.ts

@@ -7,14 +7,13 @@ import { Telecom } from './Telecom';
 export type Gender = 'unknown' | 'male' | 'female' | 'other';
 
 export interface Patient {
-  id: string;
-  text?: string;
+  id?: string;
   active?: boolean;
   gender?: Gender;
   birthdate?: string;
-  telecom: Telecom[];
-  name: HumanName[];
+  telecom?: Telecom[];
+  name?: HumanName[];
   deceasedBoolean?: boolean;
   deceasedDateTime?: Date;
-  address: Address[];
+  address?: Address[];
 }

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div>
-  {{ipAddress}}
+
 
   <table id="patientTable">
     <tr *ngFor="let patient of patients" (click)="selectPatient(patient)">
@@ -12,8 +12,9 @@
     </tr>
   </table>
 
-  <form [formGroup]="patientForm">
-    Text: <input formControlName="text" /><br />
+  <button mat-button (click)="createNewPatient()">Create new Patient</button><br />
+
+  <form *ngIf="currentPatient" [formGroup]="patientForm">
     Active: <input type="checkbox" formControlName="active" /><br />
     Gender:
     <select formControlName="gender">
@@ -25,19 +26,21 @@
     Birthdate: <input type="date" formControlName="birthDate" /><br />
     <div formArrayName="telecom">
       <div
-        *ngFor="let telecom of patientForm.controls.telecom.controls"
+        *ngFor="let telecom of patientForm.controls.telecom.controls; 
+        let telecomIndex = index"
         [formGroup]="telecom"
       >
         <b>Telecom:</b><br />
-        Value: <input formControlName="value" />
+        Value: <input matInput type="text" formControlName="value" />
+        <button (click)="deleteLastTelecom(telecomIndex)">Delete</button>
       </div>
-      <button (click)="addNewTelecom()">Add another</button>
+      <button mat-button (click)="addNewTelecom()">Add another</button>
     </div>
     Deceased: <input type="checkbox" formControlName="deceasedBoolean" /><br />
     Deceased Time:
     <input type="datetime-local" formControlName="deceasedDateTime" /><br />
     Address:
-    <button (click)="addNewAddress()">New Address</button>
+    <button mat-button (click)="addNewAddress()">New Address</button>
     <div
       style="border: solid"
       *ngFor="
@@ -48,10 +51,12 @@
     >
       Postal Code: <input formControlName="postalcode" /><br />
       City: <input formControlName="city" /><br />
-      <button (click)="removeAddress(adressIndex)">Delete</button>
+      <button mat-button (click)="removeAddress(adressIndex)">Delete</button>
     </div>
   </form>
 
+  <button (click)="sendPatientData()" >Daten absenden</button>
+
   <pre>{{ patientForm.value | json }}</pre>
 
   <pre

src/app/app.component.ts

@@ -3,6 +3,7 @@ import {HttpClient} from "@angular/common/http";
 import { Gender, Patient } from './Patient';
 import { DataService } from './data.service';
 import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { MatButton, MatSlideToggle, MatInput } from '@angular/material/';
 
 @Component({
   selector: 'app-root',
@@ -17,12 +18,11 @@ export class AppComponent implements OnInit{
   public patients: Patient[] = [];
   currentPatient?: Patient = undefined;
 
-  patientForm = new FormGroup({
-    text: new FormControl(''),
-    active: new FormControl(true),
-    gender: new FormControl<Gender>('unknown'),
-    birthDate: new FormControl(''),
-    telecom: new FormArray([this.createTelecomFormGroup()]),
+  patientForm = new FormGroup({ // pateint-objekt
+    active: new FormControl(true), // checkbox
+    gender: new FormControl<Gender>('unknown'), // select
+    birthDate: new FormControl(new Date()), // text
+    telecom: new FormArray([ this.createTelecomFormGroup() ]), // listen von einträren
     deceasedBoolean: new FormControl(false),
     deceasedDateTime: new FormControl(null as Date | null),
     address: new FormArray([this.createAddressFormGroup()]),
@@ -55,10 +55,70 @@ export class AppComponent implements OnInit{
     this.patientForm.controls.telecom.push(this.createTelecomFormGroup());
   }
 
+  deleteLastTelecom(index: number){
+    this.patientForm.controls.telecom.removeAt(index);
+  }
+
   constructor(private dataService: DataService) {}
 
   selectPatient(selection: Patient) {
     this.currentPatient = selection;
+    this.patientForm.reset();
+    this.patientForm.controls.telecom.clear();
+    while (
+      this.patientForm.controls.telecom.length <
+      (this.currentPatient?.telecom?.length ?? 0)
+    ) {
+      this.addNewTelecom();
+    }
+    this.patientForm.controls.address.clear();
+    while (
+      this.patientForm.controls.address.length <
+      (this.currentPatient?.address?.length ?? 0)
+    ) {
+      this.addNewAddress();
+    }
+    this.patientForm.patchValue(this.currentPatient);
+  }
+
+  createNewPatient() {
+    this.currentPatient = {};
+    this.patientForm.reset();
+  }
+
+  savePatient() {
+    if (this.currentPatient?.id) {
+      const merged: any = this.patientForm.value;
+      merged.id = this.currentPatient.id;
+      this.dataService.putPatient(merged).subscribe(response => {
+        console.log('put', response);
+        this.fetchPatients();
+        this.currentPatient = undefined;
+      });
+    } else {
+      this.dataService
+        .postPatient(this.patientForm.value as any)
+        .subscribe(response => {
+          console.log('post', response);
+          this.fetchPatients();
+          this.currentPatient = undefined;
+        });
+    }
+  }
+
+  sendPatientData(){
+    if (this.currentPatient !== undefined) {
+
+      this.dataService.postPatient(this.currentPatient);
+    }
+  }
+
+  deletePatient() {
+    this.dataService.deletePatient(this.currentPatient).subscribe(response => {
+      console.log('Patient deleted', response);
+      this.fetchPatients();
+      this.currentPatient = undefined;
+    });
   }
 
   fetchIpText() {

src/app/app.module.ts

@@ -4,12 +4,14 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import {HttpClientModule} from "@angular/common/http";
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule, MatSlideToggleModule, MatInputModule, MatFormFieldModule } from '@angular/material/';
+
 
 @NgModule({
   declarations: [
     AppComponent
   ],
-  imports: [BrowserModule, HttpClientModule, FormsModule, ReactiveFormsModule],
+  imports: [BrowserModule, HttpClientModule, FormsModule, ReactiveFormsModule, MatButtonModule, MatSlideToggleModule, MatInputModule],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/data.service.ts

@@ -20,4 +20,24 @@ export class DataService {
   getPatients() {
     return this.http.get<Patient[]>("http://localhost:8080/api/patient/", { responseType: "json" });
   }
+
+  postPatient(data: Patient) {
+    return this.http.post<Patient>('http://localhost:8080/api/patient/', data, {
+      responseType: 'json',
+    });
+  }
+
+  deletePatient(data: any) {
+    return this.http.delete('http://localhost:8080/api/patient/' + data.id);
+  }
+
+  putPatient(data: any) {
+    return this.http.put<Patient>(
+      'http://localhost:8080/api/patient/' + data.id,
+      data,
+      {
+        responseType: 'json',
+      }
+    );
+  }
 }

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AngularRequestAssignment</title>
+  <title>5xBGM 2223</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">