Commit 67be2d53 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

WIP: ajout du timepicker

parent db15a57a
......@@ -42,6 +42,11 @@
[placeholder]="attribute.placeholder_min" [criterion]="getCriterion(attribute.id)" (add)="add($event)">
</app-date>
</div>
<div *ngSwitchCase="'tm'">
<app-time class="criteria" [id]="attribute.id" [label]="attribute.form_label"
[criterion]="getCriterion(attribute.id)" (add)="add($event)">
</app-time>
</div>
<div *ngSwitchDefault>
{{ attribute.search_type }} search type not supported
</div>
......
<div class="form-group row">
<label class="col-3 col-form-label">{{label}}</label>
<div class="col">
<input type="text" class="form-control" [placeholder]="getPlaceholderMin()" [formControl]="fieldMin" autocomplete="off" />
<input type="text" class="form-control" [placeholder]="getPlaceholderMin()" [formControl]="fieldMin"
autocomplete="off" />
</div>
<div class="col">
<input type="text" class="form-control" [placeholder]="getPlaceholderMax()" [formControl]="fieldMax" autocomplete="off" />
<input type="text" class="form-control" [placeholder]="getPlaceholderMax()" [formControl]="fieldMax"
autocomplete="off" />
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!fieldMin.disabled" [hidden]="!fieldMin.value && !fieldMax.value" (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!fieldMin.disabled" [hidden]="!fieldMin.value && !fieldMax.value"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
</div>
</div>
</div>
\ No newline at end of file
......@@ -7,6 +7,7 @@
</div>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!checkboxes.disabled" [hidden]="!isChecked()" (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!checkboxes.disabled" [hidden]="!isChecked()"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
</div>
</div>
\ No newline at end of file
<div class="form-group row">
<label class="col-3 col-form-label">{{label}}</label>
<div class="col">
<input [attr.list]="getDatalistId()" type="text" class="form-control" [placeholder]="getPlaceholder()" [formControl]="field" autocomplete="off" />
<input [attr.list]="getDatalistId()" type="text" class="form-control" [placeholder]="getPlaceholder()"
[formControl]="field" autocomplete="off" />
<datalist [id]="getDatalistId()">
<option *ngFor="let option of options" [value]="option.value">
</datalist>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value" (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
</div>
</div>
</div>
\ No newline at end of file
......@@ -22,7 +22,6 @@ export class DateComponent {
addCriterion() {
const fd = new DateCriterion(this.id, this.field.value);
console.log(fd);
this.add.emit(fd);
}
......
......@@ -6,6 +6,7 @@ import { DatalistComponent } from './datalist.component';
import { RadioComponent } from './radio.component';
import { CheckboxComponent } from './checkbox.component';
import { DateComponent } from './date.component';
import { TimeComponent } from './time.component';
export const criteriaComponents = [
FieldComponent,
......@@ -15,5 +16,6 @@ export const criteriaComponents = [
DatalistComponent,
RadioComponent,
CheckboxComponent,
DateComponent
DateComponent,
TimeComponent
];
......@@ -2,11 +2,13 @@
<label class="col-3 col-form-label">{{label}}</label>
<div class="col">
<div *ngFor="let option of options" class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="cb_{{option.id}}" [formControl]="radio" [value]="option.id">
<input class="form-check-input" type="radio" id="cb_{{option.id}}" [formControl]="radio"
[value]="option.id">
<label class="form-check-label" for="cb_{{option.id}}">{{option.label}}</label>
</div>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!radio.disabled" [hidden]="!radio.value" (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!radio.disabled" [hidden]="!radio.value"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
</div>
</div>
\ No newline at end of file
......@@ -6,6 +6,7 @@
</ng-select>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!ms.disabled" [hidden]="!ms.value" (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!ms.disabled" [hidden]="!ms.value" (click)="addCriterion()"><i
class="fas fa-plus-circle"></i></button>
</div>
</div>
\ No newline at end of file
......@@ -6,6 +6,7 @@
</ng-select>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!se.disabled" [hidden]="!se.value" (click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
<button class="btn btn-outline-success" *ngIf="!se.disabled" [hidden]="!se.value" (click)="addCriterion()"><i
class="fas fa-plus-circle"></i></button>
</div>
</div>
\ No newline at end of file
timepicker.bs-timepicker-field {
width: 100px !important;
}
\ No newline at end of file
<div class="form-group row">
<label class="col-3 col-form-label">{{label}}</label>
<div class="col">
<form [formGroup]="form">
<timepicker class="time-field" [formControlName]="'time'" [showMeridian]="false" [showSpinners]="false"
(change)="change()"></timepicker>
</form>
</div>
<div class="col-2 align-self-center text-center">
<button class="btn btn-outline-success" *ngIf="!form.get('time').disabled" [hidden]="!isValidTime"
(click)="addCriterion()"><i class="fas fa-plus-circle"></i></button>
</div>
</div>
\ No newline at end of file
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Criterion, TimeCriterion } from '../../store/model';
@Component({
selector: 'app-time',
templateUrl: 'time.component.html',
styleUrls: ['time.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimeComponent {
@Input() id: number;
@Input() label: string;
@Input()
set criterion(criterion: Criterion) {
this.getDefault(criterion);
}
@Output() add: EventEmitter<TimeCriterion> = new EventEmitter();
form = new FormGroup({
time: new FormControl('')
});
isValidTime: boolean = false;
addCriterion() {
const fd = new TimeCriterion(this.id, this.form.get('time').value);
this.add.emit(fd);
}
getDefault(criterion: Criterion): void {
if (!criterion) {
this.form.get('time').setValue(null);
this.form.get('time').enable();
this.isValidTime = false;
} else {
const c = criterion as TimeCriterion;
this.form.get('time').setValue(c.value);
this.form.get('time').disable();
this.isValidTime = true;
}
}
change(): void {
if (!this.form.get('time').value) {
this.isValidTime = false;
} else {
this.isValidTime = true;
}
}
}
......@@ -6,4 +6,5 @@ export * from './checkbox-criterion.model';
export * from './radio-criterion.model';
export * from './select-multiple-criterion.model';
export * from './search-meta.model';
export * from './date-criterion.model';
\ No newline at end of file
export * from './date-criterion.model';
export * from './time-criterion.model';
\ No newline at end of file
import { Criterion } from './criterion.model';
export class TimeCriterion extends Criterion {
value: Date;
constructor(id: number, value: Date) {
super(id);
this.value = value;
}
printCriterion(): string {
return this.value.getHours() + ':' + this.value.getMinutes();
}
getCriterionStr(): string {
return this.id + ':gt:' + this.value.getHours() + '.' + this.value.getMinutes();
}
}
......@@ -4264,6 +4264,11 @@ neo-async@^2.5.0, neo-async@^2.6.0:
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
ng-pick-datetime@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/ng-pick-datetime/-/ng-pick-datetime-7.0.0.tgz#c78d1cfaee183691a4a44cd4f39c98f9c1d1595f"
integrity sha512-SbS+zKX6gOlYpgH8zDSx2EL32ak0Z0y1Ksu1ECP/FiwVBM2mHgbzdfyDYhMmKFB0GKn5yCwXTandR1FCQXe62w==
ngx-bootstrap@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/ngx-bootstrap/-/ngx-bootstrap-4.3.0.tgz#4c2213c082787701711c991ae728adaed035e637"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment