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

Finish migration of account edit form to material.

Browse Source
This commit is contained in:
Alexis Lahouze 2017-09-16 22:03:12 +02:00
parent b6d710ec67
commit 2a07506005
3 changed files with 33 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,13 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MdButtonModule, MdDialogModule, MdTableModule } from '@angular/material';
import {
MdButtonModule,
MdDialogModule,
MdInputModule,
MdListModule,
MdTableModule,
} from '@angular/material';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
@ -31,6 +37,8 @@ import { AccountListState } from './account.states'
]),
MdButtonModule,
MdDialogModule,
MdInputModule,
MdListModule,
MdTableModule,
NgLoggerModule,
ToastrModule,

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

@ -8,7 +8,7 @@ import { AccountFormComponent } from './accountForm.component';
@Component({
selector: 'account-edit-modal',
template: `
<h2 md-dialog-tiitle>{{ title() }}</h2>
<h3 md-dialog-tiitle>{{ title() }}</h3>
<md-dialog-content>
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
@ -50,7 +50,7 @@ export class AccountEditModalComponent {
account.id = this.account.id;
account.name = formModel.name;
account.authorized_overdraft = formModel.authorizedOverdraft;
account.authorized_overdraft = -formModel.authorizedOverdraft;
this.dialogRef.close(account);
}

62
src/accounts/accountForm.component.ts
View File

@ -8,51 +8,33 @@ import { Account } from './account';
selector: 'account-form',
exportAs: 'accountForm',
template: `
<form novalidate
(keyup.enter)="submit()" [formGroup]="form">
<div class="form-group row">
<label class="col-sm-4 control-label" for="name">
Account name
</label>
<form novalidate (keyup.enter)="submit()" [formGroup]="form">
<md-list>
<md-list-item>
<md-form-field>
<input mdInput formControlName="name" placeholder="Account name">
<div class="col-sm-8"
[class.has-danger]="name.errors">
<input class="form-control"
id="name" formControlName="name"
placeholder="Account name">
<md-error *ngIf="name.errors?.required">The account name is required.</md-error>
</md-form-field>
</md-list-item>
<div class="help-block text-danger" *ngIf="name.errors">
<p *ngIf="name.errors.required">The account name is required.</p>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label" for="authorized-overdraft">
Authorized overdraft
</label>
<div class="col-sm-8"
[class.has-danger]="authorizedOverdraft.errors">
<div class="input-group">
<input class="form-control"
id="authorized-overdraft" formControlName="authorizedOverdraft"
<md-list-item>
<md-form-field>
<span mdPrefix>-</span>
<input mdInput formControlName="authorizedOverdraft"
placeholder="Authorized overdraft">
<span mdSuffix>.00€</span>
<div class="input-group-addon">.00€</div>
</div>
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
<p *ngIf="authorizedOverdraft.errors.required">
<md-error *ngIf="authorizedOverdraft.errors?.required">
The authorized overdraft is required.
</p>
</md-error>
<p *ngIf="authorizedOverdraft.errors.max">
<md-error *ngIf="authorizedOverdraft.errors?.min">
The authorized overdraft must be less than or equal to 0.
</p>
</div>
</div>
</div>
</md-error>
</md-form-field>
</md-list-item>
</md-list>
</form>
`
})
@ -66,12 +48,12 @@ export class AccountFormComponent implements OnInit {
ngOnInit() {
this.form = this.formBuilder.group({
name: ['', Validators.required],
authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
authorizedOverdraft: ['', [Validators.required, Validators.min(0)]],
});
this.form.patchValue({
name: this.account.name,
authorizedOverdraft: this.account.authorized_overdraft
authorizedOverdraft: -this.account.authorized_overdraft
});
}