Dominik Pschenitschni
8b9557026d
The order of the list was originally updated by a sideeffect of the v-model. Since the data is mapped from the store this created a vuex mutation violation (data was edited by the v-model instead of a vuex mutation). In order to fix this I did the following: - create a computed for the filteredList -> No need to combine v-for and v-if for the list items - use value and @input instead of v-model for the draggable - create a new updateFilteredLists method that replaces the namespace with the old list with a one that includes a fresh list with the new order. - the list service returned the same model again. I got there some mutation problems aswell, so I return now a new model. vuex lists module - the toggleListFavorite action mutated the original list (by setting list.isFavorite). now it creates a new one to update it in the mutation instead. - something similar for the updateList action vuex namespaces module The old setNamespaceById used "for ... in" to iterate and get the list index. this is wrong! See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#array_iteration_and_for...in Quote: "Note: for...in should not be used to iterate over an Array where the index order is important." instead I find the index now with `Array.findIndex`. I also removed the line `namespace.lists = state.namespaces[n].lists` The reason was that the new namespace included the new ordered lists, so by overwriting it with the old one the modification wouldn't be saved. I hope this doesn't leave to errors somewhere else.
79 lines
1.6 KiB
JavaScript
79 lines
1.6 KiB
JavaScript
import AbstractService from './abstractService'
|
|
import ListModel from '../models/list'
|
|
import TaskService from './task'
|
|
import {formatISO} from 'date-fns'
|
|
import {colorFromHex} from '@/helpers/color/colorFromHex'
|
|
|
|
export default class ListService extends AbstractService {
|
|
constructor() {
|
|
super({
|
|
create: '/namespaces/{namespaceId}/lists',
|
|
get: '/lists/{id}',
|
|
getAll: '/lists',
|
|
update: '/lists/{id}',
|
|
delete: '/lists/{id}',
|
|
})
|
|
}
|
|
|
|
processModel(model) {
|
|
model.created = formatISO(new Date(model.created))
|
|
model.updated = formatISO(new Date(model.updated))
|
|
return model
|
|
}
|
|
|
|
modelFactory(data) {
|
|
return new ListModel(data)
|
|
}
|
|
|
|
beforeUpdate(model) {
|
|
let taskService = new TaskService()
|
|
model.tasks = model.tasks.map(task => {
|
|
return taskService.beforeUpdate(task)
|
|
})
|
|
model.hexColor = colorFromHex(model.hexColor)
|
|
return model
|
|
}
|
|
|
|
beforeCreate(list) {
|
|
list.hexColor = colorFromHex(list.hexColor)
|
|
return list
|
|
}
|
|
|
|
update(model) {
|
|
const newModel = { ... model }
|
|
return super.update(newModel)
|
|
}
|
|
|
|
background(list) {
|
|
if (list.background === null) {
|
|
return Promise.resolve('')
|
|
}
|
|
|
|
return this.http({
|
|
url: `/lists/${list.id}/background`,
|
|
method: 'GET',
|
|
responseType: 'blob',
|
|
})
|
|
.then(response => {
|
|
return window.URL.createObjectURL(new Blob([response.data]))
|
|
})
|
|
.catch(e => {
|
|
return e
|
|
})
|
|
}
|
|
|
|
removeBackground(list) {
|
|
const cancel = this.setLoading()
|
|
|
|
return this.http.delete(`/lists/${list.id}/background`, list)
|
|
.then(response => {
|
|
return Promise.resolve(response.data)
|
|
})
|
|
.catch(error => {
|
|
return this.errorHandler(error)
|
|
})
|
|
.finally(() => {
|
|
cancel()
|
|
})
|
|
}
|
|
} |