From 67be2d53a6928948b76ba6af38f9d6c9cf778fd1 Mon Sep 17 00:00:00 2001
From: Tifenn GUILLAS <tifenn.guillas@lam.fr>
Date: Thu, 27 Jun 2019 16:27:55 +0200
Subject: [PATCH] WIP: ajout du timepicker
---
.../criteria-by-family.component.html | 5 ++
.../criteria/between.component.html | 11 ++--
.../criteria/checkbox.component.html | 3 +-
.../criteria/datalist.component.html | 8 +--
.../components/criteria/date.component.ts | 1 -
src/app/search/components/criteria/index.ts | 4 +-
.../components/criteria/radio.component.html | 6 ++-
.../criteria/select-multiple.component.html | 3 +-
.../components/criteria/select.component.html | 3 +-
.../components/criteria/time.component.css | 3 ++
.../components/criteria/time.component.html | 13 +++++
.../components/criteria/time.component.ts | 51 +++++++++++++++++++
src/app/search/store/model/index.ts | 3 +-
.../store/model/time-criterion.model.ts | 18 +++++++
yarn.lock | 5 ++
15 files changed, 122 insertions(+), 15 deletions(-)
create mode 100644 src/app/search/components/criteria/time.component.css
create mode 100644 src/app/search/components/criteria/time.component.html
create mode 100644 src/app/search/components/criteria/time.component.ts
create mode 100644 src/app/search/store/model/time-criterion.model.ts
diff --git a/src/app/search/components/criteria-by-family.component.html b/src/app/search/components/criteria-by-family.component.html
index e4e2091d..80fddf11 100644
--- a/src/app/search/components/criteria-by-family.component.html
+++ b/src/app/search/components/criteria-by-family.component.html
@@ -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>
diff --git a/src/app/search/components/criteria/between.component.html b/src/app/search/components/criteria/between.component.html
index 01fe37c4..6f7b9772 100644
--- a/src/app/search/components/criteria/between.component.html
+++ b/src/app/search/components/criteria/between.component.html
@@ -1,12 +1,15 @@
<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
diff --git a/src/app/search/components/criteria/checkbox.component.html b/src/app/search/components/criteria/checkbox.component.html
index 509e0806..38eaad7a 100644
--- a/src/app/search/components/criteria/checkbox.component.html
+++ b/src/app/search/components/criteria/checkbox.component.html
@@ -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
diff --git a/src/app/search/components/criteria/datalist.component.html b/src/app/search/components/criteria/datalist.component.html
index 3c10ee1a..7bd1ba2f 100644
--- a/src/app/search/components/criteria/datalist.component.html
+++ b/src/app/search/components/criteria/datalist.component.html
@@ -1,12 +1,14 @@
<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
diff --git a/src/app/search/components/criteria/date.component.ts b/src/app/search/components/criteria/date.component.ts
index c1084e06..96043b70 100644
--- a/src/app/search/components/criteria/date.component.ts
+++ b/src/app/search/components/criteria/date.component.ts
@@ -22,7 +22,6 @@ export class DateComponent {
addCriterion() {
const fd = new DateCriterion(this.id, this.field.value);
- console.log(fd);
this.add.emit(fd);
}
diff --git a/src/app/search/components/criteria/index.ts b/src/app/search/components/criteria/index.ts
index 96bac348..fb5066ed 100644
--- a/src/app/search/components/criteria/index.ts
+++ b/src/app/search/components/criteria/index.ts
@@ -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
];
diff --git a/src/app/search/components/criteria/radio.component.html b/src/app/search/components/criteria/radio.component.html
index 123d0550..acb9561b 100644
--- a/src/app/search/components/criteria/radio.component.html
+++ b/src/app/search/components/criteria/radio.component.html
@@ -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
diff --git a/src/app/search/components/criteria/select-multiple.component.html b/src/app/search/components/criteria/select-multiple.component.html
index 645e7a65..3fb5c587 100644
--- a/src/app/search/components/criteria/select-multiple.component.html
+++ b/src/app/search/components/criteria/select-multiple.component.html
@@ -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
diff --git a/src/app/search/components/criteria/select.component.html b/src/app/search/components/criteria/select.component.html
index f6099048..496670f6 100644
--- a/src/app/search/components/criteria/select.component.html
+++ b/src/app/search/components/criteria/select.component.html
@@ -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
diff --git a/src/app/search/components/criteria/time.component.css b/src/app/search/components/criteria/time.component.css
new file mode 100644
index 00000000..1416d078
--- /dev/null
+++ b/src/app/search/components/criteria/time.component.css
@@ -0,0 +1,3 @@
+timepicker.bs-timepicker-field {
+ width: 100px !important;
+}
\ No newline at end of file
diff --git a/src/app/search/components/criteria/time.component.html b/src/app/search/components/criteria/time.component.html
new file mode 100644
index 00000000..b226e589
--- /dev/null
+++ b/src/app/search/components/criteria/time.component.html
@@ -0,0 +1,13 @@
+<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
diff --git a/src/app/search/components/criteria/time.component.ts b/src/app/search/components/criteria/time.component.ts
new file mode 100644
index 00000000..3b1e52d5
--- /dev/null
+++ b/src/app/search/components/criteria/time.component.ts
@@ -0,0 +1,51 @@
+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;
+ }
+ }
+}
diff --git a/src/app/search/store/model/index.ts b/src/app/search/store/model/index.ts
index 00ed0007..2f03a71f 100644
--- a/src/app/search/store/model/index.ts
+++ b/src/app/search/store/model/index.ts
@@ -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
diff --git a/src/app/search/store/model/time-criterion.model.ts b/src/app/search/store/model/time-criterion.model.ts
new file mode 100644
index 00000000..4c89eed1
--- /dev/null
+++ b/src/app/search/store/model/time-criterion.model.ts
@@ -0,0 +1,18 @@
+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();
+ }
+}
diff --git a/yarn.lock b/yarn.lock
index a09ff041..985328a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
--
GitLab