Register function to edit card after template rendering

Signed-off-by: Giovanni Ferrari <[email protected]>

Author: quinarygio

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

@@ -7,7 +7,17 @@
  * This file is part of the OperatorFabric project.
  */
 
-import {Component, EventEmitter, Input, OnChanges, OnDestroy, Output, TemplateRef, ViewChild} from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import {NgbModal, NgbModalOptions, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
 import {Card} from '@ofModel/card.model';
 import {MessageLevel} from '@ofModel/message.model';
@@ -38,10 +48,11 @@ import {CardTemplateGateway} from '@ofServices/templateGateway/CardTemplateGatew
     standalone: true,
     imports: [NgIf, TranslateModule, UserCardComponent, SpinnerComponent]
 })
-export class CardActionsComponent implements OnChanges, OnDestroy {
+export class CardActionsComponent implements OnInit, OnChanges, OnDestroy {
     @Input() card: Card;
     @Input() cardState: State;
     @Input() parentModalRef: NgbModalRef;
+    @Input() templateInitialized: EventEmitter<void>;
 
     @Output() closeCardDetail: EventEmitter<boolean> = new EventEmitter<boolean>();
 
@@ -62,21 +73,15 @@ export class CardActionsComponent implements OnChanges, OnDestroy {
         private readonly router: Router
     ) {}
 
-    ngOnChanges(): void {
-        // We need to register this function each time we have a change
-        // as this change can trigger a rendering of the card which in turn
-        // initialize the template gateway and unregister the function.
-        // This initialization is done in the template rendering compornent
-        // This is a temporary fix to avoid the issue
-        //
-        // TODO : find a better way to handle this as this solution works only because the ngOnchanges of
-        // the card-actions component is called after the ngOnchanges of the template-rendering Component
-        // which is not guaranteed to be the case in the future as it depends of angular change detection mechanism
-        //
-        CardTemplateGateway.registerFunctionToEditCard(() => {
-            if (this.doesTheUserHavePermissionToEditCard()) this.editCard();
-        });
+    ngOnInit(): void {
+        this.templateInitialized.subscribe(() =>
+            CardTemplateGateway.registerFunctionToEditCard(() => {
+                if (this.doesTheUserHavePermissionToEditCard()) this.editCard();
+            })
+        );
+    }
 
+    ngOnChanges(): void {
         this.setButtonsVisibility();
     }
 

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

@@ -17,6 +17,7 @@
                             [card]="this.card"
                             [cardState]="this.cardState"
                             [parentModalRef]="this.parentModalRef"
+                            [templateInitialized]="this.templateInitialized"
                             (closeCardDetail)="closeDetails()">
                         </of-card-actions>
                         <div

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

@@ -82,6 +82,8 @@ export class CardBodyComponent implements OnChanges, OnInit, OnDestroy {
 
     @Output() closeCardDetail: EventEmitter<boolean> = new EventEmitter<boolean>();
 
+    public templateInitialized: EventEmitter<void> = new EventEmitter<void>();
+
     public displayContext: DisplayContext = DisplayContext.REALTIME;
     public isUserEnabledToRespond = false;
     public lttdExpiredIsTrue: boolean;
@@ -366,6 +368,7 @@ export class CardBodyComponent implements OnChanges, OnInit, OnDestroy {
 
     public afterTemplateRendering() {
         if (this.isResponseLocked) CardTemplateGateway.sendResponseLockToTemplate();
+        this.templateInitialized.emit();
         this.startRegularlyCheckLttd();
     }