fix: Pagination on choose record modal for attach to record button (#1640)

* Fix: Pagination on choose record modal for attach to record button

* fix/AB#69369_pagination-on-choose-record-mal refactor: remove no more needed loading spinner as the component is now using ui-graphql-select

* Fix: On the record selection modal, switching to the grid view now keeps the previously selected record

---------

Co-authored-by: Unai Zalba <[email protected]>
Co-authored-by: Antoine Hurard <[email protected]>

Author: 3 people

libs/safe/src/i18n/en.json

@@ -260,6 +260,7 @@
 		},
 		"save": "Save",
 		"saveChanges": "Save changes",
+		"search": "Search",
 		"searchObject": "Search {{name}}",
 		"select": "Select",
 		"send": "Send",

libs/safe/src/i18n/fr.json

@@ -260,6 +260,7 @@
 		},
 		"save": "Sauvegarder",
 		"saveChanges": "Sauvegarder les changements",
+		"search": "Recherche",
 		"searchObject": "Rechercher {{name}}",
 		"select": "Sélectionner",
 		"send": "Envoyer",

libs/safe/src/i18n/test.json

@@ -260,6 +260,7 @@
 		},
 		"save": "******",
 		"saveChanges": "******",
+		"search": "******",
 		"searchObject": "****** {{name}}",
 		"select": "******",
 		"send": "******",

libs/safe/src/lib/components/choose-record-modal/choose-record-modal.component.html

@@ -8,50 +8,51 @@ <h1>
     </h1>
   </ng-container>
   <ng-container ngProjectAs="content">
-    <ui-spinner *ngIf="loading"></ui-spinner>
-    <ng-container *ngIf="!loading">
-      <form [formGroup]="chooseRecordForm" *ngIf="!isSearchActivated">
-        <div class="flex flex-col">
-          <div uiFormFieldDirective>
-            <label>{{ 'common.record.one' | translate }}</label>
-            <ui-select-menu formControlName="record" (opened)="onOpenSelect()">
-              <ui-select-option
-                *ngFor="let record of records$ | async"
-                [value]="record.value"
-              >
-                {{ record.label }}
-              </ui-select-option>
-            </ui-select-menu>
-          </div>
+    <form [formGroup]="chooseRecordForm" *ngIf="!isSearchActivated">
+      <div class="flex flex-col">
+        <div uiFormFieldDirective>
+          <label>{{ 'common.record.one' | translate }}</label>
+          <ui-graphql-select
+            *ngIf="dataQuery"
+            [query]="dataQuery"
+            formControlName="record"
+            valueField="id"
+            [textField]="this.data.targetFormField"
+            (searchChange)="onSearchChange($event)"
+            [filterable]="true"
+          >
+          </ui-graphql-select>
         </div>
-      </form>
-      <safe-core-grid
-        *ngIf="isSearchActivated"
-        [settings]="settings"
-        [multiSelect]="false"
-        [selectedRows]="selectedRows"
-        (selectionChange)="onSelectionChange($event)"
-        class="h-96"
-      >
-      </safe-core-grid>
-    </ng-container>
+      </div>
+    </form>
+    <safe-core-grid
+      *ngIf="isSearchActivated"
+      [settings]="settings"
+      [multiSelect]="false"
+      [selectedRows]="
+        chooseRecordForm.value.record ? [chooseRecordForm.value.record] : []
+      "
+      (selectionChange)="onSelectionChange($event)"
+      class="h-96"
+    >
+    </safe-core-grid>
   </ng-container>
   <ng-container ngProjectAs="actions">
     <ui-button
       category="secondary"
       cdkFocusInitial
-      (click)="onSearch()"
-      *ngIf="!loading && data.targetFormQuery"
+      (click)="isSearchActivated = !isSearchActivated"
+      *ngIf="data.targetFormQuery"
     >
-      {{ isSearchActivated ? 'Select' : 'Search' }}
+      {{ (isSearchActivated ? 'common.select' : 'common.search') | translate }}
     </ui-button>
     <ui-button (click)="onClose()">{{ 'common.cancel' | translate }}</ui-button>
     <ui-button
       category="secondary"
       variant="primary"
       [uiDialogClose]="chooseRecordForm.value"
       cdkFocusInitial
-      [disabled]="loading || !chooseRecordForm.valid"
+      [disabled]="!chooseRecordForm.valid"
     >
       {{ 'components.record.attach.confirm' | translate }}
     </ui-button>

