Ab#79314 add filters tooltips

libs/shared/src/i18n/en.json

@@ -959,12 +959,15 @@
 			},
 			"filter": {
 				"and": "And",
+				"examplesFromDatasource": "Examples from datasource: ",
 				"logic": "Filter logic",
 				"new": "Add new filter",
 				"newGroup": "Add new filter group",
+				"noValueInDatasource": "No value in datasource yet",
 				"operator": "Operator",
 				"or": "Or",
-				"title": "Filter"
+				"title": "Filter",
+				"valuesInDatasourceBetween": "Values in datasource are between "
 			},
 			"hint": {
 				"fields": "Select data points below and drag them to 'selected fields' on the right",

libs/shared/src/i18n/fr.json

@@ -979,12 +979,15 @@
 			},
 			"filter": {
 				"and": "Et",
+				"examplesFromDatasource": "Exemples de la source de données: ",
 				"logic": "Logique de filtre",
 				"new": "Ajouter un nouveau filtre",
 				"newGroup": "Ajouter un nouveau groupe de filtres",
+				"noValueInDatasource": "Données manquantes pour ce champ",
 				"operator": "Opérateur",
 				"or": "Ou",
-				"title": "Filtre"
+				"title": "Filtre",
+				"valuesInDatasourceBetween": "Les valeurs de la source de données sont entre "
 			},
 			"hint": {
 				"fields": "Sélectionnez des champs ci-dessous et déplacez-les vers les 'champs sélectionnés' sur la droite",

libs/shared/src/i18n/test.json

@@ -959,12 +959,15 @@
 			},
 			"filter": {
 				"and": "******",
+				"examplesFromDatasource": "******",
 				"logic": "******",
 				"new": "******",
 				"newGroup": "******",
+				"noValueInDatasource": "******",
 				"operator": "******",
 				"or": "******",
-				"title": "******"
+				"title": "******",
+				"valuesInDatasourceBetween": "******"
 			},
 			"hint": {
 				"fields": "******",

libs/shared/src/lib/components/config-display-grid-fields-modal/config-display-grid-fields-modal.component.html

@@ -14,6 +14,7 @@ <h3 class="font-semibold">
           *ngIf="form.value.name"
           [form]="$any(form)"
           [canSelectDataSet]="false"
+          [resourceId]="data.resourceId"
         ></shared-query-builder>
       </div>
     </ng-container>

libs/shared/src/lib/components/config-display-grid-fields-modal/config-display-grid-fields-modal.component.ts

@@ -23,6 +23,7 @@ import { ButtonModule } from '@oort-front/ui';
 interface DialogData {
   form: any;
   resourceName: string;
+  resourceId: string;
 }
 
 /**

libs/shared/src/lib/components/filter/filter-group/filter-group.component.html

@@ -42,6 +42,7 @@
           class="filter-group-item"
           [form]="$any(filter)"
           [fields]="fields"
+          [resourceId]="resourceId"
           [parent]="this"
           (delete)="deleteFilter(i)"
         ></shared-filter-group>
@@ -52,6 +53,7 @@
           class="filter-group-item"
           [form]="$any(filter)"
           [fields]="fields"
+          [resourceId]="resourceId"
           (delete)="deleteFilter(i)"
         ></shared-filter-row>
       </ng-container>

libs/shared/src/lib/components/filter/filter-group/filter-group.component.ts

@@ -14,6 +14,8 @@ export class FilterGroupComponent {
   @Input() form!: FormGroup;
   /** Available fields */
   @Input() fields: any[] = [];
+  /** Records resource id */
+  @Input() resourceId = '';
   /** Delete filter event emitter */
   @Output() delete = new EventEmitter();
   /** Reference to parent filter group, if any */

libs/shared/src/lib/components/filter/filter-row/filter-row.component.html

@@ -21,7 +21,13 @@
   <ng-container *ngIf="field && editor && !hideEditor">
     <ng-container
       [ngTemplateOutlet]="editor"
-      [ngTemplateOutletContext]="{ valueControl: valueControl }"
+      [ngTemplateOutletContext]="{
+        valueControl: valueControl,
+        tooltip: tooltips[field.name]
+          ? ('components.queryBuilder.filter.valuesInDatasourceBetween'
+              | translate) + tooltips[field.name]
+          : ('components.queryBuilder.filter.noValueInDatasource' | translate)
+      }"
     ></ng-container>
   </ng-container>
 
@@ -80,7 +86,17 @@
 
   <!-- TEXT EDITOR -->
   <ng-template #textEditor>
-    <div uiFormFieldDirective [defaultMargin]="false">
+    <div
+      uiFormFieldDirective
+      [defaultMargin]="false"
+      [tooltipDisabled]="!availableFilterHints.includes(field.type)"
+      uiTooltip="{{
+        tooltips[field.name]
+          ? ('components.queryBuilder.filter.examplesFromDatasource'
+              | translate) + tooltips[field.name]
+          : ('components.queryBuilder.filter.noValueInDatasource' | translate)
+      }}"
+    >
       <label>{{ 'common.value.one' | translate }}</label>
       <input formControlName="value" type="string" />
     </div>
