148 lines
4.1 KiB
TypeScript
148 lines
4.1 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
|
|
import { Schedule } from './schedule';
|
|
|
|
@Component({
|
|
selector: 'schedule-form',
|
|
exportAs: 'scheduleForm',
|
|
template: `
|
|
<form novalidate (keyup.enter)="submit()" [formGroup]="form">
|
|
<md-list>
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="startDate"
|
|
[textMask]="{mask: dateMask}"
|
|
placeholder="Schedule start date">
|
|
|
|
<md-error *ngIf="startDate.errors?.required">The start date is required.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="stopDate"
|
|
[textMask]="{mask: dateMask}"
|
|
placeholder="Schedule stop date">
|
|
|
|
<md-error *ngIf="stopDate.errors?.required">The stop date is required.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="day"
|
|
type="number" placeholder="Day">
|
|
|
|
<md-error *ngIf="day.errors?.required">The day is required.</md-error>
|
|
<md-error *ngIf="day.errors?.min">The day must be greater than 0.</md-error>
|
|
<md-error *ngIf="day.errors?.max">The day must be less than or equal to 31.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="frequency"
|
|
type="number" placeholder="Frequency">
|
|
|
|
<md-error *ngIf="frequency.errors?.required">The frequency is required.</md-error>
|
|
<md-error *ngIf="frequency.errors?.min">The frequency must be positive.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="label" placeholder="Label">
|
|
|
|
<md-error *ngIf="label.errors?.required">The label is required.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="value" type="number" placeholder="Value">
|
|
|
|
<md-error *ngIf="value.errors?.required">The value is required.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-form-field>
|
|
<input mdInput formControlName="category"
|
|
placeholder="Category">
|
|
|
|
<md-error *ngIf="category.errors?.required">The category is required.</md-error>
|
|
</md-form-field>
|
|
</md-list-item>
|
|
</md-list>
|
|
</form>
|
|
`
|
|
})
|
|
export class ScheduleFormComponent implements OnInit {
|
|
public form: FormGroup;
|
|
@Input() schedule: Schedule;
|
|
@Output('submit') 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({
|
|
startDate: ['', Validators.required],
|
|
stopDate: ['', Validators.required],
|
|
day: ['', [Validators.required, Validators.min(1), Validators.max(31)]],
|
|
frequency: ['', [Validators.required, Validators.min(0)]],
|
|
label: ['', Validators.required],
|
|
value: ['', Validators.required],
|
|
category: ['', Validators.required],
|
|
});
|
|
|
|
this.form.patchValue({
|
|
startDate: this.schedule.start_date,
|
|
stopDate: this.schedule.stop_date,
|
|
day: this.schedule.day,
|
|
frequency: this.schedule.frequency,
|
|
label: this.schedule.label,
|
|
value: this.schedule.value,
|
|
category: this.schedule.category,
|
|
});
|
|
}
|
|
|
|
submit() {
|
|
if(this.form.valid) {
|
|
this.submitEventEmitter.emit();
|
|
}
|
|
}
|
|
|
|
get startDate() {
|
|
return this.form.get('startDate');
|
|
}
|
|
|
|
get stopDate() {
|
|
return this.form.get('stopDate');
|
|
}
|
|
|
|
get day() {
|
|
return this.form.get('day');
|
|
}
|
|
|
|
get frequency() {
|
|
return this.form.get('frequency');
|
|
}
|
|
|
|
get label() {
|
|
return this.form.get('label');
|
|
}
|
|
|
|
get value() {
|
|
return this.form.get('value');
|
|
}
|
|
|
|
get category() {
|
|
return this.form.get('category');
|
|
}
|
|
}
|