feat: move unique functions from taskList to List

This commit is contained in:
Dominik Pschenitschni 2021-09-07 17:04:46 +02:00 committed by kolaente
parent f51371bbe0
commit fe27a432c7
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 65 additions and 61 deletions

View file

@ -1,6 +1,5 @@
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '@/services/taskCollection'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
// FIXME: merge with DEFAULT_PARAMS in filters.vue // FIXME: merge with DEFAULT_PARAMS in filters.vue
const DEFAULT_PARAMS = { const DEFAULT_PARAMS = {
@ -25,7 +24,6 @@ export default {
loadedList: null, loadedList: null,
showTaskSearch: false,
searchTerm: '', searchTerm: '',
showTaskFilter: false, showTaskFilter: false,
@ -70,9 +68,9 @@ export default {
const currentList = { const currentList = {
id: list.listId, id: list.listId,
params: params, params,
search: search, search,
page: page, page,
} }
if (JSON.stringify(currentList) === JSON.stringify(this.loadedList) && !forceLoading) { if (JSON.stringify(currentList) === JSON.stringify(this.loadedList) && !forceLoading) {
return return
@ -109,60 +107,6 @@ export default {
this.loadTasks(1, '', null, true) this.loadTasks(1, '', null, true)
} }
}, },
sortTasks() { getRouteForPagination,
if (this.tasks === null || this.tasks === []) {
return
}
return this.tasks.sort(function (a, b) {
if (a.done < b.done)
return -1
if (a.done > b.done)
return 1
if (a.position < b.position)
return -1
if (a.position > b.position)
return 1
return 0
})
},
searchTasks() {
// Only search if the search term changed
if (this.$route.query === this.searchTerm) {
return
}
this.$router.push({
name: 'list.list',
query: {search: this.searchTerm},
})
},
hideSearchBar() {
// This is a workaround.
// When clicking on the search button, @blur from the input is fired. If we
// would then directly hide the whole search bar directly, no click event
// from the button gets fired. To prevent this, we wait 200ms until we hide
// everything so the button has a chance of firering the search event.
setTimeout(() => {
this.showTaskSearch = false
}, 200)
},
saveTaskPosition(e) {
this.drag = false
const task = this.tasks[e.newIndex]
const taskBefore = this.tasks[e.newIndex - 1] ?? null
const taskAfter = this.tasks[e.newIndex + 1] ?? null
task.position = calculateItemPosition(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.$message.error(e)
})
},
}, },
} }

View file

@ -154,6 +154,24 @@ import {mapState} from 'vuex'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition' import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
function sortTasks(tasks) {
if (tasks === null || tasks === []) {
return
}
return tasks.sort((a, b) => {
if (a.done < b.done)
return -1
if (a.done > b.done)
return 1
if (a.position < b.position)
return -1
if (a.position > b.position)
return 1
return 0
})
}
export default { export default {
name: 'List', name: 'List',
data() { data() {
@ -162,6 +180,7 @@ export default {
isTaskEdit: false, isTaskEdit: false,
taskEditTask: TaskModel, taskEditTask: TaskModel,
ctaVisible: false, ctaVisible: false,
showTaskSearch: false,
drag: false, drag: false,
dragOptions: { dragOptions: {
@ -205,6 +224,27 @@ export default {
this.$nextTick(() => (this.ctaVisible = true)) this.$nextTick(() => (this.ctaVisible = true))
}, },
methods: { methods: {
searchTasks() {
// Only search if the search term changed
if (this.$route.query === this.searchTerm) {
return
}
this.$router.push({
name: 'list.list',
query: {search: this.searchTerm},
})
},
hideSearchBar() {
// This is a workaround.
// When clicking on the search button, @blur from the input is fired. If we
// would then directly hide the whole search bar directly, no click event
// from the button gets fired. To prevent this, we wait 200ms until we hide
// everything so the button has a chance of firering the search event.
setTimeout(() => {
this.showTaskSearch = false
}, 200)
},
// This function initializes the tasks page and loads the first page of tasks // This function initializes the tasks page and loads the first page of tasks
initTasks(page, search = '') { initTasks(page, search = '') {
this.taskEditTask = null this.taskEditTask = null
@ -243,7 +283,27 @@ export default {
break break
} }
} }
this.sortTasks() sortTasks(this.tasks)
},
saveTaskPosition(e) {
this.drag = false
const task = this.tasks[e.newIndex]
const taskBefore = this.tasks[e.newIndex - 1] ?? null
const taskAfter = this.tasks[e.newIndex + 1] ?? null
const newTask = {
...task,
position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
}
this.$store.dispatch('tasks/update', newTask)
.then(r => {
this.$set(this.tasks, e.newIndex, r)
})
.catch(e => {
this.$message.error(e)
})
}, },
}, },
} }