Custom card list screen : add response button option

Signed-off-by: freddidierRTE <[email protected]>

config/docker/externalJs/CustomScreenExample.js

@@ -72,5 +72,72 @@
         }
     }
 
+    const customScreenExample2 = {
+        id: 'testId2',
+        name: 'testName',
+        headerFilters: ['PROCESS'],
+        results: {
+            columns: [
+                {
+                    field: 'urgency',
+                    headerName: 'URGENCY',
+                    fieldType: 'COLORED_CIRCLE',
+                    getValue: (card) => {
+                        if (card.severity === 'ALARM') return "red"
+                        return "green"
+                    },
+                    flex: 0.25
+                },
+                {
+                    field: 'TIME',
+                    cardField: 'publishDate',
+                    fieldType: 'DATE_AND_TIME'
+                },
+                {
+                    fieldType: 'RESPONSE_FROM_MY_ENTITIES'
+                },
+                {
+                    field: 'testField',
+                    headerName: 'TITLE',
+                    cardField: 'titleTranslated',
+                    fieldType: 'STRING',
+                    flex: 1
+                },
+                {
+                    headerName: 'ANSWERS',
+                    fieldType: 'RESPONSES',
+                    flex: 2
+                }
+            ]
+        },
+        responseButtons: [
+            {
+                id: 'button1',
+                label: 'Accept proposals',
+                getUserResponse: (cards) => {
+                    const responseCards = [];
+                    const responseData = { "choice1": ["on"], "choice2": ["on"], "choice3": ["on"] }
+                    cards.forEach((card) => {
+                        responseCards.push({ responseCardData: responseData });
+                    });
+                    return { valid: true, errorMsg: '', responseCards: responseCards };
+                }
+            },
+            {
+                id: 'button2',
+                label: 'Refuse proposals',
+                getUserResponse: (cards) => {
+                    const responseCards = [];
+                    const responseData = {}
+                    cards.forEach((card) => {
+                        responseCards.push({ responseCardData: responseData });
+                    });
+                    return { valid: true, errorMsg: '', responseCards: responseCards };
+                }
+            }
+        ]
+    }
+
     opfab.businessconfig.registerCustomScreen(customScreenExample);
+    opfab.businessconfig.registerCustomScreen(customScreenExample2);
 }

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

@@ -83,6 +83,7 @@ <h1>Custom Screen {{id}} does not exist</h1>
         <ag-grid-angular
             [rowData]="rowData$ | async"
             [gridOptions]="gridOptions"
+            [rowSelection]="rowSelection"
             (gridReady)="onGridReady($event)"
             (rowClicked)="selectCard($event.data.cardId)"
             class="ag-theme-opfab">
@@ -103,6 +104,12 @@ <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>
+
             <div class="opfab-custom-card-list-export-div">
                 <div
                     id="opfab-monitoring-btn-exportToExcel"

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

@@ -26,3 +26,8 @@
     float: right;
     margin-right: 10px;
 }
+
+.opfab-custom-screen-response-btn {
+    float: right;
+    margin-left: 10px;
+}

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

@@ -7,7 +7,7 @@
  * This file is part of the OperatorFabric project.
  */
 
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe, NgFor, NgIf} from '@angular/common';
 import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
@@ -17,7 +17,13 @@ import {SelectedCardService} from '@ofServices/selectedCard/SelectedCardService'
 import {TranslationService} from '@ofServices/translation/TranslationService';
 import {CardComponent} from 'app/components/card/card.component';
 import {AgGridAngular} from 'ag-grid-angular';
-import {AllCommunityModule, GridOptions, ModuleRegistry, provideGlobalGridOptions} from 'ag-grid-community';
+import {
+    AllCommunityModule,
+    GridOptions,
+    ModuleRegistry,
+    RowSelectionOptions,
+    provideGlobalGridOptions
+} from 'ag-grid-community';
 import {DateRangePickerConfig} from 'app/utils/DateRangePickerConfig';
 import {ExcelExport} from 'app/utils/excel-export';
 import {CustomCardListView} from 'app/views/customCardList/CustomCardListView';
@@ -38,6 +44,7 @@ import {HasResponseCellRendererComponent} from './cellRenderers/HasResponseCellR
     imports: [
         TranslateModule,
         NgIf,
+        NgFor,
         AgGridAngular,
         AsyncPipe,
         FormsModule,
@@ -100,6 +107,10 @@ export class CustomScreenComponent implements OnInit, OnDestroy {
         sortOptions: true,
         nbOfDisplayValues: 1
     };
+
+    responseButtons = [];
+    public rowSelection: RowSelectionOptions;
+
     private readonly ngUnsubscribe$ = new Subject<void>();
 
     constructor(
@@ -132,6 +143,8 @@ export class CustomScreenComponent implements OnInit, OnDestroy {
             this.isCustomScreenDefinitionExist = this.customCardListView.isCustomScreenDefinitionExist();
             this.processFilterVisible = this.customCardListView.isFilterVisibleInHeader(HeaderFilter.PROCESS);
             this.typeOfStateFilterVisible = this.customCardListView.isFilterVisibleInHeader(HeaderFilter.TYPE_OF_STATE);
+            this.responseButtons = this.customCardListView.getResponseButtons();
+            if (this.responseButtons.length > 0) this.rowSelection = {mode: 'multiRow'};
             this.gridOptions = {
                 domLayout: 'autoHeight',
                 components: {
@@ -226,6 +239,10 @@ export class CustomScreenComponent implements OnInit, OnDestroy {
                 this.rowData = results;
                 this.rowDataSubject.next(this.rowData);
             });
+            if (this.responseButtons.length > 0) {
+                this.gridOptions.rowSelection = 'multiple';
+            }
+
             this.headerForm.get('businessDateRanges').setValue({
                 startDate: new Date(this.customCardListView.getBusinessPeriod().startDate),
                 endDate: new Date(this.customCardListView.getBusinessPeriod().endDate)
@@ -293,6 +310,15 @@ export class CustomScreenComponent implements OnInit, OnDestroy {
         });
     }
 
+    clickOnResponseButton(buttonId: string) {
+        const selectedRows = this.gridApi.getSelectedRows();
+        if (selectedRows.length === 0) {
+            return;
+        }
+        const selectedCards = selectedRows.map((row) => row.cardId);
+        this.customCardListView.clickOnButton(buttonId, selectedCards);
+    }
+
     export(): void {
         ExcelExport.exportJsonToExcelFile(this.customCardListView.getDataForExport(), 'Custom');
     }

ui/main/src/app/services/customScreen/model/CustomScreenDefinition.ts

@@ -17,6 +17,7 @@ export class CustomScreenDefinition {
     results: {
         columns: Column[];
     };
+    responseButtons?: ResponseButton[];
 }
 
 export class Column {
@@ -28,6 +29,18 @@ export class Column {
     getValue?: (card: Card) => string;
 }
 
+export class ResponseButton {
+    id: string;
+    label: string;
+    getUserResponse: (selectedCards: Card[]) => any;
+}
+
+export class UserResponse {
+    valid: boolean;
+    errorMsg: string;
+    responseCards: any[];
+}
+
 export enum FieldType {
     STRING = 'STRING',
     DATE_AND_TIME = 'DATE_AND_TIME',