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

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

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