alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Migrate schedule edit form to Material.

Browse Source
This commit is contained in:
Alexis Lahouze 2017-09-22 00:27:49 +02:00
parent 2287ca8ad3
commit 73a43b6e2a
1 changed files with 54 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/scheduler/scheduleForm.component.ts
View File

@ -9,115 +9,73 @@ import { Schedule } from './schedule';
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>
<md-list>
<md-list-item>
<md-form-field>
<input mdInput formControlName="startDate"
[textMask]="{mask: dateMask}"
placeholder="Schedule start date">
<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">
<md-error *ngIf="startDate.errors?.required">The start date is required.</md-error>
</md-form-field>
</md-list-item>
<div class="help-block text-danger" *ngIf="startDate.errors">
<p *ngIf="startDate.errors.required">The start date is required.</p>
</div>
</div>
</div>
<md-list-item>
<md-form-field>
<input mdInput formControlName="stopDate"
[textMask]="{mask: dateMask}"
placeholder="Schedule stop date">
<div class="form-group row">
<label class="col-sm-4 control-label" for="stop-date">Date de fin (AAAA-MM-JJ)</label>
<md-error *ngIf="stopDate.errors?.required">The stop date is required.</md-error>
</md-form-field>
</md-list-item>
<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">
<md-list-item>
<md-form-field>
<input mdInput formControlName="day"
type="number" placeholder="Day">
<div class="help-block text-danger" *ngIf="stopDate.errors">
<p *ngIf="stopDate.errors.required">The stop date is required.</p>
</div>
</div>
</div>
<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>
<div class="form-group row">
<label class="col-sm-4 control-label" for="day">Jour</label>
<md-list-item>
<md-form-field>
<input mdInput formControlName="frequency"
type="number" placeholder="Frequency">
<div class="col-sm-8"
[class.has-danger]="day.errors">
<input class="form-control"
id="day" formControlName="day"
type="number" placeholder="Day">
<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>
<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>
<md-list-item>
<md-form-field>
<input mdInput formControlName="label" placeholder="Label">
<div class="form-group row">
<label class="col-sm-4 control-label" for="frequency">Fréquence</label>
<md-error *ngIf="label.errors?.required">The label is required.</md-error>
</md-form-field>
</md-list-item>
<div class="col-sm-8"
[class.has-danger]="frequency.errors">
<input class="form-control"
id="frequency" formControlName="frequency"
type="number" placeholder="Frequency">
<md-list-item>
<md-form-field>
<input mdInput formControlName="value" type="number" placeholder="Value">
<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>
<md-error *ngIf="value.errors?.required">The value is required.</md-error>
</md-form-field>
</md-list-item>
<div class="form-group row">
<label class="col-sm-4 control-label" for="label">Label</label>
<md-list-item>
<md-form-field>
<input mdInput formControlName="category"
placeholder="Category">
<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>
<md-error *ngIf="category.errors?.required">The category is required.</md-error>
</md-form-field>
</md-list-item>
</md-list>
</form>
`
})