sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update card with user information

Browse source
This commit is contained in:
Angelina Filippova 2019-10-01 22:54:13 +03:00
parent e500401698
commit 2d52fbdfcb
2 changed files with 81 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/lang/en.js
View file

@ -238,11 +238,16 @@ export default {
tags: 'Tags',
moderator: 'Moderator',
admin: 'Admin',
local: 'Local',
local: 'local',
external: 'external',
localUppercase: 'Local',
nickname: 'Nickname',
deactivated: 'Deactivated',
recentStatuses: 'Recent Statues',
showPrivateStatuses: 'Show private statuses'
showPrivateStatuses: 'Show private statuses',
roles: 'Roles',
activeUppercase: 'Active',
active: 'active',
deactivated: 'deactivated'
},
usersFilter: {
inputPlaceholder: 'Select filter',

137
src/views/users/show.vue
View file

@ -5,70 +5,66 @@
<h1>{{ user.display_name }}</h1>
</header>
<el-row>
<el-col :span="6">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
<table class="el-table__body">
<tbody>
<tr class="el-table__row">
<td class="name-col">ID</td>
<td class="value-col">
{{ user.id }}
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.tags') }}</td>
<td>
<el-tag v-for="tag in user.tags" :key="tag">{{ tag }}</el-tag>
<span v-if="user.tags.length === 0">None</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.moderator') }}</td>
<td>
<el-tag v-if="user.roles.moderator" type="success"><i class="el-icon-check" /></el-tag>
<el-tag v-if="!user.roles.moderator" type="danger"><i class="el-icon-error" /></el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.admin') }}</td>
<td>
<el-tag v-if="user.roles.admin" type="success"><i class="el-icon-check" /></el-tag>
<el-tag v-if="!user.roles.admin" type="danger"><i class="el-icon-error" /></el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.local') }}</td>
<td>
<el-tag v-if="user.local" type="success"><i class="el-icon-check" /></el-tag>
<el-tag v-if="!user.local" type="danger"><i class="el-icon-error" /></el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.deactivated') }}</td>
<td>
<el-tag v-if="user.deactivated" type="success"><i class="el-icon-check" /></el-tag>
<el-tag v-if="!user.deactivated" type="danger"><i class="el-icon-error" /></el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.nickname') }}</td>
<td>
{{ user.nickname }}
</td>
</tr>
</tbody>
</table>
</div>
<el-col :span="8">
<el-card class="user-profile-card">
<div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
<table class="user-profile-table">
<tbody>
<tr class="el-table__row">
<td>{{ $t('userProfile.nickname') }}</td>
<td>
{{ user.nickname }}
</td>
</tr>
<tr class="el-table__row">
<td class="name-col">ID</td>
<td class="value-col">
{{ user.id }}
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.tags') }}</td>
<td>
<el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
<span v-if="user.tags.length === 0">—</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.roles') }}</td>
<td>
<el-tag v-if="user.roles.moderator" class="user-profile-tag"/>
<el-tag v-if="user.roles.admin" class="user-profile-tag"/>
<span v-if="!user.roles.moderator && !user.roles.admin">—</span>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.localUppercase') }}</td>
<td>
<el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
<el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
</td>
</tr>
<tr class="el-table__row">
<td>{{ $t('userProfile.activeUppercase') }}</td>
<td>
<el-tag v-if="user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
<el-tag v-if="!user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
</td>
</tr>
</tbody>
</table>
</div>
</el-card>
</el-col>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="18"><h2>{{ $t('userProfile.recentStatuses') }}</h2></el-col>
<el-col :span="6" class="show-private">
<el-checkbox v-model="showPrivate" @change="onTogglePrivate">
{{ $t('userProfile.showPrivateStatuses') }}
</el-checkbox>
</el-col>
</el-row>
<el-col :span="18">
<el-col :span="16">
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="18"><h2 class="recent-statuses-header">{{ $t('userProfile.recentStatuses') }}</h2></el-col>
<el-col :span="6" class="show-private">
<el-checkbox v-model="showPrivate" @change="onTogglePrivate">
{{ $t('userProfile.showPrivateStatuses') }}
</el-checkbox>
</el-col>
</el-row>
<el-timeline class="statuses">
<el-timeline-item v-for="status in statuses" :timestamp="createdAtLocaleString(status.created_at)" :key="status.id">
<el-card>
@ -168,12 +164,25 @@ table {
width: 100%;
}
}
.recent-statuses-header {
margin-top: 10px;
}
.statuses {
padding-right: 20px;
padding: 0 20px 0 0;
}
.show-private {
text-align: right;
line-height: 67px;
padding-right: 20px;
}
.user-profile-card {
margin-left: 15px;
margin-right: 20px;
}
.user-profile-table {
margin: 0;
}
.user-profile-tag {
margin: 0 4px 4px 0;
}
</style>