@@ -106,7 +122,16 @@
 
   <!-- NUMERIC EDITOR -->
   <ng-template #numericEditor>
-    <div uiFormFieldDirective [defaultMargin]="false">
+    <div
+      uiFormFieldDirective
+      [defaultMargin]="false"
+      uiTooltip="{{
+        tooltips[field.name]
+          ? ('components.queryBuilder.filter.valuesInDatasourceBetween'
+              | translate) + tooltips[field.name]
+          : ('components.queryBuilder.filter.noValueInDatasource' | translate)
+      }}"
+    >
       <label>{{ 'common.value.one' | translate }}</label>
       <input formControlName="value" type="number" />
     </div>
@@ -147,7 +172,16 @@
 
   <!-- DATE EDITOR -->
   <ng-template #dateEditor>
-    <div uiFormFieldDirective [defaultMargin]="false">
+    <div
+      uiFormFieldDirective
+      [defaultMargin]="false"
+      uiTooltip="{{
+        tooltips[field.name]
+          ? ('components.queryBuilder.filter.valuesInDatasourceBetween'
+              | translate) + tooltips[field.name]
+          : ('components.queryBuilder.filter.noValueInDatasource' | translate)
+      }}"
+    >
       <label>{{ 'common.value.one' | translate }}</label>
       <div [uiDateWrapper]="calendar">
         <input

libs/shared/src/lib/components/filter/filter-row/filter-row.component.ts

