From f35374d5d619c78c7598f096b7ef2c79beb3d535 Mon Sep 17 00:00:00 2001
From: Arlen Johnson <arlen@sphericalcowgroup.com>
Date: Fri, 20 Feb 2026 10:37:11 -0500
Subject: [PATCH] Convert MVEA cards into tables (CFM-417)

---
 app/webroot/css/co-base.css                   |   6 +
 app/webroot/css/co-responsive.css             |  19 +-
 .../js/comanage/components/mvea/mvea-item.js  | 176 +++++++++---------
 .../js/comanage/components/mvea/mveas.js      |  19 +-
 4 files changed, 120 insertions(+), 100 deletions(-)

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index af2698b1a..71795e41e 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1374,6 +1374,12 @@ h2.card-title a {
 #main h2.card-title a:hover {
   text-decoration: none;
 }
+table.cm-mvea td {
+  width: 25%;
+}
+table.cm-mvea td:first-child {
+  width: 50%;
+}
 .field-data-container .id-col {
   text-align: right;
   padding-right: 1em;
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index cd479c248..9b2e3a21e 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -112,22 +112,27 @@
   }
   /* 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;
+    /*display: grid;*/
+    /*grid-template-columns: 1fr 1fr;*/
+    /*align-items: center;*/
+    /*min-height: 2.5em;*/
+  }
+  .co-cards th {
+    font-size: 0.8rem;
+    padding: 0.25rem 0.75rem;
   }
   .co-cards .cm-mvea-with-eis .field-data-container {
-    grid-template-columns: 2fr 100px 1fr;
+    /*grid-template-columns: 2fr 100px 1fr;*/
   }
   .co-cards .field-data.data-eis {
-    padding: 0.25em 0;
+    /*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;
+    /*grid-template-columns: 1fr 1fr 2fr auto;*/
   }
   /* PAGINATION */
   #pagination {
