Use badge to show entity recipients for user card preview (#5448)

Signed-off-by: vlo-rte <valerie.longa@rte-france.com>
opfab · Dec 4, 2023 · 0a3b677 · 0a3b677
1 parent 8028175
commit 0a3b677
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/test/cypress/cypress/integration/UserCard.spec.js b/src/test/cypress/cypress/integration/UserCard.spec.js
@@ -145,8 +145,8 @@ describe('User Card ', function () {
       usercard.checkEntityRecipientsInPreviewContains("IT SUPERVISION CENTER");
       // Check circles for connected entities
       cy.get('#opfab-entity-recipients').get('.badge').should('have.length', 2);
-      cy.get('#opfab-entity-recipients').get('.bg-success').should('have.length', 1);
-      cy.get('#opfab-entity-recipients').get('.bg-danger').should('have.length', 1);
+      cy.get('#opfab-entity-recipients').get('.bg-primary').should('have.length', 1);
+      cy.get('#opfab-entity-recipients').get('.bg-secondary').should('have.length', 1);
       script.resetUIConfigurationFiles();
     })
 

diff --git a/ui/main/src/app/modules/usercard/usercard.component.html b/ui/main/src/app/modules/usercard/usercard.component.html
@@ -98,30 +98,40 @@
 
 
 <div *ngIf="displayPreview">
-    <ng-template #connected>
-        <span class="badge rounded-pill bg-success opfab-activityarea-badge" style ="transform: translate(0,-1px) scale(0.8);">&nbsp;</span>
-    </ng-template>
-    <ng-template #disconnected>
-        <span class="badge rounded-pill bg-danger opfab-activityarea-badge" style ="transform: translate(0,-1px) scale(0.8);">&nbsp;</span>
-    </ng-template>
     <div class="opfab-section-header" style="display: flex;flex-wrap: wrap;" id="opfab-entity-recipients">
-        <span translate>userCard.recipients</span>
+        <span translate>userCard.recipients</span>&nbsp;
         <span *ngFor="let entityId of this.recipients" style="padding-right: 10px">
-            &nbsp; {{getEntityName(entityId)}}
-            <span *ngIf="this.displayConnectionCircles">
+            <span *ngIf="this.displayConnectionCircles; else connectionCirclesNotDisplayed">
                 <span *ngIf="this.connectedRecipients.has(entityId);then connected else disconnected"></span>
+                <ng-template #connected>
+                    <span>&nbsp;</span><span class="badge rounded-pill bg-primary opfab-activityarea-badge">{{getEntityName(entityId)}}</span>
+                </ng-template>
+                <ng-template #disconnected>
+                    <span>&nbsp;</span><span class="badge rounded-pill bg-secondary opfab-activityarea-badge">{{getEntityName(entityId)}}</span>
+                </ng-template>
             </span>
+            <ng-template #connectionCirclesNotDisplayed>
+                &nbsp;{{getEntityName(entityId)}}&nbsp;
+            </ng-template>
         </span>
     </div>
 
     <div class="opfab-section-header" style="display: flex;flex-wrap: wrap;" id="opfab-entity-recipients-for-information"
             *ngIf="!!card.entityRecipientsForInformation && card.entityRecipientsForInformation.length">
-        <span translate>userCard.recipientsForInformation</span>
+        <span translate>userCard.recipientsForInformation</span>&nbsp;
         <span *ngFor="let entityId of card.entityRecipientsForInformation" style="padding-right: 10px">
-            &nbsp; {{getEntityName(entityId)}}
-            <span *ngIf="this.displayConnectionCircles">
+            <span *ngIf="this.displayConnectionCircles; else connectionCirclesNotDisplayed">
                 <span *ngIf="this.connectedRecipients.has(entityId);then connected else disconnected"></span>
+                <ng-template #connected>
+                    <span>&nbsp;</span><span class="badge rounded-pill bg-primary opfab-activityarea-badge">{{getEntityName(entityId)}}</span>
+                </ng-template>
+                <ng-template #disconnected>
+                    <span>&nbsp;</span><span class="badge rounded-pill bg-secondary opfab-activityarea-badge">{{getEntityName(entityId)}}</span>
+                </ng-template>
             </span>
+            <ng-template #connectionCirclesNotDisplayed>
+                &nbsp;{{getEntityName(entityId)}}&nbsp;
+            </ng-template>
         </span>
     </div>