Add reordering tasks
This commit is contained in:
parent
7434640525
commit
5a29982e99
|
@ -33,6 +33,7 @@
|
||||||
"vue-i18n": "8.25.0",
|
"vue-i18n": "8.25.0",
|
||||||
"vue-shortkey": "3.1.7",
|
"vue-shortkey": "3.1.7",
|
||||||
"vue-smooth-dnd": "0.8.1",
|
"vue-smooth-dnd": "0.8.1",
|
||||||
|
"vuedraggable": "^2.24.3",
|
||||||
"vuex": "3.6.2",
|
"vuex": "3.6.2",
|
||||||
"workbox-precaching": "6.1.5"
|
"workbox-precaching": "6.1.5"
|
||||||
},
|
},
|
||||||
|
|
|
@ -66,6 +66,12 @@ export default {
|
||||||
this.labelService = new LabelService()
|
this.labelService = new LabelService()
|
||||||
this.labelTaskService = new LabelTaskService()
|
this.labelTaskService = new LabelTaskService()
|
||||||
},
|
},
|
||||||
|
props: {
|
||||||
|
defaultPosition: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addTask() {
|
addTask() {
|
||||||
if (this.newTaskTitle === '') {
|
if (this.newTaskTitle === '') {
|
||||||
|
@ -74,7 +80,7 @@ export default {
|
||||||
}
|
}
|
||||||
this.errorMessage = ''
|
this.errorMessage = ''
|
||||||
|
|
||||||
this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId)
|
this.createNewTask(this.newTaskTitle, 0, this.$store.state.auth.settings.defaultListId, this.defaultPosition)
|
||||||
.then(task => {
|
.then(task => {
|
||||||
this.newTaskTitle = ''
|
this.newTaskTitle = ''
|
||||||
this.$emit('taskAdded', task)
|
this.$emit('taskAdded', task)
|
||||||
|
|
|
@ -22,7 +22,7 @@ export default {
|
||||||
labels: state => state.labels.labels,
|
labels: state => state.labels.labels,
|
||||||
}),
|
}),
|
||||||
methods: {
|
methods: {
|
||||||
createNewTask(newTaskTitle, bucketId = 0, lId = 0) {
|
createNewTask(newTaskTitle, bucketId = 0, lId = 0, position = 0) {
|
||||||
const parsedTask = parseTaskText(newTaskTitle)
|
const parsedTask = parseTaskText(newTaskTitle)
|
||||||
const assignees = []
|
const assignees = []
|
||||||
|
|
||||||
|
@ -57,6 +57,7 @@ export default {
|
||||||
priority: parsedTask.priority,
|
priority: parsedTask.priority,
|
||||||
assignees: assignees,
|
assignees: assignees,
|
||||||
bucketId: bucketId,
|
bucketId: bucketId,
|
||||||
|
position: position,
|
||||||
})
|
})
|
||||||
return this.taskService.create(task)
|
return this.taskService.create(task)
|
||||||
.then(task => {
|
.then(task => {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import TaskCollectionService from '../../../services/taskCollection'
|
import TaskCollectionService from '../../../services/taskCollection'
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
import {calculateTaskPosition} from '../../../helpers/calculateTaskPosition'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This mixin provides a base set of methods and properties to get tasks on a list.
|
* This mixin provides a base set of methods and properties to get tasks on a list.
|
||||||
|
@ -20,7 +21,7 @@ export default {
|
||||||
|
|
||||||
showTaskFilter: false,
|
showTaskFilter: false,
|
||||||
params: {
|
params: {
|
||||||
sort_by: ['done', 'id'],
|
sort_by: ['position', 'id'],
|
||||||
order_by: ['asc', 'desc'],
|
order_by: ['asc', 'desc'],
|
||||||
filter_by: ['done'],
|
filter_by: ['done'],
|
||||||
filter_value: ['false'],
|
filter_value: ['false'],
|
||||||
|
@ -187,5 +188,23 @@ export default {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
saveTaskPosition(e) {
|
||||||
|
console.log(e.oldIndex, e.newIndex)
|
||||||
|
console.log('elem', this.tasks[e.newIndex].title)
|
||||||
|
|
||||||
|
const task = this.tasks[e.newIndex]
|
||||||
|
const taskBefore = this.tasks[e.newIndex - 1] ?? null
|
||||||
|
const taskAfter = this.tasks[e.newIndex + 1] ?? null
|
||||||
|
|
||||||
|
task.position = calculateTaskPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null)
|
||||||
|
|
||||||
|
this.$store.dispatch('tasks/update', task)
|
||||||
|
.then(r => {
|
||||||
|
this.$set(this.tasks, e.newIndex, r)
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
this.error(e)
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
|
@ -21,7 +21,7 @@
|
||||||
v-model="searchTerm"
|
v-model="searchTerm"
|
||||||
/>
|
/>
|
||||||
<span class="icon is-left">
|
<span class="icon is-left">
|
||||||
<icon icon="search" />
|
<icon icon="search"/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
|
@ -63,16 +63,15 @@
|
||||||
<add-task
|
<add-task
|
||||||
@taskAdded="updateTaskList"
|
@taskAdded="updateTaskList"
|
||||||
ref="newTaskInput"
|
ref="newTaskInput"
|
||||||
|
:default-position="firstNewPosition"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
|
<nothing v-if="ctaVisible && tasks.length === 0 && !taskCollectionService.loading">
|
||||||
|
|
||||||
{{ $t('list.list.empty') }}
|
{{ $t('list.list.empty') }}
|
||||||
<a @click="focusNewTaskInput()">
|
<a @click="focusNewTaskInput()">
|
||||||
{{ $t('list.list.newTaskCta') }}
|
{{ $t('list.list.newTaskCta') }}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</nothing>
|
</nothing>
|
||||||
|
|
||||||
<div class="tasks-container">
|
<div class="tasks-container">
|
||||||
|
@ -81,23 +80,25 @@
|
||||||
class="tasks mt-0"
|
class="tasks mt-0"
|
||||||
v-if="tasks && tasks.length > 0"
|
v-if="tasks && tasks.length > 0"
|
||||||
>
|
>
|
||||||
<single-task-in-list
|
<draggable v-model="tasks" group="tasks" @end="saveTaskPosition">
|
||||||
:show-list-color="false"
|
<single-task-in-list
|
||||||
:disabled="!canWrite"
|
:show-list-color="false"
|
||||||
:key="t.id"
|
:disabled="!canWrite"
|
||||||
:the-task="t"
|
:key="t.id"
|
||||||
@taskUpdated="updateTasks"
|
:the-task="t"
|
||||||
task-detail-route="task.detail"
|
@taskUpdated="updateTasks"
|
||||||
v-for="t in tasks"
|
task-detail-route="task.detail"
|
||||||
>
|
v-for="t in tasks"
|
||||||
<div
|
|
||||||
@click="editTask(t.id)"
|
|
||||||
class="icon settings"
|
|
||||||
v-if="!list.isArchived && canWrite"
|
|
||||||
>
|
>
|
||||||
<icon icon="pencil-alt" />
|
<div
|
||||||
</div>
|
@click="editTask(t.id)"
|
||||||
</single-task-in-list>
|
class="icon settings"
|
||||||
|
v-if="!list.isArchived && canWrite"
|
||||||
|
>
|
||||||
|
<icon icon="pencil-alt"/>
|
||||||
|
</div>
|
||||||
|
</single-task-in-list>
|
||||||
|
</draggable>
|
||||||
</div>
|
</div>
|
||||||
<card
|
<card
|
||||||
v-if="isTaskEdit"
|
v-if="isTaskEdit"
|
||||||
|
@ -150,7 +151,7 @@
|
||||||
|
|
||||||
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
|
<!-- This router view is used to show the task popup while keeping the kanban board itself -->
|
||||||
<transition name="modal">
|
<transition name="modal">
|
||||||
<router-view />
|
<router-view/>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -163,14 +164,17 @@ import EditTask from '../../../components/tasks/edit-task'
|
||||||
import AddTask from '../../../components/tasks/add-task'
|
import AddTask from '../../../components/tasks/add-task'
|
||||||
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
|
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
|
||||||
import taskList from '../../../components/tasks/mixins/taskList'
|
import taskList from '../../../components/tasks/mixins/taskList'
|
||||||
import { saveListView } from '@/helpers/saveListView'
|
import {saveListView} from '@/helpers/saveListView'
|
||||||
import Rights from '../../../models/rights.json'
|
import Rights from '../../../models/rights.json'
|
||||||
import { mapState } from 'vuex'
|
|
||||||
import FilterPopup from '@/components/list/partials/filter-popup.vue'
|
import FilterPopup from '@/components/list/partials/filter-popup.vue'
|
||||||
import { HAS_TASKS } from '@/store/mutation-types'
|
import {HAS_TASKS} from '@/store/mutation-types'
|
||||||
import Nothing from '@/components/misc/nothing.vue'
|
import Nothing from '@/components/misc/nothing.vue'
|
||||||
import createTask from '@/components/tasks/mixins/createTask'
|
import createTask from '@/components/tasks/mixins/createTask'
|
||||||
|
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
import {calculateTaskPosition} from '../../../helpers/calculateTaskPosition'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'List',
|
name: 'List',
|
||||||
data() {
|
data() {
|
||||||
|
@ -191,6 +195,7 @@ export default {
|
||||||
SingleTaskInList,
|
SingleTaskInList,
|
||||||
EditTask,
|
EditTask,
|
||||||
AddTask,
|
AddTask,
|
||||||
|
draggable,
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.taskService = new TaskService()
|
this.taskService = new TaskService()
|
||||||
|
@ -199,10 +204,21 @@ export default {
|
||||||
// We use local storage and not vuex here to make it persistent across reloads.
|
// We use local storage and not vuex here to make it persistent across reloads.
|
||||||
saveListView(this.$route.params.listId, this.$route.name)
|
saveListView(this.$route.params.listId, this.$route.name)
|
||||||
},
|
},
|
||||||
computed: mapState({
|
computed: {
|
||||||
canWrite: state => state.currentList.maxRight > Rights.READ,
|
firstNewPosition() {
|
||||||
list: state => state.currentList,
|
if (this.tasks.length === 0) {
|
||||||
}),
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const p = calculateTaskPosition(null, this.tasks[0].position)
|
||||||
|
console.log('newp', p)
|
||||||
|
return p
|
||||||
|
},
|
||||||
|
...mapState({
|
||||||
|
canWrite: state => state.currentList.maxRight > Rights.READ,
|
||||||
|
list: state => state.currentList,
|
||||||
|
}),
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => (this.ctaVisible = true))
|
this.$nextTick(() => (this.ctaVisible = true))
|
||||||
},
|
},
|
||||||
|
|
12
yarn.lock
12
yarn.lock
|
@ -7245,6 +7245,11 @@ snapdragon@^0.8.1:
|
||||||
source-map-resolve "^0.5.0"
|
source-map-resolve "^0.5.0"
|
||||||
use "^3.1.0"
|
use "^3.1.0"
|
||||||
|
|
||||||
|
sortablejs@1.10.2:
|
||||||
|
version "1.10.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
|
||||||
|
integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
|
||||||
|
|
||||||
source-map-js@^0.6.2:
|
source-map-js@^0.6.2:
|
||||||
version "0.6.2"
|
version "0.6.2"
|
||||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
|
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
|
||||||
|
@ -8169,6 +8174,13 @@ vue@2.6.14:
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
|
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
|
||||||
integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
|
integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
|
||||||
|
|
||||||
|
vuedraggable@^2.24.3:
|
||||||
|
version "2.24.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
|
||||||
|
integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
|
||||||
|
dependencies:
|
||||||
|
sortablejs "1.10.2"
|
||||||
|
|
||||||
vuex@3.6.2:
|
vuex@3.6.2:
|
||||||
version "3.6.2"
|
version "3.6.2"
|
||||||
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
|
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
|
||||||
|
|
Reference in New Issue