tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added admin groups and working user deletion, etc.

Browse Source
This commit is contained in:
Tobias Kurze
2020-08-07 16:48:08 +02:00
parent d8eda00a1e
commit 4483898115
14 changed files with 560 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/App.vue
View File

@@ -4,6 +4,7 @@
<img src="./assets/lens.jpg" alt="">
</div>
<sync-loader :loading="isLoading"></sync-loader>
<!--
<b-alert
:show="dismissCountDown"
dismissible
@@ -19,6 +20,22 @@
height="4px"
></b-progress>
</b-alert>
<b-alert
:show="messageDismissCountDown"
dismissible
variant="info"
@dismissed="messageDismissCountDown=0"
@dismiss-count-down="messageCountDownChanged"
>
{{message}}
<b-progress
variant="info"
:max="messageDismissSecs"
:value="messageDismissCountDown"
height="4px"
></b-progress>
</b-alert>-->
<div id="nav">
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar-brand to="/">
@@ -47,7 +64,8 @@
<b-nav-item-dropdown split split-to="admin" v-if="authenticated" variant="outline-danger" :text="$t('admin')">
<b-dropdown-item :to="{name: 'admin.users'}">{{ $t('users') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.group'}">{{ $t('groups') }}</b-dropdown-item>
<b-dropdown-item :to="{name: 'admin.permission'}">{{ $t('permissions') }}</b-dropdown-item>
<b-dropdown-item href="#">Something else here...</b-dropdown-item>
</b-nav-item-dropdown>
@@ -77,6 +95,9 @@
<label for="auto_renew_cb">{{$t('auto renew session')}}</label>
</span>
<span v-else>{{$t('Can\'t renew session – please login again!')}}</span>
</div>
<div>
</div>
<div id="content_frame">
<router-view :style="main_style"/>
@@ -102,9 +123,12 @@
refreshTokenValidity: -1,
showAlert: true,
alertMessage: 'NO MESSAGE PROVIDED',
message: 'NO MESSAGE PROVIDED',
langs: ['de', 'en', 'es'],
dismissSecs: 5,
dismissCountDown: 0,
messageDismissSecs: 5,
messageDismissCountDown: 0,
autoRenewSession: true,
main_style: {}
};
@@ -114,10 +138,31 @@
this.isLoading = false;
this.dismissCountDown = this.dismissSecs;
this.alertMessage = msg;
this.makeToast(msg, 'error')
},
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
showMessage(msg, dismissTime=null) {
this.isLoading = false;
if(dismissTime == null) this.messageDismissCountDown = this.messageDismissSecs;
else {
this.messageDismissSecs = dismissTime;
this.messageDismissCountDown = dismissTime;
}
if(typeof msg === 'object' && msg !== null){
if("time" in msg) {
this.messageDismissCountDown = msg['time'];
this.messageDismissSecs = msg['time'];
}
if("msg" in msg) msg = msg['msg'];
}
this.message = msg;
this.makeToast(msg, 'info')
},
messageCountDownChanged(dismissCountDown) {
this.messageDismissCountDown = dismissCountDown;
},
logout() {
this.$store.dispatch('logout', {revokeRefreshToken: true});
@@ -130,6 +175,24 @@
this.$i18n.locale=lang;
localize(lang);
},
makeToast(message, variant = null, hide_time=5000, title = null) {
if(title == null){
let now = new Date();
if(variant == null){
title = this.$t('message from') + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
} else {
title = this.$t(variant) + " (" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + ")";
}
}
if(variant === 'error') variant = 'danger';
this.$bvToast.toast(message, {
title: title,
toaster: 'b-toaster-bottom-right',
autoHideDelay: hide_time,
variant: variant,
appendToast: false
})
},
},
mounted() {
EventBus.$on('failedLoadingRecorders', (msg) => {
@@ -141,6 +204,12 @@
EventBus.$on('failedRefreshingToken', (msg) => {
this.refreshFailed = true;
});
EventBus.$on('errorMessage', (msg)=> {
this.showErrorMessage(msg);
})
EventBus.$on('normalMessage', (msg)=> {
this.showMessage(msg);
})
this.$nextTick(() => {
window.setInterval(() => {
const tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);

10
src/api/Repository.js
View File

@@ -50,6 +50,9 @@ api.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (401 === error.response.status || 422 === error.response.status) {
if(store.getters.isAuthenticated){ // if 401 even though the token is valid, the user might have been deleted, etc.
store.dispatch('resetToken');
}
Vue.swal({
title: "Session Expired",
text: "Your token/session has expired. Would you like to be redirected to the login page?",
@@ -65,8 +68,11 @@ api.interceptors.response.use(function (response) {
}
});
} else {
console.error(error);
return Promise.reject(error);
//console.error(error);
//console.error(error.response);
console.error(error.response.data.message);
//return Promise.reject(error);
return Promise.reject(error.response);
}
});

4
src/api/userRepository.ts
View File

@@ -17,6 +17,10 @@ export default {
return Repository.get(`${resource}/${userId}`);
},
deleteUser(userId: number) {
return Repository.delete(`${resource}/${userId}`);
},
createUser(userData: any) {
return Repository.post(`${resource}`, userData);
},

8
src/components/Admin.vue
View File

@@ -6,16 +6,16 @@
<div class="container has-text-centered">
<h2 class="title">Admin Tools</h2>
<p class="subtitle error-msg">{{ errorMsg }}</p>
<router-link :to="{ name: 'admin.group'}">{{ $t('group') }}</router-link>
<router-link :to="{ name: 'admin.groups'}">{{ $t('groups') }}</router-link>
<br>
<router-link :to="{ name: 'admin.users'}">{{ $t('user') }}</router-link>
<router-link :to="{ name: 'admin.users'}">{{ $t('users') }}</router-link>
<br>
<router-link :to="{ name: 'admin.permission'}">{{ $t('permission') }}</router-link>
<router-link :to="{ name: 'admin.permission'}">{{ $t('permissions') }}</router-link>
</div>
</div>
</section>
<hr/>
<br/>
<section>
<router-view></router-view>
</section>

306
src/components/Admin/Group.vue
View File

@@ -1,48 +1,42 @@
<!-- components/Group.vue -->
<!-- components/groups.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h2 class="title">Groups</h2>
<h3>
<div class="text-center">
<font-awesome-icon class="float-left" icon="arrow-circle-left" @click="previousgroup()"/>
<input type="number" style="font-size: small; max-width: 48px; text-align: center;"
v-model="new_group_id" @blur="manually_set_group_id()"
@input="manually_set_group_id()">
<font-awesome-icon class="float-right" icon="arrow-circle-right" @click="nextgroup()"/>
</div>
</h3>
<h3 class="title">{{ group.id }} – {{ group.name }}</h3>
<div id="groupTable">
<table>
<thead>
<tr>
<th v-for="col in group_columns" v-on:click="sortTable(col)">{{col}}
<div class="arrow" v-if="col == sortColumn"
v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in get_group_rows()">
<td v-for="col in group_columns">{{row[col]}}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<div class="number"
v-for="i in num_group_pages()"
v-bind:class="[i == currentPage ? 'active' : '']"
v-on:click="change_page(i)">{{i}}
</div>
</div>
</div>
<p><strong>{{ $t('nickname') }}:&nbsp</strong>{{ group.nickname }}</p>
<p><strong>{{ $t('first_name') }}:&nbsp</strong>{{ group.first_name }}</p>
<p><strong>{{ $t('last_name') }}:&nbsp</strong>{{ group.last_name }}</p>
<hr/>
<!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
<p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="group.role">{{ group.role }}</span><span
v-else>{{ $t('no specific role') }}</span></p>
<p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in group.groups">{{ g.name }}, </span></p>
<p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
<ul>
<li v-for="p in group.effective_permissions">{{ p.name }}</li>
</ul>
<hr/>
<p class="subtitle error-msg">{{ errorMsg }}</p>
<h3 class="title">Add Group</h3>
<label>
<input v-model="group.name" placeholder="Group name">
</label>
<p>Name is: {{ group.name }}</p>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ group.description }}</p>
<br>
<textarea v-model="group.description" placeholder="Description for group"></textarea>
<button v-on:click="createGroup">{{$t('create_group')}}</button>
<b-form inline @submit="delete_group">
<b-button style="margin-right: 5px;" type="submit" :disabled="!delete_checked" variant="danger">{{ $t('delete.group') }}</b-button>
<b-form-checkbox v-model="delete_checked">{{ $t('check.to.allow.deletion') }}</b-form-checkbox>
</b-form>
</div>
</div>
@@ -52,199 +46,127 @@
</template>
<script>
import {EventBus} from '@/utils';
import getRepository from '@/api/RepositoryFactory';
import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '@/utils';
import getRepository from '@/api/RepositoryFactory';
const GroupRepository = getRepository('group');
const groupRepository = getRepository('group');
export default {
export default {
props: ['group_id'],
data() {
return {
current_group_id: this.group_id == null ? 1 : parseInt(this.group_id),
current_group_index: null,
new_group_id: this.current_group_id,
isLoading: false,
groups: [],
delete_checked: false,
errorMsg: '',
group: {name: '', description: ''},
sortColumn: '',
currentPage: 1,
elementsPerPage: 5,
};
},
methods: {
fetch() {
this.isLoading = true;
// const { data } = await GroupRepository.get();
GroupRepository.getGroups()
groupRepository.getgroups()
.then((response) => {
this.groups = response.data;
this.isLoading = false;
});
},
get_group_rows() {
const start = (this.currentPage - 1) * this.elementsPerPage;
const end = start + this.elementsPerPage;
return this.groups.slice(start, end);
},
num_group_pages() {
return Math.ceil(this.groups.length / this.elementsPerPage);
},
change_page(page) {
this.currentPage = page;
},
sortTable(col) {
if (this.sortColumn === col) {
this.ascending = !this.ascending;
} else {
this.ascending = true;
this.sortColumn = col;
}
const ascending = this.ascending;
this.groups.sort((a, b) => {
if (a[col] > b[col]) {
return ascending ? 1 : -1;
} else if (a[col] < b[col]) {
return ascending ? -1 : 1;
}
return 0;
calculate_current_group_index() {
this.current_group_index = this.groupIds.findIndex((id) => {
return id === this.current_group_id;
});
},
createGroup() {
GroupRepository.createGroup(this.group);
this.fetch();
previousgroup() {
if (null == this.current_group_index) {
this.calculate_current_group_index();
}
if (this.current_group_index === 0) this.current_group_index = this.groupIds.length - 1;
else this.current_group_index = this.current_group_index - 1;
this.current_group_id = this.groupIds[this.current_group_index];
this.new_group_id = this.current_group_id;
},
nextgroup() {
if (null == this.current_group_index) {
this.calculate_current_group_index();
}
if (this.current_group_index === this.groupIds.length - 1) this.current_group_index = 0;
else this.current_group_index = this.current_group_index + 1;
this.current_group_id = this.groupIds[this.current_group_index];
this.new_group_id = this.current_group_id;
},
manually_set_group_id() {
if (this.new_group_id == null || this.new_group_id === '') {
this.new_group_id = this.current_group_id;
return;
}
if (this.groupIds.includes(parseInt(this.new_group_id))) {
this.current_group_id = parseInt(this.new_group_id);
}
this.new_group_id = this.current_group_id;
},
delete_group(e){
e.preventDefault();
this.delete_checked = false;
groupRepository.deletegroup(this.current_group_id)
.then(()=>{
this.fetch();
this.nextgroup();
EventBus.$emit('normalMessage', this.$t('group.deleted'));
})
.catch((error)=>{
EventBus.$emit('errorMessage', this.$t('unable.to.delete.group') + ": "+ error.data.message);
})
},
test(e){
e.preventDefault();
this.delete_checked = false;
this.fetch();
this.nextGroup();
EventBus.$emit('normalMessage', 'test.msg');
}
},
mounted() {
this.fetch();
},
beforeDestroy() {
// todo....or not
// todo
},
computed: {
group_columns() {
columns() {
if (this.groups.length === 0) {
return [];
}
return Object.keys(this.groups[0]);
let columns = Object.keys(this.groups[0]);
columns = columns.filter((value) => { // filter to only show some fields
return ["id", "first_name", "last_name", "email", "nickname", "role"].includes(value);
});
return columns;
},
group() {
if (this.groups.length === 0) {
return [];
}
return this.groups.filter((value) => value.id.toString() === this.current_group_id.toString()).pop();
},
groupIds() {
let ids = [];
this.groups.forEach((elem) => {
ids.push(parseInt(elem.id));
});
return ids;
},
},
};
};
</script>
<style lang="scss">
.error-msg {
.error-msg {
color: red;
font-weight: bold;
}
table {
font-family: 'Open Sans', sans-serif;
width: 750px;
border-collapse: collapse;
border: 3px solid #44475C;
margin: 10px 10px 0 10px;
}
table th {
text-transform: uppercase;
text-align: left;
background: #44475C;
color: #FFF;
cursor: pointer;
padding: 8px;
min-width: 30px;
}
table th:hover {
background: #717699;
}
table td {
text-align: left;
padding: 8px;
border-right: 2px solid #7D82A8;
}
table td:last-child {
border-right: none;
}
table tbody tr:nth-child(2n) td {
background: #D4D8F9;
}
table {
font-family: 'Open Sans', sans-serif;
width: 750px;
border-collapse: collapse;
border: 3px solid #44475C;
margin: 10px 10px 0 10px;
}
table th {
text-transform: uppercase;
text-align: left;
background: #44475C;
color: #FFF;
cursor: pointer;
padding: 8px;
min-width: 30px;
}
table th:hover {
background: #717699;
}
table td {
text-align: left;
padding: 8px;
border-right: 2px solid #7D82A8;
}
table td:last-child {
border-right: none;
}
table tbody tr:nth-child(2n) td {
background: #D4D8F9;
}
.pagination {
font-family: 'Open Sans', sans-serif;
text-align: right;
width: 750px;
padding: 8px;
}
.arrow_down {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
}
.arrow_up {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
}
.arrow {
float: right;
width: 12px;
height: 15px;
background-repeat: no-repeat;
background-size: contain;
background-position-y: bottom;
}
.number {
display: inline-block;
padding: 4px 10px;
color: #FFF;
border-radius: 4px;
background: #44475C;
margin: 0px 5px;
cursor: pointer;
}
.number:hover, .number.active {
background: #717699;
}
}
</style>

259
src/components/Admin/Groups.vue Normal file
View File

@@ -0,0 +1,259 @@
<!-- components/Groups.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<h2 class="title">Groups</h2>
<div id="groupTable">
<table>
<thead>
<tr>
<th v-for="col in group_columns" v-on:click="sortTable(col)">{{col}}
<div class="arrow" v-if="col == sortColumn"
v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in get_group_rows()">
<td v-for="(col, index) in group_columns">
<router-link v-if="index < 2" :to="{name: 'admin.group', params: {group_id: row[col]}}">{{row[col]}}
</router-link>
<span v-else>{{row[col]}}</span>
</td>
</tr>
</tbody>
</table>
<div class="pagination">
<div class="number"
v-for="i in num_group_pages()"
v-bind:class="[i == currentPage ? 'active' : '']"
v-on:click="change_page(i)">{{i}}
</div>
</div>
</div>
<p class="subtitle error-msg">{{ errorMsg }}</p>
<h3 class="title">Add Group</h3>
<label>
<input v-model="group.name" placeholder="Group name">
</label>
<p>Name is: {{ group.name }}</p>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ group.description }}</p>
<br>
<textarea v-model="group.description" placeholder="Description for group"></textarea>
<button v-on:click="createGroup">{{$t('create_group')}}</button>
</div>
</div>
</section>
</div>
</template>
<script>
import {EventBus} from '@/utils';
import getRepository from '@/api/RepositoryFactory';
const GroupRepository = getRepository('group');
export default {
data() {
return {
isLoading: false,
groups: [],
errorMsg: '',
group: {name: '', description: ''},
sortColumn: '',
currentPage: 1,
elementsPerPage: 5,
};
},
methods: {
fetch() {
this.isLoading = true;
// const { data } = await GroupRepository.get();
GroupRepository.getGroups()
.then((response) => {
this.groups = response.data;
console.error(this.groups);
this.isLoading = false;
});
},
get_group_rows() {
const start = (this.currentPage - 1) * this.elementsPerPage;
const end = start + this.elementsPerPage;
return this.groups.slice(start, end);
},
num_group_pages() {
return Math.ceil(this.groups.length / this.elementsPerPage);
},
change_page(page) {
this.currentPage = page;
},
sortTable(col) {
if (this.sortColumn === col) {
this.ascending = !this.ascending;
} else {
this.ascending = true;
this.sortColumn = col;
}
const ascending = this.ascending;
this.groups.sort((a, b) => {
if (a[col] > b[col]) {
return ascending ? 1 : -1;
} else if (a[col] < b[col]) {
return ascending ? -1 : 1;
}
return 0;
});
},
createGroup() {
GroupRepository.createGroup(this.group);
this.fetch();
},
},
mounted() {
this.fetch();
},
beforeDestroy() {
// todo....or not
},
computed: {
group_columns() {
if (this.groups.length === 0) {
return [];
}
let columns = Object.keys(this.groups[0]);
columns = columns.filter((value) => { // filter to only show some fields
return ["id", "name", "description", "users"].includes(value);
});
return columns;
},
},
};
</script>
<style lang="scss">
.error-msg {
color: red;
font-weight: bold;
}
table {
font-family: 'Open Sans', sans-serif;
width: 750px;
border-collapse: collapse;
border: 3px solid #44475C;
margin: 10px 10px 0 10px;
}
table th {
text-transform: uppercase;
text-align: left;
background: #44475C;
color: #FFF;
cursor: pointer;
padding: 8px;
min-width: 30px;
}
table th:hover {
background: #717699;
}
table td {
text-align: left;
padding: 8px;
border-right: 2px solid #7D82A8;
}
table td:last-child {
border-right: none;
}
table tbody tr:nth-child(2n) td {
background: #D4D8F9;
}
table {
font-family: 'Open Sans', sans-serif;
width: 750px;
border-collapse: collapse;
border: 3px solid #44475C;
margin: 10px 10px 0 10px;
}
table th {
text-transform: uppercase;
text-align: left;
background: #44475C;
color: #FFF;
cursor: pointer;
padding: 8px;
min-width: 30px;
}
table th:hover {
background: #717699;
}
table td {
text-align: left;
padding: 8px;
border-right: 2px solid #7D82A8;
}
table td:last-child {
border-right: none;
}
table tbody tr:nth-child(2n) td {
background: #D4D8F9;
}
.pagination {
font-family: 'Open Sans', sans-serif;
text-align: right;
width: 750px;
padding: 8px;
}
.arrow_down {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAAAXNSR0IArs4c6QAAAvlJREFUSA29Vk1PGlEUHQaiiewslpUJiyYs2yb9AyRuJGm7c0VJoFXSX9A0sSZN04ULF12YEBQDhMCuSZOm1FhTiLY2Rky0QPlQBLRUsICoIN/0PCsGyox26NC3eTNn3r3n3TvnvvsE1PkwGo3yUqkkEQqFgw2Mz7lWqwng7ztN06mxsTEv8U0Aam5u7r5EInkplUol/f391wAJCc7nEAgE9Uwmkzo4OPiJMa1Wq6cFs7Ozt0H6RqlUDmJXfPIx+qrX69Ti4mIyHA5r6Wq1egND+j+IyW6QAUoul18XiUTDNHaSyGazKcZtdgk8wqhUKh9o/OMvsVgsfHJy0iWqVrcQNRUMBnd6enqc9MjISAmRP3e73T9al3XnbWNjIw2+KY1Gc3imsNHR0YV4PP5+d3e32h3K316TySQFoX2WyWR2glzIO5fLTSD6IElLNwbqnFpbWyO/96lCoai0cZjN5kfYQAYi5H34fL6cxWIZbya9iJyAhULBHAqFVlMpfsV/fHxMeb3er+Vy+VUzeduzwWC45XA4dlD/vEXvdDrj8DvURsYEWK3WF4FA4JQP9mg0WrHZbEYmnpa0NxYgPVObm5teiLABdTQT8a6vrwdRWhOcHMzMzCiXlpb2/yV6qDttMpkeshEzRk4Wo/bfoe4X9vb2amzGl+HoXNT29vZqsVi0sK1jJScG+Xx+HGkL4Tew2TPi5zUdQQt9otPpuBk3e0TaHmMDh1zS7/f780S0zX6Yni+NnBj09fUZUfvudDrNZN+GkQbl8Xi8RLRtHzsB9Hr9nfn5+SjSeWUCXC7XPq5kw53wsNogjZNohYXL2EljstvtrAL70/mVaW8Y4OidRO1/gwgbUMvcqGmcDc9aPvD1gnTeQ+0nmaInokRj0nHh+uvIiVOtVvt2a2vLv7Ky0tL3cRTXIcpPAwMDpq6R4/JXE4vFQ5FI5CN+QTaRSFCYc8vLy1l0rge4ARe5kJ/d27kYkLXoy2Jo4C7K8CZOsEBvb+9rlUp1xNXPL7v3IDwxvPD6AAAAAElFTkSuQmCC')
}
.arrow_up {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAAXNSR0IArs4c6QAAAwpJREFUSA21Vt1PUmEYP4dvkQ8JFMwtBRocWAkDbiqXrUWXzU1rrTt0bdVqXbb1tbW16C9IBUSmm27cODdneoXjputa6069qwuW6IIBIdLvdaF4OAcOiGeDc87zPs/vd57P96WpFq7p6enbGo1mjKZpeTabjU1MTCRagGnOZHFxcXxtbe1XKpUq7+zslJeXl//Mz8+Hy+Uy3RxSE9qTk5M3otFooVQqgef4Wl9f343FYoEmoISrxuNxFX5f9vb2jhn/PxUKhfLS0tIPfFifUESRUMV8Pv/M6XReRm5rTGQyGeXxeGxYe1ezeBpBOBx2rKysbO7v79d4Wy3Y2Nj4GQqFbgnhaugxwiuGJx99Pp9FLBbXxYTXvTqd7v3MzIy6riIWGxJnMpl7AwMD14xGYyMsSq1WUyQdUqn0eSPlusQIsbGrq+vl4OCgvhFQZd1utyv1en0gEolcqsi47nWJlUrlG5fLZVcoFFy2nDKSDpIWlUoVTCQSEk4lCHmJMZ2GTCbTiMVikfIZ88l7enoos9l8dXt7+z6fDicxSJUokqDX6xXcl2wCROoc0vQCWL3sNfLOSdzR0fHY4XC4tVotl40gmVwup9xuN4OQv+UyqCFGH9rg7SOGYVRcBs3IEG4J0nVnamrqOtvuBDGGgQg9+wHFcVEi4a0LNkbdd6TrPKo8ODc311mteIIYjT/a398/jK+s1jnVM0kXoufCFvq0GuiIGEVgQIhfoygM1QrteEa9dAL7ITiYCt4RMabOK5AyKKzKWtvupLcRciu8D5J0EuDDPyT/Snd39yh6VtY2NhYQSR9G79Ds7OxdskRjEyAufvb7/cPoO5Z6e1+xtVKrq6vfcFzyi/A3ZrPZ3GdNSlwgo5ekE4X2RIQGf2C1WlufFE0GBeGWYQ8YERWLxQtnUVB830MKLZfL9RHir8lkssCn2G751tZWEWe03zTKm15YWPiEiXXTYDB0Ig/t7yd8PRws4EicwWHxO4jHD8/C5HiTTqd1BwcHFozKU89origB+y/kmzgYpgOBQP4fGmUiZmJ+WNgAAAAASUVORK5CYII=')
}
.arrow {
float: right;
width: 12px;
height: 15px;
background-repeat: no-repeat;
background-size: contain;
background-position-y: bottom;
}
.number {
display: inline-block;
padding: 4px 10px;
color: #FFF;
border-radius: 4px;
background: #44475C;
margin: 0px 5px;
cursor: pointer;
}
.number:hover, .number.active {
background: #717699;
}
</style>

2
src/components/Admin/Permission.vue
View File

@@ -64,7 +64,7 @@
permission: {name: '', description: ''},
sortColumn: '',
currentPage: 1,
elementsPerPage: 5,
elementsPerPage: 10,
};
},
methods: {

27
src/components/Admin/User.vue
View File

@@ -23,7 +23,7 @@
<hr/>
<!--<p v-if="profile.role"><strong>{{$t('role')}}:&nbsp</strong>{{profile.role}}</p>-->
<p><strong>{{ $t('role') }}:&nbsp</strong><span v-if="user.role">{{ user.role }}</span><span
v-else>{{ $t('no specifc role') }}</span></p>
v-else>{{ $t('no specific role') }}</span></p>
<p><strong>{{ $t('groups') }}:&nbsp</strong><span v-for="g in user.groups">{{ g.name }}, </span></p>
<p><strong>{{ $t('permissions') }}:&nbsp</strong></p>
<ul>
@@ -47,7 +47,7 @@
<script>
import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '../../utils';
import {getRemainingJwtValiditySeconds} from '@/utils';
import getRepository from '@/api/RepositoryFactory';
const UserRepository = getRepository('user');
@@ -87,7 +87,7 @@ export default {
display_name = this.user.last_name;
}
if (this.user.nickname != null && this.user.nickname !== "") {
if (display_name.trim() === "") {
if (display_name != null && display_name.trim() === "") {
display_name = this.user.nickname;
} else {
display_name += " (" + this.user.nickname + ")";
@@ -132,8 +132,25 @@ export default {
}
this.new_user_id = this.current_user_id;
},
delete_user(){
alert("Not implemented!");
delete_user(e){
e.preventDefault();
this.delete_checked = false;
UserRepository.deleteUser(this.current_user_id)
.then(()=>{
this.fetch();
this.nextUser();
EventBus.$emit('normalMessage', this.$t('user.deleted'));
})
.catch((error)=>{
EventBus.$emit('errorMessage', this.$t('unable.to.delete.user') + ": "+ error.data.message);
})
},
test(e){
e.preventDefault();
this.delete_checked = false;
this.fetch();
this.nextUser();
EventBus.$emit('normalMessage', 'test.msg');
}
},
mounted() {

13
src/components/Admin/Users.vue
View File

@@ -6,13 +6,6 @@
<div class="container has-text-centered">
<h3 class="title">Manage users</h3>
<h3>Users</h3>
<ul>
<li v-for="(user) in users">
<router-link :to="{name: 'admin.user', params: {user_id: user.id}}">
({{user.id}}) {{user.first_name}}
</router-link>
</li>
</ul>
<div id="userTable">
<table>
@@ -26,7 +19,11 @@
</thead>
<tbody>
<tr v-for="row in get_rows()">
<td v-for="col in columns">{{row[col]}}</td>
<td v-for="(col, index) in columns">
<router-link v-if="index < 1" :to="{name: 'admin.user', params: {user_id: row[col]}}">{{row[col]}}
</router-link>
<span v-else>{{row[col]}}</span>
</td>
</tr>
</tbody>
</table>

3
src/components/Profile.vue
View File

@@ -152,6 +152,9 @@ export default {
mounted() {
EventBus.$on('failedLoadingProfile', (msg) => {
this.errorMsg = msg;
EventBus.$emit('errorMessage', this.$t('unable.to.load.profile') + ": "+ msg);
this.$store.dispatch('resetToken');
EventBus.$emit('normalMessage', this.$t('credentials.reset!'));
});
this.$store.dispatch('loadProfile');

3
src/components/Recorders.vue
View File

@@ -747,8 +747,7 @@
this.tabIndex = 0;
});
}).catch((error) => {
console.error("could not safe recorder! ("+error.data+")");
this.$parent.showErrorMessage('Could not safe recorder!');
EventBus.$emit('errorMessage', 'Could not safe recorder: '+error.data.message+'!');
});
},
deleteRecorder(id) {

12
src/components/Test.vue
View File

@@ -1,6 +1,9 @@
<!-- components/Test.vue -->
<template>
<div>
<section class="hero is-primary">
<div class="hero-body">
<div class="container has-text-centered">
<b-alert
:show="dismissCountDown"
dismissible
@@ -16,6 +19,9 @@
<b-button @click="$parent.showErrorMessage('tolle error message')" variant="warning" class="m-1">
Show error message
</b-button>
<b-button @click="showTestMessageLonger" variant="danger" class="m-1">
Show test message longer
</b-button>
<h1>Toller Test</h1>
<span>{{ $socket.connected ? 'Connected' : 'Disconnected' }}</span>
<button v-if="$socket.connected" @click="disconnectWebsocket">Disconnect</button>
@@ -27,6 +33,9 @@
<router-link :to="{name: 'recorder', params: {recorder_id: 1}}">rec 1</router-link>
</div>
</div>
</section>
</div>
</template>
<script>
@@ -62,6 +71,9 @@
showAlert() {
this.dismissCountDown = this.dismissSecs;
},
showTestMessageLonger(){
EventBus.$emit('normalMessage', {msg: 'message', time:100})
},
},
mounted() {
this.$socket.client.on('my_response', function(msg) {

9
src/router.ts
View File

@@ -10,6 +10,7 @@ import Profile from '@/components/Profile.vue';
import Users from '@/components/Admin/Users.vue';
import User from '@/components/Admin/User.vue';
import Test from '@/components/Test.vue';
import Groups from '@/components/Admin/Groups.vue';
import Group from '@/components/Admin/Group.vue';
import Permission from '@/components/Admin/Permission.vue';
import Rooms from '@/components/Rooms.vue';
@@ -52,9 +53,15 @@ export const router = new Router({
props: true,
component: User,
},
{
name: 'admin.groups',
path: 'groups',
component: Groups,
},
{
name: 'admin.group',
path: 'group',
path: 'group/:group_id?',
props: true,
component: Group,
},
{

10
src/store.ts
View File

@@ -77,8 +77,8 @@ const actions = {
EventBus.$emit('failedLoadingRecorderStates', error);
});
},
loadRecorderState(context: any, recorder_id: number) {
return StateRepository.getRecorderState(recorder_id)
loadRecorderState(context: any, recorderId: number) {
return StateRepository.getRecorderState(recorderId)
.then((response: any) => {
context.commit('setRecorderState', {recorderState: response.data});
EventBus.$emit('recorderStateLoaded', response.data);
@@ -322,12 +322,10 @@ const mutations = {
const getters = {
// reusable data accessors
isAuthenticated(sState: any) {
const valid = isValidJwt(sState.access_token);
return valid;
return isValidJwt(sState.access_token);
},
isRefreshTokenValid(sState: any) {
const valid = isValidJwt(sState.refresh_token);
return valid;
return isValidJwt(sState.refresh_token);
},
getLoginProviders(sState: any) {
return sState.loginProviders;