123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
|
|
import { Operation } from './operation';
|
|
|
|
@Component({
|
|
selector: 'operation-form',
|
|
exportAs: 'operationForm',
|
|
template: `
|
|
<form novalidate (keyup.enter)="submit()" [formGroup]="form">
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 control-label" for="operation-date">Date</label>
|
|
|
|
<div class="col-sm-8"
|
|
[class.has-danger]="operationDate.errors">
|
|
<input class="form-control"
|
|
id="operation-date" formControlName="operationDate"
|
|
[textMask]="{mask: dateMask}"
|
|
placeholder="Operation date">
|
|
|
|
<div class="help-block text-danger" *ngIf="operationDate.errors">
|
|
<p *ngIf="operationDate.errors.required">The operation date is required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 control-label" for="label">Label</label>
|
|
|
|
<div class="col-sm-8"
|
|
[class.has-danger]="label.errors">
|
|
<input class="form-control"
|
|
id="label" formControlName="label"
|
|
placeholder="Label">
|
|
|
|
<div class="help-block text-danger" *ngIf="label.errors">
|
|
<p *ngIf="label.errors.required">The operation label is required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 control-label" for="value">Montant</label>
|
|
|
|
<div class="col-sm-8"
|
|
[class.has-errors]="value.errors">
|
|
<input class="form-control"
|
|
id="value" formControlName="value"
|
|
type="number" placeholder="Value">
|
|
|
|
<div class="help-block text-danger" *ngIf="value.errors">
|
|
<p *ngIf="value.errors.required">The operation value is required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
|
|
|
<div class="col-sm-8"
|
|
[class.has-errors]="category.errors">
|
|
<input class="form-control"
|
|
id="category" formControlName="category"
|
|
placeholder="Category">
|
|
|
|
<div class="help-block text-danger" *ngIf="category.errors">
|
|
<p *ngIf="category.errors.required">The operation category is required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`
|
|
})
|
|
export class OperationFormComponent implements OnInit {
|
|
public form: FormGroup;
|
|
@Input() operation: Operation;
|
|
@Output() submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
|
|
|
//dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
|
|
dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
|
|
|
|
constructor(private formBuilder: FormBuilder) {}
|
|
|
|
ngOnInit() {
|
|
this.form = this.formBuilder.group({
|
|
operationDate: ['', Validators.required],
|
|
label: ['', Validators.required],
|
|
value: ['', Validators.required],
|
|
category: ['', Validators.required],
|
|
});
|
|
|
|
this.form.patchValue({
|
|
operationDate: this.operation.operation_date,
|
|
label: this.operation.label,
|
|
value: this.operation.value,
|
|
category: this.operation.category,
|
|
});
|
|
}
|
|
|
|
submit() {
|
|
if(this.form.valid) {
|
|
this.submitEventEmitter.emit();
|
|
}
|
|
}
|
|
|
|
get operationDate() {
|
|
return this.form.get('operationDate');
|
|
}
|
|
|
|
get label() {
|
|
return this.form.get('label');
|
|
}
|
|
|
|
get value() {
|
|
return this.form.get('value');
|
|
}
|
|
|
|
get category() {
|
|
return this.form.get('category');
|
|
}
|
|
}
|