2021-08-30 19:00:27 +02:00
< section class = "mat-typography" >
< mat-card class = "defaultCard" >
< mat-card-header >
< mat-card-title >
2021-09-08 18:47:05 +02:00
{{tenant?.firstname}} {{tenant?.lastname}}
2021-08-30 19:00:27 +02:00
< / mat-card-title >
< / mat-card-header >
2021-09-08 18:47:05 +02:00
< mat-card-content >
2021-09-09 11:36:01 +02:00
< mat-accordion >
< mat-expansion-panel ( opened ) = " collapseTenantDetails = true"
(closed)="collapseTenantDetails = false">
< mat-expansion-panel-header >
< mat-panel-title * ngIf = "!collapseTenantDetails" >
Details
< / mat-panel-title >
< mat-panel-description >
2021-09-08 18:47:05 +02:00
< / mat-panel-description >
2021-09-09 11:36:01 +02:00
< / mat-expansion-panel-header >
2021-08-30 19:00:27 +02:00
< div >
2021-09-09 11:36:01 +02:00
< form ( ngSubmit ) = " saveTenant ( ) " >
< div >
< mat-form-field appearance = "outline" >
< mat-label > Anrede< / mat-label >
< input matInput name = "salutation" [ ( ngModel ) ] = " tenant . salutation " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Vorname< / mat-label >
< input matInput name = "firstname" [ ( ngModel ) ] = " tenant . firstname " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Nachname< / mat-label >
< input matInput name = "lastname" [ ( ngModel ) ] = " tenant . lastname " / >
< / mat-form-field >
< / div > < div >
< mat-form-field appearance = "outline" >
< mat-label > Adresse 1 (Straße)< / mat-label >
< input matInput name = "address" [ ( ngModel ) ] = " tenant . address1 " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Adresse 2< / mat-label >
< input matInput name = "address2" [ ( ngModel ) ] = " tenant . address2 " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Adresse 3< / mat-label >
< input matInput name = "address3" [ ( ngModel ) ] = " tenant . address3 " / >
< / mat-form-field >
< / div > < div >
< mat-form-field appearance = "outline" >
< mat-label > PLZ< / mat-label >
< input matInput name = "zip" [ ( ngModel ) ] = " tenant . zip " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Ort< / mat-label >
< input matInput name = "city" [ ( ngModel ) ] = " tenant . city " / >
< / mat-form-field >
< / div > < div >
< mat-form-field appearance = "outline" >
< mat-label > Telefon 1< / mat-label >
< input matInput name = "phone1" [ ( ngModel ) ] = " tenant . phone1 " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Telefon 2< / mat-label >
< input matInput name = "phone2" [ ( ngModel ) ] = " tenant . phone2 " / >
< / mat-form-field >
< / div > < div >
< mat-form-field appearance = "outline" >
< mat-label > IBAN< / mat-label >
< input matInput name = "iban" [ ( ngModel ) ] = " tenant . iban " / >
< / mat-form-field >
2021-09-09 18:43:27 +02:00
< / div >
<!--
< div >
2021-09-09 11:36:01 +02:00
< mat-form-field appearance = "outline" >
< mat-label > Account ID< / mat-label >
< input matInput name = "account_id" [ readonly ] = " true " [ ngModel ] = " account . id " / >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Account Description< / mat-label >
< input matInput name = "account_desc" [ readonly ] = " true " [ ngModel ] = " account . description " / >
< / mat-form-field >
< / div >
2021-09-09 18:43:27 +02:00
-->
2021-09-09 11:36:01 +02:00
< button # submitButton type = "submit" mat-raised-button color = "primary" > Speichern< / button >
< / form >
2021-08-30 19:00:27 +02:00
< / div >
2021-09-09 11:36:01 +02:00
< / mat-expansion-panel >
< / mat-accordion >
2021-08-30 19:00:27 +02:00
< / mat-card-content >
< / mat-card >
2021-09-08 18:47:05 +02:00
2021-09-09 18:43:27 +02:00
< app-note [ selectedTenantId ] = " tenantId " > < / app-note >
2021-09-08 18:13:59 +02:00
< mat-card class = "defaultCard" >
< mat-card-header >
< mat-card-title >
Mietverhältnisse
< / mat-card-title >
< / mat-card-header >
< mat-card-content >
2021-09-08 18:47:05 +02:00
< mat-accordion >
2021-09-11 17:07:39 +02:00
< mat-expansion-panel # panelTenancies
(opened)="collapseTenancies = true"
2021-09-08 18:47:05 +02:00
(closed)="collapseTenancies = false">
2021-09-09 11:36:01 +02:00
< mat-expansion-panel-header >
< mat-panel-title * ngIf = "!collapseTenancies" >
Übersicht
< / mat-panel-title >
< mat-panel-description >
< / mat-panel-description >
< / mat-expansion-panel-header >
< div >
< table mat-table [ dataSource ] = " tenancyDataSource " # zftable >
< ng-container matColumnDef = "description" >
< th mat-header-cell * matHeaderCellDef > Beschreibung< / th >
< td mat-cell * matCellDef = "let element" > {{element.rawTenancy.description}}< / td >
< / ng-container >
< ng-container matColumnDef = "flat" >
< th mat-header-cell * matHeaderCellDef > Wohnung< / th >
< td mat-cell * matCellDef = "let element" > {{element.flat}}< / td >
< / ng-container >
< ng-container matColumnDef = "parking" >
< th mat-header-cell * matHeaderCellDef > Garage< / th >
< td mat-cell * matCellDef = "let element" > {{element.parking}}< / td >
< / ng-container >
< ng-container matColumnDef = "commercial_premise" >
< th mat-header-cell * matHeaderCellDef > Büro< / th >
< td mat-cell * matCellDef = "let element" > {{element.commercial_premise}}< / td >
< / ng-container >
< ng-container matColumnDef = "startdate" >
< th mat-header-cell * matHeaderCellDef > Beginn< / th >
2021-09-10 19:07:08 +02:00
< td mat-cell * matCellDef = "let element" > {{element.rawTenancy.startdate | date}}< / td >
2021-09-09 11:36:01 +02:00
< / ng-container >
< ng-container matColumnDef = "enddate" >
< th mat-header-cell * matHeaderCellDef > Ende< / th >
2021-09-10 19:07:08 +02:00
< td mat-cell * matCellDef = "let element" > {{element.rawTenancy.enddate | date}}< / td >
2021-09-09 11:36:01 +02:00
< / ng-container >
< tr mat-header-row * matHeaderRowDef = "tenancyDisplayColumns" > < / tr >
< tr mat-row * matRowDef = "let row; columns: tenancyDisplayColumns;" ( click ) = " setSelectedTenancy ( row . rawTenancy ) " > < / tr >
< / table >
< / div >
< / mat-expansion-panel >
2021-09-11 17:07:39 +02:00
< mat-expansion-panel # panelAddMapping
(opened)="openTenancyMapping()"
(closed)="closeTenancyMapping()">
< mat-expansion-panel-header >
< mat-panel-title * ngIf = "!collapseTenancyMapping" >
Mietverhältnis hinzufügen
< / mat-panel-title >
< mat-panel-description >
< / mat-panel-description >
< / mat-expansion-panel-header >
< div >
< form ( ngSubmit ) = " addTenancyToTenant ( ) " >
< div >
< mat-form-field appearance = "outline" id = "setenddatefield" >
< mat-label > Beginn< / mat-label >
< input matInput name = "startdate" [ ( ngModel ) ] = " newTenancy . startdate " [ matDatepicker ] = " newtenancystartdatepicker " / >
< mat-datepicker-toggle matSuffix [ for ] = " newtenancystartdatepicker " > < / mat-datepicker-toggle >
< mat-datepicker # newtenancystartdatepicker > < / mat-datepicker >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Beschreibung< / mat-label >
< input matInput name = "description" [ ( ngModel ) ] = " newTenancy . description " / >
< / mat-form-field >
< / div > < div >
< mat-form-field appearance = "outline" >
< mat-select # mapSelect [ ( ngModel ) ] = " newTenancy . flat " name = "flat" ( selectionChange ) = " flatSelected ( ) " >
< mat-label > Wohnung< / mat-label >
< mat-option * ngFor = "let p of allFlats" [ value ] = " p . rawFlat . id " > {{p.rawFlat.description}} {{p.premise}}< / mat-option >
< / mat-select >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Garage< / mat-label >
< mat-select # mapSelect [ ( ngModel ) ] = " newTenancy . parking " name = "parking" ( selectionChange ) = " parkingSelected ( ) " >
< mat-option * ngFor = "let p of allParkings" [ value ] = " p . rawParking . id " > {{p.rawParking.description}} {{p.premise}}< / mat-option >
< / mat-select >
< / mat-form-field >
< mat-form-field appearance = "outline" >
< mat-label > Büro< / mat-label >
< mat-select # mapSelect [ ( ngModel ) ] = " newTenancy . commercial_premise " name = "commercial_premise" ( selectionChange ) = " commercialPremiseSelected ( ) " >
< mat-option * ngFor = "let p of allCommercialPremises" [ value ] = " p . rawCommercialPremise . id " > {{p.rawCommercialPremise.description}} {{p.premise}}< / mat-option >
< / mat-select >
< / mat-form-field >
< / div >
< button # addTenancyToTenantButton type = "submit" mat-raised-button color = "primary" > Anlegen< / button >
< / form >
< / div >
< / mat-expansion-panel >
2021-09-09 11:36:01 +02:00
< / mat-accordion >
< / mat-card-content >
< / mat-card >
< mat-card class = "defaultCard" * ngIf = "selectedTenancy" >
< mat-card-header >
< mat-card-title >
< span > {{selectedTenancy.description}}< / span >
< button mat-icon-button color = "accent" aria-label = "Schließen" ( click ) = " clearSelectedTenancy ( ) " >
< mat-icon > done< / mat-icon >
< / button >
< / mat-card-title >
< / mat-card-header >
< mat-card-content >
Mietdetails: {{selectedTenancy.description}}
< div >
< form ( ngSubmit ) = " setTenancyEndData ( ) " >
< mat-form-field appearance = "outline" id = "setenddatefield" >
< mat-label > Ende< / mat-label >
< input matInput name = "enddate" [ ( ngModel ) ] = " selectedTenancy . enddate " [ matDatepicker ] = " enddatepicker " / >
< mat-datepicker-toggle matSuffix [ for ] = " enddatepicker " > < / mat-datepicker-toggle >
< mat-datepicker # enddatepicker > < / mat-datepicker >
< / mat-form-field >
< button # setTenancyEndDataButton type = "submit" mat-raised-button color = "primary" > Enddatum setzen< / button >
< / form >
< / div >
< div >
< table mat-table [ dataSource ] = " mappedFeesDataSource " # zftable >
2021-09-08 18:13:59 +02:00
< ng-container matColumnDef = "description" >
< th mat-header-cell * matHeaderCellDef > Beschreibung< / th >
2021-09-09 11:36:01 +02:00
< td mat-cell * matCellDef = "let element" > {{element.description}}< / td >
2021-09-08 18:13:59 +02:00
< / ng-container >
2021-09-09 11:36:01 +02:00
< ng-container matColumnDef = "amount" >
< th mat-header-cell * matHeaderCellDef > Betrag< / th >
2021-09-10 19:07:08 +02:00
< td mat-cell * matCellDef = "let element" > {{element.amount | number:'1.2-2'}} €< / td >
2021-09-08 18:13:59 +02:00
< / ng-container >
2021-09-09 11:36:01 +02:00
< ng-container matColumnDef = "fee_type" >
< th mat-header-cell * matHeaderCellDef > Typ< / th >
2021-09-09 15:49:49 +02:00
< td mat-cell * matCellDef = "let element" > {{element.fee_type}}< / td >
2021-09-08 18:13:59 +02:00
< / ng-container >
< ng-container matColumnDef = "startdate" >
< th mat-header-cell * matHeaderCellDef > Beginn< / th >
2021-09-10 19:07:08 +02:00
< td mat-cell * matCellDef = "let element" > {{element.startdate | date}}< / td >
2021-09-08 18:13:59 +02:00
< / ng-container >
< ng-container matColumnDef = "enddate" >
< th mat-header-cell * matHeaderCellDef > Ende< / th >
2021-09-10 19:07:08 +02:00
< td mat-cell * matCellDef = "let element" > {{element.enddate | date}}< / td >
2021-09-08 18:13:59 +02:00
< / ng-container >
2021-09-09 11:36:01 +02:00
< tr mat-header-row * matHeaderRowDef = "mappedFeesDisplayedColumns" > < / tr >
< tr mat-row * matRowDef = "let row; columns: mappedFeesDisplayedColumns;" > < / tr >
2021-09-08 18:13:59 +02:00
< / table >
< / div >
2021-09-09 11:36:01 +02:00
< div >
< form ( ngSubmit ) = " addFee ( ) " >
< mat-form-field appearance = "standard" id = "addfeefield" >
< mat-label > Mietsatz< / mat-label >
< mat-select # mapSelect [ ( ngModel ) ] = " selectedFee " name = "fee" >
< mat-option * ngFor = "let p of allFees" [ value ] = " p . id " > {{p.description}} {{p.amount}} {{p.startdate}}< / mat-option >
< / mat-select >
< / mat-form-field >
< button # mapFeeButton type = "submit" mat-raised-button color = "primary" > Zuordnen< / button >
< / form >
< / div >
< / mat-card-content >
2021-09-08 18:13:59 +02:00
< / mat-card >
2021-09-10 11:59:08 +02:00
< app-account [ selectedAccountId ] = " tenant . account " [ shallBeRentPayment ] = " true " > < / app-account >
2021-09-09 15:49:49 +02:00
2021-08-30 19:00:27 +02:00
< / section >