Add a method to tell the usercard template the entity used to send card (#2675)

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

Author: quinarygio

src/docs/asciidoc/reference_doc/user_cards.adoc

@@ -207,6 +207,14 @@ https://github.com/opfab/operatorfabric-core/tree/master/src/test/resources/bund
 == Get current process and current state of the card
 The template can know the process and the state of the card by calling the _usercardTemplateGateway.getCurrentProcess()_ and _usercardTemplateGateway.getCurrentState()_ functions. These functions will return a string corresponding to the process id (or state id).
 
+== Receiving emitter entity of the card
+The template can receive the emitter entity of the card by implementing the _usercardTemplateGateway.setEntityUsedForSendingCard()_  function. 
+This function will be called by OperatorFabric after loading the template and every time the card emitter changes (if the user can choose from multiple entities).
+
+An example of _usercardTemplateGateway.setEntityUsedForSendingCard()_ usage can be found in the file
+https://github.com/opfab/operatorfabric-core/tree/master/src/test/resources/bundles/defaultProcess_V1/template/usercard_message.handlebars[src/test/resources/bundles/defaultProcess_V1/template/usercard_message.handlebars].
+
+
 == Send response automatically (experimental feature)
 
 It is possible to configure a template to automatically send a response when sending a user card expecting an answers from one of the entities of the emitting user. 

src/test/cypress/cypress/integration/UserCard.spec.js

@@ -810,4 +810,59 @@ describe('User Card ', function () {
 
   })
 
+  describe("Should receive card emitter from gateway", function() {
+
+    it('Check card emitter for operator1_fr', () => {
+
+      cy.loginOpFab('operator1_fr', 'test');
+      cy.get('#opfab-navbarContent').find('#opfab-newcard-menu').click();
+
+
+      // Test on Message card
+      cy.get("#hidden_sender").should("exist");
+      cy.get("#hidden_sender").should("have.value", "ENTITY1_FR");
+
+
+
+    });
+
+    it('Should receive card emitter changes for operator4_fr', () => {
+
+      cy.loginOpFab('operator4_fr', 'test');
+      cy.get('#opfab-navbarContent').find('#opfab-newcard-menu').click();
+
+      // Test on Message card
+
+      // Check that card emitter is set to Control Center FR East
+      cy.get('#of-usercard-card-emitter-selector').should("exist");
+      cy.get('#of-usercard-card-emitter-selector').find('option:selected').should('have.text', 'Control Center FR East');
+
+
+      cy.get("#hidden_sender").should("exist");
+      cy.get("#hidden_sender").should("have.value", "ENTITY3_FR");
+
+      // Now we choose Control Center FR North as card emitter
+      cy.get("#of-usercard-card-emitter-selector").find('select').select('Control Center FR South');
+      cy.get("#hidden_sender").should("have.value", "ENTITY2_FR");
+
+      // Test on editing existing card, opened from the feed
+      prepareAndSendCard();
+      
+      cy.waitDefaultTime();
+
+      cy.get('of-light-card').eq(0).click()
+      .find('[id^=opfab-feed-light-card]')
+      .invoke('attr', 'data-urlId')
+      .then((urlId) => {
+        cy.waitDefaultTime();
+        cy.hash().should('eq', '#/feed/cards/' + urlId);
+        cy.get('#opfab-card-edit').click();
+
+        cy.get("#hidden_sender").should("exist");
+        cy.get("#hidden_sender").should("have.value", "ENTITY2_FR");
+      })
+
+    });
+  })
+
 })

src/test/resources/bundles/defaultProcess_V1/template/usercard_message.handlebars

@@ -24,6 +24,10 @@
             <label>HIDDEN STATE MOCK </label>
             <input id="hidden_state" name="hidden_state">
         </div>
+        <div hidden="true" class="opfab-input" style="margin-right:5px">
+            <label>HIDDEN SENDER MOCK </label>
+            <input id="hidden_sender" name="hidden_sender">
+        </div>
     </tr>
 
 
