changes for details
This commit is contained in:
parent
5099e4ae63
commit
13c9cb4d96
@ -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 }
|
||||
]
|
||||
|
@ -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 },
|
||||
|
40
ui/hv2-ui/src/app/flat-details/flat-details.component.html
Normal file
40
ui/hv2-ui/src/app/flat-details/flat-details.component.html
Normal 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>
|
@ -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();
|
||||
});
|
||||
});
|
83
ui/hv2-ui/src/app/flat-details/flat-details.component.ts
Normal file
83
ui/hv2-ui/src/app/flat-details/flat-details.component.ts
Normal 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()
|
||||
}
|
||||
|
||||
}
|
@ -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>
|
||||
|
@ -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) }`)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,3 +1,8 @@
|
||||
table {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
@ -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();
|
||||
});
|
||||
});
|
@ -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()
|
||||
}
|
||||
|
||||
}
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user