87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
import { AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
import { NgForm } from '@angular/forms';
|
|
|
|
import { Logger } from '@nsalaun/ng-logger';
|
|
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
|
|
|
import { Schedule } from './schedule';
|
|
|
|
@Component({
|
|
selector: 'schedule-form',
|
|
template: `
|
|
<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm">
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="start-date">Date de début (AAAA-MM-JJ)</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="start-date" name="start_date"
|
|
[(ngModel)]="schedule.start_date" [textMask]="{mask: dateMask}"
|
|
placeholder="Schedule start date">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="stop-date">Date de fin (AAAA-MM-JJ)</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="stop-date" name="stop_date"
|
|
[(ngModel)]="schedule.stop_date" [textMask]="{mask: dateMask}"
|
|
placeholder="Schedule stop date">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="day">Jour</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="day" name="day"
|
|
[(ngModel)]="schedule.day" type="number" placeholder="Day">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="frequency" name="frequency"
|
|
[(ngModel)]="schedule.frequency" type="number" placeholder="Frequency">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="label">Label</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="label" name="label"
|
|
[(ngModel)]="schedule.label" type="text" placeholder="Label">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="value">Montant</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="value" name="value"
|
|
[(ngModel)]="schedule.value" type="number" placeholder="Value">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-sm-4 control-label" for="category">Catégorie</label>
|
|
<div class="col-sm-8">
|
|
<input class="form-control" id="category" name="category"
|
|
[(ngModel)]="schedule.category" type="text" placeholder="Category">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`
|
|
})
|
|
export class ScheduleFormComponent implements AfterViewChecked {
|
|
@Input() schedule: Schedule;
|
|
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
@ViewChild('form') form: NgForm;
|
|
|
|
dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
|
|
|
|
constructor() {}
|
|
|
|
ngAfterViewChecked() {
|
|
this.onValid.emit(this.form.form.valid);
|
|
}
|
|
}
|