Move EIS badges to center column on Person Canvas MVEAs (CFM-417)

app/webroot/css/co-responsive.css

@@ -117,6 +117,15 @@
     align-items: center;
     min-height: 2.5em;
   }
+  .co-cards .cm-mvea-with-eis .field-data-container {
+    grid-template-columns: 2fr 100px 1fr;
+  }
+  .co-cards .field-data.data-eis {
+    padding: 0.25em 0;
+  }
+  .co-cards .field-data.data-eis .badge {
+    margin: 0;
+  }
   #mvea-canvas-roles .field-data-container {
     grid-template-columns: 1fr 1fr 2fr auto;
   }

app/webroot/js/comanage/components/mvea/mvea-item.js

@@ -60,6 +60,10 @@ export default {
         this.$parent.$parent.launchModal(this.core.mveaTitle, this.mveaLink, componentReference);
       });
     },
+    hasEis() {
+      return this.core?.externalIdentitySources &&
+        Object.keys(this.core.externalIdentitySources).length > 0;
+    },
     getEisDescription(externalIdentityId) {
       return externalIdentityId ? this.core?.externalIdentitySources[externalIdentityId] : null;
     }
@@ -104,15 +108,17 @@ export default {
           :valueToCopy="this.mvea.honorific + ' ' + this.mvea.given + ' ' + this.mvea.middle + ' ' + this.mvea.family + ' ' + this.mvea.suffix">
         </copy-value-button>                                        
       </div>
+      <div class="field-data data-eis" v-if="hasEis">
+        <span v-if="getEisDescription(this.mvea?.source_name?.external_identity_id)" 
+          class="mr-1 badge bg-light badge-eis">
+          {{ getEisDescription(this.mvea?.source_name?.external_identity_id) }}
+        </span>
+      </div>
       <div class="field-data data-label with-row-actions">
         <div class="mvea-badges">
           <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt['field.primary'] }}</span>
           <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
           <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
-          <span v-if="getEisDescription(this.mvea?.source_name?.external_identity_id)" 
-            class="mr-1 badge bg-light badge-eis">
-            {{ getEisDescription(this.mvea?.source_name?.external_identity_id) }}
-          </span>
         </div>
         <!-- row actions -->
         <!--   TODO: Should this action be open to the unpriviledged CoMember?     -->
@@ -137,14 +143,16 @@ export default {
           :valueToCopy="this.mvea.mail">
         </copy-value-button>
       </div>
-      <div class="field-data data-label">
-        <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt['field.unverified'] }}</span>
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(this.mvea?.source_email_address?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(this.mvea?.source_email_address?.external_identity_id) }}
         </span>
       </div>
+      <div class="field-data data-label">
+        <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt['field.unverified'] }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      </div>
     </li>
     <!-- Identifiers -->
     <li class="field-data-container linked-row" v-if="this.core.mveaType == 'identifiers'" @click="followRowLink">
@@ -155,15 +163,17 @@ export default {
           :valueToCopy="this.mvea.identifier">
         </copy-value-button>                                           
       </div>
-      <div class="field-data data-label">
-        <span v-if="this.mvea.status == 'S'" class="mr-1 badge bg-danger">{{ this.txt['enumeration.SuspendableStatusEnum.S'] }}</span>
-        <span v-if="this.mvea.login" class="mr-1 badge bg-outline-secondary login">{{ this.txt['field.login'] }}</span>
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(mvea?.source_identifier?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(mvea?.source_identifier?.external_identity_id) }}
         </span>
       </div>
+      <div class="field-data data-label">
+        <span v-if="this.mvea.status == 'S'" class="mr-1 badge bg-danger">{{ this.txt['enumeration.SuspendableStatusEnum.S'] }}</span>
+        <span v-if="this.mvea.login" class="mr-1 badge bg-outline-secondary login">{{ this.txt['field.login'] }}</span>
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      </div>
     </li>
     <!-- Ad Hoc Attributes -->
     <li class="field-data-container linked-row" v-if="this.core.mveaType == 'ad_hoc_attributes'" @click="followRowLink">
@@ -175,13 +185,15 @@ export default {
           :valueToCopy="this.mvea.value">
         </copy-value-button>   
       </div>
-      <div v-if="this.mvea.tag != ''" class="field-data data-label">
-        <span class="mr-1 badge bg-light ad-hoc">{{ this.mvea.tag }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(this.mvea?.source_ad_hoc_attribute?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(this.mvea?.source_ad_hoc_attribute?.external_identity_id) }}
         </span>
       </div>
+      <div v-if="this.mvea.tag != ''" class="field-data data-label">
+        <span class="mr-1 badge bg-light ad-hoc">{{ this.mvea.tag }}</span>
+      </div>
     </li>
     <!-- Addresses -->
     <li class="field-data-container linked-row" v-if="this.core.mveaType == 'addresses'" @click="followRowLink">
@@ -202,13 +214,15 @@ export default {
           :valueToCopy="this.mveaAddress">
         </copy-value-button>                                   
       </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(mvea?.source_address?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(mvea?.source_address?.external_identity_id) }}
         </span>
       </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      </div>
     </li>
     <!-- Telephone Numbers -->
     <li class="field-data-container linked-row" v-if="this.core.mveaType == 'telephone_numbers'" @click="followRowLink">
@@ -219,13 +233,15 @@ export default {
           :valueToCopy="this.mvea.country_code+this.mvea.area_code+this.mvea.number">
         </copy-value-button>                                              
       </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(mvea?.source_telephone_number?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(mvea?.source_telephone_number?.external_identity_id) }}
         </span>
       </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      </div>
     </li>
     <!-- Urls -->
     <li class="field-data-container linked-row" v-if="this.core.mveaType == 'urls'" @click="followRowLink">
@@ -237,13 +253,15 @@ export default {
           :valueToCopy="this.mvea.url">
         </copy-value-button>  
       </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(mvea?.source_url?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(mvea?.source_url?.external_identity_id) }}
         </span>
       </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      </div>
     </li>
     <!-- Pronouns -->
     <li class="field-data-container linked-row" v-if="this.core.mveaType == 'pronouns'" @click="followRowLink">
@@ -254,13 +272,15 @@ export default {
           :valueToCopy="this.mvea.pronouns">
         </copy-value-button>                                           
       </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      <div class="field-data data-eis" v-if="hasEis">
         <span v-if="getEisDescription(mvea?.source_pronoun?.external_identity_id)" 
           class="mr-1 badge bg-light badge-eis">
           {{ getEisDescription(mvea?.source_pronoun?.external_identity_id) }}
         </span>
       </div>
+      <div class="field-data data-label">
+        <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+      </div>
     </li>
   `
 }

app/webroot/js/comanage/components/mvea/mveas.js

@@ -46,6 +46,10 @@ export default {
   computed: {
     mveaModel: function() {
       return this.mveas?.[camelize(this.core.mveaType)]
+    },
+    hasEis() {
+      return this.core?.externalIdentitySources &&
+        Object.keys(this.core.externalIdentitySources).length > 0;
     }
   },
   methods: {
@@ -54,7 +58,8 @@ export default {
     }
   },
   template: `
-    <ul class="cm-mvea fields data-list">
+    <ul class="cm-mvea fields data-list"
+        :class="{ 'cm-mvea-with-eis': hasEis }">
       <mvea-item 
         :txt="this.txt"
         :core="this.core"