1
0

feat: use async / await where it makes sense

This commit is contained in:
Dominik Pschenitschni
2021-10-11 19:37:20 +02:00
parent a776e1d2f3
commit bb94c1ba3a
74 changed files with 1458 additions and 1662 deletions

View File

@ -54,7 +54,7 @@ export default {
this.setTitle(this.$t('list.create.header'))
},
methods: {
newList() {
async newList() {
if (this.list.title === '') {
this.showError = true
return
@ -62,15 +62,12 @@ export default {
this.showError = false
this.list.namespaceId = parseInt(this.$route.params.id)
this.$store
.dispatch('lists/createList', this.list)
.then((r) => {
this.$message.success({message: this.$t('list.create.createdSuccess') })
this.$router.push({
name: 'list.index',
params: { listId: r.id },
})
})
const list = await this.$store.dispatch('lists/createList', this.list)
this.$message.success({message: this.$t('list.create.createdSuccess') })
this.$router.push({
name: 'list.index',
params: { listId: list.id },
})
},
},
}

View File

@ -83,7 +83,8 @@ export default {
this.$router.replace({name: savedListView, params: {id: this.$route.params.listId}})
console.debug('Replaced list view with', savedListView)
},
loadList() {
async loadList() {
if (this.$route.name.includes('.settings.')) {
return
}
@ -139,14 +140,13 @@ export default {
// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
const list = new ListModel(listData)
this.listService.get(list)
.then(r => {
this.$store.dispatch(CURRENT_LIST, r)
this.setTitle(this.getListTitle(r))
})
.finally(() => {
this.listLoaded = this.$route.params.listId
})
try {
const loadedList = await this.listService.get(list)
this.$store.commit(CURRENT_LIST, loadedList)
this.setTitle(this.getListTitle(loadedList))
} finally {
this.listLoaded = this.$route.params.listId
}
},
},
}

View File

@ -30,21 +30,20 @@ export default {
},
},
methods: {
archiveList() {
async archiveList() {
const newList = {
...this.list,
isArchived: !this.list.isArchived,
}
this.listService.update(newList)
.then(r => {
this.$store.commit('currentList', r)
this.$store.commit('namespaces/setListInNamespaceById', r)
this.$message.success({message: this.$t('list.archive.success')})
})
.finally(() => {
this.$router.back()
})
try {
const list = await this.listService.update(newList)
this.$store.commit('currentList', list)
this.$store.commit('namespaces/setListInNamespaceById', list)
this.$message.success({message: this.$t('list.archive.success')})
} finally {
this.$router.back()
}
},
},
}

View File

@ -71,6 +71,10 @@ import ListService from '@/services/list'
import {CURRENT_LIST} from '@/store/mutation-types'
import CreateEdit from '@/components/misc/create-edit.vue'
function timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
export default {
name: 'list-setting-background',
components: {CreateEdit},
@ -108,61 +112,53 @@ export default {
this.backgroundThumbs = {}
this.searchBackgrounds()
},
searchBackgrounds(page = 1) {
async searchBackgrounds(page = 1) {
if (this.backgroundSearchTimeout !== null) {
clearTimeout(this.backgroundSearchTimeout)
}
// We're using the timeout to not search on every keypress but with a 300ms delay.
// TODO: use throttle
// FIXME: We're using the timeout to not search on every keypress but with a 300ms delay.
// If another key is pressed within these 300ms, the last search request is dropped and a new one is scheduled.
this.backgroundSearchTimeout = setTimeout(() => {
this.currentPage = page
this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
.then(r => {
this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
r.forEach(b => {
this.backgroundService.thumb(b)
.then(t => {
this.backgroundThumbs[b.id] = t
})
})
})
}, 300)
this.backgroundSearchTimeout = await timeout(300)
this.currentPage = page
const r = await this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
r.forEach(async b => {
this.backgroundThumbs[b.id] = await this.backgroundService.thumb(b)
})
},
setBackground(backgroundId) {
async setBackground(backgroundId) {
// Don't set a background if we're in the process of setting one
if (this.backgroundService.loading) {
return
}
this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
.then(l => {
this.$store.commit(CURRENT_LIST, l)
this.$store.commit('namespaces/setListInNamespaceById', l)
this.$message.success({message: this.$t('list.background.success')})
})
const list = await this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
this.$store.commit(CURRENT_LIST, list)
this.$store.commit('namespaces/setListInNamespaceById', list)
this.$message.success({message: this.$t('list.background.success')})
},
uploadBackground() {
async uploadBackground() {
if (this.$refs.backgroundUploadInput.files.length === 0) {
return
}
this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
.then(l => {
this.$store.commit(CURRENT_LIST, l)
this.$store.commit('namespaces/setListInNamespaceById', l)
this.$message.success({message: this.$t('list.background.success')})
})
const list = await this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
this.$store.commit(CURRENT_LIST, list)
this.$store.commit('namespaces/setListInNamespaceById', list)
this.$message.success({message: this.$t('list.background.success')})
},
removeBackground() {
this.listService.removeBackground(this.currentList)
.then(l => {
this.$store.commit(CURRENT_LIST, l)
this.$store.commit('namespaces/setListInNamespaceById', l)
this.$message.success({message: this.$t('list.background.removeSuccess')})
this.$router.back()
})
async removeBackground() {
const list = await this.listService.removeBackground(this.currentList)
this.$store.commit(CURRENT_LIST, list)
this.$store.commit('namespaces/setListInNamespaceById', list)
this.$message.success({message: this.$t('list.background.removeSuccess')})
this.$router.back()
},
},
}

View File

@ -24,12 +24,10 @@ export default {
},
},
methods: {
deleteList() {
this.$store.dispatch('lists/deleteList', this.list)
.then(() => {
this.$message.success({message: this.$t('list.delete.success')})
this.$router.push({name: 'home'})
})
async deleteList() {
await this.$store.dispatch('lists/deleteList', this.list)
this.$message.success({message: this.$t('list.delete.success')})
this.$router.push({name: 'home'})
},
},
}

View File

@ -38,18 +38,17 @@ export default {
selectNamespace(namespace) {
this.selectedNamespace = namespace
},
duplicateList() {
async duplicateList() {
const listDuplicate = new ListDuplicateModel({
listId: this.$route.params.listId,
namespaceId: this.selectedNamespace.id,
})
this.listDuplicateService.create(listDuplicate)
.then(r => {
this.$store.commit('namespaces/addListToNamespace', r.list)
this.$store.commit('lists/setList', r.list)
this.$message.success({message: this.$t('list.duplicate.success')})
this.$router.push({name: 'list.index', params: {listId: r.list.id}})
})
const duplicate = await this.listDuplicateService.create(listDuplicate)
this.$store.commit('namespaces/addListToNamespace', duplicate.list)
this.$store.commit('lists/setList', duplicate.list)
this.$message.success({message: this.$t('list.duplicate.success')})
this.$router.push({name: 'list.index', params: {listId: duplicate.list.id}})
},
},
}

View File

@ -94,22 +94,19 @@ export default {
},
},
methods: {
loadList() {
async loadList() {
const list = new ListModel({id: this.$route.params.listId})
this.listService.get(list)
.then(r => {
this.list = { ...r }
})
const loadedList = await this.listService.get(list)
this.list = { ...loadedList }
},
save() {
this.$store.dispatch('lists/updateList', this.list)
.then(() => {
this.$store.commit(CURRENT_LIST, this.list)
this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
this.$message.success({message: this.$t('list.edit.success')})
this.$router.back()
})
async save() {
await this.$store.dispatch('lists/updateList', this.list)
this.$store.commit(CURRENT_LIST, this.list)
this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
this.$message.success({message: this.$t('list.edit.success')})
this.$router.back()
},
},
}

View File

@ -56,18 +56,15 @@ export default {
this.loadList()
},
methods: {
loadList() {
async loadList() {
const list = new ListModel({id: this.$route.params.listId})
this.listService.get(list)
.then(r => {
this.list = r
this.$store.commit(CURRENT_LIST, r)
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this.manageTeamsComponent = 'userTeam'
this.manageUsersComponent = 'userTeam'
this.setTitle(this.$t('list.share.title', {list: this.list.title}))
})
this.list = await this.listService.get(list)
this.$store.commit(CURRENT_LIST, this.list)
// This will trigger the dynamic loading of components once we actually have all the data to pass to them
this.manageTeamsComponent = 'userTeam'
this.manageUsersComponent = 'userTeam'
this.setTitle(this.$t('list.share.title', {list: this.list.title}))
},
},
}

View File

@ -408,7 +408,7 @@ export default {
this.$store.dispatch('kanban/updateBucket', newBucket)
},
updateTaskPosition(e) {
async updateTaskPosition(e) {
this.drag = false
// While we could just pass the bucket index in through the function call, this would not give us the
@ -427,34 +427,35 @@ export default {
kanbanPosition: calculateItemPosition(taskBefore !== null ? taskBefore.kanbanPosition : null, taskAfter !== null ? taskAfter.kanbanPosition : null),
}
this.$store.dispatch('tasks/update', newTask)
// .finally(() => {
this.taskUpdating[task.id] = false
this.oneTaskUpdating = false
// })
try {
await this.$store.dispatch('tasks/update', newTask)
} finally {
this.taskUpdating[task.id] = false
this.oneTaskUpdating = false
}
},
toggleShowNewTaskInput(bucketId) {
this.showNewTaskInput[bucketId] = !this.showNewTaskInput[bucketId]
},
addTaskToBucket(bucketId) {
async addTaskToBucket(bucketId) {
if (this.newTaskText === '') {
this.newTaskError[bucketId] = true
return
}
this.newTaskError[bucketId] = false
this.$store.dispatch('tasks/createNewTask', {
const task = await this.$store.dispatch('tasks/createNewTask', {
title: this.newTaskText,
bucketId,
listId: this.$route.params.listId,
})
.then(r => {
this.newTaskText = ''
this.$store.commit('kanban/addTaskToBucket', r)
this.scrollTaskContainerToBottom(bucketId)
})
this.newTaskText = ''
this.$store.commit('kanban/addTaskToBucket', task)
this.scrollTaskContainerToBottom(bucketId)
},
scrollTaskContainerToBottom(bucketId) {
const bucketEl = this.taskContainerRefs[bucketId]
if (!bucketEl) {
@ -462,7 +463,8 @@ export default {
}
bucketEl.scrollTop = bucketEl.scrollHeight
},
createNewBucket() {
async createNewBucket() {
if (this.newBucketTitle === '') {
return
}
@ -472,12 +474,11 @@ export default {
listId: parseInt(this.$route.params.listId),
})
this.$store.dispatch('kanban/createBucket', newBucket)
.then(() => {
this.newBucketTitle = ''
this.showNewBucketInput = false
})
await this.$store.dispatch('kanban/createBucket', newBucket)
this.newBucketTitle = ''
this.showNewBucketInput = false
},
deleteBucketModal(bucketId) {
if (this.buckets.length <= 1) {
return
@ -486,33 +487,39 @@ export default {
this.bucketToDelete = bucketId
this.showBucketDeleteModal = true
},
deleteBucket() {
this.$store.dispatch('kanban/deleteBucket', {bucket: {
async deleteBucket() {
const bucket = new BucketModel({
id: this.bucketToDelete,
listId: parseInt(this.$route.params.listId),
}, params: this.params})
.then(() => this.$message.success({message: this.$t('list.kanban.deleteBucketSuccess')}))
.finally(() => {
this.showBucketDeleteModal = false
})
try {
await this.$store.dispatch('kanban/deleteBucket', {
bucket,
params: this.params,
})
this.$message.success({message: this.$t('list.kanban.deleteBucketSuccess')})
} finally {
this.showBucketDeleteModal = false
}
},
focusBucketTitle(e) {
// This little helper allows us to drag a bucket around at the title without focusing on it right away.
this.bucketTitleEditable = true
this.$nextTick(() => e.target.focus())
},
saveBucketTitle(bucketId, bucketTitle) {
async saveBucketTitle(bucketId, bucketTitle) {
const updatedBucketData = {
id: bucketId,
title: bucketTitle,
}
this.$store.dispatch('kanban/updateBucketTitle', updatedBucketData)
.then(() => {
this.bucketTitleEditable = false
this.$message.success({message: this.$t('list.kanban.bucketTitleSavedSuccess')})
})
await this.$store.dispatch('kanban/updateBucketTitle', updatedBucketData)
this.bucketTitleEditable = false
this.$message.success({message: this.$t('list.kanban.bucketTitleSavedSuccess')})
},
updateBuckets(value) {
@ -535,7 +542,8 @@ export default {
this.$store.dispatch('kanban/updateBucket', updatedData)
},
setBucketLimit(bucketId, limit) {
async setBucketLimit(bucketId, limit) {
if (limit < 0) {
return
}
@ -545,27 +553,30 @@ export default {
limit,
}
this.$store.dispatch('kanban/updateBucket', newBucket)
.then(() => this.$message.success({message: this.$t('list.kanban.bucketLimitSavedSuccess')}))
await this.$store.dispatch('kanban/updateBucket', newBucket)
this.$message.success({message: this.$t('list.kanban.bucketLimitSavedSuccess')})
},
shouldAcceptDrop(bucket) {
return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
},
dragstart(bucket) {
this.drag = true
this.sourceBucket = bucket.id
},
toggleDoneBucket(bucket) {
async toggleDoneBucket(bucket) {
const newBucket = {
...bucket,
isDoneBucket: !bucket.isDoneBucket,
}
this.$store.dispatch('kanban/updateBucket', newBucket)
.then(() => this.$message.success({message: this.$t('list.kanban.doneBucketSavedSuccess')}))
await this.$store.dispatch('kanban/updateBucket', newBucket)
this.$message.success({message: this.$t('list.kanban.doneBucketSavedSuccess')})
},
collapseBucket(bucket) {
this.collapsedBuckets[bucket.id] = true
saveCollapsedBucketState(this.$route.params.listId, this.collapsedBuckets)

View File

@ -291,7 +291,8 @@ export default {
}
sortTasks(this.tasks)
},
saveTaskPosition(e) {
async saveTaskPosition(e) {
this.drag = false
const task = this.tasks[e.newIndex]
@ -303,10 +304,8 @@ export default {
position: calculateItemPosition(taskBefore !== null ? taskBefore.position : null, taskAfter !== null ? taskAfter.position : null),
}
this.$store.dispatch('tasks/update', newTask)
.then(r => {
this.tasks[e.newIndex] = r
})
const updatedTask = await this.$store.dispatch('tasks/update', newTask)
this.tasks[e.newIndex] = updatedTask
},
},
}