Skip to content

Commit

Permalink
Convert MVEA cards into tables (CFM-417)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arlen
arlen committed Mar 11, 2026
1 parent 9da9e57 commit f35374d
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 100 deletions.
6 changes: 6 additions & 0 deletions app/webroot/css/co-base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
19 changes: 12 additions & 7 deletions app/webroot/css/co-responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
176 changes: 88 additions & 88 deletions app/webroot/js/comanage/components/mvea/mvea-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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().
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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 }}
Expand All @@ -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>
`
}
19 changes: 14 additions & 5 deletions app/webroot/js/comanage/components/mvea/mveas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,26 @@ 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"
:core="this.core"
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>
`
}

0 comments on commit f35374d

Please sign in to comment.