alahouze
/
accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Separate account form from modal.

This commit is contained in:
Alexis Lahouze 2017-07-20 22:52:33 +02:00
parent adfd61fac9
commit 60aa6310bb
3 changed files with 83 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/accounts/account.module.ts
View File

@ -13,6 +13,7 @@ import { AccountService } from './account.service';
import { AccountBalancesService } from './accountBalances.service';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component';
import { AccountFormComponent } from './accountForm.component';
@NgModule({
imports: [
@ -29,11 +30,13 @@ import { AccountEditModalComponent } from './accountEditModal.component';
],
declarations: [
AccountDeleteModalComponent,
AccountEditModalComponent
AccountEditModalComponent,
AccountFormComponent
],
entryComponents: [
AccountDeleteModalComponent,
AccountEditModalComponent
AccountEditModalComponent,
AccountFormComponent
]
})
export class AccountModule {}

55
src/accounts/accountEditModal.component.ts
View File

@ -1,5 +1,6 @@
// vim: set tw=80 ts=2 sw=2 sts=2:
import { Component, Input } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@ -13,57 +14,11 @@ import { Account } from './account';
</div>
<div class="modal-body" id="modal-body">
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #accountForm="ngForm">
<div class="form-group"
[ngClass]="{ 'has-error': name.errors }">
<label class="col-sm-4 control-label" for="name">Account name</label>
<div class="col-sm-8">
<input class="form-control"
type="text" placeholder="Account name"
id="name" name="name"
[(ngModel)]="account.name" #name="ngModel"
required>
<div class="help-block" *ngIf="name.errors && name.touched">
<p [hidden]="!name.errors.required">The account name is required.</p>
</div>
</div>
</div>
<div class="form-group"
[ngClass]="{ 'has-error': authorizedOverdraft.errors }">
<label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">-</div>
<input class="form-control"
type="number" placeholder="Authorized overdraft"
id="authorized-overdraft" name="authorized_overdraft"
[(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
required min="0">
<div class="input-group-addon">.00€</div>
</div>
<div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
<p [hidden]="!authorizedOverdraft.errors.required">
The authorized overdraft is required.
</p>
<p [hidden]="!authorizedOverdraft.errors.min">
The authorized overdraft must be equal or greater than 0.
</p>
</div>
</div>
</div>
</form>
<account-form [(account)]="account" (onFormChanged)="accountForm = $event"></account-form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
<button class="btn btn-primary" [disabled]="!accountForm?.form.valid" (click)="submit()">
Save
</button>
@ -74,7 +29,9 @@ import { Account } from './account';
`
})
export class AccountEditModalComponent {
@Input() account: Account
@Input() account: Account;
accountForm: NgForm;
constructor(public activeModal: NgbActiveModal) {}

72
src/accounts/accountForm.component.ts Normal file
View File

@ -0,0 +1,72 @@
// vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, ViewChild, AfterViewChecked, Input, Output, EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Logger } from '@nsalaun/ng-logger';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Account } from './account';
@Component({
selector: 'account-form',
template: `
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm">
<div class="form-group"
[ngClass]="{ 'has-error': name.errors }">
<label class="col-sm-4 control-label" for="name">Account name</label>
<div class="col-sm-8">
<input class="form-control"
type="text" placeholder="Account name"
id="name" name="name"
[(ngModel)]="account.name" #name="ngModel"
required>
<div class="help-block" *ngIf="name.errors && name.touched">
<p [hidden]="!name.errors.required">The account name is required.</p>
</div>
</div>
</div>
<div class="form-group"
[ngClass]="{ 'has-error': authorizedOverdraft.errors }">
<label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">-</div>
<input class="form-control"
type="number" placeholder="Authorized overdraft"
id="authorized-overdraft" name="authorized_overdraft"
[(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
required min="0">
<div class="input-group-addon">.00€</div>
</div>
<div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
<p [hidden]="!authorizedOverdraft.errors.required">
The authorized overdraft is required.
</p>
<p [hidden]="!authorizedOverdraft.errors.min">
The authorized overdraft must be equal or greater than 0.
</p>
</div>
</div>
</div>
</form>
`
})
export class AccountFormComponent implements AfterViewChecked {
@Input() account: Account;
@Output() onFormChanged: EventEmitter<NgForm> = new EventEmitter<NgForm>();
@ViewChild('form') form: NgForm;
constructor() {}
ngAfterViewChecked() {
this.onFormChanged.emit(this.form);
}
}