@@ -14,6 +14,10 @@ import { clone, get } from 'lodash';
 import { takeUntil } from 'rxjs/operators';
 import { UnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
 import { FIELD_TYPES, FILTER_OPERATORS } from '../filter.const';
+import { Apollo } from 'apollo-angular';
+import { firstValueFrom } from 'rxjs';
+import { GET_FIELD_DETAILS } from '../graphql/queries';
+import { DatePipe } from '../../../pipes/date/date.pipe';
 
 /**
  * Composite filter row.
@@ -31,6 +35,8 @@ export class FilterRowComponent
   @Input() form!: UntypedFormGroup;
   /** Available fields */
   @Input() fields: any[] = [];
+  /** records form id*/
+  @Input() resourceId = '';
   /** Delete filter event emitter */
   @Output() delete = new EventEmitter();
   /** Text field editor template */
@@ -53,6 +59,10 @@ export class FilterRowComponent
   public hideEditor = false;
   /** Available operators */
   public operators: any[] = [];
+  /** Tooltips values for filters */
+  public tooltips: { [key: string]: number | string | null } = {};
+  /** Scalar fields types with available tooltips hints */
+  public availableFilterHints = ['date', 'time', 'text', 'numeric'];
 
   /** @returns value form field as form control. */
   get valueControl(): UntypedFormControl {
@@ -61,8 +71,11 @@ export class FilterRowComponent
 
   /**
    * Composite filter row.
+   *
+   * @param apollo apollo service
+   * @param datePipe shared Date pipe
    */
-  constructor() {
+  constructor(private apollo: Apollo, private datePipe: DatePipe) {
     super();
   }
 
@@ -170,11 +183,13 @@ export class FilterRowComponent
    */
   private setEditor(field: any) {
     if (get(field, 'filter.template', null)) {
+      this.setTooltip({ name: field.name, type: field.type }); //Pass only mandatory values: template triggers cylyc object value error
       this.editor = field.filter.template;
     } else {
       switch (field.editor) {
         case 'text': {
           this.editor = this.textEditor;
+          this.setTooltip(field);
           break;
         }
         case 'boolean': {
@@ -188,11 +203,18 @@ export class FilterRowComponent
         }
         case 'numeric': {
           this.editor = this.numericEditor;
+          this.setTooltip(field);
+          break;
+        }
+        case 'time': {
+          this.editor = this.textEditor;
+          this.setTooltip(field);
           break;
         }
         case 'datetime':
         case 'date': {
           this.editor = this.dateEditor;
+          this.setTooltip(field);
           break;
         }
         default: {
@@ -201,4 +223,50 @@ export class FilterRowComponent
       }
     }
   }
+
+  /**
+   * Get the used values for a field from the database
+   *
+   * @param field field to get the tooltip from
+   */
+  setTooltip(field: any) {
+    if (!this.tooltips[field.name]) {
+      firstValueFrom(
+        this.apollo.query<any>({
+          query: GET_FIELD_DETAILS,
+          variables: {
+            resource: this.resourceId,
+            field: field,
+          },
+        })
+      ).then((data: any) => {
+        if (data?.data.fieldDetails.length) {
+          switch (field.type) {
+            case 'text':
+              this.tooltips[field.name] = data.data.fieldDetails;
+              break;
+            case 'time':
+              this.tooltips[field.name] = data.data.fieldDetails
+                .map((time: string) =>
+                  this.datePipe.transform(time, 'shortTime')
+                )
+                .join(' & ');
+              break;
+            case 'date':
+              this.tooltips[field.name] = data.data.fieldDetails
+                .map((date: string) =>
+                  this.datePipe.transform(date, 'shortDate')
+                )
+                .join(' & ');
+              break;
+            case 'numeric':
+              this.tooltips[field.name] = data.data.fieldDetails.join(' & ');
+              break;
+            default:
+              this.tooltips[field.name] = data.data.fieldDetails;
+          }
+        }
+      });
+    }
+  }
 }

libs/shared/src/lib/components/filter/filter.component.html

@@ -1 +1 @@
-<shared-filter-group [form]="form" [fields]="fields"></shared-filter-group>
+<shared-filter-group [form]="form" [fields]="fields" [resourceId]="resourceId"></shared-filter-group>

libs/shared/src/lib/components/filter/filter.component.ts

@@ -12,4 +12,6 @@ import { UntypedFormGroup } from '@angular/forms';
 export class FilterComponent {
   @Input() form!: UntypedFormGroup;
   @Input() fields: any[] = [];
+  /** Records resource id */
+  @Input() resourceId = '';
 }

libs/shared/src/lib/components/filter/graphql/queries.ts

@@ -0,0 +1,8 @@
+import { gql } from 'apollo-angular';
+
+/** Graphql query for getting a form with minimum details by id */
+export const GET_FIELD_DETAILS = gql`
+  query getFieldsDetails($resource: ID!, $field: JSON!) {
+    fieldDetails(resource: $resource, field: $field)
+  }
+`;

libs/shared/src/lib/components/grid-layout/add-layout-modal/add-layout-modal.component.ts

@@ -129,6 +129,7 @@ export class AddLayoutModalComponent
       disableClose: true,
       data: {
         queryName: this.resource?.queryName || this.form?.queryName,
+        resourceId: this.resource?.id,
       },
     });
     dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((layout: any) => {

libs/shared/src/lib/components/grid-layout/edit-layout-modal/edit-layout-modal.component.html

@@ -21,6 +21,7 @@ <h2>{{ 'common.general' | translate }}</h2>
           [templates]="templates"
           [queryName]="data.queryName"
           [layoutPreviewData]="layoutPreviewData"
+          [resourceId]="data.resourceId ? data.resourceId : ''"
         ></shared-query-builder>
       </div>
     </form>

libs/shared/src/lib/components/grid-layout/edit-layout-modal/edit-layout-modal.component.ts

@@ -20,6 +20,7 @@ import { ButtonModule } from '@oort-front/ui';
 interface DialogData {
   layout?: Layout;
   queryName?: string;
+  resourceId?: string;
 }
 
 /**

libs/shared/src/lib/components/grid-layout/layout-table/layout-table.component.ts

@@ -138,6 +138,7 @@ export class LayoutTableComponent
       data: {
         layout,
         queryName: this.resource?.queryName,
+        resourceId: this.resource?.id,
       },
     });
     dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((value: any) => {

libs/shared/src/lib/components/notifications/components/edit-notification-modal/edit-notification-modal.component.ts

@@ -261,6 +261,7 @@ export class EditNotificationModalComponent
       data: {
         layout: this.layout,
         queryName: this.resource?.queryName,
+        resourceId: this.resource?.id,
       },
     });
     dialogRef.closed.pipe(takeUntil(this.destroy$)).subscribe((value: any) => {

libs/shared/src/lib/components/query-builder/date-filter-editor/date-filter-editor.component.html

@@ -1,4 +1,9 @@
-<div uiFormFieldDirective [defaultMargin]="false" *ngIf="!useExpression">
+<div
+  uiFormFieldDirective
+  [defaultMargin]="false"
+  *ngIf="!useExpression"
+  [uiTooltip]="tooltip"
+>
   <label>{{ 'common.value.one' | translate }}</label>
   <div [uiDateWrapper]="calendar">
     <input

libs/shared/src/lib/components/query-builder/date-filter-editor/date-filter-editor.component.ts

@@ -13,6 +13,8 @@ import { isDate } from 'lodash';
 export class DateFilterEditorComponent implements OnInit {
   @Input() control!: UntypedFormControl;
   public useExpression = false;
+  /** Tooltip to get max and min values from datasource */
+  @Input() tooltip = '';
 
   /** @returns Is the first input a date or not. */
   get isDate(): boolean {

libs/shared/src/lib/components/query-builder/query-builder.component.html

@@ -106,6 +106,7 @@
           <shared-tab-filter
             [form]="$any(form.controls.filter)"
             [query]="form.getRawValue()"
+            [resourceId]="resourceId"
           >
           </shared-tab-filter>
         </ng-template>
@@ -120,6 +121,7 @@
             [form]="$any(form.controls.style)"
             [scalarFields]="availableScalarFields"
             [query]="form.getRawValue()"
+            [resourceId]="resourceId"
           >
           </shared-tab-style>
         </ng-template>

libs/shared/src/lib/components/query-builder/query-builder.component.ts

@@ -47,6 +47,7 @@ export class QueryBuilderComponent
   }
 
   @Input() form?: FormGroup;
+  @Input() resourceId = '';
   @Input() canExpand = true;
   @Input() canSelectDataSet = true;
   @Input() templates: Form[] = [];