Merge pull request #2457 from ReliefApplications/2.x.x

2.x.x

Author: AntoineRelief

.devops/dev-CD.yml

@@ -28,6 +28,8 @@ steps:
 - script: |
     npx nx run front-office:build:azure-dev
     npx nx run back-office:build:azure-dev
+    npx nx run web-widgets:build:azure-dev
+    node .scripts/build-widgets.js
   displayName: 'build the apps'
 
 - task: ArchiveFiles@2
@@ -46,6 +48,32 @@ steps:
     archiveFile: '$(Build.ArtifactStagingDirectory)/dev/back-office/$(Build.BuildId).zip'
     replaceExistingArchive: true
 
+- task: CopyFiles@2
+  inputs:
+    SourceFolder: '$(System.DefaultWorkingDirectory)/widgets'
+    Contents: 'app-builder.js' # Only copy a single file
+    TargetFolder: '$(Build.ArtifactStagingDirectory)/temp/web-widgets'
+
+- task: CopyFiles@2
+  inputs:
+    SourceFolder: '$(System.DefaultWorkingDirectory)/dist/apps/front-office/tinymce'
+    Contents: '**'
+    TargetFolder: '$(Build.ArtifactStagingDirectory)/temp/web-widgets/tinymce'
+
+- task: CopyFiles@2
+  inputs:
+    SourceFolder: '$(System.DefaultWorkingDirectory)/dist/apps/front-office/assets/i18n'
+    Contents: '**'
+    TargetFolder: '$(Build.ArtifactStagingDirectory)/temp/web-widgets/i18n'
+
+- task: ArchiveFiles@2
+  inputs:
+    rootFolderOrFile: '$(Build.ArtifactStagingDirectory)/temp/web-widgets'
+    includeRootFolder: false
+    archiveType: 'zip'
+    archiveFile: '$(Build.ArtifactStagingDirectory)/dev/web-widgets/$(Build.BuildId).zip'
+    replaceExistingArchive: true
+
 - task: PublishBuildArtifacts@1
   inputs:
     PathtoPublish: '$(Build.ArtifactStagingDirectory)/dev/front-office/$(Build.BuildId).zip'
@@ -57,3 +85,9 @@ steps:
     PathtoPublish: '$(Build.ArtifactStagingDirectory)/dev/back-office/$(Build.BuildId).zip'
     ArtifactName: 'dev-back-office'
     publishLocation: 'Container'
+
+- task: PublishBuildArtifacts@1
+  inputs:
+    PathtoPublish: '$(Build.ArtifactStagingDirectory)/temp/web-widgets'
+    ArtifactName: 'dev-web-widgets'
+    publishLocation: 'Container'

CHANGELOG.md

