Add list title in overview page

src/components/tasks/ShowTasks.vue

@@ -9,7 +9,7 @@
 		<div class="spinner" :class="{ 'is-loading': taskService.loading}"></div>
 		<div class="tasks" v-if="tasks && tasks.length > 0">
 			<div class="task" v-for="t in tasks" :key="t.id">
-				<single-task-in-list :the-task="t" @taskUpdated="updateTasks"/>
+				<single-task-in-list :the-task="t" @taskUpdated="updateTasks" :show-list="true"/>
 			</div>
 		</div>
 	</div>

src/components/tasks/reusable/relatedTasks.vue

@@ -51,7 +51,7 @@
 						<router-link :to="{ name: $route.name, params: { id: t.id } }">
 							<span class="tasktext" :class="{ 'done': t.done}">
 								<span v-if="t.listId !== listId" class="different-list" v-tooltip="'This task belongs to a different list.'">
-									{{ $store.getters['namespaces/getListById'](t.listId) === null ? '' : $store.getters['namespaces/getListById'](t.listId).title }} >
+									{{ $store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title }} >
 								</span>
 								{{t.text}}
 							</span>

src/components/tasks/reusable/singleTaskInList.vue

@@ -2,6 +2,15 @@
 	<span>
 		<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived"/>
 		<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }" class="tasktext"  :class="{ 'done': task.done}">
+
+			<router-link
+					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
+					v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
+					:to="{ name: 'list.list', params: { listId: task.listId } }"
+					class="task-list">
+				{{ $store.getters['lists/getListById'](task.listId).title }}
+			</router-link>
+
 			<!-- Show any parent tasks to make it clear this task is a sub task of something -->
 			<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
 				<template v-for="(pt, i) in task.relatedTasks.parenttask">
@@ -61,7 +70,11 @@
 			taskDetailRoute: {
 				type: String,
 				default: 'task.list.detail'
-			}
+			},
+			showList: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		watch: {
 			theTask(newVal) {

src/store/index.js

@@ -2,12 +2,13 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 
+import {CURRENT_LIST, ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
 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'
+import lists from './modules/lists'
 
 export const store = new Vuex.Store({
 	modules: {
@@ -16,6 +17,7 @@ export const store = new Vuex.Store({
 		namespaces,
 		kanban,
 		tasks,
+		lists,
 	},
 	state: {
 		loading: false,

src/store/modules/lists.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+
+export default {
+	namespaced: true,
+	// The state is an object which has the list ids as keys.
+	state: () => ({}),
+	mutations: {
+		addList(state, list) {
+			Vue.set(state, list.id, list)
+		},
+		addLists(state, lists) {
+			lists.forEach(l => {
+				Vue.set(state, l.id, l)
+			})
+		},
+	},
+	getters: {
+		getListById: state => id => {
+			if(typeof state[id] !== 'undefined') {
+				return state[id]
+			}
+			return null
+		},
+	},
+}

src/store/modules/namespaces.js

@@ -47,16 +47,6 @@ export default {
 		},
 	},
 	getters: {
-		getListById: state => id => {
-			for (const n in state.namespaces) {
-				for (const l in state.namespaces[n].lists) {
-					if (state.namespaces[n].lists[l].id === id) {
-						return state.namespaces[n].lists[l]
-					}
-				}
-			}
-			return null
-		},
 		getListAndNamespaceById: state => listId => {
 			for (const n in state.namespaces) {
 				for (const l in state.namespaces[n].lists) {
@@ -78,6 +68,17 @@ export default {
 			return namespaceService.getAll({}, {is_archived: true})
 				.then(r => {
 					ctx.commit('namespaces', r)
+
+					// Put all lists in the list state
+					const lists = []
+					r.forEach(n => {
+						n.lists.forEach(l => {
+							lists.push(l)
+						})
+					})
+
+					ctx.commit('lists/addLists', lists, {root:true})
+
 					return Promise.resolve()
 				})
 				.catch(e => {

src/styles/components/tasks.scss

@@ -54,6 +54,13 @@
         .overdue{
           color: $red;
         }
+
+        .task-list {
+          width: auto;
+          color: lighten($grey, 25%);
+          font-size: .9em;
+          vertical-align: text-bottom;
+        }
       }
 
       .tag {