changes for details

ui/hv2-ui/src/app/app-routing.module.ts

@@ -9,6 +9,8 @@ import { MyFlatsComponent } from './my-flats/my-flats.component';
 import { MyParkingsComponent } from './my-parkings/my-parkings.component';
 import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-units.component';
 import { TenantDetailsComponent } from './tenant-details/tenant-details.component';
+import { PremiseDetailsComponent } from './premise-details/premise-details.component';
+import { FlatDetailsComponent } from './flat-details/flat-details.component';
 
 
 const routes: Routes = [
@@ -19,6 +21,10 @@ const routes: Routes = [
   { path: 'commercialunits', component: MyCommercialUnitsComponent, canActivate: [ AuthGuardService ] },
   { path: 'tenant/:id', component: TenantDetailsComponent, canActivate: [ AuthGuardService ] },
   { path: 'tenant', component: TenantDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'premise/:id', component: PremiseDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'premise', component: PremiseDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'flat/:id', component: FlatDetailsComponent, canActivate: [ AuthGuardService ] },
+  { path: 'flat', component: FlatDetailsComponent, canActivate: [ AuthGuardService ] },
   { path: 'logout', component: LogoutComponent },
   { path: 'login', component: LoginComponent }
 ]

ui/hv2-ui/src/app/app.module.ts

@@ -29,7 +29,9 @@ import { MyFlatsComponent } from './my-flats/my-flats.component';
 import { MyParkingsComponent } from './my-parkings/my-parkings.component';
 import { MyCommercialUnitsComponent } from './my-commercial-units/my-commercial-units.component';
 import { TenantDetailsComponent } from './tenant-details/tenant-details.component';
-
+import { PremiseDetailsComponent } from './premise-details/premise-details.component';
+import { FlatDetailsComponent } from './flat-details/flat-details.component';
+import { MatSelectModule } from '@angular/material/select'
 @NgModule({
   declarations: [
     AppComponent,
@@ -43,7 +45,9 @@ import { TenantDetailsComponent } from './tenant-details/tenant-details.componen
     MyFlatsComponent,
     MyParkingsComponent,
     MyCommercialUnitsComponent,
-    TenantDetailsComponent
+    TenantDetailsComponent,
+    PremiseDetailsComponent,
+    FlatDetailsComponent
   ],
   imports: [
     BrowserModule,
@@ -61,7 +65,8 @@ import { TenantDetailsComponent } from './tenant-details/tenant-details.componen
     ReactiveFormsModule,
     MatTableModule,
     MatInputModule,
-    MatFormFieldModule
+    MatFormFieldModule,
+    MatSelectModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerInterceptor, multi: true },

ui/hv2-ui/src/app/flat-details/flat-details.component.html

@@ -0,0 +1,40 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                {{flat?.description}} {{flat?.flat_no}} {{premise?.description}}
+            </mat-card-title>
+            <mat-card-subtitle>
+                ID: {{flat?.id}}
+            </mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <form (ngSubmit)="saveFlat()">
+                    <div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Beschreibung</mat-label>
+                            <input matInput name="description" [(ngModel)]="flat.description"/>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Haus</mat-label>
+                            <mat-select [(ngModel)]="flat.premise" name="premise">
+                                <mat-option *ngFor="let p of premises" [value]="p.id">{{p.description}}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div><div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Fläche</mat-label>
+                            <input matInput name="area" [(ngModel)]="flat.area"/>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Wohnungsnummer</mat-label>
+                            <input matInput name="flat_no" [(ngModel)]="flat.flat_no"/>
+                        </mat-form-field>
+                    </div>
+                    <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
+                </form>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

ui/hv2-ui/src/app/flat-details/flat-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlatDetailsComponent } from './flat-details.component';
+
+describe('FlatDetailsComponent', () => {
+  let component: FlatDetailsComponent;
+  let fixture: ComponentFixture<FlatDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FlatDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlatDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/hv2-ui/src/app/flat-details/flat-details.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FlatService, PremiseService } from '../data-object-service';
+import { Flat, Premise } from '../data-objects';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-flat-details',
+  templateUrl: './flat-details.component.html',
+  styleUrls: ['./flat-details.component.css']
+})
+export class FlatDetailsComponent implements OnInit {
+
+  flat: Flat = {
+    id: 0,
+    description: '',
+    premise: 0,
+    area: 0.0,
+    flat_no: 0
+  }
+
+  premise: Premise = {
+    id: 0,
+    description: '',
+    street: '',
+    zip: '',
+    city: ''
+  }
+
+  premises: Premise[]
+
+  @ViewChild('submitButton') submitButton: MatButton
+
+  constructor(
+    private flatService: FlatService,
+    private premiseService: PremiseService,
+    private messageService: MessageService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  async getFlat(): Promise<void> {
+    try {
+      const id = +this.route.snapshot.paramMap.get('id')
+      if (id != 0) {
+        this.flat = await this.flatService.getFlat(id)
+        this.premise = await this.premiseService.getPremise(this.flat.premise)
+      }
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  async getPremises(): Promise<void> {
+    try {
+      this.messageService.add("Trying to load premises")
+      this.premises = await this.premiseService.getPremises()
+      this.messageService.add("Premises loaded")
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  async saveFlat() {
+    this.submitButton.disabled = true
+    this.messageService.add(`saveFlat: ${ JSON.stringify(this.flat, undefined, 4) }`)
+    if (this.flat.id == 0) {
+      this.messageService.add("about to insert new flat")
+      this.flat = await this.flatService.postFlat(this.flat)
+      this.messageService.add(`Successfully added flat with id ${this.flat.id}`)
+    } else {
+      this.messageService.add("about to update existing flat")
+    }
+    this.router.navigate(['/flats'])
+  }
+
+  ngOnInit(): void {
+    this.getPremises()
+    this.getFlat()
+  }
+
+}

ui/hv2-ui/src/app/my-flats/my-flats.component.html

@@ -2,7 +2,9 @@
     <mat-card class="defaultCard">
         <mat-card-header>
             <mat-card-title>
-                Meine Wohnungen
+                <span>Meine Wohnungen</span>
+                <span class="spacer"></span>
+                <a mat-button routerLink="/flat">Neu anlegen</a>
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>
@@ -10,19 +12,19 @@
                 <table mat-table [dataSource]="dataSource" #zftable>
                     <ng-container matColumnDef="description">
                         <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
-                        <td mat-cell *matCellDef="let element">{{element.description}}</td>
+                        <td mat-cell *matCellDef="let element">{{element.flat.description}}</td>
                     </ng-container>
                     <ng-container matColumnDef="premise">
                         <th mat-header-cell *matHeaderCellDef>Haus</th>
-                        <td mat-cell *matCellDef="let element">{{element.premise}}</td>
+                        <td mat-cell *matCellDef="let element">{{element.premise.description}}</td>
                     </ng-container>
                     <ng-container matColumnDef="area">
                         <th mat-header-cell *matHeaderCellDef>Wohnfläche</th>
-                        <td mat-cell *matCellDef="let element">{{element.area}}</td>
+                        <td mat-cell *matCellDef="let element">{{element.flat.area}}</td>
                     </ng-container>
                     <ng-container matColumnDef="flat_no">
                         <th mat-header-cell *matHeaderCellDef>Wohnungsnummer</th>
-                        <td mat-cell *matCellDef="let element">{{element.flat_no}}</td>
+                        <td mat-cell *matCellDef="let element">{{element.flat.flat_no}}</td>
                     </ng-container>
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/flat/', row.id]"></tr>

ui/hv2-ui/src/app/my-flats/my-flats.component.ts

@@ -1,31 +1,59 @@
 import { Component, OnInit } from '@angular/core';
 import { MessageService } from '../message.service';
-import { FlatService } from '../data-object-service';
+import { FlatService, PremiseService } from '../data-object-service';
-import { Flat } from '../data-objects';
+import { Flat, Premise } from '../data-objects';
 import { MatTableDataSource } from '@angular/material/table'
 
+interface DN_Flat {
+  flat: Flat
+  premise: Premise
+}
+
 @Component({
   selector: 'app-my-flats',
   templateUrl: './my-flats.component.html',
   styleUrls: ['./my-flats.component.css']
 })
 export class MyFlatsComponent implements OnInit {
-
   flats: Flat[]
-  dataSource: MatTableDataSource<Flat>
+  premises: Premise[]
+  dnFlats: DN_Flat[]
+
+  dataSource: MatTableDataSource<DN_Flat>
   displayedColumns: string[] = ["description", "premise", "area", "flat_no"]
 
-  constructor(private flatService: FlatService, private messageService: MessageService) { }
+  constructor(
+    private flatService: FlatService, 
+    private premiseService: PremiseService,
+    private messageService: MessageService
+  ) { }
 
   async getFlats(): Promise<void> {
     try {
       this.messageService.add("Trying to load flats")
       this.flats = await this.flatService.getFlats()
-      this.messageService.add("Flats loaded")
+      this.messageService.add(`Flats loaded: ${ JSON.stringify(this.flats, undefined, 4) }`)
+      this.messageService.add("Trying to load premises")
+      this.premises = await this.premiseService.getPremises()
+      this.messageService.add(`Premises loaded: ${ JSON.stringify(this.premises, undefined, 4) }`)
 
-      this.dataSource = new MatTableDataSource<Flat>(this.flats)
+      const premisesDict = new Map<number, Premise>()
+      for (let p of this.premises) {
+        this.messageService.add(`p2pd: ${p.id}`)
+        premisesDict.set(p.id, p)
+      }
+      this.messageService.add(`premisesDict: ${ JSON.stringify(premisesDict, undefined, 4) }`)
+      for (let f of this.flats) {
+        this.dnFlats.push({
+          flat: f,
+          premise: premisesDict.get(f.premise)
+        })
+      }
+      this.messageService.add(`dnFlats: { JSON.stringify(this.dnFlats, undefined, 4) }`)
+
+      this.dataSource = new MatTableDataSource<DN_Flat>(this.dnFlats)
     } catch (err) {
-      this.messageService.add(JSON.stringify(err, undefined, 4))
+      this.messageService.add(`Error in getFlats: ${ JSON.stringify(err, undefined, 4) }`)
     }
   }
 

ui/hv2-ui/src/app/my-premises/my-premises.component.css

@@ -1,3 +1,8 @@
 table {
     width: 75%;
 }
+
+.spacer {
+    flex: 1 1 auto;
+}
+  

ui/hv2-ui/src/app/my-premises/my-premises.component.html

@@ -2,7 +2,9 @@
     <mat-card class="defaultCard">
         <mat-card-header>
             <mat-card-title>
-                Meine Häuser
+                <span>Meine Häuser</span>
+                <span class="spacer"></span>
+                <a mat-button routerLink="/premise">Neu anlegen</a>
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>

ui/hv2-ui/src/app/premise-details/premise-details.component.html

@@ -0,0 +1,39 @@
+<section class="mat-typography">
+    <mat-card class="defaultCard">
+        <mat-card-header>
+            <mat-card-title>
+                {{premise?.description}}
+            </mat-card-title>
+            <mat-card-subtitle>
+                ID: {{premise?.id}}
+            </mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-content>
+            <div>
+                <form (ngSubmit)="savePremise()">
+                    <div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Beschreibung</mat-label>
+                            <input matInput name="description" [(ngModel)]="premise.description"/>
+                        </mat-form-field>
+                    </div><div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Strasse</mat-label>
+                            <input matInput name="street" [(ngModel)]="premise.street"/>
+                        </mat-form-field>
+                    </div><div>
+                        <mat-form-field appearance="outline">
+                            <mat-label>PLZ</mat-label>
+                            <input matInput name="zip" [(ngModel)]="premise.zip"/>
+                        </mat-form-field>
+                        <mat-form-field appearance="outline">
+                            <mat-label>Ort</mat-label>
+                            <input matInput name="city" [(ngModel)]="premise.city"/>
+                        </mat-form-field>
+                    </div>
+                    <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
+                </form>
+            </div>
+        </mat-card-content>
+    </mat-card>
+</section>

ui/hv2-ui/src/app/premise-details/premise-details.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PremiseDetailsComponent } from './premise-details.component';
+
+describe('PremiseDetailsComponent', () => {
+  let component: PremiseDetailsComponent;
+  let fixture: ComponentFixture<PremiseDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PremiseDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PremiseDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/hv2-ui/src/app/premise-details/premise-details.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PremiseService } from '../data-object-service';
+import { Premise } from '../data-objects';
+import { MessageService } from '../message.service';
+
+@Component({
+  selector: 'app-premise-details',
+  templateUrl: './premise-details.component.html',
+  styleUrls: ['./premise-details.component.css']
+})
+export class PremiseDetailsComponent implements OnInit {
+
+  @ViewChild('submitButton') submitButton: MatButton
+
+  premise: Premise = {
+    id: 0,
+    description: '',
+    street: '',
+    zip: '',
+    city: ''
+  }
+
+  constructor(
+    private premiseService: PremiseService,
+    private messageService: MessageService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  async getPremise(): Promise<void> {
+    try {
+      const id = +this.route.snapshot.paramMap.get('id')
+      if (id != 0) {
+        this.premise = await this.premiseService.getPremise(id)
+      }
+    } catch (err) {
+      this.messageService.add(JSON.stringify(err, undefined, 4))
+    }
+  }
+
+  async savePremise() {
+    this.submitButton.disabled = true
+    this.messageService.add("savePremise")
+    this.messageService.add(JSON.stringify(this.premise, undefined, 4))
+    if (this.premise.id == 0) {
+      this.messageService.add("about to insert new premise")
+      this.premise = await this.premiseService.postPremise(this.premise)
+      this.messageService.add(`Successfully added premises with id ${this.premise.id}`)
+    } else {
+      this.messageService.add("about to update existing premise")
+    }
+    this.router.navigate(['/premises'])
+    // this.submitButton.disabled = false
+  }
+
+  ngOnInit(): void {
+    this.getPremise()
+  }
+
+}

ui/hv2-ui/src/app/tenant-details/tenant-details.component.html

@@ -70,7 +70,7 @@
                             <input matInput name="account_desc" [readonly]="true" [ngModel]="account.description"/>
                         </mat-form-field>
                     </div>
-                    <button type="submit" mat-raised-button color="primary">Speichern</button>
+                    <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
                 </form>
             </div>
         </mat-card-content>

ui/hv2-ui/src/app/tenant-details/tenant-details.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AccountService, TenantService } from '../data-object-service';
 import { Account, Tenant } from '../data-objects';
 import { MessageService } from '../message.service';
-import { Location } from '@angular/common'
+import { MatButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-tenant-details',
@@ -33,13 +33,14 @@ export class TenantDetailsComponent implements OnInit {
     description: ''
   }
 
+  @ViewChild('submitButton') submitButton: MatButton
 
   constructor(
     private tenantService: TenantService, 
     private accountService: AccountService,
     private messageService: MessageService,
     private route: ActivatedRoute,
-    private location: Location
+    private router: Router
   ) { }
 
   async getTenant(): Promise<void> {
@@ -55,6 +56,7 @@ export class TenantDetailsComponent implements OnInit {
   }
 
   async saveTenant() {
+    this.submitButton.disabled = true
     this.messageService.add("saveTenant")
     this.messageService.add(JSON.stringify(this.tenant, undefined, 4))
     if (this.tenant.id == 0) {
@@ -70,6 +72,7 @@ export class TenantDetailsComponent implements OnInit {
     } else {
       this.messageService.add("about to update existing tenant")
     }
+    this.router.navigate(['/tenants'])
   }
 
   ngOnInit(): void {