Add EIS badges to Person Canvas redux (CFM-417)

app/resources/locales/en_US/field.po

@@ -197,6 +197,9 @@ msgstr "Full Name"
 msgid "hostname"
 msgstr "Hostname"
 
+msgid "key"
+msgstr "Key"
+
 msgid "language"
 msgstr "Language"
 

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/src/View/Helper/VueHelper.php

@@ -53,13 +53,17 @@ class VueHelper extends Helper {
     ],
     'field' => [
       'email',
+      'key',
       'login',
       'primary',
       'datepicker.chooseTime',
       'datepicker.hour',
       'datepicker.minute',
+      'source',
       'status',
+      'type',
       'unverified',
+      'value'
     ],
     'information' => [
       'global.attributes.none',
@@ -98,7 +102,7 @@ class VueHelper extends Helper {
   ];
 
   /**
-   * Helper which will produce an array of configured locales
+   * Helper which will produce an array of configured locales from the locales_list above.
    *
    * @param   string  $lang  The language of the locale
    *

app/templates/element/mveaCanvas.php

@@ -92,7 +92,7 @@
   }
 ?>
 <div id="mvea-canvas" class="co-cards">
-  <div id="mvea-canvas-attributes-js" class="row row-cols-1 g-4<?= ($widgetCount > 1) ? ' row-cols-md-2' : ''?>">
+  <div id="mvea-canvas-attributes-js" class="row row-cols-1 g-4<?= ($widgetCount > 1) ? ' row-cols-lg-2' : ''?>">
     <?php if($widgetCount == 0): ?>
         <div class="no-attributes"><?= __d('information','noattrs') ?></div>
     <?php else: ?>

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

@@ -1374,6 +1374,18 @@ h2.card-title a {
 #main h2.card-title a:hover {
   text-decoration: none;
 }
+table.cm-mvea td {
+  width: 30%;
+}
+table.cm-mvea td:first-child {
+  width: 70%;
+}
+table.cm-mvea.cm-mvea-with-eis td {
+  width: 25%;
+}
+table.cm-mvea.cm-mvea-with-eis td:first-child {
+  width: 50%;
+}
 .field-data-container .id-col {
   text-align: right;
   padding-right: 1em;
@@ -2411,7 +2423,7 @@ code.source-record {
   align-items: center;
 }
 button.cm-copy-value-button {
-  display: flex;
+  display: none; /* turn on at 576px */
   align-items: center;
   gap: 0.1em;
   padding: 0 0.5em 0.2em;
@@ -2703,6 +2715,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 +2737,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/css/co-responsive.css

@@ -112,13 +112,17 @@
   }
   /* PERSON CANVAS / CARDS */
   .co-cards .field-data-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    min-height: 2.5em;
+    vertical-align: center;
   }
-  #mvea-canvas-roles .field-data-container {
-    grid-template-columns: 1fr 1fr 2fr auto;
+  .co-cards th {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.75rem;
+  }
+  .co-cards .field-data.data-eis .badge {
+    margin: 0;
+  }
+  button.cm-copy-value-button {
+    display: flex;
   }
   /* PAGINATION */
   #pagination {