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

Tooltip description attribute => done

parent bd2406e2
No related branches found
No related tags found
2 merge requests!72Develop,!34New features
Showing
with 142 additions and 70 deletions
{{ label }}
<span *ngIf="description" class="pl-1" [tooltip]="toolType" placement="right" containerClass="custom-tooltip right-tooltip">
<span class="far fa-question-circle fa-sm"></span>
</span>
<ng-template #toolType>
<div [innerHtml]="description"></div>
</ng-template>
/**
* 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 { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
/**
* @class
* @classdesc Attribute label component.
*/
@Component({
selector: 'app-attribute-label',
templateUrl: 'attribute-label.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AttributeLabelComponent {
@Input() label: string;
@Input() description: string;
}
<div *ngFor="let attribute of attributeList"> <div *ngFor="let attribute of attributeList">
<div [ngSwitch]="attribute.search_type"> <div [ngSwitch]="attribute.search_type">
<div *ngSwitchCase="'field'"> <div *ngSwitchCase="'field'">
<app-field class="criteria" <app-field class="criteria"
[id]="attribute.id" [id]="attribute.id"
[operator]="attribute.operator" [operator]="attribute.operator"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[placeholder]="attribute.placeholder_min" [placeholder]="attribute.placeholder_min"
[attributeType]="attribute.type" [attributeType]="attribute.type"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
[advancedForm]="advancedForm" [advancedForm]="advancedForm"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-field> </app-field>
</div> </div>
<div *ngSwitchCase="'between'"> <div *ngSwitchCase="'between'">
<app-between class="criteria" <app-between class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[placeholderMin]="attribute.placeholder_min" [description]="attribute.description"
[placeholderMin]="attribute.placeholder_min"
[placeholderMax]="attribute.placeholder_max" [placeholderMax]="attribute.placeholder_max"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-between> </app-between>
</div> </div>
<div *ngSwitchCase="'select'"> <div *ngSwitchCase="'select'">
<app-select class="criteria" <app-select class="criteria"
[id]="attribute.id" [id]="attribute.id"
[operator]="attribute.operator" [operator]="attribute.operator"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[options]="getOptions(attribute.id)" [options]="getOptions(attribute.id)"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
[advancedForm]="advancedForm" [advancedForm]="advancedForm"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-select> </app-select>
</div> </div>
<div *ngSwitchCase="'select-multiple'"> <div *ngSwitchCase="'select-multiple'">
<app-select-multiple class="criteria" <app-select-multiple class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[options]="getOptions(attribute.id)" [options]="getOptions(attribute.id)"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-select-multiple> </app-select-multiple>
</div> </div>
<div *ngSwitchCase="'datalist'"> <div *ngSwitchCase="'datalist'">
<app-datalist class="criteria" <app-datalist class="criteria"
[id]="attribute.id" [id]="attribute.id"
[operator]="attribute.operator" [operator]="attribute.operator"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[placeholder]="attribute.placeholder_min" [placeholder]="attribute.placeholder_min"
[options]="getOptions(attribute.id)" [options]="getOptions(attribute.id)"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
[advancedForm]="advancedForm" [advancedForm]="advancedForm"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-datalist> </app-datalist>
...@@ -63,6 +68,7 @@ ...@@ -63,6 +68,7 @@
<app-list class="criteria" <app-list class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[placeholder]="attribute.placeholder_min" [placeholder]="attribute.placeholder_min"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
...@@ -70,89 +76,97 @@ ...@@ -70,89 +76,97 @@
</app-list> </app-list>
</div> </div>
<div *ngSwitchCase="'radio'"> <div *ngSwitchCase="'radio'">
<app-radio class="criteria" <app-radio class="criteria"
[id]="attribute.id" [id]="attribute.id"
[operator]="attribute.operator" [operator]="attribute.operator"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[options]="getOptions(attribute.id)" [options]="getOptions(attribute.id)"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-radio> </app-radio>
</div> </div>
<div *ngSwitchCase="'checkbox'"> <div *ngSwitchCase="'checkbox'">
<app-checkbox class="criteria" <app-checkbox class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[options]="getOptions(attribute.id)" [options]="getOptions(attribute.id)"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-checkbox> </app-checkbox>
</div> </div>
<div *ngSwitchCase="'date'"> <div *ngSwitchCase="'date'">
<app-date class="criteria" <app-date class="criteria"
[id]="attribute.id" [id]="attribute.id"
[operator]="attribute.operator" [operator]="attribute.operator"
[label]="attribute.form_label" [label]="attribute.form_label"
[description]="attribute.description"
[placeholder]="attribute.placeholder_min" [placeholder]="attribute.placeholder_min"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
[advancedForm]="advancedForm" [advancedForm]="advancedForm"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-date> </app-date>
</div> </div>
<div *ngSwitchCase="'between-date'"> <div *ngSwitchCase="'between-date'">
<app-between-date class="criteria" <app-between-date class="criteria"
[id]="attribute.id" [id]="attribute.id"
[operator]="attribute.operator" [operator]="attribute.operator"
[label]="attribute.form_label" [label]="attribute.form_label"
[criterion]="getCriterion(attribute.id)" [description]="attribute.description"
[criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-between-date> </app-between-date>
</div> </div>
<div *ngSwitchCase="'time'"> <div *ngSwitchCase="'time'">
<app-time class="criteria" <app-time class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[operator]="attribute.operator" [description]="attribute.description"
[operator]="attribute.operator"
[criterion]="getCriterion(attribute.id)" [criterion]="getCriterion(attribute.id)"
[advancedForm]="advancedForm" [advancedForm]="advancedForm"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-time> </app-time>
</div> </div>
<div *ngSwitchCase="'date-time'"> <div *ngSwitchCase="'date-time'">
<app-datetime class="criteria" <app-datetime class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[operator]="attribute.operator" [description]="attribute.description"
[criterion]="getCriterion(attribute.id)" [operator]="attribute.operator"
[advancedForm]="advancedForm" [criterion]="getCriterion(attribute.id)"
[advancedForm]="advancedForm"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-datetime> </app-datetime>
</div> </div>
<div *ngSwitchCase="'json'"> <div *ngSwitchCase="'json'">
<app-json-criteria class="criteria" <app-json-criteria class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[criterion]="getCriterion(attribute.id)" [description]="attribute.description"
(addCriterion)="emitAdd($event)" [criterion]="getCriterion(attribute.id)"
(addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-json-criteria> </app-json-criteria>
</div> </div>
<div *ngSwitchCase="'svom_json_kw'"> <div *ngSwitchCase="'svom_json_kw'">
<app-svom-json-kw-criteria class="criteria" <app-svom-json-kw-criteria class="criteria"
[id]="attribute.id" [id]="attribute.id"
[label]="attribute.form_label" [label]="attribute.form_label"
[criterion]="getCriterion(attribute.id)" [description]="attribute.description"
[criterion]="getCriterion(attribute.id)"
[criteriaList]="criteriaList" [criteriaList]="criteriaList"
[svomKeywords]="svomKeywords" [svomKeywords]="svomKeywords"
(selectSvomAcronym)=selectSvomAcronym.emit($event) (selectSvomAcronym)=selectSvomAcronym.emit($event)
(resetSvomKeywords)="resetSvomKeywords.emit()" (resetSvomKeywords)="resetSvomKeywords.emit()"
(addCriterion)="emitAdd($event)" (addCriterion)="emitAdd($event)"
(deleteCriterion)="emitDelete($event)"> (deleteCriterion)="emitDelete($event)">
</app-svom-json-kw-criteria> </app-svom-json-kw-criteria>
</div> </div>
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col px-sm-3"> <div class="col px-sm-3">
<input type="text" <input type="text"
......
...@@ -35,6 +35,7 @@ export class BetweenDateComponent implements OnChanges { ...@@ -35,6 +35,7 @@ export class BetweenDateComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() operator: string; @Input() operator: string;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() criterion: Criterion; @Input() criterion: Criterion;
@Output() addCriterion: EventEmitter<BetweenCriterion> = new EventEmitter(); @Output() addCriterion: EventEmitter<BetweenCriterion> = new EventEmitter();
@Output() deleteCriterion: EventEmitter<number> = new EventEmitter(); @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col col-sm-3 col-lg-auto pr-sm-1 mb-1 mb-lg-0"> <div class="col col-sm-3 col-lg-auto pr-sm-1 mb-1 mb-lg-0">
<div class="readonly">min</div> <div class="readonly">min</div>
......
...@@ -27,6 +27,7 @@ import { Criterion, BetweenCriterion } from 'src/app/instance/store/models'; ...@@ -27,6 +27,7 @@ import { Criterion, BetweenCriterion } from 'src/app/instance/store/models';
export class BetweenComponent implements OnChanges { export class BetweenComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() placeholderMin: string; @Input() placeholderMin: string;
@Input() placeholderMax: string; @Input() placeholderMax: string;
@Input() criterion: Criterion; @Input() criterion: Criterion;
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0"> <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
<div class="readonly">in</div> <div class="readonly">in</div>
......
...@@ -29,6 +29,7 @@ import { Option } from 'src/app/metamodel/models'; ...@@ -29,6 +29,7 @@ import { Option } from 'src/app/metamodel/models';
export class CheckboxComponent implements OnInit, OnChanges { export class CheckboxComponent implements OnInit, OnChanges {
@Input() id: number; @Input() id: number;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() options: Option[]; @Input() options: Option[];
@Input() criterion: Criterion; @Input() criterion: Criterion;
@Output() addCriterion: EventEmitter<SelectMultipleCriterion> = new EventEmitter(); @Output() addCriterion: EventEmitter<SelectMultipleCriterion> = new EventEmitter();
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<span *ngIf="operator === 'lk'" class="pl-1" [tooltip]="helpLike" placement="right" containerClass="custom-tooltip right-tooltip"> <span *ngIf="operator === 'lk'" class="pl-1" [tooltip]="helpLike" placement="right" containerClass="custom-tooltip right-tooltip">
<span class="far fa-question-circle fa-sm"></span> <span class="far fa-question-circle fa-sm"></span>
</span> </span>
......
...@@ -28,6 +28,7 @@ export class DatalistComponent implements OnChanges { ...@@ -28,6 +28,7 @@ export class DatalistComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() operator: string; @Input() operator: string;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() placeholder: string; @Input() placeholder: string;
@Input() options: Option[]; @Input() options: Option[];
@Input() criterion: Criterion; @Input() criterion: Criterion;
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0"> <div class="col col-sm-auto pr-sm-1 mb-1 mb-sm-0">
<app-operator <app-operator
......
...@@ -27,6 +27,7 @@ export class DateComponent implements OnChanges { ...@@ -27,6 +27,7 @@ export class DateComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() operator: string; @Input() operator: string;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() placeholder: string; @Input() placeholder: string;
@Input() criterion: Criterion; @Input() criterion: Criterion;
@Input() advancedForm: boolean; @Input() advancedForm: boolean;
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0"> <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
<app-operator <app-operator
......
...@@ -27,6 +27,7 @@ export class DatetimeComponent implements OnChanges { ...@@ -27,6 +27,7 @@ export class DatetimeComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() operator: string; @Input() operator: string;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() criterion: Criterion; @Input() criterion: Criterion;
@Input() advancedForm: boolean; @Input() advancedForm: boolean;
@Output() addCriterion: EventEmitter<FieldCriterion> = new EventEmitter(); @Output() addCriterion: EventEmitter<FieldCriterion> = new EventEmitter();
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<span *ngIf="operator === 'lk'" class="pl-1" [tooltip]="helpLike" placement="right" containerClass="custom-tooltip right-tooltip"> <span *ngIf="operator === 'lk'" class="pl-1" [tooltip]="helpLike" placement="right" containerClass="custom-tooltip right-tooltip">
<span class="far fa-question-circle fa-sm"></span> <span class="far fa-question-circle fa-sm"></span>
</span> </span>
......
...@@ -35,6 +35,7 @@ export class FieldComponent implements OnChanges { ...@@ -35,6 +35,7 @@ export class FieldComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() operator: string; @Input() operator: string;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() placeholder: string; @Input() placeholder: string;
@Input() attributeType: string; @Input() attributeType: string;
@Input() criterion: Criterion; @Input() criterion: Criterion;
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col mb-1 mb-sm-0"> <div class="col mb-1 mb-sm-0">
<input class="form-control" id="path" name="path" placeholder="Path" autocomplete="off" formControlName="path"> <input class="form-control" id="path" name="path" placeholder="Path" autocomplete="off" formControlName="path">
......
...@@ -26,6 +26,7 @@ import { JsonCriterion, Criterion } from 'src/app/instance/store/models'; ...@@ -26,6 +26,7 @@ import { JsonCriterion, Criterion } from 'src/app/instance/store/models';
export class JsonComponent implements OnChanges { export class JsonComponent implements OnChanges {
@Input() id: number; @Input() id: number;
@Input() label: string; @Input() label: string;
@Input() description: string;
@Input() criterion: Criterion; @Input() criterion: Criterion;
@Output() addCriterion: EventEmitter<JsonCriterion> = new EventEmitter(); @Output() addCriterion: EventEmitter<JsonCriterion> = new EventEmitter();
@Output() deleteCriterion: EventEmitter<number> = new EventEmitter(); @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
......
<form [formGroup]="form" novalidate> <form [formGroup]="form" novalidate>
<div class="row"> <div class="row">
<div class="col form-group"> <div class="col form-group">
<label>{{ label }}</label> <label>
<app-attribute-label [label]="label" [description]="description"></app-attribute-label>
</label>
<div class="row"> <div class="row">
<div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0"> <div class="col col-sm-auto pr-sm-1 mb-1 mb-lg-0">
<div class="readonly">=</div> <div class="readonly">=</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment