kaverti
/
cubash-archive
forked from kaverti/website
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Team Member View (broken userRoles API)

This commit is contained in:
Troplo 2020-11-20 00:57:05 +11:00
parent 44fe52be54
commit 76d03786f2
6 changed files with 289 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
frontend/src/components/routes/TeamMembers.vue Normal file
View File

@ -0,0 +1,227 @@
<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>
<div class="section">
<div class="">
<h1>Members:</h1>
<scroll-load
key='user-row'
class='columns is-multiline'
v-if='users.length'
:loading='loading'
@loadNext='fetchData'
>
<div class="column is-4" v-for='user in users' :key='"user-row" + user.username' v-show="user"><div class="card">
<div class="card-content">
<router-link :to="'/u/' + 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}}</p>
</div>
</div>
<div class="content limit">
{{user.User.description}}
</div>
</div>
</div>
</div>
</scroll-load>
<h1>Roles:</h1>
<div v-for='role in userRoles' :key='"user-row" + role.User.username' v-show="userRoles">
<br>
<b-tag class="is-large">{{role.Role.name}}</b-tag><br>
<b-tag>{{role.User.username}}</b-tag>
</div>
</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 throttle from 'lodash.throttle';
import AjaxErrorHandler from '../../assets/js/errorHandler';
import AvatarIcon from '../AvatarIcon';
export default {
name: 'TeamMembers',
components: {
LoadingMessage,
ScrollLoad,
AvatarIcon
},
data () {
return {
search: '',
users: [],
userRoles: [],
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: {
clearTeamErrors() {
this.tcreateProd.errors.username = ''
this.tcreateProd.errors.name = ''
},
closeAccountModal() {
this.createTeamModal = false
},
createTeam() {
let postParams = {
username: this.tcreateProd.username,
name: this.tcreateProd.name
}
this.tcreateProd.loading = true
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `teams/create`, postParams).then(res => {
this.signup.loading = false
this.$store.commit('setUsername', res.data.username)
this.closeAccountModal()
}).catch(e => {
this.tcreateProd.loading = false
AjaxErrorHandler(this.$store)(e);
})
},
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;
});
},
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>

4
frontend/src/main.js
View File

@ -78,6 +78,7 @@ const TeamPrivacy = () => import('./components/routes/TeamPrivacy')
const TeamRequests = () => import('./components/routes/TeamRequests')
const TeamUsers = () => import('./components/routes/TeamUsers')
const TeamWall = () => import('./components/routes/TeamWall')
const TeamMembers = () => import('./components/routes/TeamMembers')
const User = () => import('./components/routes/User')
const UserPosts = () => import('./components/routes/UserPosts')
@ -207,7 +208,8 @@ const router = new VueRouter({
] },
{ path: '/t/:username', component: Team, children: [
{ path: 'items', component: UserMarketplace },
{ path: 'wall', component: TeamWall }
{ path: 'wall', component: TeamWall },
{ path: 'members', component: TeamMembers }
] },
{ path: '/verify', component: EmailVerify },
{ path: '/verify/check', component: EmailVerifyCheck },

4
models/team_member_role.js
View File

@ -33,7 +33,7 @@ module.exports = (sequelize, DataTypes) => {
classMethods: {
associate(models) {
TeamMemberRole.belongsTo(models.User)
TeamMemberRole.belongsTo(models.TeamRoles, { as: 'Role'})
TeamMemberRole.belongsTo(models.TeamRoles, {as: 'Role'})
TeamMemberRole.belongsTo(models.Team)
},
includeOptions() {
@ -41,7 +41,7 @@ module.exports = (sequelize, DataTypes) => {
return [
{model: models.User, as: 'User', attributes: ['username', 'createdAt', 'id', 'color', 'picture']},
{model: models.TeamRoles, as: 'Role'},
{model: models.TeamRoles},
]
}
},

1
models/team_members.js
View File

@ -23,6 +23,7 @@ module.exports = (sequelize, DataTypes) => {
classMethods: {
associate (models) {
TeamMembers.belongsTo(models.User)
// TeamMembers.belongsTo(models.TeamMemberRole)
},
includeOptions () {
let models = sequelize.models

1
models/team_roles.js
View File

@ -111,6 +111,7 @@ module.exports = (sequelize, DataTypes) => {
associate (models) {
// TeamRoles.hasMany(models.User)
TeamRoles.hasMany(models.Team)
TeamRoles.hasMany(models.User, {as: 'User'})
},
includeOptions (from, limit) {
let models = sequelize.models

57
routes/team.js
View File

@ -224,10 +224,10 @@ router.get('/view/:username/members', async(req, res, next) => {
let team = await TeamMembers.findAll({
order: [['id', 'DESC']],
where: {
teamId: user.id
TeamId: user.id
},
include: [
{ model: User, attributes: ['username', 'createdAt', 'id', 'color', 'picture', 'locked'] },
{ model: User, attributes: ['username', 'createdAt', 'id', 'color', 'picture', 'description'] }
]
})
res.json(team)
@ -237,6 +237,59 @@ router.get('/view/:username/members', async(req, res, next) => {
} catch (e) { next(e) }
})
router.get('/view/:username/userRoles', async(req, res, next) => {
try {
let user = await Team.findOne({
where: {
username: req.params.username
}
})
if(user) {
if(user.banned) {
res.status(200)
res.json([])
}
let team = await TeamRoles.findAll({
order: [['id', 'DESC']],
where: {
TeamId: user.id
},
include: [
{ model: TeamMembers, attributes: ['username', 'createdAt', 'id', 'color', 'picture'] }
]
})
res.json(team)
} else {
throw Errors.accountDoesNotExist
}
} catch (e) { next(e) }
})
router.get('/view/:username/roles', async(req, res, next) => {
try {
let user = await Team.findOne({
where: {
username: req.params.username
}
})
if(user) {
if(user.banned) {
res.status(200)
res.json([])
}
let team = await TeamRoles.findAll({
order: [['id', 'DESC']],
where: {
TeamId: user.id
}
})
res.json(team)
} else {
throw Errors.accountDoesNotExist
}
} catch (e) { next(e) }
})
router.get('/', async(req, res, next) => {
try {
let sortFields = {