libs/safe/src/lib/components/choose-record-modal/choose-record-modal.component.ts

@@ -1,31 +1,17 @@
-import { Component, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import {
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  Validators,
-} from '@angular/forms';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
 import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
 import { Apollo } from 'apollo-angular';
 import { SafeUnsubscribeComponent } from '../utils/unsubscribe/unsubscribe.component';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { QueryBuilderService } from '../../services/query-builder/query-builder.service';
 import { GridSettings } from '../ui/core-grid/models/grid-settings.model';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { SpinnerModule } from '@oort-front/ui';
-import { SafeResourceDropdownModule } from '../resource-dropdown/resource-dropdown.module';
-import { SafeApplicationDropdownModule } from '../application-dropdown/application-dropdown.module';
-import { SafeRecordDropdownModule } from '../record-dropdown/record-dropdown.module';
+import { GraphQLSelectModule } from '@oort-front/ui';
 import { SafeCoreGridModule } from '../ui/core-grid/core-grid.module';
 import { TranslateModule } from '@ngx-translate/core';
-import {
-  DialogModule,
-  FormWrapperModule,
-  SelectMenuModule,
-  ButtonModule,
-} from '@oort-front/ui';
-import {} from '@oort-front/ui';
+import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { DialogModule, FormWrapperModule, ButtonModule } from '@oort-front/ui';
 
 /**
  * A constant that is used to set the number of items to be displayed on the page.
@@ -41,14 +27,6 @@ interface DialogData {
   targetFormQuery: any;
 }
 
-/**
- * Interface that describes the structure of the data for the records
- */
-interface IRecord {
-  value: string;
-  label: any;
-}
-
 /**
  * Component used for the modals that allow the users to chose records
  */
@@ -58,16 +36,12 @@ interface IRecord {
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    SpinnerModule,
-    SafeResourceDropdownModule,
-    SafeApplicationDropdownModule,
-    SafeRecordDropdownModule,
     SafeCoreGridModule,
     TranslateModule,
     DialogModule,
     ButtonModule,
     FormWrapperModule,
-    SelectMenuModule,
+    GraphQLSelectModule,
   ],
   selector: 'safe-choose-record-modal',
   templateUrl: './choose-record-modal.component.html',
@@ -78,49 +52,36 @@ export class SafeChooseRecordModalComponent
   implements OnInit, OnDestroy
 {
   // === REACTIVE FORM ===
-  chooseRecordForm: UntypedFormGroup = new UntypedFormGroup({});
+  public chooseRecordForm = this.formBuilder.group({
+    record: ['', Validators.required],
+  });
 
   // === GRID SETTINGS ===
   public settings: GridSettings = {};
 
   // === DATA ===
-  private records = new BehaviorSubject<IRecord[]>([]);
-  public records$!: Observable<IRecord[]>;
-  private filter: any;
-  private dataQuery: any;
-  private pageInfo = {
-    endCursor: '',
-    hasNextPage: true,
-  };
-  private scrollListener!: any;
+  private filter: CompositeFilterDescriptor | undefined;
+  public dataQuery: any;
 
   // === LOAD DATA ===
-  public loading = true;
   public isSearchActivated = false;
-  public selectedRows: any[] = [];
 
   /**
    * The constructor function is a special function that is called when a new instance of the class is
    * created.
    *
-   * @param queryBuilder This is the service that will be used to build the
-   * query.
-   * @param formBuilder This is used to create the form that will be used
-   * to search for records.
-   * @param apollo This is the Apollo service that we will use to make our GraphQL
-   * queries.
+   * @param queryBuilder This is the service that will be used to build the query.
+   * @param formBuilder This is used to create the form that will be used to search for records.
+   * @param apollo This is the Apollo service that we will use to make our GraphQL queries.
    * @param dialogRef This is the dialog that will be opened
-   * @param renderer Renderer2
-   * @param data This is the data that is passed into the modal when it is
-   * opened.
+   * @param data This is the data that is passed into the modal when it is opened.
    * @param document Document
    */
   constructor(
     private queryBuilder: QueryBuilderService,
-    private formBuilder: UntypedFormBuilder,
+    private formBuilder: FormBuilder,
     private apollo: Apollo,
     public dialogRef: DialogRef<SafeChooseRecordModalComponent>,
-    private renderer: Renderer2,
     @Inject(DIALOG_DATA) public data: DialogData,
     @Inject(DOCUMENT) public document: Document
   ) {
@@ -129,8 +90,9 @@ export class SafeChooseRecordModalComponent
 
   ngOnInit(): void {
     this.settings = { query: this.data.targetFormQuery };
-    this.filter = this.settings.query?.filter || {};
+    this.filter = this.settings.query?.filter || undefined;
     if (!this.settings.query?.name) return;
+
     const builtQuery = this.queryBuilder.buildQuery({
       ...this.settings,
       query: {
@@ -139,6 +101,7 @@ export class SafeChooseRecordModalComponent
       },
     });
     if (!builtQuery) return;
+
     this.dataQuery = this.apollo.watchQuery({
       query: builtQuery,
       variables: {
@@ -153,20 +116,7 @@ export class SafeChooseRecordModalComponent
         },
       },
     });
-    if (this.dataQuery) {
-      this.records$ = this.records.asObservable();
-      this.dataQuery.valueChanges.pipe(takeUntil(this.destroy$)).subscribe({
-        next: ({ data, loading }: any) => {
-          this.updateValues(data, loading);
-        },
-        complete: () => (this.loading = false),
-      });
-    } else {
-      this.loading = false;
-    }
-    this.chooseRecordForm = this.formBuilder.group({
-      record: [null, Validators.required],
-    });
+
     this.settings = {
       query: this.data.targetFormQuery,
       actions: {
@@ -181,10 +131,25 @@ export class SafeChooseRecordModalComponent
   }
 
   /**
-   * Set the boolean isSearchActivated to true on search
+   * Changes the query according to search text
+   *
+   * @param search Search text from the graphql select
    */
-  onSearch(): void {
-    this.isSearchActivated = !this.isSearchActivated;
+  onSearchChange(search: string): void {
+    const variables = this.dataQuery.variables;
+    this.dataQuery.refetch({
+      ...variables,
+      filter: {
+        logic: 'and',
+        filters: [
+          {
+            field: this.data.targetFormField,
+            operator: 'contains',
+            value: search,
+          },
+        ],
+      },
+    });
   }
 
   /**
@@ -208,77 +173,4 @@ export class SafeChooseRecordModalComponent
   onClose(): void {
     this.dialogRef.close();
   }
-
-  /**
-   * Adds scroll listener to select.
-   *
-   */
-  onOpenSelect(): void {
-    const panel = this.document.getElementById('optionList');
-    if (panel) {
-      if (this.scrollListener) {
-        this.scrollListener();
-      }
-      this.scrollListener = this.renderer.listen(
-        panel,
-        'scroll',
-        (event: any) => this.loadOnScroll(event)
-      );
-    }
-  }
-
-  /**
-   * Fetches more resources on scroll.
-   *
-   * @param e scroll event.
-   */
-  private loadOnScroll(e: any): void {
-    if (
-      e.target.scrollHeight - (e.target.clientHeight + e.target.scrollTop) <
-      50
-    ) {
-      if (!this.loading && this.pageInfo.hasNextPage) {
-        this.loading = true;
-        this.dataQuery
-          .fetchMore({
-            variables: {
-              first: ITEMS_PER_PAGE,
-              skip: this.records.getValue().length,
-              afterCursor: this.pageInfo.endCursor,
-            },
-          })
-          .then((results: any) =>
-            this.updateValues(results.data, results.loading)
-          );
-      }
-    }
-  }
-
-  /**
-   * Update record data value
-   *
-   * @param data query response data
-   * @param loading loading status
-   */
-  private updateValues(data: any, loading: boolean) {
-    for (const field in data) {
-      if (Object.prototype.hasOwnProperty.call(data, field)) {
-        const nodes =
-          data[field].edges.map((x: any) => ({
-            value: x.node.id,
-            label: x.node[this.data.targetFormField],
-          })) || [];
-        this.pageInfo = data[field].pageInfo;
-        this.records.next(nodes);
-      }
-    }
-    this.loading = loading;
-  }
-
-  override ngOnDestroy(): void {
-    super.ngOnDestroy();
-    if (this.scrollListener) {
-      this.scrollListener();
-    }
-  }
 }

libs/safe/src/lib/components/widgets/grid-settings/button-config/button-config.component.html

@@ -225,7 +225,7 @@
               <ui-select-option>--</ui-select-option>
               <ui-select-option
                 *ngFor="let field of targetResource.fields"
-                [value]="field.id"
+                [value]="field.name"
               >
                 {{ field.name }}
               </ui-select-option>