From 94065ecfeae1754e24245d96bfe4b70ad9b95fde Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Wed, 11 Mar 2026 15:38:08 -0400 Subject: [PATCH] Improve MVEA table layout (CFM-417) --- app/resources/locales/en_US/field.po | 3 + app/src/View/Helper/VueHelper.php | 6 +- app/templates/element/mveaCanvas.php | 2 +- app/webroot/css/co-base.css | 10 +- app/webroot/css/co-responsive.css | 14 +- .../js/comanage/components/mvea/mvea-item.js | 283 +++++++++--------- .../js/comanage/components/mvea/mveas.js | 14 +- 7 files changed, 174 insertions(+), 158 deletions(-) diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po index e5df596f8..9c1210b71 100644 --- a/app/resources/locales/en_US/field.po +++ b/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" diff --git a/app/src/View/Helper/VueHelper.php b/app/src/View/Helper/VueHelper.php index 3e5043d3f..d8ea9b672 100644 --- a/app/src/View/Helper/VueHelper.php +++ b/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 * diff --git a/app/templates/element/mveaCanvas.php b/app/templates/element/mveaCanvas.php index 48c6474cd..9da27119e 100644 --- a/app/templates/element/mveaCanvas.php +++ b/app/templates/element/mveaCanvas.php @@ -92,7 +92,7 @@ } ?>
-
+
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index dc7820040..5d4c8118a 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -1375,9 +1375,15 @@ h2.card-title a { text-decoration: none; } table.cm-mvea td { - width: 25%; + 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 { @@ -2429,7 +2435,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; diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css index 9b2e3a21e..5564640e5 100644 --- a/app/webroot/css/co-responsive.css +++ b/app/webroot/css/co-responsive.css @@ -113,26 +113,16 @@ /* PERSON CANVAS / CARDS */ .co-cards .field-data-container { 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;*/ - } - .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;*/ + button.cm-copy-value-button { + display: flex; } /* 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 30e74acd1..d60aa44a7 100644 --- a/app/webroot/js/comanage/components/mvea/mvea-item.js +++ b/app/webroot/js/comanage/components/mvea/mvea-item.js @@ -47,6 +47,9 @@ export default { }, mveaAddress: function() { return this.mvea.room + ' ' + this.mvea.street + ' ' + this.mvea.locality + ' ' + this.mvea.state + ' ' + this.mvea.postal_code + ' ' + this.mvea.country; + }, + hasEis: function() { + return this.core?.externalIdentitySources && Object.keys(this.core.externalIdentitySources).length > 0; } }, methods: { @@ -60,10 +63,6 @@ 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; } @@ -74,75 +73,96 @@ export default { template: ` - - - - - {{ this.mvea.display_name }} - - - {{ this.mvea.family }} {{ this.mvea.given }} - - - {{ this.mvea.honorific }} {{ this.mvea.given }} {{ this.mvea.middle }} {{ this.mvea.family }} {{ this.mvea.suffix }} - - -
- {{ this.txt['field.primary'] }} - {{ calcLangHR(this.mvea.language) }} + +
+ + + + {{ this.mvea.display_name }} + + + {{ this.mvea.family }} {{ this.mvea.given }} + + + {{ this.mvea.honorific }} {{ this.mvea.given }} {{ this.mvea.middle }} {{ this.mvea.family }} {{ this.mvea.suffix }} + + +
+ {{ this.txt['field.primary'] }} + {{ calcLangHR(this.mvea.language) }} +
+ + + + + + + +
+ + +
+ {{ this.mvea.type.display_name }} + + + +
- - - - - - - - - {{ getEisDescription(this.mvea?.source_name?.external_identity_id) }} - - - - {{ this.mvea.type.display_name }} - - - - +
+ + {{ getEisDescription(this.mvea?.source_name?.external_identity_id) }} + + + +
- - {{ this.mvea.mail }} - {{ this.txt['field.unverified'] }} - - + +
+ {{ this.mvea.mail }} + {{ this.txt['field.unverified'] }} + + +
+ + + {{ this.mvea.type.display_name }} - - {{ this.mvea.type.display_name }} - - - {{ this.mvea.identifier }} - {{ this.txt['enumeration.SuspendableStatusEnum.S'] }} - - - + +
+ {{ this.mvea.identifier }} {{ this.txt['enumeration.SuspendableStatusEnum.S'] }} + + +
+ + + {{ this.mvea.type.display_name }} - - {{ this.mvea.type.display_name }} - - - {{ this.mvea.value != '' ? this.mvea.value : this.txt['information.global.value.none'] }} - - + +
+ {{ this.mvea.value != '' ? this.mvea.value : + this.txt['information.global.value.none'] }} + +
+ + + {{ this.mvea.tag }} - - {{ this.mvea.tag }} - - -
- - {{ this.mvea.room }} {{ this.mvea.street }} - + +
+
+ {{ this.mvea.room }} {{ this.mvea.street }}
{{ this.mvea.locality }}{{ this.mvea.locality != '' && this.mvea.state != '' ? ', ' : ''}}{{ this.mvea.state }} - - +
{{ this.mvea.postal_code }} {{ this.mvea.country }} - - -
- - + +
+ +
+ + + {{ this.mvea.type.display_name }} - - {{ this.mvea.type.display_name }} - - - {{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ this.mvea.number }} - - + +
+ {{ this.mvea.country_code }} {{ this.mvea.area_code }} {{ + this.mvea.number }} + +
+ + + {{ this.mvea.type.display_name }} - - {{ this.mvea.type.display_name }} - - - {{ this.mvea.description != '' && this.mvea.description != null ? this.mvea.description : this.mvea.url }} - open_in_new - - + +
+ {{ this.mvea.description != '' && this.mvea.description != + null ? this.mvea.description : this.mvea.url }} open_in_new + +
+ + + {{ this.mvea.type.display_name }} - - {{ this.mvea.type.display_name }} - - - {{ this.mvea.pronouns }} - - + +
+ {{ this.mvea.pronouns }} + +
+ + + {{ this.mvea.type.display_name }} - - {{ this.mvea.type.display_name }} - ` } diff --git a/app/webroot/js/comanage/components/mvea/mveas.js b/app/webroot/js/comanage/components/mvea/mveas.js index b2f96ceb5..6f3b1f997 100644 --- a/app/webroot/js/comanage/components/mvea/mveas.js +++ b/app/webroot/js/comanage/components/mvea/mveas.js @@ -66,13 +66,13 @@ export default { v-for='mvea in mveaModel' :mvea="mvea"> - - - - - - - + + + {{ this.txt['field.value'] }} + {{ this.core.mveaType == 'ad_hoc_attributes' ? this.txt['field.key'] : this.txt['field.type'] }} + {{ this.txt['field.source'] }} + + {{ this.txt['information.global.attributes.none'] }}