Add setting to open next card on acknowledgment (#7386)

Signed-off-by: Giovanni Ferrari <[email protected]>
opfab · Oct 24, 2024 · 296ec65 · 296ec65
1 parent 43e26ed
commit 296ec65
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 5 deletions.
diff --git a/ui/main/src/app/business/store/lightcards/lightcards-feed-filter-store.ts b/ui/main/src/app/business/store/lightcards/lightcards-feed-filter-store.ts
@@ -21,7 +21,7 @@ import {OpfabEventStreamService} from '../../services/events/opfabEventStream.se
 import {LightCardsStore} from './lightcards-store';
 
 export class FilteredLightCardsStore {
-    private filteredAndSortedLightCards = new Subject();
+    private filteredAndSortedLightCards = new ReplaySubject(1);
     private filteredLightCards = new Subject();
     private filteredAndSearchedLightCards = new ReplaySubject(1);
     private filteredLightCardsForTimeLine = new Subject();

diff --git a/ui/main/src/app/modules/card/components/card-body/card-body.component.html b/ui/main/src/app/modules/card/components/card-body/card-body.component.html
@@ -74,7 +74,7 @@
                   [lttdExpiredIsTrue]="this.lttdExpiredIsTrue" [isResponseLocked]="this.isResponseLocked"
                   (unlockAnswerEvent)="this.unlockAnswer()"> </of-card-response>
                 <of-card-ack [card]="this.card" [cardState]="this.cardState"
-                  [lttdExpiredIsTrue]="this.lttdExpiredIsTrue" (closeCardDetail)="closeDetails()"> </of-card-ack>
+                  [lttdExpiredIsTrue]="this.lttdExpiredIsTrue" (closeCardDetail)="closeDetailsAfterAcknowledgment()"> </of-card-ack>
               </div>
             </div>
           </div>

diff --git a/ui/main/src/app/modules/card/components/card-body/card-body.component.ts b/ui/main/src/app/modules/card/components/card-body/card-body.component.ts
@@ -22,7 +22,7 @@ import {Card} from '@ofModel/card.model';
 import {ProcessesService} from 'app/business/services/businessconfig/processes.service';
 import {SafeHtml} from '@angular/platform-browser';
 import {State} from '@ofModel/processes.model';
-import {map, takeUntil} from 'rxjs/operators';
+import {delay, map, takeUntil} from 'rxjs/operators';
 import {Subject} from 'rxjs';
 import {User} from '@ofModel/user.model';
 import {UserService} from 'app/business/services/users/user.service';
@@ -50,6 +50,7 @@ import {CardResponseComponent} from '../card-reponse/card-response.component';
 import {CardAckComponent} from '../card-ack/card-ack.component';
 import {OpfabTitleCasePipe} from '../../../share/pipes/opfab-title-case.pipe';
 import {CardBodyView} from 'app/business/view/card/card-body.view';
+import {ConfigService} from 'app/business/services/config.service';
 
 @Component({
     selector: 'of-card-body',
@@ -103,6 +104,8 @@ export class CardBodyComponent implements OnChanges, OnInit, OnDestroy {
     private userWithPerimeters: UserWithPerimeters;
     private cardBodyView: CardBodyView;
     public isCardAcknowledgedFooterVisible: boolean;
+    private cards: Card[];
+    private openNextCardOnAcknowledgment: boolean;
 
     constructor(private router: Router) {
         this.userWithPerimeters = UserService.getCurrentUserWithPerimeters();
@@ -119,6 +122,20 @@ export class CardBodyComponent implements OnChanges, OnInit, OnDestroy {
             this.templateOffset = 35;
         if (pageType !== PageType.CALENDAR && pageType !== PageType.MONITORING && pageType !== PageType.DASHBOARD)
             this.showMaxAndReduceButton = true;
+        this.openNextCardOnAcknowledgment = ConfigService.getConfigValue(
+            'settings.openNextCardOnAcknowledgment()',
+            false
+        );
+        if (this.openNextCardOnAcknowledgment)
+            OpfabStore.getFilteredLightCardStore()
+                .getFilteredAndSortedLightCards()
+                .pipe(
+                    delay(0), // Solve error: 'Expression has changed after it was checked' --> See https://blog.angular-university.io/angular-debugging/
+                    map((cards) => {
+                        this.cards = cards;
+                    })
+                )
+                .subscribe();
     }
 
     private integrateChildCardsInRealTime() {
@@ -377,16 +394,30 @@ export class CardBodyComponent implements OnChanges, OnInit, OnDestroy {
         if (this.parentComponent) this.parentComponent.screenSize = active ? 'lg' : 'md';
     }
 
-    public closeDetails() {
+    public closeDetails(nextCardId: string) {
         this.closeCardDetail.next(true);
         this.updateLastReadCardStatusOnFeedIfNeeded();
         if (this.parentModalRef) {
             this.parentModalRef.close();
             SelectedCardStore.clearSelectedCardId();
         } else {
             SelectedCardStore.clearSelectedCardId();
-            this.router.navigate(['/' + RouterStore.getCurrentRoute().split('/')[1]]);
+            if (nextCardId)
+                this.router.navigate(['/' + RouterStore.getCurrentRoute().split('/')[1] + '/cards/' + nextCardId]);
+            else this.router.navigate(['/' + RouterStore.getCurrentRoute().split('/')[1]]);
+        }
+    }
+
+    public closeDetailsAfterAcknowledgment() {
+        let nextCardId;
+        if (this.openNextCardOnAcknowledgment) {
+            debugger;
+            const currentCardIndex = this.cards.findIndex((card) => card.id === this.card.id);
+            const nextCardIndex =
+                currentCardIndex === this.cards.length - 1 ? currentCardIndex - 1 : currentCardIndex + 1;
+            nextCardId = this.cards[nextCardIndex].id;
         }
+        this.closeDetails(nextCardId);
     }
 
     ngOnDestroy() {