@@ -1,3 +1,20 @@
+# [2.10.0](https://github.com/ReliefApplications/ems-frontend/compare/v2.9.0...v2.10.0) (2024-03-01)
+
+
+### Bug Fixes
+
+* due to query params some components could be duplicated in sui ([faf3986](https://github.com/ReliefApplications/ems-frontend/commit/faf39869bc4244652a9ebef90535697a056360c0))
+* fullscreen control would not work in web elements mode ([#2425](https://github.com/ReliefApplications/ems-frontend/issues/2425)) ([4f0dd92](https://github.com/ReliefApplications/ems-frontend/commit/4f0dd9278739affd64cdfaaf46bec90711c67846))
+* layers overlay could be hidden on maps, when using fullscreen & web elements ([#2424](https://github.com/ReliefApplications/ems-frontend/issues/2424)) ([49e6db7](https://github.com/ReliefApplications/ems-frontend/commit/49e6db7135137ca4d361e46a8e5dfbfaf2ff74a4))
+* map could sometimes disappear on some browsers due to a browser limitation ([79d1a1c](https://github.com/ReliefApplications/ems-frontend/commit/79d1a1cb5bf0a63c0283a9e4db19fc4de6944fd2))
+* only one mutation instance supported ([#2419](https://github.com/ReliefApplications/ems-frontend/issues/2419)) ([2b80a9f](https://github.com/ReliefApplications/ems-frontend/commit/2b80a9ff984a6c071480f58619dde678c56e560d))
+* selecting some reference data in questions in dashboard filter, using web elements, could not reflect on other pages  ([#2420](https://github.com/ReliefApplications/ems-frontend/issues/2420)) ([729957a](https://github.com/ReliefApplications/ems-frontend/commit/729957a69f2b612b19e4edc44d68a6bff2c6395b))
+
+
+### Features
+
+* allow widgets to build automation rules ([#2422](https://github.com/ReliefApplications/ems-frontend/issues/2422)) ([9457fd4](https://github.com/ReliefApplications/ems-frontend/commit/9457fd4662243216e9145b82d555b901492357c8))
+
 # [2.9.0](https://github.com/ReliefApplications/ems-frontend/compare/v2.8.3...v2.9.0) (2024-02-23)
 
 

README.md

@@ -138,29 +138,20 @@ To test web components, you can:
 - execute: `npm i && npm run start`
 You should find under the form widget dropdown some form types in order to test the form web component.
 
-<!-- ## Build the web components
+### Build the web components
 
-We first need to generate the elements, using this command:
+You can use the makefile command:
 ```
-npm run build:elem
+make bundle-widgets
 ```
 
-Then, a bundle can be generated from the files using this command:
+By default, the target is azure-dev project, but you can change it like that:
+```
+make bundle-widgets project=azure-prod
 ```
-npm run bundle:elem
-``` -->
-
-<!-- ## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). -->
-
-<!-- ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). -->
+The command will generate a file under the `widgets` folder, called `app-builder.js`.
+This is the file you'll need to deploy on Azure blob storage to provide the code.
 
 If you need to upload files to the blob storage where we store shared assets, you can use the az commands.
 First, build the front-office in production mode ( any environment, but same version ).

apps/back-office/project.json

@@ -61,7 +61,6 @@
           "node_modules/leaflet/dist/leaflet.css",
           "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
           "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css",
-          "node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css",
           "node_modules/leaflet-measure/dist/leaflet-measure.css",
           "node_modules/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css",
           "node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"

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

@@ -9,7 +9,6 @@ import {
   OnInit,
   Output,
   Renderer2,
-  ViewChild,
 } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import {
@@ -18,15 +17,15 @@ import {
   WorkflowService,
   DashboardService,
   Application,
-  UnsubscribeComponent,
-  WidgetGridComponent,
   ConfirmService,
   ReferenceDataService,
   Record,
   ButtonActionT,
   ResourceRecordsNodesQueryResponse,
   DashboardQueryResponse,
   EditDashboardMutationResponse,
+  DashboardComponent as SharedDashboardComponent,
+  DashboardAutomationService,
 } from '@oort-front/shared';
 import { EDIT_DASHBOARD } from './graphql/mutations';
 import { GET_DASHBOARD_BY_ID, GET_RESOURCE_RECORDS } from './graphql/queries';
@@ -61,16 +60,20 @@ const ITEMS_PER_PAGE = 10;
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
+  providers: [
+    {
+      provide: SharedDashboardComponent,
+      useClass: DashboardComponent,
+    },
+    DashboardAutomationService,
+  ],
 })
 export class DashboardComponent
-  extends UnsubscribeComponent
+  extends SharedDashboardComponent
   implements OnInit, OnDestroy
 {
   /** Change step event ( in workflow ) */
   @Output() changeStep: EventEmitter<number> = new EventEmitter();
-  /** Widget grid reference */
-  @ViewChild(WidgetGridComponent)
-  widgetGridComponent!: WidgetGridComponent;
   /** Is dashboard in fullscreen mode */
   public isFullScreen = false;
   /** Dashboard id */
@@ -79,8 +82,6 @@ export class DashboardComponent
   public applicationId?: string;
   /** Is dashboard loading */
   public loading = true;
-  /** List of widgets */
-  public widgets: any[] = [];
   /** Current dashboard */
   public dashboard?: Dashboard;
   /** Show dashboard filter */
@@ -150,6 +151,7 @@ export class DashboardComponent
    * @param layoutService Shared layout service
    * @param document Document
    * @param clipboard Angular clipboard service
+   * @param dashboardAutomationService Dashboard automation service
    */
   constructor(
     private applicationService: ApplicationService,
@@ -168,9 +170,11 @@ export class DashboardComponent
     private elementRef: ElementRef,
     private layoutService: UILayoutService,
     @Inject(DOCUMENT) private document: Document,
-    private clipboard: Clipboard
+    private clipboard: Clipboard,
+    private dashboardAutomationService: DashboardAutomationService
   ) {
     super();
+    this.dashboardAutomationService.dashboard = this;
   }
 
   ngOnInit(): void {
@@ -277,6 +281,7 @@ export class DashboardComponent
                 return widget;
               }) || []
           );
+          this.dashboardService.widgets.next(this.widgets);
           this.applicationId = this.dashboard.page
             ? this.dashboard.page.application?.id
             : this.dashboard.step
@@ -486,10 +491,14 @@ export class DashboardComponent
       })
       .subscribe({
         next: ({ errors }) => {
-          this.applicationService.handleEditionMutationResponse(
-            errors,
-            this.translate.instant('common.dashboard.one')
-          );
+          if (errors) {
+            this.applicationService.handleEditionMutationResponse(
+              errors,
+              this.translate.instant('common.dashboard.one')
+            );
+          } else {
+            this.dashboardService.widgets.next(this.widgets);
+          }
         },
         complete: () => (this.loading = false),
       });

apps/back-office/src/app/dashboard/pages/resource/aggregations-tab/aggregations-tab.component.html

@@ -5,17 +5,8 @@
   [dataSource]="aggregations"
   [canUpdate]="resource.canUpdate ?? false"
   [displayedColumns]="displayedColumnsAggregations"
+  [pageInfo]="pageInfo"
+  (pageChange)="onPage($event)"
   (itemAction)="handleAction($event)"
 >
-  <ng-container ngProjectAs="pagination">
-    <ui-paginator
-      [disabled]="loading"
-      [pageIndex]="pageInfo.pageIndex"
-      [pageSize]="pageInfo.pageSize"
-      [pageSizeOptions]="[10, 25, 50]"
-      [totalItems]="pageInfo.length"
-      (pageChange)="onPage($event)"
-    >
-    </ui-paginator>
-  </ng-container>
 </app-data-presentation-list>

apps/back-office/src/app/dashboard/pages/resource/aggregations-tab/aggregations-tab.module.ts

@@ -4,7 +4,6 @@ import { AggregationsTabRoutingModule } from './aggregations-tab-routing.module'
 import { OverlayModule } from '@angular/cdk/overlay';
 import { AggregationBuilderModule } from '@oort-front/shared';
 import { AggregationsTabComponent } from './aggregations-tab.component';
-import { PaginatorModule } from '@oort-front/ui';
 import { DataPresentationListComponent } from '../components/data-presentation-list/data-presentation-list.component';
 
 /**
@@ -17,7 +16,6 @@ import { DataPresentationListComponent } from '../components/data-presentation-l
     AggregationsTabRoutingModule,
     AggregationBuilderModule,
     OverlayModule,
-    PaginatorModule,
     DataPresentationListComponent,
   ],
 })

apps/back-office/src/app/dashboard/pages/resource/components/data-presentation-list/data-presentation-list.component.html

@@ -73,7 +73,15 @@
       </div>
     </div>
     <!-- Pagination -->
-    <ng-content select="pagination"></ng-content>
+    <ui-paginator
+      [disabled]="loading"
+      [pageIndex]="pageInfo.pageIndex"
+      [pageSize]="pageInfo.pageSize"
+      [pageSizeOptions]="[10, 25, 50]"
+      [totalItems]="pageInfo.length"
+      (pageChange)="onPage($event)"
+    >
+    </ui-paginator>
   </ng-container>
   <ng-template #emptyTmpl>
     <!-- Empty indicator -->

apps/back-office/src/app/dashboard/pages/resource/components/data-presentation-list/data-presentation-list.component.ts

@@ -13,8 +13,10 @@ import {
   DividerModule,
   IconModule,
   MenuModule,
+  PaginatorModule,
   TableModule,
   TooltipModule,
+  UIPageChangeEvent,
 } from '@oort-front/ui';
 
 /**
@@ -35,6 +37,7 @@ import {
     TranslateModule,
     TooltipModule,
     DateModule,
+    PaginatorModule,
   ],
   templateUrl: './data-presentation-list.component.html',
   styleUrls: ['./data-presentation-list.component.scss'],
@@ -65,6 +68,16 @@ export class DataPresentationListComponent {
    */
   @Input() displayedColumns: string[] = [];
 
+  /**
+   * Page information of the current displayed list
+   */
+  @Input() pageInfo = {
+    pageIndex: 0,
+    pageSize: 10,
+    length: 0,
+    endCursor: '',
+  };
+
   /**
    * Event emitter for the item action
    */
@@ -76,6 +89,12 @@ export class DataPresentationListComponent {
     item: Aggregation | Layout | null | undefined;
   }>();
 
+  /**
+   * Page change event emit from pagination
+   */
+  @Output()
+  pageChange = new EventEmitter<UIPageChangeEvent>();
+
   /** @returns True if the dataSource tab is empty */
   get empty(): boolean {
     return !this.loading && this.dataSource.length === 0;
@@ -93,4 +112,13 @@ export class DataPresentationListComponent {
   ) {
     this.itemAction.emit({ type, item });
   }
+
+  /**
+   * Emit pagination change event to parent component
+   *
+   * @param event Current UI page change event
+   */
+  onPage(event: UIPageChangeEvent) {
+    this.pageChange.emit(event);
+  }
 }

apps/back-office/src/app/dashboard/pages/resource/layouts-tab/layouts-tab.component.html

@@ -5,17 +5,8 @@
   [dataSource]="layouts"
   [canUpdate]="resource.canUpdate ?? false"
   [displayedColumns]="displayedColumnsLayouts"
+  [pageInfo]="pageInfo"
+  (pageChange)="onPage($event)"
   (itemAction)="handleAction($event)"
 >
-  <ng-container ngProjectAs="pagination">
-    <ui-paginator
-      [disabled]="loading"
-      [pageIndex]="pageInfo.pageIndex"
-      [pageSize]="pageInfo.pageSize"
-      [pageSizeOptions]="[10, 25, 50]"
-      [totalItems]="pageInfo.length"
-      (pageChange)="onPage($event)"
-    >
-    </ui-paginator>
-  </ng-container>
 </app-data-presentation-list>