diff --git a/app/webroot/js/comanage/components/mvea/mvea-item.js b/app/webroot/js/comanage/components/mvea/mvea-item.js
index eccc3056e..30e74acd1 100644
--- a/app/webroot/js/comanage/components/mvea/mvea-item.js
+++ b/app/webroot/js/comanage/components/mvea/mvea-item.js
@@ -73,8 +73,8 @@ export default {
   },
   template: `
     <!-- Names -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'names'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'names'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <a :href="mveaLink" class="row-link" @click.prevent>
           <!-- If there is a display name use it. Otherwise, check language and produce right-to-left 
             order or left-to-right order. This approach is similar to Model/Entity/Name.php::_getFullName(). 
@@ -91,6 +91,10 @@ export default {
             {{ this.mvea.honorific }} {{ this.mvea.given }} {{ this.mvea.middle }} {{ this.mvea.family }} {{ this.mvea.suffix }}
           </span>
         </a>
+        <div v-if="this.mvea.primary_name || this.mvea.language" class="mvea-badges">
+          <span v-if="this.mvea.primary_name" class="mr-1 badge bg-outline-secondary primary">{{ this.txt['field.primary'] }}</span>
+          <span v-if="this.mvea.language" class="mr-1 badge bg-light">{{ calcLangHR(this.mvea.language) }}</span>
+        </div>
         <!-- XXX As noted above, replace the following logic when full_name is available. -->
         <copy-value-button 
           v-if="this.mvea.display_name"
@@ -107,19 +111,15 @@ export default {
           :txt="this.txt" 
           :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">
+      </td>
+      <td 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">
+          class="mvea-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>
-        </div>
+      </td>
+      <td class="field-data data-label with-row-actions">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>  
         <!-- row actions -->
         <!--   TODO: Should this action be open to the unpriviledged CoMember?     -->
         <actions
@@ -132,72 +132,72 @@ export default {
             }
           ]">
         </actions>
-      </div>
-    </li>
+      </td>
+    </tr>
     <!-- Email Addresses -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'email_addresses'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'email_addresses'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.mail }}</a> 
+        <span v-if="!(this.mvea.verified)" class="mr-1 badge bg-warning unverified">{{ this.txt['field.unverified'] }}</span>
         <copy-value-button 
           :txt="this.txt" 
           :valueToCopy="this.mvea.mail">
         </copy-value-button>
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td class="field-data data-label">      
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+    </tr>
     <!-- Identifiers -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'identifiers'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
-        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.identifier }}</a>   
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'identifiers'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
+        <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.identifier }}</a>
+        <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>
         <copy-value-button 
           :txt="this.txt" 
           :valueToCopy="this.mvea.identifier">
         </copy-value-button>                                           
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+    </tr>
     <!-- Ad Hoc Attributes -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'ad_hoc_attributes'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'ad_hoc_attributes'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.value != '' ? this.mvea.value : this.txt['information.global.value.none'] }}</a>
         <copy-value-button 
           v-if="this.mvea.value != ''"
           :txt="this.txt" 
           :valueToCopy="this.mvea.value">
         </copy-value-button>   
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td v-if="this.mvea.tag != ''" class="field-data data-label">
+        <span class="mvea-tag">{{ this.mvea.tag }}</span>
+      </td>
+    </tr>
     <!-- Addresses -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'addresses'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'addresses'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <address>
           <a :href="mveaLink" class="row-link" @click.prevent>
             {{ this.mvea.room }} {{ this.mvea.street }}
@@ -213,74 +213,74 @@ export default {
           :txt="this.txt" 
           :valueToCopy="this.mveaAddress">
         </copy-value-button>                                   
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+    </tr>
     <!-- Telephone Numbers -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'telephone_numbers'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'telephone_numbers'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ this.mvea.number }}</a> 
         <copy-value-button 
           :txt="this.txt" 
           :valueToCopy="this.mvea.country_code+this.mvea.area_code+this.mvea.number">
         </copy-value-button>                                              
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+    </tr>
     <!-- Urls -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'urls'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'urls'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.description != '' && this.mvea.description != null ? this.mvea.description : this.mvea.url }}</a>   
         <a :href="this.mvea.url" class="canvas-url-link" :title="this.txt['information.global.visit.link']"><span class="material-symbols">open_in_new</span></a>
         <copy-value-button 
           :txt="this.txt" 
           :valueToCopy="this.mvea.url">
         </copy-value-button>  
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+    </tr>
     <!-- Pronouns -->
-    <li class="field-data-container linked-row" v-if="this.core.mveaType == 'pronouns'" @click="followRowLink">
-      <div class="field-data force-wrap with-hover-button">
+    <tr class="field-data-container linked-row" v-if="this.core.mveaType == 'pronouns'" @click="followRowLink">
+      <td class="field-data force-wrap with-hover-button">
         <a :href="mveaLink" class="row-link" @click.prevent>{{ this.mvea.pronouns }}</a>     
         <copy-value-button 
           :txt="this.txt" 
           :valueToCopy="this.mvea.pronouns">
         </copy-value-button>                                           
-      </div>
-      <div class="field-data data-eis" v-if="hasEis">
+      </td>
+      <td 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">
+          class="mvea-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>
+      </td>
+      <td class="field-data data-label">
+        <span class="mvea-type">{{ this.mvea.type.display_name }}</span>
+      </td>
+    </tr>
   `
 }
diff --git a/app/webroot/js/comanage/components/mvea/mveas.js b/app/webroot/js/comanage/components/mvea/mveas.js
index 908c32e77..b2f96ceb5 100644
--- a/app/webroot/js/comanage/components/mvea/mveas.js
+++ b/app/webroot/js/comanage/components/mvea/mveas.js
@@ -58,7 +58,7 @@ export default {
     }
   },
   template: `
-    <ul class="cm-mvea fields data-list"
+    <table class="cm-mvea fields data-list"
         :class="{ 'cm-mvea-with-eis': hasEis }">
       <mvea-item 
         :txt="this.txt"
@@ -66,9 +66,18 @@ export default {
         v-for='mvea in mveaModel'
         :mvea="mvea">
       </mvea-item>
-      <li v-show="this.mveaModel?.length < 1" class="field-data-container cm-mvea-no-attributes-msg">
-        <div class="field-data">{{ this.txt['information.global.attributes.none'] }}</div>
-      </li>
-    </ul>
+<!--      <thead>-->
+<!--        <tr>-->
+<!--          <th>Value</th>-->
+<!--          <th v-if="hasEis">Source</th>-->
+<!--          <th>{{ this.core.mveaType == 'ad_hoc_attributes' ? 'Key' : 'Type' }}</th>-->
+<!--        </tr>-->
+<!--      </thead>-->
+      <tbody>
+        <tr v-show="this.mveaModel?.length < 1" class="field-data-container cm-mvea-no-attributes-msg">
+          <td class="field-data">{{ this.txt['information.global.attributes.none'] }}</td>
+        </tr>
+      </tbody>
+    </table>
   `
 }
\ No newline at end of file