From c787856eceee74a9772fb44f778afd639e563faa Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Tue, 7 Feb 2023 17:13:21 -0500
Subject: [PATCH] Output all available mvea text in Vue.js components (CFM-205)

---
 app/resources/locales/en_US/information.po    |  3 ++
 app/templates/People/canvas.php               | 50 +++++++++----------
 app/templates/element/mveaJs.php              |  9 +++-
 app/webroot/css/co-base.css                   |  6 +++
 .../js/comanage/components/mvea/mvea-item.js  | 49 +++++++++++-------
 5 files changed, 71 insertions(+), 46 deletions(-)

diff --git a/app/resources/locales/en_US/information.po b/app/resources/locales/en_US/information.po
index 5ed2ff96b..4cd7ed3a2 100644
--- a/app/resources/locales/en_US/information.po
+++ b/app/resources/locales/en_US/information.po
@@ -59,3 +59,6 @@ msgstr "No title"
 
 msgid "global.value.none"
 msgstr "No value"
+
+msgid "global.visit.link"
+msgstr "Visit link"
diff --git a/app/templates/People/canvas.php b/app/templates/People/canvas.php
index 1216a1153..2d7397b01 100644
--- a/app/templates/People/canvas.php
+++ b/app/templates/People/canvas.php
@@ -68,13 +68,29 @@
   <?= $this->element('subnavigation', $subnav); ?>
 </div>
 
-<!-- Flash Messages and defined Info Banners -->
-<div class="alert-container" id="flash-messages">
-  <?= $this->Flash->render() ?>
-</div>
-
 <div id="person-canvas" class="co-cards">
-  
+
+  <!-- Person Attributes -->
+  <div id="person-canvas-attributes-js" class="row row-cols-1 g-4 <?= ($widgetCount > 1) ? 'row-cols-md-2' : ''?>">
+    <?php
+      foreach($attributes as $attr) {
+        if(!empty(($vv_obj[$attr]))) {
+          print $this->element(
+            'mveaJs',
+            [
+              'htmlId' => 'person-canvas-' . $attr . '-js',
+              'parentId' => $objId,
+              'mveaType' => $attr,
+              'entityType' => 'person'
+            ]
+          );
+        }
+      }
+    ?>
+  </div>
+
+  <!-- XXX Non-AJAX Approach: Keep the output below as a reference until the component approach above is complete. -->
+  <hr>
   <!-- Person Attributes -->
   <div id="person-canvas-attributes" class="row row-cols-1 g-4 <?= ($widgetCount > 1) ? 'row-cols-md-2' : ''?>">
     <?php
@@ -93,6 +109,7 @@
       }
     ?>
   </div>
+  <!-- XXX End of Non-AJAX Approach: Keep the output below as a reference until the component approach above is complete. -->
   
   <!-- Person Roles -->
   <div id="person-canvas-roles" class="card">
@@ -152,25 +169,4 @@
       </div>
     </div>
   </div>
-  
-  <?php 
-  /* XXX Keep the following: it uses Vuejs components to load each model over ajax.
-  <div id="person-canvas-attributes-js" class="row row-cols-1 row-cols-md-2 g-4">
-  <?php
-    foreach($attributes as $attr) {
-      if(!empty(($vv_obj[$attr]))) {
-        print $this->element(
-          'mveaJs',
-          [
-            'htmlId' => 'person-canvas-' . $attr . '-js',
-            'parentId' => $objId,
-            'mveaType' => $attr,
-            'entityType' => 'person'
-          ]
-        );
-      }
-    }
-   ?>
-  </div>
-  */ ?>
 </div>
diff --git a/app/templates/element/mveaJs.php b/app/templates/element/mveaJs.php
index 5468ad40c..5214ed127 100644
--- a/app/templates/element/mveaJs.php
+++ b/app/templates/element/mveaJs.php
@@ -60,7 +60,12 @@
           webroot: '<?= $this->request->getAttribute('webroot') ?>'
         },
         txt: {
-          status: '<?= __d('field', 'datepicker.hour') ?>'
+          login: '<?= __d('field','login') ?>',
+          none: '<?= __d('information','global.value.none') ?>',
+          primary: '<?= __d('field', 'primary') ?>',
+          status: '<?= __d('field', 'datepicker.hour') ?>',
+          unverified: '<?= __d('field', 'unverified') ?>',
+          visit: '<?= __d('information', 'global.visit.link') ?>'
         }
       }
     },
@@ -111,7 +116,7 @@
   app.mount("#<?= $htmlId ?>");
 </script>
 
-<div id="<?= $htmlId ?>" class="col">
+<div id="<?= $htmlId ?>" class="col cm-mvea-col">
   <div class="card h-100">
     <div class="card-body">
       <h2 class="card-title"><?= $title ?></h2>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 5be5d16fb..4e38b78d5 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1027,6 +1027,12 @@ table.index-table .form-check {
   margin-top: 0;
   margin-bottom: 2em;
 }
+#person-canvas-attributes-js .badge {
+  margin-right: 0.5em;
+}
+#person-canvas-attributes-js .canvas-url-link {
+  margin-left: 1em;
+}
 #person-canvas-roles {
   margin-bottom: 2em;
 }
diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index a39f2d907..053c920ec 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -34,73 +34,88 @@ export default {
     <!-- Names -->
     <li class="field-data-container" v-if="this.core.mveaType == 'names'">
       <div class="field-data force-wrap">
-        <a href="/registry/email_addresses/edit/1935" class="">names</a>                                              
+        <!-- XXX The following must be fixed after discussion of what we will return from the API. The output 
+             can either be properly assembled here (all name components, proper order) or the API can return 
+             a display name. The latter would be best. -->
+        <a href="#" class="nospin">{{ this.mvea.given }} {{ this.mvea.family }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt.primary }}</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
     <!-- Email Addresses -->
     <li class="field-data-container" v-if="this.core.mveaType == 'email_addresses'">
       <div class="field-data force-wrap">
-        <a href="/registry/email_addresses/edit/1935" class="">email</a>                                              
+        <a href="#" class="nospin">{{ this.mvea.mail }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt.unverified }}</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
     <!-- Identifiers -->
     <li class="field-data-container" v-if="this.core.mveaType == 'identifiers'">
       <div class="field-data force-wrap">
-        <a href="/registry/email_addresses/edit/1935" class="">urls</a>                                              
+        <a href="#" class="nospin">{{ this.mvea.identifier }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span v-if="this.mvea.login" class="mr-1 badge bg-outline-secondary login">{{ this.txt.login }}</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
     <!-- Ad Hoc Attributes -->
     <li class="field-data-container" v-if="this.core.mveaType == 'ad_hoc_attributes'">
       <div class="field-data force-wrap">
-        <a href="/registry/email_addresses/edit/1935" class="">ad_hoc</a>                                              
+        <a href="#" class="nospin">{{ this.mvea.value != '' ? this.mvea.value : this.txt.none }}</a>                                              
       </div>
-      <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+      <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" v-if="this.core.mveaType == 'addresses'">
       <div class="field-data force-wrap">
-        <a href="/registry/email_addresses/edit/1935" class="">addresses</a>                                              
+        <address>
+          <a href="#" class="nospin">{{ this.mvea.room }} {{ this.mvea.street }}</a>
+          <span v-if="this.mvea.locality != '' || this.mvea.state != ''" class="addr-locality-state">
+            <br>{{ this.mvea.locality }}{{ this.mvea.locality != '' && this.mvea.state != '' ? ', ' : ''}}{{ this.mvea.state }}
+          </span>
+          <span v-if="this.mvea.postal_code != '' || this.mvea.country != ''" class="addr-postalcode-country">
+            <br>{{ this.mvea.postal_code }} {{ this.mvea.country }}
+          </span>
+        </address>                                                
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
     <!-- Telephone Numbers -->
     <li class="field-data-container" v-if="this.core.mveaType == 'telephone_numbers'">
       <div class="field-data force-wrap">
-        <a href="/registry/email_addresses/edit/1935" class="">phone</a>                                              
+        <a href="#" class="nospin">{{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ this.mvea.number }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
     <!-- Urls -->
     <li class="field-data-container" v-if="this.core.mveaType == 'urls'">
       <div class="field-data force-wrap">
-        <a :href="this.mvea.url">{{ this.mvea.description }}</a>                                              
+        <a href="#">{{ this.mvea.description != '' ? this.mvea.description : this.mvea.url }}</a>   
+        <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt.visit"><span class="material-icons">north_east</span></a>                                      
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
     <!-- Pronouns -->
     <li class="field-data-container" v-if="this.core.mveaType == 'pronouns'">
       <div class="field-data force-wrap">
-        <a href="{{this.mveas.Urls.}}" class="">pronouns</a>                                              
+        <a href="#" class="nospin">{{ this.mvea.type_id }}</a>                                              
       </div>
       <div class="field-data data-label">
-        <span class="mr-1 badge bg-light">Personal</span>
+        <span class="mr-1 badge bg-light">type: {{ this.mvea.type_id }}</span>
       </div>
     </li>
   `