97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
|
// vim: set tw=80 ts=2 sw=2 sts=2:
|
||
|
|
import { Component, Input } from '@angular/core';
|
||
|
|
|
||
|
|
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||
|
|
|
||
|
|
import { Account } from './account';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'account-edit-modal',
|
||
|
|
template: `
|
||
|
|
<div class="modal-header">
|
||
|
|
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
|
||
|
|
Save
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button class="btn btn-default" (click)="cancel()">
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
export class AccountEditModalComponent {
|
||
|
|
@Input() account: Account
|
||
|
|
|
||
|
|
constructor(public activeModal: NgbActiveModal) {}
|
||
|
|
|
||
|
|
title(): string {
|
||
|
|
if(this.account.id) {
|
||
|
|
return "Account #" + this.account.id;
|
||
|
|
} else {
|
||
|
|
return "New account";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
submit(): void {
|
||
|
|
this.activeModal.close(this.account);
|
||
|
|
}
|
||
|
|
|
||
|
|
cancel(): void {
|
||
|
|
this.activeModal.dismiss("closed");
|
||
|
|
}
|
||
|
|
}
|