Phillip Thelen
119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<div class="row standard-page col-12 d-flex justify-content-center">
|
|
<div class="admin-panel-content">
|
|
<h1>{{ $t("adminPanel") }}</h1>
|
|
<form
|
|
class="form-inline"
|
|
@submit.prevent="searchUsers(userIdentifier)"
|
|
>
|
|
<div class="input-group col pl-0 pr-0">
|
|
<input
|
|
v-model="userIdentifier"
|
|
class="form-control"
|
|
type="text"
|
|
:placeholder="'UserID, username, email, or leave 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
|
|
class="mt-3"
|
|
@changeUserIdentifier="changeUserIdentifier"
|
|
/>
|
|
</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: 800px;
|
|
}
|
|
</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: this.$t('adminPanel'),
|
|
});
|
|
},
|
|
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) {
|
|
if (!userIdentifier || userIdentifier === '') {
|
|
this.loadUser();
|
|
return;
|
|
}
|
|
this.$router.push({
|
|
name: 'adminPanelSearch',
|
|
params: { userIdentifier },
|
|
}).catch(failure => {
|
|
if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
|
|
this.$router.go();
|
|
}
|
|
});
|
|
},
|
|
|
|
async loadUser (userIdentifier) {
|
|
const id = userIdentifier || this.user._id;
|
|
if (this.$router.currentRoute.name === 'adminPanelUser') {
|
|
await this.$router.push({
|
|
name: 'adminPanel',
|
|
});
|
|
}
|
|
await this.$router.push({
|
|
name: 'adminPanelUser',
|
|
params: { userIdentifier: id },
|
|
}).catch(failure => {
|
|
if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
|
|
this.$router.go();
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|