vikunja-frontend/src/components/tasks/partials/editAssignees.vue

<template>
	<multiselect
		:loading="listUserService.loading"
		placeholder="Type to assign a user..."
		:disabled="disabled"
		:multiple="true"
		@search="findUser"
		:search-results="foundUsers"
		@select="addAssignee"
		label="username"
		select-placeholder="Assign this user"
		v-model="assignees"
	>
		<template v-slot:tag="props">
			<span class="assignee">
				<user :avatar-size="32" :show-username="false" :user="props.item"/>
				<a @click="removeAssignee(props.item)" class="remove-assignee" v-if="!disabled">
					<icon icon="times"/>
				</a>
			</span>
		</template>
	</multiselect>
</template>

<script>
import differenceWith from 'lodash/differenceWith'

import UserModel from '../../../models/user'
import ListUserService from '../../../services/listUsers'
import TaskAssigneeService from '../../../services/taskAssignee'
import User from '../../misc/user'
import Multiselect from '@/components/input/multiselect'

export default {
	name: 'editAssignees',
	components: {
		User,
		Multiselect,
	},
	props: {
		taskId: {
			type: Number,
			required: true,
		},
		listId: {
			type: Number,
			required: true,
		},
		disabled: {
			default: false,
		},
		value: {
			type: Array,
		},
	},
	data() {
		return {
			newAssignee: UserModel,
			listUserService: ListUserService,
			foundUsers: [],
			assignees: [],
			taskAssigneeService: TaskAssigneeService,
		}
	},
	created() {
		this.assignees = this.value
		this.listUserService = new ListUserService()
		this.newAssignee = new UserModel()
		this.taskAssigneeService = new TaskAssigneeService()
	},
	watch: {
		value(newVal) {
			this.assignees = newVal
		},
	},
	methods: {
		addAssignee(user) {
			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
				.then(() => {
					this.$emit('input', this.assignees)
					this.success({message: 'The user has been assigned successfully.'}, this)
				})
				.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)
						}
					}
					this.success({message: 'The user has been unassinged successfully.'}, this)
				})
				.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>