accountant-ui/src/scheduler/scheduleForm.component.ts

// 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">
  <div class="form-group row">
    <label class="col-sm-4 control-label" for="start-date">Date de début (AAAA-MM-JJ)</label>

    <div class="col-sm-8"
      [class.has-danger]="startDate.errors">
      <input class="form-control"
        id="start-date" formControlName="startDate"
        [textMask]="{mask: dateMask}"
        placeholder="Schedule start date">

      <div class="help-block text-danger" *ngIf="startDate.errors">
        <p *ngIf="startDate.errors.required">The start date is required.</p>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-4 control-label" for="stop-date">Date de fin (AAAA-MM-JJ)</label>

    <div class="col-sm-8"
      [class.has-danger]="stopDate.errors">
      <input class="form-control" 
        id="stop-date" formControlName="stopDate"
        [textMask]="{mask: dateMask}"
        placeholder="Schedule stop date">

      <div class="help-block text-danger" *ngIf="stopDate.errors">
        <p *ngIf="stopDate.errors.required">The stop date is required.</p>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-4 control-label" for="day">Jour</label>

    <div class="col-sm-8"
      [class.has-danger]="day.errors">
      <input class="form-control"
        id="day" formControlName="day"
        type="number" placeholder="Day">

      <div class="help-block text-danger" *ngIf="day.errors">
        <p *ngIf="day.errors.required">The day is required.</p>
        <p *ngIf="day.errors.min">The day must be greater than 0.</p>
        <p *ngIf="day.errors.max">The day must be less than or equal to 31.</p>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-4 control-label" for="frequency">Fréquence</label>

    <div class="col-sm-8"
      [class.has-danger]="frequency.errors">
      <input class="form-control"
        id="frequency" formControlName="frequency"
        type="number" placeholder="Frequency">

      <div class="help-block text-danger" *ngIf="frequency.errors">
        <p *ngIf="frequency.errors.required">The frequency is required.</p>
        <p *ngIf="frequency.errors.min">The frequency must be positive.</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 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-danger]="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 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-danger]="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 category is required.</p>
      </div>
    </div>
  </div>
</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');
  }
}