vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Improved multiselect handling
All checks were successful
the build was successful
Details

Browse Source
This commit is contained in:
kolaente 2019-03-03 20:33:52 +01:00
parent 24a7e5ed32
commit a3fa9e3d34
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/lists/ShowList.vue
View File

@ -185,11 +185,11 @@
<div class="field">
<label class="label" for="">Assignees</label>
<div class="assingees">
<div class="assingee" v-for="a in taskEditTask.assignees" :key="a.id">
<ul class="assingees">
<li v-for="a in taskEditTask.assignees" :key="a.id">
{{a}}
</div>
</div>
</li>
</ul>
</div>
<div class="field has-addons">
@ -206,7 +206,7 @@
label="username"
track-by="id">
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="newAssignee.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
</template>
<span slot="noResult">Oops! No user found. Consider changing the search query.</span>
</multiselect>
@ -220,7 +220,6 @@
</div>
</div>
<div class="field">
<label class="label" for="subtasks">Subtasks</label>
<div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0">
@ -271,6 +270,7 @@
import flatPickr from 'vue-flatpickr-component'
import 'flatpickr/dist/flatpickr.css'
import multiselect from 'vue-multiselect'
import {differenceWith} from 'lodash'
import ListService from '../../services/list'
import TaskService from '../../services/task'
@ -325,6 +325,7 @@
this.taskService = new TaskService()
this.newTask = new TaskModel()
this.userService = new UserService()
this.newAssignee = new UserModel()
this.loadList()
},
watch: {
@ -448,13 +449,16 @@
},
findUser(query) {
if(query === '') {
this.$set(this, 'foundUsers', [])
this.clearAll()
return
}
this.userService.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundUsers', response)
// Filter the results to not include users who are already assigned
this.$set(this, 'foundUsers', differenceWith(response, this.taskEditTask.assignees, (first, second) => {
return first.id === second.id
}))
})
.catch(e => {
message.error(e, this)

4
src/styles/_multiselect.scss
View File

@ -268,6 +268,10 @@ fieldset[disabled] .multiselect {
margin: 0;
min-width: 100%;
vertical-align: top;
li + li {
margin: 0;
}
}
.multiselect--above .multiselect__content-wrapper {