Refactor search_types

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

+export interface AbstractSearchTypeComponent {
+    data: any;
+}

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

 <div *ngFor="let attribute of attributeList">
-    <div [ngSwitch]="attribute.search_type">
-        <div *ngSwitchCase="'field'">
-            <app-field 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-field>
-        </div>
-        <div *ngSwitchCase="'between'">
-            <app-between 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-between>
-        </div>
-        <div *ngSwitchCase="'select'">
-            <app-select 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-select>
-        </div>
-        <div *ngSwitchCase="'select-multiple'">
-            <app-select-multiple 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-select-multiple>
-        </div>
-        <div *ngSwitchCase="'datalist'">
-            <app-datalist 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-datalist>
-        </div>
-        <div *ngSwitchCase="'list'">
-            <app-list 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-list>
-        </div>
-        <div *ngSwitchCase="'radio'">
-            <app-radio 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-radio>
-        </div>
-        <div *ngSwitchCase="'checkbox'">
-            <app-checkbox 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-checkbox>
-        </div>
-        <div *ngSwitchCase="'date'">
-            <app-date 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-date>
-        </div>
-        <div *ngSwitchCase="'between-date'">
-            <app-between-date 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-between-date>
-        </div>
-        <div *ngSwitchCase="'time'">
-            <app-time 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-time>
-        </div>
-        <div *ngSwitchCase="'date-time'">
-            <app-datetime 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-datetime>
-        </div>
-        <div *ngSwitchCase="'json'">
-            <app-json-criteria 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-json-criteria>
-        </div>
-        <div *ngSwitchCase="'svom_json_kw'">
-            <app-svom-json-kw-criteria 
-                [attribute]="attribute"
-                [criterion]="getCriterion(attribute.id)"
-                [criteriaList]="criteriaList"
-                [svomKeywords]="svomKeywords"
-                (selectSvomAcronym)=selectSvomAcronym.emit($event)
-                (resetSvomKeywords)="resetSvomKeywords.emit()"
-                (addCriterion)="emitAdd($event)"
-                (deleteCriterion)="emitDelete($event)">
-            </app-svom-json-kw-criteria>
-        </div>
-        <div *ngSwitchDefault>
-            {{ attribute.search_type }} search type not supported
-        </div>
-    </div>
+    <app-criterion 
+        [attribute]="attribute"
+        [criterion]="getCriterion(attribute.id)"
+        (addCriterion)="emitAdd($event)"
+        (deleteCriterion)="emitDelete($event)">
+    </app-criterion>
 </div>

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

+<div class="row">
+    <div class="col form-group">
+        <label>
+            <app-attribute-label [label]="attribute.label" [description]="attribute.description"></app-attribute-label>
+        </label>
+        <ng-template searchType></ng-template>
+    </div>
+    <div class="col-2 text-center align-self-end pb-3">
+        <!-- <button class="btn btn-outline-success" *ngIf="!criterion" [hidden]="!form.valid && form.controls.operator.value != 'nl' && form.controls.operator.value != 'nnl'" (click)="emitAdd()">
+            <span class="fas fa-plus fa-fw"></span>
+        </button>
+        <button class="btn btn-outline-danger" *ngIf="criterion" (click)="deleteCriterion.emit(attribute.id)">
+            <span class="fa fa-times fa-fw"></span>
+        </button> -->
+    </div>
+</div>

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

