131 lines
3.2 KiB
Vue
131 lines
3.2 KiB
Vue
<template>
|
|
<div class="users">
|
|
<ui-header-bar title="Users & Permissions" :back-button="true">
|
|
<ui-table-filter v-model="usersConfig" />
|
|
<ui-add-button type="light onbg" :route="createRoleRoute" label="Add role" />
|
|
<ui-button type="primary" label="Add user" />
|
|
</ui-header-bar>
|
|
|
|
<div class="ui-blank-box">
|
|
<h2 class="ui-headline users-group-headline" v-localize="'@role.roles'"></h2>
|
|
<div class="users-roles">
|
|
<router-link v-for="role in roles" :key="role.id" :to="getRoleLink(role)" class="users-role">
|
|
<i class="users-role-icon" :class="role.icon"></i>
|
|
<strong>{{role.name}}</strong>
|
|
<span class="users-role-minor" v-localize="{ key: role.countClaims !== 1 ? '@user.count_permissions' : '@user.one_permission', tokens: { count: role.claims.length }}"></span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui-blank-box">
|
|
<h2 class="ui-headline users-group-headline" v-localize="'@user.users'"></h2>
|
|
<ui-table v-model="usersConfig" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import UserRolesApi from 'zero/resources/userRoles.js';
|
|
import UsersApi from 'zero/resources/users.js';
|
|
import { filter as _filter, map as _map } from 'underscore';
|
|
|
|
export default {
|
|
data: () => ({
|
|
createRoleRoute: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-role-create',
|
|
roles: [],
|
|
usersConfig: zero.renderers.user.list
|
|
}),
|
|
|
|
created()
|
|
{
|
|
UserRolesApi.getAll().then(items =>
|
|
{
|
|
this.roles = items;
|
|
});
|
|
|
|
this.usersConfig.items = UsersApi.getAll;
|
|
let roleColumn = this.usersConfig.columns.roles;
|
|
if (roleColumn)
|
|
{
|
|
roleColumn.render = item =>
|
|
{
|
|
const roles = _filter(this.roles, role => item.roles.indexOf(role.alias) > -1);
|
|
return _map(roles, role => role.name).join(', ');
|
|
};
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
getRoleLink(item)
|
|
{
|
|
return {
|
|
name: zero.alias.sections.settings + '-' + zero.alias.settings.users + '-role',
|
|
params: { id: item.id }
|
|
};
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
h2.users-group-headline
|
|
{
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.users .ui-table-field-image
|
|
{
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.users .ui-table-cell[table-field="avatar"]
|
|
{
|
|
padding: 12px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.users .ui-table-cell[table-field="name"]
|
|
{
|
|
border-left-color: transparent;
|
|
}
|
|
|
|
.users-roles
|
|
{
|
|
display: grid;
|
|
gap: var(--padding);
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
align-items: stretch;
|
|
margin-bottom: calc(var(--padding) * 2);
|
|
}
|
|
|
|
a.users-role
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-box);
|
|
border-radius: var(--radius);
|
|
padding: var(--padding-m) var(--padding);
|
|
text-align: center;
|
|
color: var(--color-text);
|
|
font-size: var(--font-size);
|
|
line-height: 1.5;
|
|
box-shadow: var(--shadow-short);
|
|
}
|
|
|
|
.users-role-minor
|
|
{
|
|
color: var(--color-text-dim);
|
|
}
|
|
|
|
.users-role-icon
|
|
{
|
|
font-size: 26px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin: 0 auto var(--padding-m);
|
|
position: relative;
|
|
}
|
|
</style> |