Display user profile fields

This commit is contained in:
kPherox 2019-11-16 03:12:16 +09:00
parent 0eda60eeb4
commit ca4d5950d0
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D
2 changed files with 58 additions and 0 deletions

View File

@ -123,6 +123,14 @@ const UserProfile = {
onTabSwitch (tab) { onTabSwitch (tab) {
this.tab = tab this.tab = tab
this.$router.replace({ query: { tab } }) this.$router.replace({ query: { tab } })
},
linkClicked ({ target }) {
if (target.tagName === 'SPAN') {
target = target.parentNode
}
if (target.tagName === 'A') {
window.open(target.href, '_blank')
}
} }
}, },
watch: { watch: {

View File

@ -11,6 +11,44 @@
:allow-zooming-avatar="true" :allow-zooming-avatar="true"
rounded="top" rounded="top"
/> />
<div
v-if="user.fields_html && user.fields_html.length > 0"
class="user-profile-fields"
>
<dl
v-for="(field, index) in user.fields_html"
:key="index"
>
<!-- eslint-disable vue/no-v-html -->
<dt
class="user-profile-field-name"
@click.prevent="linkClicked"
v-html="field.name"
/>
<dd
class="user-profile-field-value"
@click.prevent="linkClicked"
v-html="field.value"
/>
<!-- eslint-enable vue/no-v-html -->
</dl>
</div>
<div
v-else-if="user.fields && user.fields.length > 0"
class="user-card-fields"
>
<dl
v-for="(field, index) in user.fields"
:key="index"
>
<dt class="user-card-field-name">
{{ field.name }}
</dt>
<dd class="user-card-field-value">
{{ field.value }}
</dd>
</dl>
</div>
<tab-switcher <tab-switcher
:active-tab="tab" :active-tab="tab"
:render-only-focused="true" :render-only-focused="true"
@ -113,6 +151,18 @@
flex: 2; flex: 2;
flex-basis: 500px; flex-basis: 500px;
.user-profile-fields {
dl {
margin: 1em 1.5em;
dt, dd {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
.userlist-placeholder { .userlist-placeholder {
display: flex; display: flex;
justify-content: center; justify-content: center;