Ajout du criterion type date

angular.json

 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "anis-client": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/anis-client",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": false,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/ngx-toastr/toastr.css",
-              "node_modules/@fortawesome/fontawesome-free/css/all.css",
-              "node_modules/@ng-select/ng-select/themes/default.theme.css",
-              "src/styles.css"
-            ],
-            "scripts": [
-              "node_modules/@fortawesome/fontawesome-free/js/all.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "anis-client": {
+            "projectType": "application",
+            "schematics": {},
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/anis-client",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "aot": false,
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/ngx-toastr/toastr.css",
+                            "node_modules/@fortawesome/fontawesome-free/css/all.css",
+                            "node_modules/@ng-select/ng-select/themes/default.theme.css",
+                            "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
+                            "src/styles.css"
+                        ],
+                        "scripts": [
+                            "node_modules/@fortawesome/fontawesome-free/js/all.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "2mb",
+                                    "maximumError": "5mb"
+                                }
+                            ]
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "anis-client:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "anis-client:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "anis-client:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": []
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json",
+                            "e2e/tsconfig.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                },
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "anis-client:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "anis-client:serve:production"
+                        }
+                    }
                 }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "anis-client:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "anis-client:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "anis-client:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "anis-client:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "anis-client:serve:production"
             }
-          }
         }
-      }
-    }},
-  "defaultProject": "anis-client"
-}
+    },
+    "defaultProject": "anis-client"
+}
\ No newline at end of file

src/app/search/components/criteria-by-family.component.html

@@ -2,7 +2,8 @@
     <div [ngSwitch]="attribute.search_type">
         <div *ngSwitchCase="'fd'">
             <app-field class="criteria" [id]="attribute.id" [label]="attribute.form_label"
-                [placeholder]="attribute.placeholder_min" [attributeType]="attribute.type" [criterion]="getCriterion(attribute.id)" (add)="add($event)">
+                [placeholder]="attribute.placeholder_min" [attributeType]="attribute.type"
+                [criterion]="getCriterion(attribute.id)" (add)="add($event)">
             </app-field>
         </div>
         <div *ngSwitchCase="'bw'">
@@ -36,8 +37,13 @@
                 [options]="getOptions(attribute.id)" [criterion]="getCriterion(attribute.id)" (add)="add($event)">
             </app-checkbox>
         </div>
+        <div *ngSwitchCase="'dt'">
+            <app-date class="criteria" [id]="attribute.id" [label]="attribute.form_label"
+                [placeholder]="attribute.placeholder_min" [criterion]="getCriterion(attribute.id)" (add)="add($event)">
+            </app-date>
+        </div>
         <div *ngSwitchDefault>
-            {{attribute.search_type}} search type not supported
+            {{ attribute.search_type }} search type not supported
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file

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

+<div class="form-group row">
+    <label class="col-3 col-form-label">{{label}}</label>
+    <div class="col">
+        <input type="text" [placeholder]="getPlaceholder()" class="form-control" [formControl]="field"
+            [bsValue]="field.value" [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }" bsDatepicker>
+    </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>
+    </div>
+</div>
\ No newline at end of file

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

+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { Criterion, DateCriterion } from '../../store/model';
+
+@Component({
+    selector: 'app-date',
+    templateUrl: 'date.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DateComponent {
+    @Input() id: number;
+    @Input() label: string;
+    @Input() placeholder: string;
+    @Input()
+    set criterion(criterion: Criterion) {
+        this.getDefault(criterion);
+    }
+    @Output() add: EventEmitter<DateCriterion> = new EventEmitter();
+
+    field = new FormControl('');
+
+    addCriterion() {
+        const fd = new DateCriterion(this.id, this.field.value);
+        console.log(fd);
+        this.add.emit(fd);
+    }
+
+    getDefault(criterion: Criterion): void {
+        if (!criterion) {
+            this.field.setValue('');
+            this.field.enable();
+        } else {
+            const c = criterion as DateCriterion;
+            this.field.setValue(c.value);
+            this.field.disable();
+        }
+    }
+
+    getPlaceholder(): string {
+        if (!this.placeholder) {
+            return '';
+        } else {
+            return this.placeholder;
+        }
+    }
+}

src/app/search/components/criteria/index.ts

@@ -5,6 +5,7 @@ import { SelectMultipleComponent } from './select-multiple.component';
 import { DatalistComponent } from './datalist.component';
 import { RadioComponent } from './radio.component';
 import { CheckboxComponent } from './checkbox.component';
+import { DateComponent } from './date.component';
 
 export const criteriaComponents = [
     FieldComponent,
@@ -13,5 +14,6 @@ export const criteriaComponents = [
     SelectMultipleComponent,
     DatalistComponent,
     RadioComponent,
-    CheckboxComponent
+    CheckboxComponent,
+    DateComponent
 ];

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

+import { Criterion } from './criterion.model';
+
+export class DateCriterion extends Criterion {
+    value: Date;
+
+    constructor(id: number, value: Date) {
+        super(id);
+        this.value = value;
+    }
+
+    printCriterion(): string {
+        const month = ('0'+(this.value.getMonth()+1)).slice(-2);
+        return this.value.getFullYear() + '-' + month + '-' + this.value.getDate();
+    }
+
+    getCriterionStr(): string {
+        const month = ('0'+(this.value.getMonth()+1)).slice(-2);
+        return this.id + ':eq:' + this.value.getFullYear() + '-' + month + '-' + this.value.getDate();
+    }
+}

src/app/search/store/model/index.ts

@@ -5,4 +5,5 @@ export * from './select-criterion';
 export * from './checkbox-criterion.model';
 export * from './radio-criterion.model';
 export * from './select-multiple-criterion.model';
-export * from './search-meta.model';
\ No newline at end of file
+export * from './search-meta.model';
+export * from './date-criterion.model';
\ No newline at end of file

src/app/shared/shared.module.ts

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { ToastrModule } from 'ngx-toastr';
-import { ModalModule, TabsModule, AccordionModule, CollapseModule, PopoverModule, PaginationModule } from 'ngx-bootstrap';
+import { ModalModule, TabsModule, AccordionModule, CollapseModule, PopoverModule, PaginationModule, BsDatepickerModule, TimepickerModule } from 'ngx-bootstrap';
 import { BsModalService } from 'ngx-bootstrap/modal';
 import { NgSelectModule } from '@ng-select/ng-select';
 
@@ -20,6 +20,8 @@ import { NgSelectModule } from '@ng-select/ng-select';
         CollapseModule.forRoot(),
         PopoverModule.forRoot(),
         PaginationModule.forRoot(),
+        BsDatepickerModule.forRoot(),
+        TimepickerModule.forRoot(),
         NgSelectModule,
         RouterModule
     ],
@@ -34,8 +36,10 @@ import { NgSelectModule } from '@ng-select/ng-select';
         CollapseModule,
         PopoverModule,
         PaginationModule,
+        BsDatepickerModule,
+        TimepickerModule,
         NgSelectModule
     ],
-    providers: [ BsModalService ]
+    providers: [BsModalService]
 })
 export class SharedModule { }