Add a filter by process in feed filter screen (#5815)

Signed-off-by: Giovanni Ferrari <giovanni.ferrari@soft.it>

src/docs/asciidoc/deployment/configuration/web-ui_configuration.adoc

@@ -1,4 +1,4 @@
-// Copyright (c) 2018-2023 RTE (http://www.rte-france.com)
+// Copyright (c) 2018-2024 RTE (http://www.rte-france.com)
 // See AUTHORS.txt
 // This document is subject to the terms of the Creative Commons Attribution 4.0 International license.
 // If a copy of the license was not distributed with this
@@ -79,6 +79,7 @@ For example adding `Keycloak` application, with `'Keycloak'` as `name`, `1` as `
 |feed.card.hideAckAllCardsFeature|true|no|Control if you want to show or hide the option for acknowledging all the visible cards of the feed
 |feed.card.hideApplyFiltersToTimeLineChoice|false|no|Control if you want to show or hide the option of applying filters or not to timeline in the feed page
 |feed.card.hideResponseFilter|false|no|Control if you want to show or hide the response filter in the feed page
+|feed.card.hideProcessFilter|false|no|Control if you want to show or hide the process filter in the feed page
 |feed.card.maxNbOfCardsToDisplay|100|no| Max number of card visible in feed (This limit is used for performance reasons, setting the value too high can have consequences on browser response times)
 |feed.card.secondsBeforeLttdForClockDisplay|180|no| Number of seconds before lttd when a clock is activated in cards on the feed
 |feed.card.time.display|BUSINESS|no

src/docs/asciidoc/resources/migration_guide_to_4.2.adoc

@@ -94,3 +94,8 @@ migration documentation to opfab 4.0 to know which functions you have to use.
 == Card keepChildCards
 
 The card field `keepChildCards` is now deprecated, use the new `actions` field (string array) including "KEEP_CHILD_CARDS" action instead.
+
+
+== Feed process filter
+A new filter has been added to feed filters to allow filtering by card process.
+It is possible to hide the process filter by setting `feed.card.hideProcessFilter` to `true` in `web-ui.json` config file

ui/main/src/app/business/model/feed-filter.model.ts

@@ -1,4 +1,4 @@
-/* Copyright (c) 2018-2022, RTE (http://www.rte-france.com)
+/* Copyright (c) 2018-2024, 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
@@ -44,5 +44,6 @@ export enum FilterType {
     PUBLISHDATE_FILTER,
     ACKNOWLEDGEMENT_FILTER,
     RESPONSE_FILTER,
+    PROCESS_FILTER,
     BUSINESSDATE_FILTER
 }

ui/main/src/app/business/store/lightcards/lightcards-filter.spec.ts

@@ -1,4 +1,4 @@
-/* Copyright (c) 2018-2023, RTE (http://www.rte-france.com)
+/* Copyright (c) 2018-2024, 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
@@ -24,6 +24,7 @@ describe('NewFilterService ', () => {
         let cards: LightCard[] = new Array();
         cards = cards.concat(
             getSeveralLightCards(1, {
+                process: 'process1',
                 startDate: new Date().valueOf(),
                 endDate: null,
                 publishDate: new Date().valueOf(),
@@ -35,6 +36,7 @@ describe('NewFilterService ', () => {
         );
         cards = cards.concat(
             getSeveralLightCards(1, {
+                process: 'process1',
                 startDate: new Date().valueOf(),
                 endDate: new Date().valueOf() + ONE_HOUR,
                 publishDate: new Date().valueOf() - ONE_HOUR,
@@ -46,6 +48,7 @@ describe('NewFilterService ', () => {
         );
         cards = cards.concat(
             getSeveralLightCards(1, {
+                process: 'process2',
                 startDate: new Date().valueOf(),
                 endDate: new Date().valueOf() + 2 * ONE_HOUR,
                 publishDate: new Date().valueOf() - ONE_HOUR * 2,
@@ -56,6 +59,7 @@ describe('NewFilterService ', () => {
         );
         cards = cards.concat(
             getSeveralLightCards(1, {
+                process: 'process3',
                 startDate: new Date().valueOf(),
                 endDate: new Date().valueOf() + 3 * ONE_HOUR,
                 publishDate: new Date().valueOf() - ONE_HOUR * 3,
@@ -323,4 +327,29 @@ describe('NewFilterService ', () => {
             expect(filteredCards).toContain(cards[2]);
         });
     });
+
+    describe('process filter', () => {
+        it('filter 4 cards by process => shall return the cards with selected process only', () => {
+            const cards = getFourCards();
+            service.updateFilter(FilterType.ACKNOWLEDGEMENT_FILTER, false, false);
+            service.updateFilter(FilterType.PROCESS_FILTER, true, {
+                process: 'process2'
+            });
+            const filteredCards = service.filterLightCards(cards);
+            expect(filteredCards.length).toBe(1);
+            expect(filteredCards).toContain(cards[2]);
+        });
+
+        it('filter 4 cards by process, filter is set to null process  => shall return all the cards', () => {
+            const cards = getFourCards();
+            service.updateFilter(FilterType.ACKNOWLEDGEMENT_FILTER, false, false);
+            service.updateFilter(FilterType.PROCESS_FILTER, true, {
+                process: null
+            });
+            const filteredCards = service.filterLightCards(cards);
+            expect(filteredCards.length).toBe(4);
+        });
+
+    });
+
 });

ui/main/src/app/business/store/lightcards/lightcards-filter.ts

@@ -1,4 +1,4 @@
-/* Copyright (c) 2018-2023, RTE (http://www.rte-france.com)
+/* Copyright (c) 2018-2024, 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
@@ -32,6 +32,7 @@ export class LightCardsFilter {
         this.filters[FilterType.PUBLISHDATE_FILTER] = this.initPublishDateFilter();
         this.filters[FilterType.ACKNOWLEDGEMENT_FILTER] = this.initAcknowledgementFilter();
         this.filters[FilterType.RESPONSE_FILTER] = this.initResponseFilter();
+        this.filters[FilterType.PROCESS_FILTER] = this.initProcessFilter();
         this.businessDateFilter = this.initBusinessDateFilter();
     }
 
@@ -179,4 +180,17 @@ export class LightCardsFilter {
             true
         );
     }
+
+    private initProcessFilter(): Filter {
+        return new Filter(
+            (card: LightCard, status) => {
+                if (status.process) {
+                    return status.process === card.process;
+                }
+                return true;
+            },
+            false,
+            {process: null}
+        );
+    }
 }

ui/main/src/app/modules/feed/components/card-list/card-list.component.html

@@ -1,4 +1,4 @@
-<!-- Copyright (c) 2018-2023, RTE (http://www.rte-france.com)              -->
+<!-- Copyright (c) 2018-2024, 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   -->
@@ -16,6 +16,7 @@
   <div id="opfab-card-list-container" style="display: flex;">
     <div id="opfab-filters" [class.opfab-filters-hidden]="!filterOpen" class="opfab-filters opfab-card-list" style="width:600px"> 
       <of-feed-filter (filterActiveChange)="onFilterActiveChange($event)" [hideTimerTags]="hideTimerTags" 
+      [hideProcessFilter]="hideProcessFilter"
       [defaultAcknowledgmentFilter]="defaultAcknowledgmentFilter" [hideResponseFilter]="hideResponseFilter" 
       [hideApplyFiltersToTimeLineChoice]="hideApplyFiltersToTimeLineChoice" [defaultSorting]="defaultSorting"></of-feed-filter>
     </div>

ui/main/src/app/modules/feed/components/card-list/card-list.component.ts

@@ -47,6 +47,7 @@ export class CardListComponent implements AfterViewChecked, OnInit {
 
     hideResponseFilter: boolean;
     hideTimerTags: boolean;
+    hideProcessFilter: boolean;
     hideApplyFiltersToTimeLineChoice: boolean;
     defaultSorting: string;
     defaultAcknowledgmentFilter: string;
@@ -76,6 +77,7 @@ export class CardListComponent implements AfterViewChecked, OnInit {
 
         this.hideTimerTags = ConfigService.getConfigValue('feed.card.hideTimeFilter', false);
         this.hideResponseFilter = ConfigService.getConfigValue('feed.card.hideResponseFilter', false);
+        this.hideProcessFilter = ConfigService.getConfigValue('feed.card.hideProcessFilter', false);
         this.hideApplyFiltersToTimeLineChoice = ConfigService.getConfigValue(
             'feed.card.hideApplyFiltersToTimeLineChoice',
             false

ui/main/src/app/modules/feed/components/card-list/filters/feed-filter/feed-filter.component.html

@@ -61,6 +61,28 @@
 
     <of-feed-sort [defaultSorting]="defaultSorting"></of-feed-sort>
 
+    <div *ngIf="!hideProcessFilter" style="margin-top:-5px;">
+
+        <div class="row opfab-filter-header">
+            <span id='opfab-feed-filter-process-title' translate>feed.filters.process.label</span>
+        </div>
+
+        <form [formGroup]="processFilterForm" id="opfab-process-filter-form" style="padding-left: 7px;">
+
+            <div style="margin-left:2px; margin-top:20px; width:280px">
+                <div class="form-group" id="opfab-process">
+
+                    <of-multi-select id="opfab-process-select" [multiSelectId]="processMultiSelect.id" [parentForm]="processFilterForm"
+                        [config]="processMultiSelect.config" [options]="processMultiSelect.options"
+                        [selectedOptions]="processMultiSelect.selectedOptions">
+                    </of-multi-select>
+                </div>
+            </div>
+
+        </form>
+
+    </div>
+
     <div *ngIf="!(hideTimerTags)" style="margin-top:-5px;">
 
         <div class="row opfab-filter-header">

ui/main/src/app/modules/feed/components/card-list/filters/feed-filter/feed-filter.component.ts

@@ -1,4 +1,4 @@
-/* Copyright (c) 2018-2023, RTE (http://www.rte-france.com)
+/* Copyright (c) 2018-2024, 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
@@ -21,6 +21,9 @@ import {FilteredLightCardsStore} from 'app/business/store/lightcards/lightcards-
 import {Utilities} from 'app/business/common/utilities';
 import {AlertMessageService} from 'app/business/services/alert-message.service';
 import {OpfabStore} from 'app/business/store/opfabStore';
+import {MultiSelect, MultiSelectOption} from '@ofModel/multiselect.model';
+import {ProcessesService} from 'app/business/services/businessconfig/processes.service';
+import {UserService} from 'app/business/services/users/user.service';
 
 @Component({
     selector: 'of-feed-filter',
@@ -32,6 +35,7 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
     @Input() hideTimerTags: boolean;
     @Input() defaultAcknowledgmentFilter: string;
     @Input() hideResponseFilter: boolean;
+    @Input() hideProcessFilter: boolean;
 
     @Input() defaultSorting: string;
 
@@ -63,9 +67,16 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
         timeLineControl: FormControl<boolean | null>;
     }>;
 
+    processFilterForm: FormGroup<{
+        process: FormControl<string | null>;
+    }>;
+
     endMinDate: {year: number; month: number; day: number} = null;
     startMaxDate: {year: number; month: number; day: number} = null;
 
+    processMultiSelect: MultiSelect;
+    processList = [];
+
     private dateFilterType = FilterType.PUBLISHDATE_FILTER;
     private filteredLightCardStore: FilteredLightCardsStore;
 
@@ -76,6 +87,7 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
         this.timeFilterForm = this.createDateTimeForm();
         this.responseFilterForm = this.createResponseFormGroup();
         this.timeLineFilterForm = this.createTimeLineFormGroup();
+        this.processFilterForm = this.createProcessForm();
     }
 
     private createFormGroup() {
@@ -125,6 +137,30 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
         });
     }
 
+    private createProcessForm() {
+        return new FormGroup({
+            process: new FormControl<string | null>(''),
+        },
+        {updateOn: 'change'}
+        );
+    }
+
+    private initializeProcessMultiSelect() {
+        this.processMultiSelect = {
+            id: 'process',
+            options: [],
+            config: {
+                labelKey: 'shared.filters.process',
+                placeholderKey: 'shared.filters.selectProcessText',
+                sortOptions: true,
+                nbOfDisplayValues: 4,
+                multiple: false
+            },
+            selectedOptions: []
+        };
+
+    }
+
     ngOnDestroy() {
         this.ngUnsubscribe$.next();
         this.ngUnsubscribe$.complete();
@@ -145,6 +181,35 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
         if (!this.hideApplyFiltersToTimeLineChoice) {
             this.initTimeLineFilter();
         }
+
+        if (!this.hideProcessFilter) {
+            this.initializeProcessMultiSelect();
+            this.initProcessFilter();
+        }
+    }
+
+    private loadVisibleProcessesForCurrentUser() {
+        ProcessesService.getAllProcesses().forEach((process) => {
+            if (
+                UserService.isReceiveRightsForProcess(process.id)
+            ) {
+                this.processList.push(process);
+            }
+        });
+    }
+
+    private initProcessFilter() {
+        this.loadVisibleProcessesForCurrentUser();
+        this.processMultiSelect.options.push(new MultiSelectOption('', ''));
+        this.processList.forEach( process => this.processMultiSelect.options.push(new MultiSelectOption(process.id, process.name)));
+        this.processFilterForm.valueChanges.pipe(takeUntil(this.ngUnsubscribe$)).subscribe((form) => {
+            this.filterActiveChange.next(this.isFilterActive());
+            return this.filteredLightCardStore.updateFilter(
+                FilterType.PROCESS_FILTER,
+                true,
+                {process: form.process}
+            );
+        });
     }
 
     private initTypeFilter() {
@@ -374,7 +439,8 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
             !this.responseFilterForm.get('responseControl').value ||
             !this.ackFilterForm.get('notAckControl').value ||
             !!this.extractTime(this.timeFilterForm.get('dateTimeFrom')) ||
-            !!this.extractTime(this.timeFilterForm.get('dateTimeTo'))
+            !!this.extractTime(this.timeFilterForm.get('dateTimeTo')) ||
+            this.processFilterForm.get('process').value.length>0
         );
     }
 
@@ -391,7 +457,8 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
                     this.ackFilterForm.get('notAckControl').value
                 ) ||
             !!this.extractTime(this.timeFilterForm.get('dateTimeFrom')) ||
-            !!this.extractTime(this.timeFilterForm.get('dateTimeTo'))
+            !!this.extractTime(this.timeFilterForm.get('dateTimeTo')) ||
+            this.processFilterForm.get('process').value.length>0
         );
     }
 
@@ -414,6 +481,9 @@ export class FeedFilterComponent implements OnInit, OnDestroy {
         if (!this.hideApplyFiltersToTimeLineChoice) {
             this.timeLineFilterForm.get('timeLineControl').setValue(true, {emitEvent: true});
         }
+        if (!this.hideProcessFilter) {
+            this.processMultiSelect.selectedOptions = []
+        }
     }
 
     private displayMessage(i18nKey: string, msg: string, severity: MessageLevel = MessageLevel.ERROR) {

ui/main/src/app/modules/feed/feed.module.ts

@@ -1,4 +1,4 @@
-/* Copyright (c) 2018-2023, RTE (http://www.rte-france.com)
+/* Copyright (c) 2018-2024, 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
@@ -31,6 +31,7 @@ import {MapComponent} from './components/map/map.component';
 import {FeedSearchComponent} from './components/card-list/filters/feed-search/feed-search.component';
 import {FeedFilterComponent} from './components/card-list/filters/feed-filter/feed-filter.component';
 import {FeedFilterAndSortIconsComponent} from './components/card-list/filters/feed-filter-and-sort-icons/feed-filter-and-sort-icons.component';
+import {MultiSelectModule} from '../share/multi-select/multi-select.module';
 
 @NgModule({
     imports: [
@@ -45,7 +46,8 @@ import {FeedFilterAndSortIconsComponent} from './components/card-list/filters/fe
         DatetimeFilterModule,
         FeedRoutingModule,
         LightCardModule,
-        TimelineButtonsModule
+        TimelineButtonsModule,
+        MultiSelectModule
     ],
     declarations: [
         CardListComponent,

ui/main/src/assets/i18n/en.json

@@ -230,6 +230,9 @@
       },
       "applyFiltersToTimeLine" : {
         "label" : "Apply filters to timeline"
+      },
+      "process": {
+        "label": "Process"
       }
     },
     "sort": {

ui/main/src/assets/i18n/fr.json

@@ -230,6 +230,9 @@
       },
       "applyFiltersToTimeLine" : {
         "label" : "Appliquer les filtres à la timeline"
+      },
+      "process": {
+        "label": "Processus"
       }
     },
     "sort": {

ui/main/src/assets/i18n/nl.json

@@ -230,6 +230,9 @@
       },
       "applyFiltersToTimeLine" : {
         "label" : "Filters toepassen op tijdlijn"
+      },
+      "process": {
+        "label": "Proces"
       }
     },
     "sort": {