mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
add User route and view with skeleton screen
This commit is contained in:
Axolotle
parent
666899bb45
commit
6ef882efd0
5 changed files with 158 additions and 5 deletions
|
|
@ -100,7 +100,7 @@ export default {
|
|||
<style lang="scss">
|
||||
@import '@/scss/main.scss';
|
||||
|
||||
header {
|
||||
#app > header {
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -125,8 +125,7 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
#app > footer {
|
||||
padding: 1rem 0;
|
||||
border-top: 1px solid #eee;
|
||||
font-size: 0.875rem;
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@
|
|||
"user_new_forward": "newforward@myforeigndomain.org",
|
||||
"user_new_mail": "newmail@mydomain.org",
|
||||
"user_username": "Username",
|
||||
"user_username_edit": "Edit %s’s account",
|
||||
"user_username_edit": "Edit {name}’s account",
|
||||
"users": "Users",
|
||||
"users_new": "New user",
|
||||
"users_no": "No users.",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Home from './views/Home'
|
||||
import Login from './views/Login'
|
||||
import Users from './views/Users'
|
||||
import User from './views/User'
|
||||
|
||||
|
||||
const routes = [
|
||||
|
|
@ -11,6 +12,12 @@ const routes = [
|
|||
{name: 'users', path: '/users', component: Users, meta: {
|
||||
breadcrumb: [{name: 'users', trad: 'users'}]
|
||||
}},
|
||||
{name: 'user', path: '/user/:name', component: User, props: true, meta: {
|
||||
breadcrumb: [
|
||||
{name: 'users', trad: 'users'},
|
||||
{name: 'user', param: 'name'}
|
||||
]
|
||||
}},
|
||||
]
|
||||
|
||||
export default routes
|
||||
|
|
|
|||
|
|
@ -34,5 +34,5 @@ body {
|
|||
|
||||
// Fork-awesome overrides
|
||||
.fa-fw {
|
||||
width: 1.25em;
|
||||
width: 1.25em !important;
|
||||
}
|
||||
|
|
|
|||
147
app/src/views/User.vue
Normal file
147
app/src/views/User.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div class="user">
|
||||
<breadcrumb/>
|
||||
<b-card :class="{skeleton: !user}">
|
||||
<template v-slot:header>
|
||||
<h2>{{ user ? user.fullname : '' }}</h2>
|
||||
</template>
|
||||
<div class="d-flex align-items-center">
|
||||
<icon iname="user" class="fa-fw"></icon>
|
||||
<div class="w-100">
|
||||
<template v-if="user">
|
||||
<b-row>
|
||||
<b-col><strong>{{ $t('user_username') }}</strong></b-col>
|
||||
<b-col>{{ user.username }}</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col><strong>{{ $t('user_email') }}</strong></b-col>
|
||||
<b-col class="font-italic">{{ user.mail }}</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col><strong>{{ $t('user_mailbox_quota') }}</strong></b-col>
|
||||
<b-col>{{ user['mailbox-quota'].limit }}</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col><strong>{{ $t('user_mailbox_use') }}</strong></b-col>
|
||||
<b-col>{{ user['mailbox-quota'].use }}</b-col>
|
||||
</b-row>
|
||||
<b-row v-for="(trad, mailType) in {'mail-aliases': 'user_emailaliases', 'mail-forward': 'user_emailforward'}" :key="mailType">
|
||||
<b-col><strong>{{ $t(trad) }}</strong></b-col>
|
||||
<b-col>
|
||||
<ul v-if="user[mailType] && user[mailType].length > 1">
|
||||
<li v-for="(alias, index) in user[mailType]" :key="index">
|
||||
{{ alias }}
|
||||
</li>
|
||||
</ul>
|
||||
<template v-else-if="user[mailType]">
|
||||
{{ user[mailType] }}
|
||||
</template>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
<!-- skeleton -->
|
||||
<template v-else>
|
||||
<b-row v-for="(n, index) in 6" :key="index">
|
||||
<b-col><strong class="rounded"></strong></b-col>
|
||||
<b-col><span v-if="n <= 4" class="rounded"></span></b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template v-slot:footer >
|
||||
<div class="d-flex d-flex justify-content-end">
|
||||
<b-button :to="user ? {name: 'user-edit', params: {user: user}} : null" :variant="user ? 'info' : 'dark'" >
|
||||
{{ user ? $t('user_username_edit', {name: user.username}) : '' }}
|
||||
</b-button>
|
||||
<b-button :variant="user ? 'danger' : 'dark'" class="ml-2">{{ user ? $t('delete') : '' }}</b-button>
|
||||
</div>
|
||||
</template>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/helpers/api'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
|
||||
export default {
|
||||
name: 'User',
|
||||
props: ['name'],
|
||||
data: function () {
|
||||
return {
|
||||
user: undefined,
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
const data = await api.get('users/' + this.name)
|
||||
if (!data) return;
|
||||
this.user = data
|
||||
},
|
||||
components: {
|
||||
Breadcrumb
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/scss/_variables.scss';
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.icon.fa-user {
|
||||
font-size: 10rem;
|
||||
padding-right: 3rem;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
+ .row {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
font-style: italic;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
opacity: 0.5;
|
||||
|
||||
h2 {
|
||||
height: #{2 * 1.2}rem;
|
||||
|
||||
}
|
||||
|
||||
.col {
|
||||
& > * {
|
||||
display: block;
|
||||
background-color: $skeleton-color;
|
||||
height: 1.5rem;
|
||||
max-width: 8rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
max-width: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
height: calc(2.25rem + 2px);
|
||||
width: 7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue