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

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

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

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

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