Custom card list screen : show response buttons and checkboxes only when all cards have been loaded (#7998)

ui/main/src/app/components/customCardList/CustomCardListComponent.html

@@ -75,7 +75,7 @@ <h1>Custom Screen {{id}} does not exist</h1>
         <div *ngIf="responseFromMyEntitiesFilterVisible">
             <label
                 id="opfab-show-cards-with-response"
-                style="font-weight: bold; margin-left: 5px; margin-right: 30px; margin-bottom: 0px"
+                style="font-weight: bold; margin-left: 5px; margin-right: 30px; margin-bottom: 0px; margin-top: 10px"
                 class="opfab-checkbox"
                 translate
                 >feed.filters.showCardsWithResponse.label
@@ -86,14 +86,26 @@ <h1>Custom Screen {{id}} does not exist</h1>
         <div *ngIf="responseFromAllEntitiesFilterVisible">
             <label
                 id="opfab-show-cards-with-all-response"
-                style="font-weight: bold; margin-left: 5px; margin-bottom: 0px"
+                style="font-weight: bold; margin-left: 5px; margin-bottom: 0px; margin-top: 10px"
                 class="opfab-checkbox"
                 translate
                 >shared.filters.showCardsWithResponseFromAllEntities
                 <input type="checkbox" formControlName="responseFromAllEntities" />
                 <span class="opfab-checkbox-checkmark"></span>
             </label>
         </div>
+        <div *ngIf="loadingInProgress" class="opfab-loading-spinner">
+            <ng-template #tipLoadingInProgress>
+                <span translate>feed.tips.loadingInProgress</span>
+            </ng-template>
+            <div
+                [ngbPopover]="tipLoadingInProgress"
+                popoverClass="opfab-popover-unclickable"
+                container="body"
+                triggers="mouseenter:mouseleave">
+                <em class="fas fa-spinner fa-spin opfab-slow-spinner"></em>
+            </div>
+        </div>
     </div>
 
     <div
@@ -104,14 +116,25 @@ <h1>Custom Screen {{id}} does not exist</h1>
             margin-right: 5%;
         ">
         <ag-grid-angular
+            *ngIf="loadingInProgress; else rowSelectionEnabled"
             [rowData]="rowData$ | async"
             [gridOptions]="gridOptions"
             style="overflow-y: auto; max-height: calc(100vh - 350px)"
-            [rowSelection]="rowSelection"
             (gridReady)="onGridReady($event)"
             (cellClicked)="selectCard($event)"
             class="ag-theme-opfab">
         </ag-grid-angular>
+        <ng-template #rowSelectionEnabled>
+            <ag-grid-angular
+                [rowData]="rowData$ | async"
+                [gridOptions]="gridOptions"
+                style="overflow-y: auto; max-height: calc(100vh - 350px)"
+                [rowSelection]="rowSelection"
+                (gridReady)="onGridReady($event)"
+                (cellClicked)="selectCard($event)"
+                class="ag-theme-opfab">
+            </ag-grid-angular>
+        </ng-template>
 
         <div *ngIf="gridApi" class="opfab-pagination" style="padding-bottom: 5px">
             <div style="width: 200px; margin-top: 15px; flex-shrink: 0">
@@ -140,14 +163,16 @@ <h1>Custom Screen {{id}} does not exist</h1>
                     [rotate]="true">
                 </ngb-pagination>
             </div>
-            <div *ngFor="let responseButton of responseButtons" class="opfab-custom-screen-response-btn">
-                <button
-                    id="opfab-card-details-btn-unack"
-                    class="opfab-btn"
-                    (click)="clickOnResponseButton(responseButton.id)">
-                    {{ responseButton.label }}
-                </button>
-            </div>
+            <ng-container *ngIf="!loadingInProgress">
+                <div *ngFor="let responseButton of responseButtons" class="opfab-custom-screen-response-btn">
+                    <button
+                        id="opfab-card-details-btn-unack"
+                        class="opfab-btn"
+                        (click)="clickOnResponseButton(responseButton.id)">
+                        {{ responseButton.label }}
+                    </button>
+                </div>
+            </ng-container>
 
             <div class="opfab-custom-card-list-export-div">
                 <div

ui/main/src/app/components/customCardList/CustomCardListComponent.scss

@@ -31,15 +31,28 @@
     display: flex;
     margin-left: 5%;
     margin-top: 20px;
-    margin-bottom: 10px;
     font-size: 30px;
     text-align: center;
     background-color: var(--opfab-bgcolor);
     color: var(--opfab-text-color);
+    height: 40px;
+    margin-bottom: 5px;
 }
 
 .opfab-custom-screen-response-btn {
     float: right;
     margin-left: 10px;
 }
 
+
+.opfab-loading-spinner {
+    float: right;
+    margin-left: auto;
+    margin-right: 5%;
+    font-size: 30px;
+    border: solid 1px var(--opfab-bgcolor);
+    text-align: center;
+    background-color: var(--opfab-bgcolor);
+    color: #aaa;
+}
+

ui/main/src/app/components/customCardList/CustomCardListComponent.ts

@@ -10,7 +10,7 @@
 import {AsyncPipe, NgFor, NgIf} from '@angular/common';
 import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgbModal, NgbModalOptions, NgbModalRef, NgbPagination} from '@ng-bootstrap/ng-bootstrap';
+import {NgbModal, NgbModalOptions, NgbModalRef, NgbPagination, NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule} from '@ngx-translate/core';
 import {SelectedCardService} from '@ofServices/selectedCard/SelectedCardService';
 import {TranslationService} from '@ofServices/translation/TranslationService';
@@ -30,6 +30,8 @@ import {TypeOfStateEnum} from '@ofServices/processes/model/Processes';
 import {HasResponseCellRendererComponent} from './cellRenderers/HasResponseCellRendererComponent';
 import {InputCellRendererComponent} from './cellRenderers/InputCellRendererComponent';
 import {AgGrid} from 'app/utils/AgGrid';
+import {OpfabEventStreamService} from '@ofServices/events/OpfabEventStreamService';
+import {debounceTime} from 'rxjs/operators';
 
 @Component({
     selector: 'of-custom-card-list-screen',
@@ -47,7 +49,8 @@ import {AgGrid} from 'app/utils/AgGrid';
         ReactiveFormsModule,
         NgbPagination,
         CardComponent,
-        MultiSelectComponent
+        MultiSelectComponent,
+        NgbPopover
     ]
 })
 export class CustomCardListComponent implements OnInit, OnDestroy {
@@ -117,6 +120,8 @@ export class CustomCardListComponent implements OnInit, OnDestroy {
 
     private readonly ngUnsubscribe$ = new Subject<void>();
 
+    loadingInProgress = false;
+
     constructor(private readonly modalService: NgbModal) {
         ModuleRegistry.registerModules([AllCommunityModule]);
         provideGlobalGridOptions({theme: 'legacy'});
@@ -125,6 +130,12 @@ export class CustomCardListComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit(): void {
+        OpfabEventStreamService.getLoadingInProgress()
+            .pipe(takeUntil(this.ngUnsubscribe$), debounceTime(500))
+            .subscribe((loadingInProgress: boolean) => {
+                this.loadingInProgress = loadingInProgress;
+            });
+
         this.customCardListView = new CustomCardListView(this.customScreenId);
 
         const severityCellClassRules = {