Add EIS badges to Person Canvas (CFM-417)

app/src/Controller/PeopleController.php

@@ -90,6 +90,30 @@ public function beforeRender(\Cake\Event\EventInterface $event) {
       $this->set('vv_default_name_type', $settings->default_name_type_id);
     }
 
+    if(!$this->request->is('restful') && $this->request->getParam('action') == 'edit') {
+      // Create a lookup table for badging External Identity Source descriptions on Person Canvas MVEAS.
+      // This will be passed to the view and made available to the JavaScript components.
+      $extIdentities = TableRegistry::getTableLocator()->get('ExternalIdentities');
+      $personId = $this->request->getParam('pass.0');
+      $eisLookupTable = $extIdentities
+        ->find('list', [
+          'keyField' => 'id',
+          'valueField' => 'description',
+        ])
+        ->select([
+          'id' => 'ExternalIdentities.id',
+          'description' => 'ExternalIdentitySources.description',
+        ])
+        ->innerJoinWith('ExtIdentitySourceRecords.ExternalIdentitySources')
+        ->where([
+          'ExternalIdentities.person_id' => $personId,
+        ])
+        ->enableHydration(false)
+        ->toArray();
+
+      $this->set('vv_external_identity_sources', $eisLookupTable);
+    }
+
     return parent::beforeRender($event);
   }
 }

app/templates/element/mveaJs.php

@@ -64,7 +64,8 @@
           mveaController: '<?= Cake\Utility\Inflector::dasherize($mveaController) ?>',
           mveaTitle: '<?= $title ?>',
           webroot: '<?= $this->request->getAttribute('webroot') ?>',
-          action:  '<?= $vv_action ?>'
+          action:  '<?= $vv_action ?>',
+          externalIdentitySources: <?= json_encode($vv_external_identity_sources ?? null) ?>
         },
         txt: JSON.parse('<?= json_encode($vueHelper->locales()) ?>'),
         isLoading: true,

app/webroot/css/co-base.css

@@ -2703,6 +2703,7 @@ html.dark-mode .btn-default:active {
   margin-top: auto;
   margin-bottom: auto;
   line-height: 1.2em;
+  border: 1px solid var(--cmg-color-bg-006);
 }
 .bg-light {
   color: var(--cmg-color-highlight-005);
@@ -2724,6 +2725,9 @@ html.dark-mode .btn-default:active {
 .bg-secondary {
   background-color: var(--cmg-color-btn-bg-003);
 }
+.badge-eis {
+  box-shadow: var(--cmg-color-shadow-01);
+}
 /* Bootstrap bg-outline */
 .bg-outline-primary {
   color: var(--cmg-color-link);

app/webroot/css/co-color.css

@@ -89,6 +89,8 @@
 
   --cmg-color-highlight-017: #cee6f8; /* alert: info border color (blue) */
   --cmg-color-highlight-018: yellow;  /* autocomplete highlight for query text */
+
+  --cmg-color-shadow-01: 0px 0px 2px 0px rgba(13,69,115,0.6); /* RGBA box-shadow color based on --cmg-color-btn-bg-001 */
 
   /* Fonts */
   --cmg-font-regular: 'open_sansregular','Trebuchet MS',Arial,Helvetica,sans-serif;
@@ -172,6 +174,8 @@ html.dark-mode {
   --cmg-color-highlight-017: #333; /* alert: info border color (blue) */
   --cmg-color-highlight-018: #cc0;    /* autocomplete highlight for query text */
 
+  --cmg-color-shadow-01: 0px 0px 2px 0px rgba(13,69,115,0.8); /* RGBA box-shadow color based on --cmg-color-btn-bg-001 */
+
   /* Bootstrap Overrides for Dark Mode */
   --bs-light-rgb: #151515;
 }

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

@@ -59,6 +59,9 @@ export default {
         var componentReference = 'mvea' + this.core.mveaType;
         this.$parent.$parent.launchModal(this.core.mveaTitle, this.mveaLink, componentReference);
       });
+    },
+    getEisDescription(externalIdentityId) {
+      return externalIdentityId ? this.core?.externalIdentitySources[externalIdentityId] : null;
     }
   },
   mounted() {
@@ -84,6 +87,7 @@ export default {
             {{ this.mvea.honorific }} {{ this.mvea.given }} {{ this.mvea.middle }} {{ this.mvea.family }} {{ this.mvea.suffix }}
           </span>
         </a>
+        <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt['field.primary'] }}</span>
         <!-- XXX As noted above, replace the following logic when full_name is available. -->
         <copy-value-button 
           v-if="this.mvea.display_name"
@@ -103,9 +107,12 @@ export default {
       </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?     -->
@@ -133,6 +140,10 @@ export default {
       <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>
+        <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>
     </li>
     <!-- Identifiers -->
@@ -148,6 +159,10 @@ export default {
         <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>
+        <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>
     </li>
     <!-- Ad Hoc Attributes -->
@@ -162,6 +177,10 @@ export default {
       </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>
+        <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>
     </li>
     <!-- Addresses -->
@@ -185,6 +204,10 @@ export default {
       </div>
       <div class="field-data data-label">
         <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+        <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>
     </li>
     <!-- Telephone Numbers -->
@@ -198,6 +221,10 @@ export default {
       </div>
       <div class="field-data data-label">
         <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+        <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>
     </li>
     <!-- Urls -->
@@ -212,6 +239,10 @@ export default {
       </div>
       <div class="field-data data-label">
         <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+        <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>
     </li>
     <!-- Pronouns -->
@@ -225,6 +256,10 @@ export default {
       </div>
       <div class="field-data data-label">
         <span class="mr-1 badge bg-light">{{ this.mvea.type.display_name }}</span>
+        <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>
     </li>
   `