@@ -52,5 +56,10 @@
             card: card
         };
 
-    }
+    };
+
+    usercardTemplateGateway.setEntityUsedForSendingCard = function(senderEntity) {
+        document.getElementById("hidden_sender").value = senderEntity;
+    };
+
 </script>

ui/main/src/app/modules/usercard/selectCardEmitterForm/usercard-select-card-emitter-form.component.ts

@@ -7,8 +7,9 @@
  * This file is part of the OperatorFabric project.
  */
 
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
+import {takeUntil, debounceTime, Subject} from 'rxjs';
 
 
 @Component({
@@ -20,6 +21,11 @@ export class UsercardSelectCardEmitterFormComponent implements OnInit {
     @Input() public userEntitiesAllowedToSendCardOptions;
     @Input() public initialPublisher;
 
+    @Output() public cardEmitterChange: EventEmitter<any> = new EventEmitter<any>();
+
+
+    unsubscribe$: Subject<void> = new Subject<void>();
+
     selectCardEmitterForm: FormGroup;
 
     constructor() {
@@ -30,10 +36,35 @@ export class UsercardSelectCardEmitterFormComponent implements OnInit {
         this.selectCardEmitterForm = new FormGroup({
             cardEmitter: new FormControl('')
         });
+
         this.selectCardEmitterForm.get('cardEmitter').setValue(this.initialPublisher);
+        this.listenForEmitterChange();
     }
 
     public getSelectedCardEmitter() {
         return this.selectCardEmitterForm.value['cardEmitter'];
     }
+
+    private listenForEmitterChange() {
+        this.selectCardEmitterForm.get('cardEmitter').valueChanges
+            .pipe(
+                takeUntil(this.unsubscribe$),
+                debounceTime(10) 
+            )
+            .subscribe((state) => {
+                if (!!state) {
+                    this.cardEmitterChange.emit(
+                        {
+                            'emitter': this.selectCardEmitterForm.get('cardEmitter').value
+                        });
+
+                }
+            });
+    }
+
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
 }

ui/main/src/app/modules/usercard/usercard.component.html

@@ -50,7 +50,8 @@
 
     <div *ngIf="userEntitiesAllowedToSendCardOptions.length > 1">
         <of-usercard-select-card-emitter-form [userEntitiesAllowedToSendCardOptions]="userEntitiesAllowedToSendCardOptions"
-                                              [initialPublisher]="this.publisherForCreatingUsercard" #cardEmitterForm>
+                                              [initialPublisher]="this.publisherForCreatingUsercard" #cardEmitterForm
+                                              (cardEmitterChange)="cardEmitterChanged($event)">
         </of-usercard-select-card-emitter-form>
     </div>
 

ui/main/src/app/modules/usercard/usercard.component.ts

@@ -233,6 +233,9 @@ export class UserCardComponent implements OnInit {
         this.loadTemplate();
     }
 
+    public cardEmitterChanged(event: any) {
+        usercardTemplateGateway.setEntityUsedForSendingCard(event.emitter);
+    }
 
     private setFieldsVisibility() {
         if (!!this.userCardConfiguration) {
@@ -267,6 +270,7 @@ export class UserCardComponent implements OnInit {
                         setTimeout(() => { // wait for DOM rendering
                             this.reinsertScripts();
                             this.setInitialDateFormValues();
+                            usercardTemplateGateway.setEntityUsedForSendingCard(this.findPublisherForCreatingUsercard())
                         }, 10);
                     },
                     error: (error) => {

ui/main/src/assets/js/usercardTemplateGateway.js

@@ -70,6 +70,12 @@ const usercardTemplateGateway = {
         this.startDate = null;
         this.endDate = null;
         this.lttd = null;
+
+        // OpFab calls this function to inform the template on sender entity
+        this.setEntityUsedForSendingCard = function (senderEntity) {
+            // This function should be overridden in the template.
+        };
+
     }
 };