Refactor search types => WIP

client/src/app/instance/instance.reducer.ts

@@ -14,7 +14,6 @@ import * as search from './store/reducers/search.reducer';
 import * as searchMultiple from './store/reducers/search-multiple.reducer';
 import * as coneSearch from './store/reducers/cone-search.reducer';
 import * as detail from './store/reducers/detail.reducer';
-import * as svomJsonKw from './store/reducers/svom-json-kw.reducer';
 import * as archive from './store/reducers/archive.reducer';
 
 /**
@@ -27,7 +26,6 @@ export interface State {
     searchMultiple: searchMultiple.State,
     coneSearch: coneSearch.State
     detail: detail.State,
-    svomJsonKw: svomJsonKw.State,
     archive: archive.State
 }
 
@@ -36,7 +34,6 @@ const reducers = {
     searchMultiple: searchMultiple.searchMultipleReducer,
     coneSearch: coneSearch.coneSearchReducer,
     detail: detail.detailReducer,
-    svomJsonKw: svomJsonKw.svomJsonKwReducer,
     archive: archive.archiveReducer
 };
 

client/src/app/instance/search/components/criteria/criteria-by-family.component.ts

@@ -9,7 +9,7 @@
 
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
-import { Criterion, SvomKeyword } from 'src/app/instance/store/models';
+import { Criterion } from 'src/app/instance/store/models';
 import { Attribute, Option } from 'src/app/metamodel/models';
 
 /**
@@ -24,9 +24,6 @@ import { Attribute, Option } from 'src/app/metamodel/models';
 export class CriteriaByFamilyComponent {
     @Input() attributeList: Attribute[];
     @Input() criteriaList: Criterion[];
-    @Input() svomKeywords: SvomKeyword[];
-    @Output() selectSvomAcronym: EventEmitter<string> = new EventEmitter();
-    @Output() resetSvomKeywords: EventEmitter<{}> = new EventEmitter();
     @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
     @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
 

client/src/app/instance/search/components/criteria/criteria-tabs.component.html

@@ -16,9 +16,6 @@
             <app-criteria-by-family 
                 [attributeList]="attributeList | attributeListByFamily:family.id" 
                 [criteriaList]="criteriaList"
-                [svomKeywords]="svomKeywords"
-                (selectSvomAcronym)="selectSvomAcronym.emit($event)"
-                (resetSvomKeywords)="resetSvomKeywords.emit()"
                 (addCriterion)="emitAdd($event)" 
                 (deleteCriterion)="emitDelete($event)">
             </app-criteria-by-family>

client/src/app/instance/search/components/criteria/criteria-tabs.component.ts

@@ -25,9 +25,6 @@ export class CriteriaTabsComponent {
     @Input() attributeList: Attribute[];
     @Input() criteriaFamilyList: CriteriaFamily[];
     @Input() criteriaList: Criterion[];
-    @Input() svomKeywords: SvomKeyword[];
-    @Output() selectSvomAcronym: EventEmitter<string> = new EventEmitter();
-    @Output() resetSvomKeywords: EventEmitter<{}> = new EventEmitter();
     @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
     @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
 

client/src/app/instance/search/components/criteria/criterion.component.ts

@@ -11,21 +11,7 @@ import { Component, Input, Output, EventEmitter, ViewChild, SimpleChanges, OnIni
 
 import { Attribute } from 'src/app/metamodel/models';
 import { Criterion } from 'src/app/instance/store/models';
-import { SearchTypeLoaderDirective } from './search-type/search-type-loader.directive';
-import { AbstractSearchTypeComponent } from './search-type/abstract-search-type.component';
-import { FieldComponent } from './search-type/field.component';
-import { BetweenComponent } from './search-type/between.component';
-import { SelectComponent } from './search-type/select.component';
-import { SelectMultipleComponent } from './search-type/select-multiple.component';
-import { DatalistComponent } from './search-type/datalist.component';
-import { ListComponent } from './search-type/list.component';
-import { RadioComponent } from './search-type/radio.component';
-import { CheckboxComponent } from './search-type/checkbox.component';
-import { BetweenDateComponent } from './search-type/between-date.component';
-import { DateComponent } from './search-type/date.component';
-import { TimeComponent } from './search-type/time.component';
-import { DateTimeComponent } from './search-type/datetime.component';
-import { JsonComponent } from './search-type/json.component';
+import { SearchTypeLoaderDirective, AbstractSearchTypeComponent, getSearchTypeComponent } from './search-type';
 
 @Component({
     selector: 'app-criterion',
@@ -43,8 +29,10 @@ export class CriterionComponent implements OnInit, OnChanges {
     public searchTypeComponent: AbstractSearchTypeComponent;
 
     ngOnInit() {
-        const componentRef = this.SearchTypeLoaderDirective.viewContainerRef.createComponent<AbstractSearchTypeComponent>(this.getSearchTypeComponent());
-        console.log(componentRef.instance);
+        const viewContainerRef = this.SearchTypeLoaderDirective.viewContainerRef;
+        const componentRef = viewContainerRef.createComponent<AbstractSearchTypeComponent>(
+            getSearchTypeComponent(this.attribute.search_type)
+        );
         componentRef.instance.setAttribute(this.attribute);
         componentRef.instance.setCriterion(this.criterion);
         componentRef.instance.setCriteriaList(this.criteriaList);
@@ -55,6 +43,10 @@ export class CriterionComponent implements OnInit, OnChanges {
         if (changes.criterion && !changes.criterion.firstChange) {
             this.searchTypeComponent.setCriterion(changes.criterion.currentValue);
         }
+
+        if (changes.criteriaList && !changes.criteriaList.firstChange) {
+            this.searchTypeComponent.setCriteriaList(changes.criteriaList.currentValue);
+        }
     }
 
     /**
@@ -65,67 +57,4 @@ export class CriterionComponent implements OnInit, OnChanges {
     emitAdd(): void {
         this.addCriterion.emit(this.searchTypeComponent.getCriterion());
     }
-
-    getSearchTypeComponent() {
-        let nameOfSearchTypeComponent = null;
-        switch(this.attribute.search_type) { 
-            case 'field': {
-                nameOfSearchTypeComponent = FieldComponent;
-                break;
-            }
-            case 'between': {
-                nameOfSearchTypeComponent = BetweenComponent;
-                break;
-            }
-            case 'select': {
-                nameOfSearchTypeComponent = SelectComponent;
-                break;
-            }
-            case 'select-multiple': {
-                nameOfSearchTypeComponent = SelectMultipleComponent;
-                break;
-            }
-            case 'datalist': {
-                nameOfSearchTypeComponent = DatalistComponent;
-                break;
-            }
-            case 'list': {
-                nameOfSearchTypeComponent = ListComponent;
-                break;
-            }
-            case 'radio': {
-                nameOfSearchTypeComponent = RadioComponent;
-                break;
-            }
-            case 'checkbox': {
-                nameOfSearchTypeComponent = CheckboxComponent;
-                break;
-            }
-            case 'between-date': {
-                nameOfSearchTypeComponent = BetweenDateComponent;
-                break;
-            }
-            case 'date': {
-                nameOfSearchTypeComponent = DateComponent;
-                break;
-            }
-            case 'time': {
-                nameOfSearchTypeComponent = TimeComponent;
-                break;
-            }
-            case 'date-time': {
-                nameOfSearchTypeComponent = DateTimeComponent;
-                break;
-            }
-            case 'json': {
-                nameOfSearchTypeComponent = JsonComponent;
-                break;
-            }
-            default: {
-                nameOfSearchTypeComponent = null;
-                break;
-            }
-        }
-        return nameOfSearchTypeComponent;
-    }
 }

client/src/app/instance/search/components/criteria/search-type/between-date.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
-            <div class="operator_readonly">bw</div>
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+            <div class="operator_readonly">BW</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>
         <div class="col pl-sm-1">

client/src/app/instance/search/components/criteria/search-type/between.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-3 col-lg-auto pr-sm-1 mb-1 mb-lg-0">
-            <div class="operator_readonly">min</div>
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+            <div class="operator_readonly">Min</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>
         <div class="col pl-sm-1 mb-1 mb-sm-0">
@@ -9,7 +9,7 @@
         </div>
         <div class="w-100 d-block d-lg-none"></div>
         <div class="col col-sm-3 col-lg-auto pr-sm-1 mb-1">
-            <div class="operator_readonly">max</div>
+            <div class="operator_readonly">Max</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>
         <div class="col pl-sm-1">

client/src/app/instance/search/components/criteria/search-type/checkbox.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
             <div class="operator_readonly">in</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>

client/src/app/instance/search/components/criteria/search-type/datalist.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
             <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>

client/src/app/instance/search/components/criteria/search-type/date.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
             <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>

client/src/app/instance/search/components/criteria/search-type/datetime.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
             <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>

client/src/app/instance/search/components/criteria/search-type/field.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
             <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>

client/src/app/instance/search/components/criteria/search-type/index.ts

@@ -12,6 +12,10 @@ import { DateComponent } from './date.component';
 import { TimeComponent } from './time.component';
 import { DateTimeComponent } from './datetime.component';
 import { JsonComponent } from './json.component';
+import { SvomJsonKwComponent } from './svom-json-kw.component';
+
+export * from './abstract-search-type.component';
+export * from './search-type-loader.directive';
 
 export const searchTypeComponents = [
     SearchTypeLoaderDirective,
@@ -27,5 +31,73 @@ export const searchTypeComponents = [
     DateComponent,
     TimeComponent,
     DateTimeComponent,
-    JsonComponent
+    JsonComponent,
+    SvomJsonKwComponent
 ];
+
+export const getSearchTypeComponent = (searchType: string) => {
+    let nameOfSearchTypeComponent = null;
+    switch(searchType) { 
+        case 'field': {
+            nameOfSearchTypeComponent = FieldComponent;
+            break;
+        }
+        case 'between': {
+            nameOfSearchTypeComponent = BetweenComponent;
+            break;
+        }
+        case 'select': {
+            nameOfSearchTypeComponent = SelectComponent;
+            break;
+        }
+        case 'select-multiple': {
+            nameOfSearchTypeComponent = SelectMultipleComponent;
+            break;
+        }
+        case 'datalist': {
+            nameOfSearchTypeComponent = DatalistComponent;
+            break;
+        }
+        case 'list': {
+            nameOfSearchTypeComponent = ListComponent;
+            break;
+        }
+        case 'radio': {
+            nameOfSearchTypeComponent = RadioComponent;
+            break;
+        }
+        case 'checkbox': {
+            nameOfSearchTypeComponent = CheckboxComponent;
+            break;
+        }
+        case 'between-date': {
+            nameOfSearchTypeComponent = BetweenDateComponent;
+            break;
+        }
+        case 'date': {
+            nameOfSearchTypeComponent = DateComponent;
+            break;
+        }
+        case 'time': {
+            nameOfSearchTypeComponent = TimeComponent;
+            break;
+        }
+        case 'date-time': {
+            nameOfSearchTypeComponent = DateTimeComponent;
+            break;
+        }
+        case 'json': {
+            nameOfSearchTypeComponent = JsonComponent;
+            break;
+        }
+        case 'svom_json_kw': {
+            nameOfSearchTypeComponent = SvomJsonKwComponent;
+            break;
+        }
+        default: {
+            nameOfSearchTypeComponent = null;
+            break;
+        }
+    }
+    return nameOfSearchTypeComponent;
+}

client/src/app/instance/search/components/criteria/search-type/json.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
             <div class="operator_readonly">json</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>

client/src/app/instance/search/components/criteria/search-type/list.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
             <div class="operator_readonly">=</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>

client/src/app/instance/search/components/criteria/search-type/radio.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
             <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>

client/src/app/instance/search/components/criteria/search-type/select-multiple.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
             <div class="operator_readonly">in</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>

client/src/app/instance/search/components/criteria/search-type/select.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-sm-0">
             <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
                 <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
             </select>

client/src/app/instance/search/components/criteria/search-type/svom-json-kw.component.html

 <form [formGroup]="form" novalidate>
     <div class="row form-group">
-        <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
+        <div class="col-md-3 col-sm-auto pr-sm-1 mb-1 mb-lg-0">
             <div class="operator_readonly">json</div>
         </div>
         <div class="w-100 d-block d-sm-none"></div>

client/src/app/instance/search/components/criteria/search-type/svom-json-kw.component.ts

-import { Component } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+
+import { map } from 'rxjs/operators';
 
 import { AbstractSearchTypeComponent } from './abstract-search-type.component';
-import { Criterion, JsonCriterion } from 'src/app/instance/store/models';
+import { AppConfigService } from 'src/app/app-config.service';
+import { Criterion, FieldCriterion, JsonCriterion, SvomKeyword } from 'src/app/instance/store/models';
 
 @Component({
     selector: 'app-svom-json-kw',
     templateUrl: 'svom-json-kw.component.html'
 })
 export class SvomJsonKwComponent extends AbstractSearchTypeComponent {
-    constructor() {
+    svomKeywords: SvomKeyword[] = [];
+    
+    constructor(private changeDetectorRef: ChangeDetectorRef, private http: HttpClient, private config: AppConfigService) {
         super();
         this.form = new FormGroup({
             path: new FormControl('', [Validators.required]),
@@ -18,6 +24,23 @@ export class SvomJsonKwComponent extends AbstractSearchTypeComponent {
         });
     }
     
+    setCriteriaList(criteriaList: Criterion[]): void {
+        super.setCriteriaList(criteriaList);
+        if (this.svomKeywords.length < 1 && criteriaList.find((c: Criterion) => c.id === 3)) {
+            const acronym = (criteriaList.find((c: Criterion) => c.id === 3) as FieldCriterion).value;
+            this.http.get<{search_kw: SvomKeyword[]}[]>(`${this.config.apiUrl}/search/sp_cards?a=8&c=1::eq::${acronym}`).pipe(
+                map(data => data[0].search_kw)
+            ).subscribe(svomKeywords => {
+                this.svomKeywords = svomKeywords;
+                this.changeDetectorRef.detectChanges();
+            });
+        }
+
+        if (this.svomKeywords.length > 0 && !criteriaList.find((c: Criterion) => c.id === 3)) {
+            this.svomKeywords = [];
+        }
+    }
+
     /**
      * Return new criterion
      *
@@ -30,4 +53,14 @@ export class SvomJsonKwComponent extends AbstractSearchTypeComponent {
             ...this.form.value
         } as JsonCriterion;
     }
+
+    /**
+     * Transform a SVOM json Keyword to as path value (anis json search)
+     * 
+     * @param svomKeyword Keyword selected by user
+     * @returns string path value
+     */
+    getKeywordValue(svomKeyword: SvomKeyword): string {
+        return `${svomKeyword.extension},${svomKeyword.name}`
+    }
 }