+/**
+ * This file is part of Anis Client.
+ *
+ * @copyright Laboratoire d'Astrophysique de Marseille / CNRS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, ContentChild } from '@angular/core';
+
+import { Attribute } from 'src/app/metamodel/models';
+import { Criterion } from 'src/app/instance/store/models';
+import { SearchTypeLoaderDirective } from './search-type-loader.directive';
+import { AbstractSearchTypeComponent } from './abstract-search-type.component';
+import { TestSearchTypeComponent } from './test-search-type.component';
+import { FieldComponent } from './search-type/field.component';
+
+@Component({
+    selector: 'app-criterion',
+    templateUrl: 'criterion.component.html'
+})
+export class CriterionComponent {
+    @Input() attribute: Attribute;
+    @Input() criterion: Criterion;
+    @Output() addCriterion: EventEmitter<Criterion> = new EventEmitter();
+    @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
+
+    @ViewChild(SearchTypeLoaderDirective, {static: true}) searchType!: SearchTypeLoaderDirective;
+
+    ngOnInit() {
+        const componentRef = this.searchType.viewContainerRef.createComponent<AbstractSearchTypeComponent>(TestSearchTypeComponent);
+        componentRef.instance.data = { text: 'Bonjour Yannick !' };
+    }
+
+    /**
+     * Emits event to add criterion to the criteria list.
+     *
+     * @fires EventEmitter<Criterion>
+     */
+    emitAdd(criterion: Criterion): void {
+        this.addCriterion.emit(criterion);
+    }
+}

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

 import { ConeSearchTabComponent } from './cone-search-tab.component';
 import { CriteriaTabsComponent } from './criteria-tabs.component';
 import { CriteriaByFamilyComponent } from './criteria-by-family.component';
+import { SearchTypeLoaderDirective } from './search-type-loader.directive';
+import { TestSearchTypeComponent } from './test-search-type.component';
+import { CriterionComponent } from './criterion.component';
 import { searchTypeComponents } from './search-type';
 
 export const criteriaComponents = [
     ConeSearchTabComponent,
     CriteriaTabsComponent,
     CriteriaByFamilyComponent,
+    SearchTypeLoaderDirective,
+    TestSearchTypeComponent,
+    CriterionComponent,
     searchTypeComponents
 ];

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

+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+    selector: '[searchType]',
+})
+export class SearchTypeLoaderDirective {
+    constructor(public viewContainerRef: ViewContainerRef) { }
+}

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

 <form [formGroup]="form" novalidate>
-    <div class="row">
-        <div class="col form-group">
-            <label>
-                <app-attribute-label [label]="attribute.label" [description]="attribute.description"></app-attribute-label>
-            </label>
-            <span *ngIf="attribute.operator === 'lk'" class="pl-1" [tooltip]="helpLike" placement="right" containerClass="custom-tooltip right-tooltip">
-                <span class="far fa-question-circle fa-sm"></span>
-            </span>
-            <div class="row">
-                <div class="col 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>
-                </div>
-                <div class="w-100 d-block d-sm-none"></div>
-                <div class="col pl-sm-1">
-                    <input [type]="getType()" 
-                        class="form-control" 
-                        [placeholder]="getPlaceholder()" 
-                        formControlName="value"
-                        autocomplete="off">
-                </div>
-            </div>
+    <div class="row form-group">
+        <div class="col 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>
         </div>
-        <div class="col-2 text-center align-self-end pb-3">
-            <button class="btn btn-outline-success" *ngIf="!criterion" [hidden]="!form.valid && form.controls.operator.value != 'nl' && form.controls.operator.value != 'nnl'" (click)="emitAdd()">
-                <span class="fas fa-plus fa-fw"></span>
-            </button>
-            <button class="btn btn-outline-danger" *ngIf="criterion" (click)="deleteCriterion.emit(attribute.id)">
-                <span class="fa fa-times fa-fw"></span>
-            </button>
+        <div class="w-100 d-block d-sm-none"></div>
+        <div class="col pl-sm-1">
+            <input [type]="getType()" 
+                class="form-control" 
+                [placeholder]="getPlaceholder()" 
+                formControlName="value"
+                autocomplete="off">
         </div>
     </div>
 </form>
-
-<ng-template #helpLike>
-    <app-help-like></app-help-like>
-</ng-template>
\ No newline at end of file

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

+import { Component, Input } from '@angular/core';
+import { AbstractSearchTypeComponent } from './abstract-search-type.component';
+
+@Component({
+    selector: 'app-test-search-type',
+    template: '<p>{{ data.text }}</p>'
+})
+export class TestSearchTypeComponent implements AbstractSearchTypeComponent {
+    @Input() data: any;
+}