Browse Source

Add moving tasks between lists

master
kolaente 2 years ago
parent
commit
d4b82a4cc9
Signed by untrusted user: konrad GPG Key ID: F40E70337AB24C9B
  1. 26
      src/components/tasks/TaskDetailView.vue
  2. 69
      src/components/tasks/reusable/listSearch.vue
  3. 2
      src/main.js
  4. 1
      src/services/list.js

26
src/components/tasks/TaskDetailView.vue

@ -200,6 +200,21 @@
/>
</div>
<!-- Move Task -->
<div class="content details has-top-border" v-if="activeFields.moveList">
<h3>
<span class="icon is-grey">
<icon icon="list"/>
</span>
Move task to different list
</h3>
<div class="field has-addons">
<div class="control is-expanded">
<list-search @selected="changeList"/>
</div>
</div>
</div>
<!-- Comments -->
<comments :task-id="taskId"/>
</div>
@ -257,6 +272,10 @@
<span class="icon is-small"><icon icon="tasks"/></span>
Add task relations
</a>
<a class="button" @click="setFieldActive('moveList')">
<span class="icon is-small"><icon icon="list"/></span>
Move task to different list
</a>
<a class="button is-danger is-outlined noshadow has-no-border" @click="showDeleteModal = true">
<span class="icon is-small"><icon icon="trash-alt"/></span>
Delete task
@ -302,10 +321,12 @@
import Reminders from './reusable/reminders'
import Comments from './reusable/comments'
import router from '../../router'
import ListSearch from "./reusable/listSearch";
export default {
name: 'TaskDetailView',
components: {
ListSearch,
Reminders,
RepeatAfter,
RelatedTasks,
@ -350,6 +371,7 @@
labels: false,
attachments: false,
relatedTasks: false,
moveList: false,
},
}
},
@ -486,6 +508,10 @@
this.saveTask()
}
},
changeList(list) {
this.task.listId = list.id
this.saveTask()
}
},
}
</script>

69
src/components/tasks/reusable/listSearch.vue

@ -0,0 +1,69 @@
<template>
<multiselect
v-model="list"
:options="foundLists"
:multiple="false"
:searchable="true"
:loading="listSerivce.loading"
:internal-search="true"
@search-change="findLists"
@select="select"
placeholder="Type to search for a list..."
label="title"
track-by="id"
:showNoOptions="false"
class="control is-expanded"
v-focus
>
<template slot="clear" slot-scope="props">
<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
</template>
<span slot="noResult">No list found. Consider changing the search query.</span>
</multiselect>
</template>
<script>
import ListService from '../../../services/list'
import ListModel from '../../../models/list'
import multiselect from 'vue-multiselect'
export default {
name: 'listSearch',
data() {
return {
listSerivce: ListService,
list: ListModel,
foundLists: [],
}
},
components: {
multiselect,
},
beforeMount() {
this.listSerivce = new ListService()
this.list = new ListModel()
},
methods: {
findLists(query) {
if (query === '') {
this.clearAll()
return
}
this.listSerivce.getAll({}, {s: query})
.then(response => {
this.$set(this, 'foundLists', response)
})
.catch(e => {
this.error(e, this)
})
},
clearAll() {
this.$set(this, 'foundLists', [])
},
select(list) {
this.$emit('selected', list)
},
},
}
</script>

2
src/main.js

@ -67,6 +67,7 @@ import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
import { faTh } from '@fortawesome/free-solid-svg-icons'
import { faSort } from '@fortawesome/free-solid-svg-icons'
import { faSortUp } from '@fortawesome/free-solid-svg-icons'
import { faList } from '@fortawesome/free-solid-svg-icons'
import { faComments } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@ -110,6 +111,7 @@ library.add(faComments)
library.add(faTh)
library.add(faSort)
library.add(faSortUp)
library.add(faList)
Vue.component('icon', FontAwesomeIcon)

1
src/services/list.js

@ -8,6 +8,7 @@ export default class ListService extends AbstractService {
super({
create: '/namespaces/{namespaceId}/lists',
get: '/lists/{id}',
getAll: '/lists',
update: '/lists/{id}',
delete: '/lists/{id}',
})

Loading…
Cancel
Save