forked from kaverti/website
447 lines
14 KiB
Vue
447 lines
14 KiB
Vue
<style>
|
|
.team-img {
|
|
border-radius: 50%;
|
|
}
|
|
.vertical-alt {
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.limit{
|
|
margin-top: 0.5rem;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|
|
<template>
|
|
<main>
|
|
<modal-window v-model='modifyModal' :loading='loading' style='z-index: 99; '>
|
|
<div slot="header">
|
|
Modify {{rolePrepend.username}} <b-tooltip v-if='modifyModal' class="is-info" label="This page allows you to modify user roles and permissions that a user has on your Team.">
|
|
<b-tag class="is-info" rounded><i class="fas fa-info-circle"></i></b-tag>
|
|
</b-tooltip>
|
|
</div>
|
|
<div slot='main' class="card-content">
|
|
<br>
|
|
<div>
|
|
<b-field label="Role 1">
|
|
<b-select disabled="disabled" :placeholder="rolePrepend.Role.name">
|
|
<option
|
|
:v-model="rolePrepend.Role.id"
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 2" v-if="rolePrepend.Role.id">
|
|
<b-select v-model="rolePrepend.Role2.id" :placeholder="rolePrepend.Role2.name">
|
|
<option
|
|
:v-model="rolePrepend.Role2.id"
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 3" v-if="rolePrepend.Role2.id">
|
|
<b-select v-model="rolePrepend.Role3.id" :placeholder="rolePrepend.Role3.name">
|
|
<option
|
|
:v-model="rolePrepend.Role3.id"
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 4" v-if="rolePrepend.Role3.id">
|
|
<b-select v-model="rolePrepend.Role4.id" placeholder="Select a role">
|
|
<option
|
|
:v-model="rolePrepend.Role4.id"
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 5" v-if="rolePrepend.Role4.id">
|
|
<b-select v-model="rolePrepend.Role5.id" placeholder="Select a role">
|
|
<option
|
|
:v-model="rolePrepend.Role5.id"
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 6" v-if="rolePrepend.Role5.id">
|
|
<b-select v-model="rolePrepend.Role6.id" placeholder="Select a role">
|
|
<option
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 7" v-if="rolePrepend.Role6.id">
|
|
<b-select v-model="rolePrepend.Role7.id" placeholder="Select a role">
|
|
<option
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 8" v-if="rolePrepend.Role7.id">
|
|
<b-select v-model="rolePrepend.Role8.id" placeholder="Select a role">
|
|
<option
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 9" v-if="rolePrepend.Role8.id">
|
|
<b-select v-model="rolePrepend.Role9.id" placeholder="Select a role">
|
|
<option
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
<b-field label="Role 10" v-if="rolePrepend.Role9.id">
|
|
<b-select v-model="rolePrepend.Role10.id" placeholder="Select a role">
|
|
<option
|
|
v-for="option in roles"
|
|
:value="option.id"
|
|
:key="option.id">
|
|
{{ option.name }}
|
|
</option>
|
|
</b-select>
|
|
</b-field>
|
|
</div>
|
|
</div>
|
|
<div slot='footer'>
|
|
<button class='button is-info' @click='modifyUser(user)'>Save</button>
|
|
</div>
|
|
</modal-window>
|
|
<div class="section">
|
|
<div class="">
|
|
<h1>Members:</h1>
|
|
<scroll-load
|
|
key='user-row'
|
|
class='columns is-multiline'
|
|
v-if='userRoles.length'
|
|
:loading='loading'
|
|
@loadNext='fetchData'
|
|
>
|
|
<div class="column is-4" v-for='user in userRoles' :key='"user-row" + user.User.username' v-show="user"><div class="card">
|
|
<div class="card-content">
|
|
<router-link :to="'/u/' + user.User.username"><b-button style="float:right;">View</b-button></router-link>
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-64x64">
|
|
<avatar-icon :user="user.User" size="small"></avatar-icon>
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-4">{{user.User.username}} <b-tag class="is-info" v-if="team.OwnerId === user.User.id">OWNER</b-tag> </p>
|
|
<b-tag v-if="user.Role">{{user.Role.name}}</b-tag> <b-tag v-if="user.Role2">{{user.Role2.name}}</b-tag> <b-tag v-if="user.Role3">{{user.Role3.name}}</b-tag> <b-tag v-if="user.Role4">{{user.Role4.name}}</b-tag> <b-tag v-if="user.Role5">{{user.Role5.name}}</b-tag> <b-tag v-if="user.Role6">{{user.Role6.name}}</b-tag> <b-tag v-if="user.Role7">{{user.Role7.name}}</b-tag> <b-tag v-if="user.Role8">{{user.Role8.name}}</b-tag> <b-tag v-if="user.Role9">{{user.Role9.name}}</b-tag> <b-tag v-if="user.Role10">{{user.Role10.name}}</b-tag> </div>
|
|
</div>
|
|
|
|
<div class="content limit">
|
|
{{user.User.description}}
|
|
</div>
|
|
<b-button @click="showModifyModal(user)">Assign and remove roles</b-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-load>
|
|
</div>
|
|
</div>
|
|
<p name='fade' mode='out-in'>
|
|
<center><loading-message key='loading' v-if='loading'></loading-message></center>
|
|
<center><div class='overlay_message' v-if='!loading && !users.length'>
|
|
Something went wrong while loading the users, check your internet connection, or check the <a href="https://status.troplo.com">Service Status</a>
|
|
</div></center></p>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import LoadingMessage from '../LoadingMessage';
|
|
import ScrollLoad from '../ScrollLoad';
|
|
import ModalWindow from "@/components/ModalWindow";
|
|
import SelectButton from "@/components/SelectButton";
|
|
import throttle from 'lodash.throttle';
|
|
import AjaxErrorHandler from '../../assets/js/errorHandler';
|
|
import AvatarIcon from '../AvatarIcon';
|
|
|
|
export default {
|
|
name: 'TeamMembers',
|
|
components: {
|
|
LoadingMessage,
|
|
ScrollLoad,
|
|
AvatarIcon,
|
|
ModalWindow,
|
|
// eslint-disable-next-line vue/no-unused-components
|
|
SelectButton
|
|
},
|
|
data () {
|
|
return {
|
|
search: '',
|
|
users: [],
|
|
userRoles: [],
|
|
roles: [],
|
|
team: [],
|
|
rolePrepend: {
|
|
username: '',
|
|
Role: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role2: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role3: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role4: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role5: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role6: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role7: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role8: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role9: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
Role10: {
|
|
name: '',
|
|
id: '',
|
|
},
|
|
RoleId: '',
|
|
Role2Id: '',
|
|
Role3Id: '',
|
|
Role4Id: '',
|
|
Role5Id: '',
|
|
Role6Id: '',
|
|
Role7Id: '',
|
|
Role8Id: '',
|
|
Role9Id: '',
|
|
Role10Id: ''
|
|
},
|
|
modifyModal: false,
|
|
|
|
loading: true,
|
|
offset: 0,
|
|
limit: 15,
|
|
showTeamTab: 0,
|
|
createTeamModal: false,
|
|
tcreateProd: {
|
|
username: '',
|
|
name: '',
|
|
|
|
loading: false,
|
|
|
|
errors: {
|
|
username: '',
|
|
name: ''
|
|
}
|
|
},
|
|
|
|
roleOptions: [
|
|
{ name: 'Admins', value: 'admin' },
|
|
{ name: 'Users', value: 'user' }
|
|
],
|
|
roleSelected: ['admin', 'user'],
|
|
|
|
tableSort: {
|
|
column: 'username',
|
|
sort: 'desc'
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
showModifyModal (user) {
|
|
this.modifyModal = true
|
|
this.rolePrepend.Role.name = user.Role.name
|
|
this.rolePrepend.Role.id = user.RoleId
|
|
this.rolePrepend.Role2.name = user.Role2.name
|
|
this.rolePrepend.Role2.id = user.Role2Id
|
|
this.rolePrepend.Role3.name = user.Role3.name
|
|
this.rolePrepend.Role3.id = user.Role3Id
|
|
this.rolePrepend.Role4.name = user.Role4.name
|
|
this.rolePrepend.Role4.id = user.Role4Id
|
|
this.rolePrepend.Role5.name = user.Role5.name
|
|
this.rolePrepend.Role5.id = user.Role5Id
|
|
this.rolePrepend.Role6.name = user.Role6.name
|
|
this.rolePrepend.Role6.id = user.Role6Id
|
|
this.rolePrepend.Role7.name = user.Role7.name
|
|
this.rolePrepend.Role7.id = user.Role7Id
|
|
this.rolePrepend.Role8.name = user.Role8.name
|
|
this.rolePrepend.Role8.id = user.Role8Id
|
|
this.rolePrepend.Role9.name = user.Role9.name
|
|
this.rolePrepend.Role9.id = user.Role9Id
|
|
this.rolePrepend.Role10.name = user.Role10.name
|
|
this.rolePrepend.Role10.id = user.Role10Id
|
|
this.rolePrepend.username = user.User.username
|
|
},
|
|
clearTeamErrors() {
|
|
this.tcreateProd.errors.username = ''
|
|
this.tcreateProd.errors.name = ''
|
|
},
|
|
closeAccountModal() {
|
|
this.createTeamModal = false
|
|
},
|
|
updateRoles(user) {
|
|
this.rolePrepend.username = user.User.username
|
|
},
|
|
fetchData () {
|
|
if(this.offset === null) return;
|
|
|
|
let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/view/' + this.$route.params.username + "/members" + `?
|
|
sort=${this.tableSort.column}
|
|
&order=${this.tableSort.sort}
|
|
&offset=${this.offset}
|
|
`;
|
|
if(this.roleSelected.length === 1) {
|
|
url += '&role=' + this.roleSelected[0];
|
|
}
|
|
if(this.search.length) {
|
|
url += '&search=' + encodeURIComponent(this.search.trim());
|
|
}
|
|
|
|
this.loading = true;
|
|
this.axios
|
|
.get(url)
|
|
.then(res => {
|
|
this.users.push(...res.data);
|
|
this.loading = /*loading =*/ false;
|
|
|
|
//If returned data is less than the limit
|
|
//then there must be no more pages to paginate
|
|
if(res.data.length < this.limit) {
|
|
this.offset = null;
|
|
} else {
|
|
this.offset+= this.limit;
|
|
}
|
|
})
|
|
.catch(e => {
|
|
AjaxErrorHandler(this.$store)(e);
|
|
this.loading = /*loading =*/ false;
|
|
});
|
|
this.loading = true;
|
|
this.axios
|
|
.get( process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/view/' + this.$route.params.username + "/userRoles")
|
|
.then(res => {
|
|
this.userRoles.push(...res.data);
|
|
this.loading = /*loading =*/ false;
|
|
|
|
//If returned data is less than the limit
|
|
//then there must be no more pages to paginate
|
|
if(res.data.length < this.limit) {
|
|
this.offset = null;
|
|
} else {
|
|
this.offset+= this.limit;
|
|
}
|
|
})
|
|
.catch(e => {
|
|
AjaxErrorHandler(this.$store)(e);
|
|
this.loading = /*loading =*/ false;
|
|
});
|
|
this.axios
|
|
.get( process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/view/' + this.$route.params.username + "/roles")
|
|
.then(res => {
|
|
this.roles.push(...res.data);
|
|
this.loading = /*loading =*/ false;
|
|
|
|
//If returned data is less than the limit
|
|
//then there must be no more pages to paginate
|
|
if(res.data.length < this.limit) {
|
|
this.offset = null;
|
|
} else {
|
|
this.offset+= this.limit;
|
|
}
|
|
})
|
|
.catch(e => {
|
|
AjaxErrorHandler(this.$store)(e);
|
|
this.loading = /*loading =*/ false;
|
|
});
|
|
this.axios
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `teams/view/${this.$route.params.username}`)
|
|
.then(res => this.team = res.data)
|
|
.catch(e => {
|
|
let invalidId = e.response.data.errors.find(error => {
|
|
return error.name === 'accountDoesNotExist'
|
|
})
|
|
|
|
if(invalidId) {
|
|
this.$store.commit('set404Page', true)
|
|
} else {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
}
|
|
})
|
|
},
|
|
resetFetchData () {
|
|
this.offset = 0;
|
|
this.users = [];
|
|
|
|
this.fetchData();
|
|
}
|
|
},
|
|
getNewerUsers () {
|
|
this.loadingNewer = true
|
|
|
|
this.axios
|
|
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'teams/view/' + this.$route.params.username + "/members" + '?limit=' + this.newUsers)
|
|
.then(res => {
|
|
this.loadingNewer = false
|
|
this.newUsers = 0
|
|
|
|
this.threads.unshift(...res.data.Threads)
|
|
})
|
|
.catch((e) => {
|
|
this.loadingNewer = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
mounted () {
|
|
this.fetchData();
|
|
},
|
|
watch: {
|
|
tableSort: 'resetFetchData',
|
|
roleSelected: 'resetFetchData',
|
|
search: throttle(function () {
|
|
this.resetFetchData();
|
|
}, 200)
|
|
}
|
|
}
|
|
</script>
|