Improve Account form and edit modal.
This commit is contained in:
parent
58f1abce21
commit
e68db9f54a
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
import { HttpClientModule } from '@angular/common/http';
|
import { HttpClientModule } from '@angular/common/http';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
@ -24,7 +24,7 @@ import { AccountListState } from './account.states'
|
|||||||
imports: [
|
imports: [
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
CommonModule,
|
CommonModule,
|
||||||
FormsModule,
|
ReactiveFormsModule,
|
||||||
RouterModule.forChild([
|
RouterModule.forChild([
|
||||||
AccountListState
|
AccountListState
|
||||||
]),
|
]),
|
||||||
|
@ -1,10 +1,11 @@
|
|||||||
// vim: set tw=80 ts=2 sw=2 sts=2:
|
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||||||
import { Component, Input } from '@angular/core';
|
import { Component, Input, ViewChild } from '@angular/core';
|
||||||
import { NgForm } from '@angular/forms';
|
import { NgForm } from '@angular/forms';
|
||||||
|
|
||||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||||
|
|
||||||
import { Account } from './account';
|
import { Account } from './account';
|
||||||
|
import { AccountFormComponent } from './accountForm.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'account-edit-modal',
|
selector: 'account-edit-modal',
|
||||||
@ -14,11 +15,11 @@ import { Account } from './account';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body" id="modal-body">
|
<div class="modal-body" id="modal-body">
|
||||||
<account-form [(account)]="account" (onValid)="valid=$event"></account-form>
|
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="btn btn-primary" [disabled]="!valid" (click)="submit()">
|
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@ -30,8 +31,7 @@ import { Account } from './account';
|
|||||||
})
|
})
|
||||||
export class AccountEditModalComponent {
|
export class AccountEditModalComponent {
|
||||||
@Input() account: Account;
|
@Input() account: Account;
|
||||||
|
@ViewChild('accountForm') accountForm: AccountFormComponent;
|
||||||
valid: boolean = false;
|
|
||||||
|
|
||||||
constructor(private activeModal: NgbActiveModal) {}
|
constructor(private activeModal: NgbActiveModal) {}
|
||||||
|
|
||||||
@ -44,7 +44,14 @@ export class AccountEditModalComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
submit(): void {
|
submit(): void {
|
||||||
this.activeModal.close(this.account);
|
let formModel = this.accountForm.form.value;
|
||||||
|
let account = new Account();
|
||||||
|
|
||||||
|
account.id = this.account.id;
|
||||||
|
account.name = formModel.name;
|
||||||
|
account.authorized_overdraft = formModel.authorizedOverdraft;
|
||||||
|
|
||||||
|
this.activeModal.close(account);
|
||||||
}
|
}
|
||||||
|
|
||||||
cancel(): void {
|
cancel(): void {
|
||||||
|
@ -1,56 +1,51 @@
|
|||||||
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
||||||
import {
|
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
||||||
AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||||
} from '@angular/core';
|
|
||||||
import { NgForm } from '@angular/forms';
|
|
||||||
|
|
||||||
import { Logger } from '@nsalaun/ng-logger';
|
import { Logger } from '@nsalaun/ng-logger';
|
||||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
|
||||||
|
|
||||||
import { Account } from './account';
|
import { Account } from './account';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'account-form',
|
selector: 'account-form',
|
||||||
|
exportAs: 'accountForm',
|
||||||
template: `
|
template: `
|
||||||
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm">
|
<form class="form-horizontal simple-form" novalidate
|
||||||
<div class="form-group"
|
(ngSubmit)="submit()" [formGroup]="form">
|
||||||
[ngClass]="{ 'has-error': name.errors }">
|
<div class="form-group row">
|
||||||
<label class="col-sm-4 control-label" for="name">Account name</label>
|
<label class="col-sm-5 control-label" [for]="name.key">Account name</label>
|
||||||
|
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-7"
|
||||||
|
[ngClass]="{'has-danger': name.errors}">
|
||||||
<input class="form-control"
|
<input class="form-control"
|
||||||
type="text" placeholder="Account name"
|
id="name" formControlName="name"
|
||||||
id="name" name="name"
|
placeholder="Account name">
|
||||||
[(ngModel)]="account.name" #name="ngModel"
|
|
||||||
required>
|
|
||||||
|
|
||||||
<div class="help-block" *ngIf="name.errors && name.touched">
|
<div class="help-block text-danger" *ngIf="name.errors">
|
||||||
<p [hidden]="!name.errors.required">The account name is required.</p>
|
<p *ngIf="name.errors.required">The account name is required.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group"
|
<div class="form-group row">
|
||||||
[ngClass]="{ 'has-error': authorizedOverdraft.errors }">
|
<label class="col-sm-5 control-label" for="authorized-overdraft">Authorized overdraft</label>
|
||||||
<label class="col-sm-4 control-label" for="authorized-overdraft">Authorized overdraft</label>
|
|
||||||
|
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-7"
|
||||||
|
[ngClass]="{'has-danger': authorizedOverdraft.errors}">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input class="form-control"
|
<input class="form-control"
|
||||||
type="number" placeholder="Authorized overdraft"
|
id="authorized-overdraft" formControlName="authorizedOverdraft"
|
||||||
id="authorized-overdraft" name="authorized_overdraft"
|
placeholder="Authorized overdraft">
|
||||||
[(ngModel)]="account.authorized_overdraft" #authorizedOverdraft="ngModel"
|
|
||||||
required max="0">
|
|
||||||
|
|
||||||
<div class="input-group-addon">.00€</div>
|
<div class="input-group-addon">.00€</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="help-block" *ngIf="authorizedOverdraft.errors && authorizedOverdraft.touched">
|
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
|
||||||
<p [hidden]="!authorizedOverdraft.errors.required">
|
<p *ngIf="authorizedOverdraft.errors.required">
|
||||||
The authorized overdraft is required.
|
The authorized overdraft is required.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p [hidden]="!authorizedOverdraft.errors.max">
|
<p *ngIf="authorizedOverdraft.errors.max">
|
||||||
The authorized overdraft must be less than or equal to 0.
|
The authorized overdraft must be less than or equal to 0.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@ -59,14 +54,34 @@ import { Account } from './account';
|
|||||||
</form>
|
</form>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
export class AccountFormComponent implements AfterViewChecked {
|
export class AccountFormComponent implements OnInit {
|
||||||
|
public form: FormGroup;
|
||||||
@Input() account: Account;
|
@Input() account: Account;
|
||||||
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
|
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
||||||
@ViewChild('form') form: NgForm;
|
|
||||||
|
|
||||||
constructor() {}
|
constructor(private formBuilder: FormBuilder) {}
|
||||||
|
|
||||||
ngAfterViewChecked() {
|
ngOnInit() {
|
||||||
this.onValid.emit(this.form.form.valid);
|
this.form = this.formBuilder.group({
|
||||||
|
name: ['', Validators.required],
|
||||||
|
authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
|
||||||
|
});
|
||||||
|
|
||||||
|
this.form.patchValue({
|
||||||
|
name: this.account.name,
|
||||||
|
authorizedOverdraft: this.account.authorized_overdraft
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
this.submitEventEmitter.emit();
|
||||||
|
}
|
||||||
|
|
||||||
|
get name() {
|
||||||
|
return this.form.get('name');
|
||||||
|
}
|
||||||
|
|
||||||
|
get authorizedOverdraft() {
|
||||||
|
return this.form.get('authorizedOverdraft');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user