diff --git a/client/src/app/instance/search/components/criteria/abstract-search-type.component.ts b/client/src/app/instance/search/components/criteria/abstract-search-type.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f2f316803480b304f57ca1cb767b3434f2d8995
--- /dev/null
+++ b/client/src/app/instance/search/components/criteria/abstract-search-type.component.ts
@@ -0,0 +1,3 @@
+export interface AbstractSearchTypeComponent {
+ data: any;
+}
diff --git a/client/src/app/instance/search/components/criteria/criteria-by-family.component.html b/client/src/app/instance/search/components/criteria/criteria-by-family.component.html
index 72eba5b88b3a92b64b41daa5f02afbcf49e73536..cdf6dbf0fd601d2b8c5a9cd2d1eaddebcec666ac 100644
--- a/client/src/app/instance/search/components/criteria/criteria-by-family.component.html
+++ b/client/src/app/instance/search/components/criteria/criteria-by-family.component.html
@@ -1,123 +1,8 @@
<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>
diff --git a/client/src/app/instance/search/components/criteria/criterion.component.html b/client/src/app/instance/search/components/criteria/criterion.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a9c1c003dd5b2b390d676d2ff866dc1c8328e9b
--- /dev/null
+++ b/client/src/app/instance/search/components/criteria/criterion.component.html
@@ -0,0 +1,16 @@
+<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>
diff --git a/client/src/app/instance/search/components/criteria/criterion.component.ts b/client/src/app/instance/search/components/criteria/criterion.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc2f97fd5ae975d3703e00272d0472b92f49b4f1
--- /dev/null
+++ b/client/src/app/instance/search/components/criteria/criterion.component.ts
@@ -0,0 +1,44 @@
+/**
+ * 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);
+ }
+}
diff --git a/client/src/app/instance/search/components/criteria/index.ts b/client/src/app/instance/search/components/criteria/index.ts
index 88656ad3c2668f4eb770c6db2672fb8302115a68..7dd250f7a445fe5837f101d14ec3f25ee4fe10b5 100644
--- a/client/src/app/instance/search/components/criteria/index.ts
+++ b/client/src/app/instance/search/components/criteria/index.ts
@@ -1,11 +1,17 @@
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
];
diff --git a/client/src/app/instance/search/components/criteria/search-type-loader.directive.ts b/client/src/app/instance/search/components/criteria/search-type-loader.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74d000d5b23e6d838401e8873b41cc2b13183372
--- /dev/null
+++ b/client/src/app/instance/search/components/criteria/search-type-loader.directive.ts
@@ -0,0 +1,8 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+ selector: '[searchType]',
+})
+export class SearchTypeLoaderDirective {
+ constructor(public viewContainerRef: ViewContainerRef) { }
+}
diff --git a/client/src/app/instance/search/components/criteria/search-type/field.component.html b/client/src/app/instance/search/components/criteria/search-type/field.component.html
index 99e3af2e8283bd79afd8f2033d436ec29d6a1b3a..84260fca17712e7719866d2431b87bc57448cf1b 100644
--- a/client/src/app/instance/search/components/criteria/search-type/field.component.html
+++ b/client/src/app/instance/search/components/criteria/search-type/field.component.html
@@ -1,39 +1,17 @@
<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
diff --git a/client/src/app/instance/search/components/criteria/test-search-type.component.ts b/client/src/app/instance/search/components/criteria/test-search-type.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..72d3aefa2813cdab0f9a0223c9adcede0245cb18
--- /dev/null
+++ b/client/src/app/instance/search/components/criteria/test-search-type.component.ts
@@ -0,0 +1,10 @@
+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;
+}