Merge branch 'beta' into alpha

Author: AntoineRelief

CHANGELOG.md

@@ -1,3 +1,29 @@
+# [2.2.0-beta.16](https://github.com/ReliefApplications/ems-frontend/compare/v2.2.0-beta.15...v2.2.0-beta.16) (2023-12-08)
+
+
+### Bug Fixes
+
+* prevent aggregation fields to be fetched before query builder is ready ([#2139](https://github.com/ReliefApplications/ems-frontend/issues/2139)) ([3bee583](https://github.com/ReliefApplications/ems-frontend/commit/3bee5837c221a799d9e479e91cab0131afb3c259))
+* toggle of archived records would create incorrect list ([#2132](https://github.com/ReliefApplications/ems-frontend/issues/2132)) ([f1abf81](https://github.com/ReliefApplications/ems-frontend/commit/f1abf811189f67841a8770ac5e6cc35af0bf745c))
+
+
+### Features
+
+* add filter input & output in app-widget ([4d94cef](https://github.com/ReliefApplications/ems-frontend/commit/4d94cefd8718f0b382679e2d0fc79e6242bb49e7))
+* allow fields from ref data linked to a resource to be used  ([#1575](https://github.com/ReliefApplications/ems-frontend/issues/1575)) ([cb8b30c](https://github.com/ReliefApplications/ems-frontend/commit/cb8b30ca36074c1544bf3d95796a6553f1de1b55))
+
+# [2.2.0-beta.15](https://github.com/ReliefApplications/ems-frontend/compare/v2.2.0-beta.14...v2.2.0-beta.15) (2023-12-07)
+
+
+### Bug Fixes
+
+* editing widgets could sometimes scroll to top of dashboard ([#2135](https://github.com/ReliefApplications/ems-frontend/issues/2135)) ([da6dd93](https://github.com/ReliefApplications/ems-frontend/commit/da6dd93460ada1446233159ed5988484bd2f9530))
+* few issues with templating & reference data ([c504e92](https://github.com/ReliefApplications/ems-frontend/commit/c504e922e1f73a6f8030b1388f066b6853a0dd4c))
+* incorrectly sized columns ([#2127](https://github.com/ReliefApplications/ems-frontend/issues/2127)) ([c0be7b1](https://github.com/ReliefApplications/ems-frontend/commit/c0be7b1e30ac4b71f659b97845caf2f79adf8edd))
+* pull jobs would not be editable ([cc9d685](https://github.com/ReliefApplications/ems-frontend/commit/cc9d685c3620450a38bd3f0cbbaf38d697dcac6d))
+* remove code information in url after login ([bcfb603](https://github.com/ReliefApplications/ems-frontend/commit/bcfb603b2a74a03437ae6a236451de22c343ca3d))
+* text widget edition would lose widget display configuration ([7f3b18b](https://github.com/ReliefApplications/ems-frontend/commit/7f3b18ba98fded73b0a90681a6019fbc86504707))
+
 # [2.2.0-beta.14](https://github.com/ReliefApplications/ems-frontend/compare/v2.2.0-beta.13...v2.2.0-beta.14) (2023-12-05)
 
 

CHANGELOG/CHANGELOG_beta.md

@@ -159,7 +159,7 @@ <h1 class="!m-0">
       </div>
     </div>
     <ui-paginator
-      [disabled]="loadingMore"
+      [disabled]="loadingMore || updating"
       [pageSize]="pageInfo.pageSize"
       [pageIndex]="pageInfo.pageIndex"
       [totalItems]="pageInfo.length"

apps/back-office/src/app/dashboard/pages/form-records/form-records.component.html

@@ -27,8 +27,14 @@ import {
   SnackbarService,
   UIPageChangeEvent,
   UILayoutService,
+  handleTablePageEvent,
 } from '@oort-front/ui';
 import { GraphQLError } from 'graphql';
+import {
+  getCachedValues,
+  updateQueryUniqueValues,
+} from '../../../utils/update-queries';
+import { ApolloQueryResult } from '@apollo/client';
 
 /** Default items per query, for pagination */
 const ITEMS_PER_PAGE = 10;
@@ -60,6 +66,8 @@ export class FormRecordsComponent
   private historyId = '';
   public cachedRecords: Record[] = [];
   public defaultColumns = DEFAULT_COLUMNS;
+  /** Updating status */
+  public updating = false;
 
   // === DELETED RECORDS VIEW ===
   public showDeletedRecords = false;
@@ -68,7 +76,7 @@ export class FormRecordsComponent
     pageIndex: 0,
     pageSize: ITEMS_PER_PAGE,
     length: 0,
-    endCursor: null as string | null,
+    endCursor: '',
   };
 
   /** @returns True if the layouts tab is empty */
@@ -126,6 +134,7 @@ export class FormRecordsComponent
       variables: {
         id: this.id,
         first: ITEMS_PER_PAGE,
+        afterCursor: this.pageInfo.endCursor,
         display: false,
         showDeletedRecords: this.showDeletedRecords,
       },
@@ -134,21 +143,7 @@ export class FormRecordsComponent
     this.recordsQuery.valueChanges
       .pipe(takeUntil(this.destroy$))
       .subscribe(({ errors, data, loading }) => {
-        this.cachedRecords.push(
-          ...data.form.records.edges.map((x: any) => x.node)
-        );
-        this.dataSource = this.cachedRecords.slice(
-          ITEMS_PER_PAGE * this.pageInfo.pageIndex,
-          ITEMS_PER_PAGE * (this.pageInfo.pageIndex + 1)
-        );
-        this.pageInfo.length = data.form.records.totalCount;
-        this.pageInfo.endCursor = data.form.records.pageInfo.endCursor;
-        this.loadingMore = false;
-
-        this.form = data.form;
-        this.breadcrumbService.setBreadcrumb('@form', this.form.name as string);
-        this.setDisplayedColumns();
-        this.loading = loading;
+        this.updateValues(data, loading, true);
 
         if (errors) {
           // TO-DO: Check why it's not working as intended.
@@ -163,29 +158,93 @@ export class FormRecordsComponent
       });
   }
 
+  /**
+   * Update Records datas query.
+   *
+   * @param refetch erase previous query results
+   */
+  private fetchRecordsData(refetch?: boolean): void {
+    this.loading = true;
+    this.updating = true;
+    const variables = {
+      id: this.id,
+      first: ITEMS_PER_PAGE,
+      afterCursor: refetch ? null : this.pageInfo.endCursor,
+      display: false,
+      showDeletedRecords: this.showDeletedRecords,
+    };
+    // get the records linked to the form
+    const cachedValues: FormRecordsQueryResponse = getCachedValues(
+      this.apollo.client,
+      GET_FORM_RECORDS,
+      variables
+    );
+    if (refetch) {
+      this.cachedRecords = [];
+      this.pageInfo.pageIndex = 0;
+    }
+    if (cachedValues) {
+      this.updateValues(cachedValues, false, refetch);
+    } else {
+      if (refetch) {
+        this.recordsQuery.refetch(variables);
+      } else {
+        this.recordsQuery
+          .fetchMore({ variables })
+          .then((results: ApolloQueryResult<FormRecordsQueryResponse>) => {
+            this.updateValues(results.data, results.loading);
+          });
+      }
+    }
+  }
+
+  /**
+   * Update records data value
+   *
+   * @param data query response data
+   * @param loading loading status
+   * @param setForm control if form should be set
+   */
+  private updateValues(
+    data: FormRecordsQueryResponse,
+    loading: boolean,
+    setForm?: boolean
+  ) {
+    const mappedValues = data.form.records.edges.map((x) => x.node);
+    this.cachedRecords = updateQueryUniqueValues(
+      this.cachedRecords,
+      mappedValues
+    );
+    this.pageInfo.length = data.form.records.totalCount;
+    this.pageInfo.endCursor = data.form.records.pageInfo.endCursor;
+    this.dataSource = this.cachedRecords.slice(
+      this.pageInfo.pageSize * this.pageInfo.pageIndex,
+      this.pageInfo.pageSize * (this.pageInfo.pageIndex + 1)
+    );
+    this.loading = loading;
+    this.updating = false;
+    if (setForm) {
+      this.form = data.form;
+      this.breadcrumbService.setBreadcrumb('@form', this.form.name as string);
+      this.setDisplayedColumns();
+    }
+  }
+
   /**
    * Handles page event.
    *
    * @param e page event.
    */
   onPage(e: UIPageChangeEvent): void {
-    this.pageInfo.pageIndex = e.pageIndex;
-    if (
-      e.pageIndex > e.previousPageIndex &&
-      e.totalItems > this.cachedRecords.length &&
-      ITEMS_PER_PAGE * this.pageInfo.pageIndex >= this.cachedRecords.length
-    ) {
-      this.loadingMore = true;
-      this.recordsQuery.refetch({
-        id: this.id,
-        first: ITEMS_PER_PAGE,
-        afterCursor: this.pageInfo.endCursor,
-      });
+    const cachedData = handleTablePageEvent(
+      e,
+      this.pageInfo,
+      this.cachedRecords
+    );
+    if (cachedData && cachedData.length === this.pageInfo.pageSize) {
+      this.dataSource = cachedData;
     } else {
-      this.dataSource = this.cachedRecords.slice(
-        ITEMS_PER_PAGE * this.pageInfo.pageIndex,
-        ITEMS_PER_PAGE * (this.pageInfo.pageIndex + 1)
-      );
+      this.fetchRecordsData();
     }
   }
 
@@ -392,7 +451,7 @@ export class FormRecordsComponent
               'models.record.notifications.uploadSuccessful'
             )
           );
-          this.getFormData();
+          this.fetchRecordsData(true);
           this.showUpload = false;
         }
       },
@@ -411,7 +470,7 @@ export class FormRecordsComponent
   onSwitchView(e: any): void {
     e.stopPropagation();
     this.showDeletedRecords = !this.showDeletedRecords;
-    this.getFormData();
+    this.fetchRecordsData(true);
   }
 
   /**

apps/back-office/src/app/dashboard/pages/form-records/form-records.component.ts

@@ -18,7 +18,7 @@ import {
 import { debounceTime } from 'rxjs';
 import { isEmpty } from 'lodash';
 import { Router } from '@angular/router';
-import { Location, LocationStrategy } from '@angular/common';
+import { Location } from '@angular/common';
 import { ShadowDomService } from '@oort-front/ui';
 
 /**
@@ -56,13 +56,25 @@ export class AppWidgetComponent
     this.onToggleFilter(opened);
   }
 
+  /** Navigation path */
   @Input()
   set path(value: string) {
     this.router.navigate([value]);
   }
 
+  /** Pass new value to the filter */
+  @Input()
+  set filter(value: any) {
+    this.contextService.filter.next(value);
+  }
+
+  /** Is filter active */
   @Output()
   filterActive$ = new EventEmitter<boolean>();
+  /** Emit filter value */
+  @Output()
+  filter$ = new EventEmitter<any>();
+  /** Available pages */
   @Output()
   pages = new EventEmitter<any[]>();
 
@@ -72,6 +84,10 @@ export class AppWidgetComponent
    * @param el class related element reference
    * @param injector angular application injector
    * @param contextService Shared context service
+   * @param router Angular routter
+   * @param applicationService Shared application service
+   * @param location Angular location
+   * @param shadowDomService Shared shadow dom service
    */
   constructor(
     el: ElementRef,
@@ -80,13 +96,13 @@ export class AppWidgetComponent
     private router: Router,
     private applicationService: ApplicationService,
     private location: Location,
-    private locationStrategy: LocationStrategy,
     private shadowDomService: ShadowDomService
   ) {
     super(el, injector);
     this.shadowDomService.shadowRoot = el.nativeElement.shadowRoot;
     this.contextService.filter$.pipe(debounceTime(500)).subscribe((value) => {
       this.filterActive$.emit(!isEmpty(value));
+      this.filter$.emit(value);
     });
     this.applicationService.application$.subscribe(
       (application: Application | null) => {

apps/web-widgets/src/app/widgets/app-widget/app-widget.component.ts

@@ -31,7 +31,7 @@ export class ApplicationComponent
   public hideMenu = false;
   /** Is large device */
   public largeDevice: boolean;
-  /** Is loading */
+  /** Loading indicator */
   public loading = true;
 
   /**

apps/web-widgets/src/app/widgets/app-widget/application/application.component.ts

@@ -102,7 +102,11 @@ export class AggregationGridComponent
       .subscribe(() => {
         this.getAggregationData();
       });
-    this.getAggregationFields();
+    this.queryBuilder.isDoneLoading$.subscribe((doneLoading) => {
+      if (doneLoading) {
+        this.getAggregationFields();
+      }
+    });
   }
 
   ngOnChanges(): void {

libs/shared/src/lib/components/aggregation/aggregation-grid/aggregation-grid.component.ts

@@ -1157,6 +1157,12 @@ export class GridComponent
     });
     // If aggregation, set the width of the columns here (cannot use layout parameters)
     if (this.useAggregation) {
+      this.columns.forEach((column) =>
+        this.grid?.reorderColumn(
+          column,
+          this.fields.findIndex((field: any) => field.name === column.field)
+        )
+      );
       this.setColumnsWidth();
     }
   }

libs/shared/src/lib/components/ui/core-grid/grid/grid.component.ts

@@ -1,6 +1,11 @@
 import { Apollo, gql } from 'apollo-angular';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
+import {
+  BehaviorSubject,
+  firstValueFrom,
+  Observable,
+  ReplaySubject,
+} from 'rxjs';
 import { GET_QUERY_META_DATA, GET_QUERY_TYPES } from './graphql/queries';
 import { ApolloQueryResult } from '@apollo/client';
 import get from 'lodash/get';
@@ -101,6 +106,11 @@ export class QueryBuilderService {
     return this.availableTypes.asObservable();
   }
 
+  /** Loading indicator that asserts whether available queries are done loading */
+  private isDoneLoading = new ReplaySubject<boolean>();
+  /** Loading indicator as observable */
+  public isDoneLoading$ = this.isDoneLoading.asObservable();
+
   /** User fields */
   private userFields = [];
 
@@ -111,20 +121,19 @@ export class QueryBuilderService {
    * @param apollo Apollo client
    */
   constructor(private apollo: Apollo) {
+    this.isDoneLoading.next(false);
     this.apollo
       .query<QueryTypes>({
         query: GET_QUERY_TYPES,
       })
       .subscribe(({ data }) => {
-        // eslint-disable-next-line no-underscore-dangle
+        this.isDoneLoading.next(true);
         this.availableTypes.next(data.__schema.types);
         this.availableQueries.next(
-          // eslint-disable-next-line no-underscore-dangle
           data.__schema.queryType.fields.filter((x: any) =>
             x.name.startsWith('all')
           )
         );
-        // eslint-disable-next-line no-underscore-dangle
         this.userFields = data.__schema.types
           .find((x: any) => x.name === 'User')
           .fields.filter((x: any) => USER_FIELDS.includes(x.name));