Custom card list screen : add response from my entities column (#FE-7922)

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

Author: freddidierRTE

config/docker/externalJs/CustomScreenExample.js

@@ -25,6 +25,9 @@
                     cardField: 'publishDate',
                     fieldType: 'DATE_AND_TIME'
                 },
+                {
+                    fieldType: 'RESPONSE_FROM_MY_ENTITIES'
+                },
                 {
                     field: 'testField',
                     headerName: 'TITLE',

src/docs/asciidoc/reference_doc/ui_customization.adoc

@@ -320,6 +320,9 @@ const customScreenExample = {
                 cardField: 'publishDate',
                 fieldType: 'DATE_AND_TIME'
             },
+            {
+                fieldType: 'RESPONSE_FROM_MY_ENTITIES'
+            },
             {
                 field: 'testField',
                 headerName: 'TITLE',
@@ -362,16 +365,17 @@ You can define the filters to be displayed in the header of the screen by adding
 
 For each field you want to display in the result table, define a column object. The following field types are available:
 
-- `SEVERITY`: Displays the severity as a color rectangle.
 - `DATE_AND_TIME`: Displays the date and time formatted according to the user's locale.
-- `STRING`: Displays a string value.
-- `TYPE_OF_STATE`: Displays the type of state value: `INPROGRESS`, `FINISHED`, `CANCELLED`.
 - `PUBLISHER`: Displays the publisher entity if the card is published by an entity, otherwise displays the user who published the card.
 - `RESPONSES`: Displays the list of entities that must respond, with the color indicating the severity of the response if the entity has responded. It uses the `entitiesRequiredToRespond` field of the card. If this field is empty, it will use the `entitiesAllowedToRespond` field of the card.
+- `RESPONSE_FROM_MY_ENTITIES`: Displays a blue arrow if one of the user's entity has responded to the card.
+- `SEVERITY`: Displays the severity as a color rectangle.
+- `STRING`: Displays a string value.
+- `TYPE_OF_STATE`: Displays the type of state value: `INPROGRESS`, `FINISHED`, `CANCELLED`.
 
 You can define the column header text using the `headerName` field.
 
-The `cardField` is the field of the card that will be displayed in the result. It is not used for the following field types: `SEVERITY`, `TYPE_OF_STATE`, and `RESPONSES`.
+The `cardField` is the field of the card that will be displayed in the result. It is not used for the following field types: `SEVERITY`, `TYPE_OF_STATE`,`RESPONSES` and `RESPONSE_FROM_MY_ENTITIES`.
 
 The `flex` field sets the CSS flex property for the column.
 

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

@@ -28,6 +28,7 @@ import {MultiSelectOption} from '../share/multi-select/model/MultiSelect';
 import {MultiSelectComponent} from '../share/multi-select/multi-select.component';
 import {HeaderFilter} from '@ofServices/customScreen/model/CustomScreenDefinition';
 import {TypeOfStateEnum} from '@ofServices/processes/model/Processes';
+import {HasResponseCellRendererComponent} from './cellRenderers/HasResponseCellRendererComponent';
 
 @Component({
     selector: 'of-custom-screen',
@@ -134,7 +135,8 @@ export class CustomScreenComponent implements OnInit, OnDestroy {
             this.gridOptions = {
                 domLayout: 'autoHeight',
                 components: {
-                    responsesCellRenderer: ResponsesCellRendererComponent
+                    responsesCellRenderer: ResponsesCellRendererComponent,
+                    hasResponseCellRenderer: HasResponseCellRendererComponent
                 },
 
                 defaultColDef: {
@@ -198,6 +200,14 @@ export class CustomScreenComponent implements OnInit, OnDestroy {
                                 '"></div>'
                             );
                         }
+                    },
+                    responseFromMyEntities: {
+                        sortable: false,
+                        filter: false,
+                        resizable: false,
+                        width: 15,
+                        wrapText: false,
+                        cellRenderer: 'hasResponseCellRenderer'
                     }
                 },
                 ensureDomOrder: true, // rearrange row-index of rows when sorting cards (used for cypress)

ui/main/src/app/components/customCardList/cellRenderers/HasResponseCellRendererComponent.html

@@ -0,0 +1,19 @@
+<!-- Copyright (c) 2025, RTE (http://www.rte-france.com)                   -->
+<!-- See AUTHORS.txt                                                       -->
+<!-- This Source Code Form is subject to the terms of the Mozilla Public   -->
+<!-- License, v. 2.0. If a copy of the MPL was not distributed with this   -->
+<!-- file, You can obtain one at http://mozilla.org/MPL/2.0/.              -->
+<!-- SPDX-License-Identifier: MPL-2.0                                      -->
+<!-- This file is part of the OperatorFabric project.                      -->
+
+<ng-template #tipHasAResponseFromYourEntity>
+    <span translate>monitoring.tips.hasAResponseFromYourEntity</span>
+</ng-template>
+<em
+    *ngIf="params.value"
+    [ngbPopover]="tipHasAResponseFromYourEntity"
+    popoverClass="opfab-popover-unclickable"
+    container="body"
+    triggers="mouseenter:mouseleave"
+    style="color: var(--opfab-color-blue)"
+    class="fa fa-reply"></em>

ui/main/src/app/components/customCardList/cellRenderers/HasResponseCellRendererComponent.ts

@@ -0,0 +1,36 @@
+/* Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * See AUTHORS.txt
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ * SPDX-License-Identifier: MPL-2.0
+ * This file is part of the OperatorFabric project.
+ */
+
+import {Component} from '@angular/core';
+import {ICellRendererAngularComp} from 'ag-grid-angular';
+import {ICellRendererParams} from 'ag-grid-community';
+import {TranslateModule} from '@ngx-translate/core';
+import {NgIf} from '@angular/common';
+import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'of-has-response-cell-renderer',
+    templateUrl: './HasResponseCellRendererComponent.html',
+    standalone: true,
+    imports: [TranslateModule, NgIf, NgbPopover]
+})
+export class HasResponseCellRendererComponent implements ICellRendererAngularComp {
+    public params: any;
+
+    agInit(params: any): void {
+        this.params = params;
+    }
+
+    /** This method returns true to signal to the grid that this renderer doesn't need to be recreated if the underlying data changes
+     *  See https://www.ag-grid.com/documentation/angular/component-cell-renderer/#handling-refresh
+     * */
+    refresh(params: ICellRendererParams): boolean {
+        return true;
+    }
+}

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

@@ -36,7 +36,8 @@ export enum FieldType {
     PUBLISHER = 'PUBLISHER',
     TYPE_OF_STATE = 'TYPE_OF_STATE',
     RESPONSES = 'RESPONSES',
-    COLORED_CIRCLE = 'COLORED_CIRCLE'
+    COLORED_CIRCLE = 'COLORED_CIRCLE',
+    RESPONSE_FROM_MY_ENTITIES = 'RESPONSE_FROM_MY_ENTITIES'
 }
 
 export enum HeaderFilter {

ui/main/src/app/views/customCardList/CustomCardListView.spec.ts

@@ -55,7 +55,7 @@ describe('CustomScreenView', () => {
         RealTimeDomainService.setStartAndEndPeriod(0, new Date().valueOf() + 1000);
         filteredLightCardStore = OpfabStore.getFilteredLightCardStore();
     });
-    describe('custom screen configuration', () => {
+    describe('Custom screen configuration', () => {
         it('should return false if custom screen definition does not exist', () => {
             const customScreenView = new CustomCardListView('unexistingId');
             expect(customScreenView.isCustomScreenDefinitionExist()).toEqual(false);
@@ -65,14 +65,14 @@ describe('CustomScreenView', () => {
             const customScreenView = new CustomCardListView('testId');
             expect(customScreenView.isCustomScreenDefinitionExist()).toEqual(true);
         });
-        it('should return true if custom screen header filter PROCESS is define visible in customScreenDefinition', () => {
+        it('filter visibility should be true if custom screen header filter PROCESS is define visible in customScreenDefinition', () => {
             const customScreenDefinition = getCustomScreenDefintion();
             customScreenDefinition.headerFilters = [HeaderFilter.PROCESS];
             CustomScreenService.addCustomScreenDefinition(customScreenDefinition);
             const customScreenView = new CustomCardListView('testId');
             expect(customScreenView.isFilterVisibleInHeader(HeaderFilter.PROCESS)).toEqual(true);
         });
-        it('should return false if custom screen header filter  PROCESS is not define visible in customScreenDefinition', () => {
+        it('filter visibility should be false if custom screen header filter  PROCESS is not define visible in customScreenDefinition', () => {
             const customScreenDefinition = getCustomScreenDefintion();
             customScreenDefinition.headerFilters = [HeaderFilter.TYPE_OF_STATE];
             CustomScreenService.addCustomScreenDefinition(customScreenDefinition);
@@ -108,7 +108,7 @@ describe('CustomScreenView', () => {
             ]);
         });
     });
-    describe('processes', () => {
+    describe('Shoud get processe list', () => {
         beforeEach(() => {
             const process = [
                 new Process('myProcess', '1', 'my process label', null, new Map<string, State>()),
@@ -117,7 +117,7 @@ describe('CustomScreenView', () => {
             setProcessConfiguration(process);
         });
 
-        it('should return one process from user perimeter if user has one process state visible', async () => {
+        it('with one process from user perimeter if user has one process state visible', async () => {
             const customScreenDefinition = getCustomScreenDefintion();
             CustomScreenService.addCustomScreenDefinition(customScreenDefinition);
             const customScreenView = new CustomCardListView('testId');
@@ -134,7 +134,7 @@ describe('CustomScreenView', () => {
             const result = customScreenView.getProcessList();
             expect(result).toEqual([{id: 'myProcess', label: 'my process label'}]);
         });
-        it('should return one process form user perimeter if user has one process with 2 states visible', async () => {
+        it('with one process form user perimeter if user has one process with 2 states visible', async () => {
             const customScreenDefinition = getCustomScreenDefintion();
             CustomScreenService.addCustomScreenDefinition(customScreenDefinition);
             const customScreenView = new CustomCardListView('testId');
@@ -155,7 +155,7 @@ describe('CustomScreenView', () => {
             expect(result).toEqual([{id: 'myProcess', label: 'my process label'}]);
         });
     });
-    describe(' custom screen data', () => {
+    describe('Should return custom screen data', () => {
         beforeEach(() => {
             setEntities([
                 {
@@ -166,7 +166,7 @@ describe('CustomScreenView', () => {
             ]);
         });
 
-        it('should return data array from light cards store', async () => {
+        it('from light cards store', async () => {
             // this is necessary to set the user perimeter for child card
             // to be processed correctly by the ligthcard store
             await setUserPerimeter({
@@ -225,7 +225,7 @@ describe('CustomScreenView', () => {
             ]);
         });
 
-        it('should return data array filtered from light cards store', async () => {
+        it('filtered from light cards store', async () => {
             // this is necessary to set the user perimeter for child card
             // to be processed correctly by the ligthcard store
             await setUserPerimeter({
@@ -276,7 +276,7 @@ describe('CustomScreenView', () => {
             ]);
         });
 
-        it('should convert data for export', async () => {
+        it('converted for export', async () => {
             const customScreenDefinition = getCustomScreenDefintion();
             customScreenDefinition.results = {
                 columns: [