Skip to content
Snippets Groups Projects
Commit 1b0b4e6c authored by François Agneray's avatar François Agneray
Browse files

Refactor search_types

parent 8d5f5908
No related branches found
No related tags found
2 merge requests!72Develop,!34New features
Hide whitespace changes
Inline Side-by-side
Showing
with 105 additions and 155 deletions
client/src/app/instance/search/components/criteria/abstract-search-type.component.ts 0 → 100644
+ 3
− 0
View file @ 1b0b4e6c
export interface AbstractSearchTypeComponent {
data: any;
}
client/src/app/instance/search/components/criteria/criteria-by-family.component.html
+ 6
− 121
View file @ 1b0b4e6c
<div *ngFor="let attribute of attributeList"> <div *ngFor="let attribute of attributeList">
<div [ngSwitch]="attribute.search_type"> <app-criterion
<div *ngSwitchCase="'field'"> [attribute]="attribute"
<app-field [criterion]="getCriterion(attribute.id)"
[attribute]="attribute" (addCriterion)="emitAdd($event)"
[criterion]="getCriterion(attribute.id)" (deleteCriterion)="emitDelete($event)">
(addCriterion)="emitAdd($event)" </app-criterion>
(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>
</div> </div>
client/src/app/instance/search/components/criteria/criterion.component.html 0 → 100644
+ 16
− 0
View file @ 1b0b4e6c
<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 0 → 100644
+ 44
− 0
View file @ 1b0b4e6c
/**
* 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
+ 6
− 0
View file @ 1b0b4e6c
import { ConeSearchTabComponent } from './cone-search-tab.component'; import { ConeSearchTabComponent } from './cone-search-tab.component';
import { CriteriaTabsComponent } from './criteria-tabs.component'; import { CriteriaTabsComponent } from './criteria-tabs.component';
import { CriteriaByFamilyComponent } from './criteria-by-family.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'; import { searchTypeComponents } from './search-type';
export const criteriaComponents = [ export const criteriaComponents = [
ConeSearchTabComponent, ConeSearchTabComponent,
CriteriaTabsComponent, CriteriaTabsComponent,
CriteriaByFamilyComponent, CriteriaByFamilyComponent,
SearchTypeLoaderDirective,
TestSearchTypeComponent,
CriterionComponent,
searchTypeComponents searchTypeComponents
]; ];
client/src/app/instance/search/components/criteria/search-type-loader.directive.ts 0 → 100644
+ 8
− 0
View file @ 1b0b4e6c
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
+ 12
− 34
View file @ 1b0b4e6c
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row form-group">
<div class="col form-group"> <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
<label> <select class="custom-select" formControlName="operator" (change)="operatorOnChange()">
<app-attribute-label [label]="attribute.label" [description]="attribute.description"></app-attribute-label> <option *ngFor="let o of operators" [ngValue]="o.value">{{ o.label }}</option>
</label> </select>
<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> </div>
<div class="col-2 text-center align-self-end pb-3"> <div class="w-100 d-block d-sm-none"></div>
<button class="btn btn-outline-success" *ngIf="!criterion" [hidden]="!form.valid && form.controls.operator.value != 'nl' && form.controls.operator.value != 'nnl'" (click)="emitAdd()"> <div class="col pl-sm-1">
<span class="fas fa-plus fa-fw"></span> <input [type]="getType()"
</button> class="form-control"
<button class="btn btn-outline-danger" *ngIf="criterion" (click)="deleteCriterion.emit(attribute.id)"> [placeholder]="getPlaceholder()"
<span class="fa fa-times fa-fw"></span> formControlName="value"
</button> autocomplete="off">
</div> </div>
</div> </div>
</form> </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 0 → 100644
+ 10
− 0
View file @ 1b0b4e6c
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;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment