1
0

Cleanup code & make sure it has a common code style

This commit is contained in:
kolaente
2020-09-05 22:35:52 +02:00
parent 4a8b15e7be
commit a8a7f70a3c
132 changed files with 6821 additions and 6595 deletions

View File

@ -13,14 +13,14 @@
<label class="label" for="teamtext">Team Name</label>
<div class="control">
<input
v-focus
:class="{ 'disabled': teamMemberService.loading}"
:disabled="teamMemberService.loading"
class="input"
type="text"
id="teamtext"
placeholder="The team text is here..."
v-model="team.name"/>
:class="{ 'disabled': teamMemberService.loading}"
:disabled="teamMemberService.loading"
class="input"
id="teamtext"
placeholder="The team text is here..."
type="text"
v-focus
v-model="team.name"/>
</div>
</div>
<p class="help is-danger" v-if="showError && team.name === ''">
@ -30,12 +30,12 @@
<label class="label" for="teamdescription">Description</label>
<div class="control">
<editor
:class="{ 'disabled': teamService.loading}"
:disabled="teamService.loading"
placeholder="The teams description goes here..."
id="teamdescription"
v-model="team.description"
:preview-is-default="false"
:class="{ 'disabled': teamService.loading}"
:disabled="teamService.loading"
:preview-is-default="false"
id="teamdescription"
placeholder="The teams description goes here..."
v-model="team.description"
/>
</div>
</div>
@ -43,14 +43,14 @@
<div class="columns bigbuttons">
<div class="column">
<button @click="submit()" class="button is-primary is-fullwidth"
:class="{ 'is-loading': teamService.loading}">
<button :class="{ 'is-loading': teamService.loading}" @click="submit()"
class="button is-primary is-fullwidth">
Save
</button>
</div>
<div class="column is-1">
<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
:class="{ 'is-loading': teamService.loading}">
<button :class="{ 'is-loading': teamService.loading}" @click="showDeleteModal = true"
class="button is-danger is-fullwidth">
<span class="icon is-small">
<icon icon="trash-alt"/>
</span>
@ -70,31 +70,31 @@
<form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin">
<div class="field is-grouped">
<p
class="control has-icons-left is-expanded"
:class="{ 'is-loading': teamMemberService.loading}">
:class="{ 'is-loading': teamMemberService.loading}"
class="control has-icons-left is-expanded">
<multiselect
v-model="newMember"
:options="foundUsers"
:multiple="false"
:searchable="true"
:loading="userService.loading"
:internal-search="true"
@search-change="findUser"
placeholder="Type to search..."
:showNoOptions="false"
label="username"
track-by="id">
:internal-search="true"
:loading="userService.loading"
:multiple="false"
:options="foundUsers"
:searchable="true"
:showNoOptions="false"
@search-change="findUser"
label="username"
placeholder="Type to search..."
track-by="id"
v-model="newMember">
<template slot="clear" slot-scope="props">
<div
class="multiselect__clear" v-if="newMember !== null && newMember.id !== 0"
@mousedown.prevent.stop="clearAll(props.search)">
@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
v-if="newMember !== null && newMember.id !== 0">
</div>
</template>
<span slot="noResult">Oops! No user found. Consider changing the search query.</span>
</multiselect>
</p>
<p class="control">
<button type="submit" class="button is-success">
<button class="button is-success" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -105,8 +105,8 @@
</form>
<table class="table is-striped is-hoverable is-fullwidth">
<tbody>
<tr v-for="m in team.members" :key="m.id">
<td>{{m.username}}</td>
<tr :key="m.id" v-for="m in team.members">
<td>{{ m.username }}</td>
<td>
<template v-if="m.id === userInfo.id">
<b class="is-success">You</b>
@ -127,8 +127,8 @@
</template>
</td>
<td class="actions" v-if="userIsAdmin">
<button @click="toggleUserType(m)" class="button buttonright is-primary"
:class="{'is-loading': teamMemberService.loading}"
<button :class="{'is-loading': teamMemberService.loading}" @click="toggleUserType(m)"
class="button buttonright is-primary"
v-if="m.id !== userInfo.id">
Make
<template v-if="!m.admin">
@ -138,8 +138,8 @@
Member
</template>
</button>
<button @click="() => {member = m; showUserDeleteModal = true}" class="button is-danger"
:class="{'is-loading': teamMemberService.loading}"
<button :class="{'is-loading': teamMemberService.loading}" @click="() => {member = m; showUserDeleteModal = true}"
class="button is-danger"
v-if="m.id !== userInfo.id">
<span class="icon is-small">
<icon icon="trash-alt"/>
@ -154,9 +154,9 @@
<!-- Team delete modal -->
<modal
v-if="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteTeam()">
@close="showDeleteModal = false"
@submit="deleteTeam()"
v-if="showDeleteModal">
<span slot="header">Delete the team</span>
<p slot="text">Are you sure you want to delete this team and all of its members?<br/>
All team members will loose access to lists and namespaces shared with this team.<br/>
@ -164,9 +164,9 @@
</modal>
<!-- User delete modal -->
<modal
v-if="showUserDeleteModal"
@close="showUserDeleteModal = false"
@submit="deleteUser()">
@close="showUserDeleteModal = false"
@submit="deleteUser()"
v-if="showUserDeleteModal">
<span slot="header">Remove a user from the team</span>
<p slot="text">Are you sure you want to remove this user from the team?<br/>
They will loose access to all lists and namespaces this team has access to.<br/>
@ -176,187 +176,187 @@
</template>
<script>
import router from '../../router'
import {mapState} from 'vuex'
import router from '../../router'
import {mapState} from 'vuex'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import TeamMemberService from '../../services/teamMember'
import TeamMemberModel from '../../models/teamMember'
import UserModel from '../../models/user'
import UserService from '../../services/user'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import Rights from '../../models/rights.json'
import TeamService from '../../services/team'
import TeamModel from '../../models/team'
import TeamMemberService from '../../services/teamMember'
import TeamMemberModel from '../../models/teamMember'
import UserModel from '../../models/user'
import UserService from '../../services/user'
import LoadingComponent from '../../components/misc/loading'
import ErrorComponent from '../../components/misc/error'
import Rights from '../../models/rights.json'
export default {
name: 'EditTeam',
data() {
return {
teamService: TeamService,
teamMemberService: TeamMemberService,
team: TeamModel,
teamId: this.$route.params.id,
member: TeamMemberModel,
export default {
name: 'EditTeam',
data() {
return {
teamService: TeamService,
teamMemberService: TeamMemberService,
team: TeamModel,
teamId: this.$route.params.id,
member: TeamMemberModel,
showDeleteModal: false,
showUserDeleteModal: false,
showDeleteModal: false,
showUserDeleteModal: false,
newMember: UserModel,
foundUsers: [],
userService: UserService,
newMember: UserModel,
foundUsers: [],
userService: UserService,
showError: false,
}
showError: false,
}
},
components: {
multiselect: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
created() {
this.teamService = new TeamService()
this.teamMemberService = new TeamMemberService()
this.userService = new UserService()
this.loadTeam()
},
watch: {
// call again the method if the route changes
'$route': 'loadTeam',
},
computed: {
userIsAdmin() {
return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
},
components: {
multiselect: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
editor: () => ({
component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
}),
},
created() {
this.teamService = new TeamService()
this.teamMemberService = new TeamMemberService()
this.userService = new UserService()
this.loadTeam()
},
watch: {
// call again the method if the route changes
'$route': 'loadTeam',
},
computed: {
userIsAdmin() {
return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
},
...mapState({
userInfo: state => state.auth.info,
}),
},
methods: {
loadTeam() {
this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team)
.then(response => {
this.$set(this, 'team', response)
this.setTitle(`Edit Team ${this.team.name}`)
})
.catch(e => {
this.error(e, this)
})
},
submit() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.update(this.team)
.then(response => {
this.team = response
this.success({message: 'The team was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteTeam() {
this.teamService.delete(this.team)
.then(() => {
this.success({message: 'The team was successfully deleted.'}, this)
router.push({name: 'teams.index'})
})
.catch(e => {
this.error(e, this)
})
},
deleteUser() {
this.teamMemberService.delete(this.member)
.then(() => {
this.success({message: 'The user was successfully deleted from the team.'}, this)
this.loadTeam()
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.showUserDeleteModal = false
})
},
addUser() {
const newMember = new TeamMemberModel({
teamId: this.teamId,
username: this.newMember.username,
...mapState({
userInfo: state => state.auth.info,
}),
},
methods: {
loadTeam() {
this.team = new TeamModel({id: this.teamId})
this.teamService.get(this.team)
.then(response => {
this.$set(this, 'team', response)
this.setTitle(`Edit Team ${this.team.name}`)
})
.catch(e => {
this.error(e, this)
})
this.teamMemberService.create(newMember)
.then(() => {
this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
toggleUserType(member) {
member.admin = !member.admin
this.teamMemberService.update(member)
.then(r => {
for (const tm in this.team.members) {
if (this.team.members[tm].id === member.id) {
this.$set(this.team.members[tm], 'admin', r.admin)
break
}
}
this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
findUser(query) {
if (query === '') {
this.$set(this, 'foundUsers', [])
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundUsers', response)
})
.catch(e => {
this.error(e, this)
})
},
clearAll() {
this.$set(this, 'foundUsers', [])
},
},
}
submit() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.update(this.team)
.then(response => {
this.team = response
this.success({message: 'The team was successfully updated.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
deleteTeam() {
this.teamService.delete(this.team)
.then(() => {
this.success({message: 'The team was successfully deleted.'}, this)
router.push({name: 'teams.index'})
})
.catch(e => {
this.error(e, this)
})
},
deleteUser() {
this.teamMemberService.delete(this.member)
.then(() => {
this.success({message: 'The user was successfully deleted from the team.'}, this)
this.loadTeam()
})
.catch(e => {
this.error(e, this)
})
.finally(() => {
this.showUserDeleteModal = false
})
},
addUser() {
const newMember = new TeamMemberModel({
teamId: this.teamId,
username: this.newMember.username,
})
this.teamMemberService.create(newMember)
.then(() => {
this.loadTeam()
this.success({message: 'The team member was successfully added.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
toggleUserType(member) {
member.admin = !member.admin
this.teamMemberService.update(member)
.then(r => {
for (const tm in this.team.members) {
if (this.team.members[tm].id === member.id) {
this.$set(this.team.members[tm], 'admin', r.admin)
break
}
}
this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
findUser(query) {
if (query === '') {
this.$set(this, 'foundUsers', [])
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundUsers', response)
})
.catch(e => {
this.error(e, this)
})
},
clearAll() {
this.$set(this, 'foundUsers', [])
},
},
}
</script>
<style lang="scss" scoped>
.card {
margin-bottom: 1rem;
.card {
margin-bottom: 1rem;
.add-member-form {
margin: 1rem;
}
.add-member-form {
margin: 1rem;
}
}
.team-members {
padding: 0;
.team-members {
padding: 0;
.table {
border-top: 0;
}
.table {
border-top: 0;
}
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
<router-link :to="{name:'teams.create'}" class="button is-success button-right" >
<router-link :to="{name:'teams.create'}" class="button is-success button-right">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -8,9 +8,9 @@
</router-link>
<h1>Teams</h1>
<ul class="teams box">
<li v-for="t in teams" :key="t.id">
<li :key="t.id" v-for="t in teams">
<router-link :to="{name: 'teams.edit', params: {id: t.id}}">
{{t.name}}
{{ t.name }}
</router-link>
</li>
</ul>
@ -18,33 +18,33 @@
</template>
<script>
import TeamService from '../../services/team'
export default {
name: 'ListTeams',
data() {
return {
teamService: TeamService,
teams: [],
}
},
created() {
this.teamService = new TeamService()
this.loadTeams()
},
mounted() {
this.setTitle('Teams')
},
methods: {
loadTeams() {
this.teamService.getAll()
.then(response => {
this.$set(this, 'teams', response)
})
.catch(e => {
this.error(e, this)
})
},
import TeamService from '../../services/team'
export default {
name: 'ListTeams',
data() {
return {
teamService: TeamService,
teams: [],
}
}
},
created() {
this.teamService = new TeamService()
this.loadTeams()
},
mounted() {
this.setTitle('Teams')
},
methods: {
loadTeams() {
this.teamService.getAll()
.then(response => {
this.$set(this, 'teams', response)
})
.catch(e => {
this.error(e, this)
})
},
},
}
</script>

View File

@ -1,22 +1,22 @@
<template>
<div class="fullpage">
<a class="close" @click="back()">
<a @click="back()" class="close">
<icon :icon="['far', 'times-circle']">
</icon>
</a>
<h3>Create a new team</h3>
<form @submit.prevent="newTeam" @keyup.esc="back()">
<form @keyup.esc="back()" @submit.prevent="newTeam">
<div class="field is-grouped">
<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
<input
v-focus
class="input"
:class="{ 'disabled': teamService.loading}" v-model="team.name"
type="text"
placeholder="The team's name goes here..."/>
:class="{ 'disabled': teamService.loading}"
class="input"
placeholder="The team's name goes here..." type="text"
v-focus
v-model="team.name"/>
</p>
<p class="control">
<button type="submit" class="button is-success noshadow">
<button class="button is-success noshadow" type="submit">
<span class="icon is-small">
<icon icon="plus"/>
</span>
@ -32,49 +32,49 @@
</template>
<script>
import router from '../../router'
import TeamModel from '../../models/team'
import TeamService from '../../services/team'
import {IS_FULLPAGE} from '../../store/mutation-types'
import router from '../../router'
import TeamModel from '../../models/team'
import TeamService from '../../services/team'
import {IS_FULLPAGE} from '@/store/mutation-types'
export default {
name: 'NewTeam',
data() {
return {
teamService: TeamService,
team: TeamModel,
showError: false,
}
},
created() {
this.teamService = new TeamService()
this.team = new TeamModel()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new Team')
},
methods: {
newTeam() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.create(this.team)
.then(response => {
router.push({name: 'teams.edit', params: {id: response.id}})
this.success({message: 'The team was successfully created.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
export default {
name: 'NewTeam',
data() {
return {
teamService: TeamService,
team: TeamModel,
showError: false,
}
}
},
created() {
this.teamService = new TeamService()
this.team = new TeamModel()
this.$store.commit(IS_FULLPAGE, true)
},
mounted() {
this.setTitle('Create a new Team')
},
methods: {
newTeam() {
if (this.team.name === '') {
this.showError = true
return
}
this.showError = false
this.teamService.create(this.team)
.then(response => {
router.push({name: 'teams.edit', params: {id: response.id}})
this.success({message: 'The team was successfully created.'}, this)
})
.catch(e => {
this.error(e, this)
})
},
back() {
router.go(-1)
},
},
}
</script>