src/components/lists/views/Kanban.vue

@@ -198,6 +198,7 @@
 
 	import {filterObject} from '../../../helpers/filterObject'
 	import {applyDrag} from '../../../helpers/applyDrag'
+	import {mapState} from 'vuex'
 
 	export default {
 		name: 'Kanban',
@@ -211,7 +212,6 @@
 		data() {
 			return {
 				bucketService: BucketService,
-				buckets: [],
 				taskService: TaskService,
 
 				dropPlaceholderOptions: {
@@ -240,12 +240,12 @@
 			this.loadBuckets()
 			setTimeout(() => document.addEventListener('click', this.closeBucketDropdowns), 0)
 		},
+		computed: mapState({
+			buckets: state => state.kanban.buckets,
+		}),
 		methods: {
 			loadBuckets() {
-				this.bucketService.getAll({listId: this.$route.params.listId})
-					.then(r => {
-						this.buckets = r
-					})
+				this.$store.dispatch('kanban/loadBucketsForList', this.$route.params.listId)
 					.catch(e => {
 						this.error(e, this)
 					})
@@ -271,7 +271,7 @@
 					delete buckets[bucketIndex]
 					buckets[bucketIndex] = bucket
 					// Set the buckets, triggering a state update in vue
-					this.buckets = buckets
+					this.$store.commit('kanban/setBuckets', buckets)
 				}
 
 				if (dropResult.addedIndex !== null) {
@@ -297,10 +297,10 @@
 
 					task.bucketId = bucketId
 
-					this.taskService.update(task)
-						.then(t => {
+					this.$store.dispatch('tasks/update', task)
+						.then(() => {
 							// Update the block with the new task details
-							this.$set(this.buckets[bucketIndex].tasks, taskIndex, t)
+							// this.$store.commit('kanban/setTaskInBucketByIndex', {bucketIndex, taskIndex, task: t})
 							this.success({message: 'The task was moved successfully!'}, this)
 						})
 						.catch(e => {
@@ -317,14 +317,6 @@
 					return bucket.tasks[index]
 				}
 			},
-			getBlockFromTask(task) {
-				return {
-					id: task.id,
-					status: 'bucket' + task.bucketId,
-					// We're putting the task in an extra property so we won't have to maintin this whole thing because of basically recreating the task model.
-					task: task,
-				}
-			},
 			toggleShowNewTaskInput(bucket) {
 				this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
 			},
@@ -360,7 +352,7 @@
 				this.taskService.create(task)
 					.then(r => {
 						this.newTaskText = ''
-						this.buckets[bi].tasks.push(r)
+						this.$store.commit('kanban/addTaskToBucket', r)
 						this.success({message: 'The task was created successfully!'}, this)
 					})
 					.catch(e => {
@@ -374,15 +366,10 @@
 
 				const newBucket = new BucketModel({title: this.newBucketTitle, listId: parseInt(this.$route.params.listId)})
 
-				this.bucketService.create(newBucket)
-					.then(r => {
+				this.$store.dispatch('kanban/createBucket', newBucket)
+					.then(() => {
 						this.newBucketTitle = ''
 						this.showNewBucketInput = false
-						if (Array.isArray(this.buckets)) {
-							this.buckets.push(r)
-						} else {
-							this.buckets[r.id] = r
-						}
 						this.success({message: 'The bucket was created successfully!'}, this)
 					})
 					.catch(e => {
@@ -402,9 +389,9 @@
 					id: this.bucketToDelete,
 					listId: this.$route.params.listId,
 				})
-				this.bucketService.delete(bucket)
+
+				this.$store.dispatch('kanban/deleteBucket', bucket)
 					.then(r => {
-						this.loadBuckets()
 						this.success(r, this)
 					})
 					.catch(e => {
@@ -430,7 +417,7 @@
 					return
 				}
 
-				this.bucketService.update(bucket)
+				this.$store.dispatch('kanban/updateBucket', bucket)
 					.then(r => {
 						this.success({message: 'The bucket title was updated successfully!'}, this)
 						realBucket.title = r.title

src/store/index.js

@@ -5,6 +5,8 @@ Vue.use(Vuex)
 import config from './modules/config'
 import auth from './modules/auth'
 import namespaces from './modules/namespaces'
+import kanban from './modules/kanban'
+import tasks from './modules/tasks'
 import {CURRENT_LIST, ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
 
 export const store = new Vuex.Store({
@@ -12,6 +14,8 @@ export const store = new Vuex.Store({
 		config,
 		auth,
 		namespaces,
+		kanban,
+		tasks,
 	},
 	state: {
 		loading: false,

src/store/modules/kanban.js

@@ -0,0 +1,121 @@
+import Vue from 'vue'
+
+import BucketService from '../../services/bucket'
+import {filterObject} from '../../helpers/filterObject'
+
+/**
+ * This store is intended to hold the currently active kanban view.
+ * It should hold only the current buckets.
+ */
+export default {
+	namespaced: true,
+	state: () => ({
+		buckets: [],
+	}),
+	mutations: {
+		setBuckets(state, buckets) {
+			state.buckets = buckets
+		},
+		addBucket(state, bucket) {
+			state.buckets.push(bucket)
+		},
+		removeBucket(state, bucket) {
+			for(const b in state.buckets) {
+				if (state.buckets[b].id === bucket.id) {
+					state.buckets.splice(b, 1)
+				}
+			}
+		},
+		setBucketById(state, bucket) {
+			for (const b in state.buckets) {
+				if (state.buckets[b].id === bucket.id) {
+					Vue.set(state.buckets, b, bucket)
+					return
+				}
+			}
+		},
+		setBucketByIndex(state, {bucketIndex, bucket}) {
+			Vue.set(state.buckets, bucketIndex, bucket)
+		},
+		setTaskInBucketByIndex(state, {bucketIndex, taskIndex, task}) {
+			const bucket = state.buckets[bucketIndex]
+			bucket.tasks[taskIndex] = task
+			Vue.set(state.buckets, bucketIndex, bucket)
+		},
+		setTaskInBucket(state, task) {
+			// If this gets invoked without any tasks actually loaded, we can save the hassle of finding the task
+			if (state.buckets.length === 0) {
+				return
+			}
+
+			for(const b in state.buckets) {
+				if(state.buckets[b].id === task.bucketId) {
+					for(const t in state.buckets[b].tasks) {
+						if (state.buckets[b].tasks[t].id === task.id) {
+							const bucket = state.buckets[b]
+							bucket.tasks[t] = task
+							Vue.set(state.buckets, b, bucket)
+							return
+						}
+					}
+					return
+				}
+			}
+		},
+		addTaskToBucket(state, task) {
+			const bi = filterObject(state.buckets, b => b.id === task.bucketId)
+			state.buckets[bi].tasks.push(task)
+		},
+	},
+	actions: {
+		loadBucketsForList(ctx, listId) {
+			const bucketService = new BucketService()
+			return bucketService.getAll({listId: listId})
+				.then(r => {
+					ctx.commit('setBuckets', r)
+					return Promise.resolve()
+				})
+				.catch(e => {
+					return Promise.reject(e)
+				})
+		},
+		createBucket(ctx, bucket) {
+			const bucketService = new BucketService()
+			return bucketService.create(bucket)
+				.then(r => {
+					ctx.commit('addBucket', r)
+					return Promise.resolve(r)
+				})
+				.catch(e => {
+					return Promise.reject(e)
+				})
+		},
+		deleteBucket(ctx, bucket) {
+			const bucketService = new BucketService()
+			return bucketService.delete(bucket)
+				.then(r => {
+					ctx.commit('removeBucket', bucket)
+					// We reload all buckets because tasks are being moved from the deleted bucket
+					ctx.dispatch('loadBucketsForList', bucket.listId)
+					return Promise.resolve(r)
+				})
+				.catch(e => {
+					return Promise.reject(e)
+				})
+		},
+		updateBucket(ctx, bucket) {
+			const bucketService = new BucketService()
+			return bucketService.update(bucket)
+				.then(r => {
+					const bi = filterObject(ctx.state.buckets, b => b.id === r.id)
+					const bucket = r
+					bucket.tasks = ctx.state.buckets[bi].tasks
+					ctx.commit('setBucketByIndex', {bucketIndex: bi, bucket})
+					return Promise.resolve(r)
+				})
+				.catch(e => {
+					return Promise.reject(e)
+				})
+		},
+	},
+}