Phillip Thelen
106 lines
2.9 KiB
Vue
106 lines
2.9 KiB
Vue
<template>
|
|
<div class="row standard-page col-12 d-flex justify-content-center">
|
|
<div class="admin-panel-content">
|
|
<h1>Admin Panel</h1>
|
|
<form
|
|
class="form-inline"
|
|
@submit.prevent="loadUser(userIdentifier)"
|
|
>
|
|
<div class="input-group">
|
|
<input
|
|
v-model="userIdentifier"
|
|
class="form-control uidField"
|
|
type="text"
|
|
:placeholder="'User-ID, Username or E-Mail; blank for your account'"
|
|
>
|
|
<div class="input-group-append">
|
|
<button
|
|
class="btn btn-primary"
|
|
type="button"
|
|
@click="loadUser(userIdentifier)">Load User</button>
|
|
<button
|
|
class="btn btn-secondary"
|
|
type="button"
|
|
@click="searchUsers(userIdentifier)">Search</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<router-view @changeUserIdentifier="changeUserIdentifier" class="mt-3" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.uidField {
|
|
min-width: 45ch;
|
|
}
|
|
|
|
.input-group-append {
|
|
width:auto;
|
|
}
|
|
|
|
.admin-panel-content {
|
|
flex: 0 0 800px;
|
|
max-width: unset;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import VueRouter from 'vue-router';
|
|
import { mapState } from '@/libs/store';
|
|
|
|
const { isNavigationFailure, NavigationFailureType } = VueRouter;
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
userIdentifier: '',
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({ user: 'user.data' }),
|
|
},
|
|
mounted () {
|
|
this.$store.dispatch('common:setTitle', {
|
|
section: 'Admin Panel',
|
|
});
|
|
},
|
|
methods: {
|
|
changeUserIdentifier (newId) {
|
|
// If we've accessed the admin panel from a URL that had a user identifier in it,
|
|
// this method will insert that identifier into the "Load User" form field
|
|
// (useful if we want to re-fetch the user after making changes).
|
|
this.userIdentifier = newId;
|
|
},
|
|
async searchUsers (userIdentifier) {
|
|
this.$router.push({
|
|
name: 'adminPanelSearch',
|
|
params: { userIdentifier },
|
|
}).catch(failure => {
|
|
if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
|
|
// the admin has requested that the same user be displayed again so reload the page
|
|
// (e.g., if they changed their mind about changes they were making)
|
|
this.$router.go();
|
|
}
|
|
});
|
|
},
|
|
|
|
async loadUser (userIdentifier) {
|
|
const id = userIdentifier || this.user._id;
|
|
|
|
this.$router.push({
|
|
name: 'adminPanelUser',
|
|
params: { userIdentifier: id },
|
|
}).catch(failure => {
|
|
if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
|
|
// the admin has requested that the same user be displayed again so reload the page
|
|
// (e.g., if they changed their mind about changes they were making)
|
|
this.$router.go();
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|