forked from vikunja/frontend
Hide Team UI elements if the user does not have the rights to use them Fix replacing the right saved in the model when updating Hide UI-Elements on task if the user does not have the rights to use them Hide UI-Elements on gantt if the user does not have the rights to use them Hide UI-Elements on kanban if the user does not have rights to use them Fix canWrite condition Hide list components if the user has no right to write to the list Add max right to model Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#211
138 lines
3.5 KiB
Vue
138 lines
3.5 KiB
Vue
<template>
|
|
<multiselect
|
|
:multiple="true"
|
|
:close-on-select="false"
|
|
:clear-on-select="true"
|
|
:options-limit="300"
|
|
:hide-selected="true"
|
|
v-model="assignees"
|
|
:options="foundUsers"
|
|
:searchable="true"
|
|
:loading="listUserService.loading"
|
|
:internal-search="true"
|
|
@search-change="findUser"
|
|
@select="addAssignee"
|
|
placeholder="Type to assign a user..."
|
|
label="username"
|
|
track-by="id"
|
|
select-label="Assign this user"
|
|
:showNoOptions="false"
|
|
:disabled="disabled"
|
|
>
|
|
<template slot="tag" slot-scope="{ option }">
|
|
<user :user="option" :show-username="false" :avatar-size="30"/>
|
|
<a @click="removeAssignee(option)" class="remove-assignee" v-if="!disabled">
|
|
<icon icon="times"/>
|
|
</a>
|
|
</template>
|
|
<template slot="clear" slot-scope="props">
|
|
<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0"
|
|
@mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
|
|
</template>
|
|
<span slot="noResult">No user found. Consider changing the search query.</span>
|
|
</multiselect>
|
|
</template>
|
|
|
|
<script>
|
|
import {differenceWith} from 'lodash'
|
|
|
|
import UserModel from '../../../models/user'
|
|
import ListUserService from '../../../services/listUsers'
|
|
import TaskAssigneeService from '../../../services/taskAssignee'
|
|
import User from '../../misc/user'
|
|
import LoadingComponent from '../../misc/loading'
|
|
import ErrorComponent from '../../misc/error'
|
|
|
|
export default {
|
|
name: 'editAssignees',
|
|
components: {
|
|
User,
|
|
multiselect: () => ({
|
|
component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
|
|
loading: LoadingComponent,
|
|
error: ErrorComponent,
|
|
timeout: 60000,
|
|
}),
|
|
},
|
|
props: {
|
|
taskId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
listId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
initialAssignees: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
disabled: {
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
newAssignee: UserModel,
|
|
listUserService: ListUserService,
|
|
foundUsers: [],
|
|
assignees: [],
|
|
taskAssigneeService: TaskAssigneeService,
|
|
}
|
|
},
|
|
created() {
|
|
this.assignees = this.initialAssignees
|
|
this.listUserService = new ListUserService()
|
|
this.newAssignee = new UserModel()
|
|
this.taskAssigneeService = new TaskAssigneeService()
|
|
},
|
|
watch: {
|
|
initialAssignees(newVal) {
|
|
this.assignees = newVal
|
|
}
|
|
},
|
|
methods: {
|
|
addAssignee(user) {
|
|
this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
removeAssignee(user) {
|
|
this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
|
|
.then(() => {
|
|
// Remove the assignee from the list
|
|
for (const a in this.assignees) {
|
|
if (this.assignees[a].id === user.id) {
|
|
this.assignees.splice(a, 1)
|
|
}
|
|
}
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
findUser(query) {
|
|
if (query === '') {
|
|
this.clearAllFoundUsers()
|
|
return
|
|
}
|
|
|
|
this.listUserService.getAll({listId: this.listId}, {s: query})
|
|
.then(response => {
|
|
// Filter the results to not include users who are already assigned
|
|
this.$set(this, 'foundUsers', differenceWith(response, this.assignees, (first, second) => {
|
|
return first.id === second.id
|
|
}))
|
|
})
|
|
.catch(e => {
|
|
this.error(e, this)
|
|
})
|
|
},
|
|
clearAllFoundUsers() {
|
|
this.$set(this, 'foundUsers', [])
|
|
},
|
|
},
|
|
}
|
|
</script>
|