changes for details

This commit is contained in:
Wolfgang Hottgenroth 2021-09-01 17:58:49 +02:00
parent 5099e4ae63
commit 13c9cb4d96
Signed by: wn
GPG Key ID: 6C1E5E531E0D5D7F
16 changed files with 347 additions and 22 deletions

View File

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

View File

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

View File

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

View File

@ -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();
});
});

View File

@ -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()
}
}

View File

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

View File

@ -1,31 +1,59 @@
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';
import { FlatService } from '../data-object-service';
import { Flat } from '../data-objects';
import { FlatService, PremiseService } from '../data-object-service';
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) }`)
}
}

View File

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

View File

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

View File

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

View File

@ -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();
});
});

View File

@ -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()
}
}

View File

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

View File

@ -1,9 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, ViewChild } from '@angular/core';
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 {