WIP: ajout du timepicker

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>

src/app/search/components/criteria/between.component.html

 <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

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

src/app/search/components/criteria/datalist.component.html

 <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

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);
     }
 

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
 ];

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

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

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

src/app/search/components/criteria/time.component.css

+timepicker.bs-timepicker-field {
+    width: 100px !important;
+}
\ No newline at end of file

src/app/search/components/criteria/time.component.html

+<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

src/app/search/components/criteria/time.component.ts

+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;
+        }
+    }
+}

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';
+export * from './date-criterion.model';
\ No newline at end of file
+export * from './time-criterion.model';
\ No newline at end of file

src/app/search/store/model/time-criterion.model.ts

+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();
+    }
+}

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"