Skip to content

Commit

Permalink
Output all available mvea text in Vue.js components (CFM-205)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arlen
arlen committed Feb 22, 2023
1 parent e937f59 commit c787856
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 46 deletions.
3 changes: 3 additions & 0 deletions app/resources/locales/en_US/information.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,6 @@ msgstr "No title"

msgid "global.value.none"
msgstr "No value"

msgid "global.visit.link"
msgstr "Visit link"
50 changes: 23 additions & 27 deletions app/templates/People/canvas.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -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>
9 changes: 7 additions & 2 deletions app/templates/element/mveaJs.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') ?>'
}
}
},
Expand Down Expand Up @@ -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>
Expand Down
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 @@ -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;
}
Expand Down
49 changes: 32 additions & 17 deletions app/webroot/js/comanage/components/mvea/mvea-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand Down

0 comments on commit c787856

Please sign in to comment.