Show namespace name in list search field

Resolves #169

src/components/tasks/partials/listSearch.vue

@@ -18,6 +18,10 @@
 		<template slot="clear" slot-scope="props">
 			<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
 		</template>
+		<template slot="option" slot-scope="props">
+			<span class="list-namespace-title">{{ namespace(props.option.namespaceId) }} ></span>
+			{{ props.option.title }}
+		</template>
 		<span slot="noResult">No list found. Consider changing the search query.</span>
 	</multiselect>
 </template>
@@ -64,6 +68,13 @@
 			select(list) {
 				this.$emit('selected', list)
 			},
+			namespace(namespaceId) {
+				const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
+				if (namespace !== null) {
+					return namespace.title
+				}
+				return 'Shared Lists'
+			},
 		},
 	}
 </script>

src/store/modules/namespaces.js

@@ -60,6 +60,14 @@ export default {
 			}
 			return null
 		},
+		getNamespaceById: state => namespaceId => {
+			for (const n in state.namespaces) {
+				if (state.namespaces[n].id === namespaceId) {
+					return state.namespaces[n]
+				}
+			}
+			return null
+		},
 	},
 	actions: {
 		loadNamespaces(ctx) {
@@ -77,7 +85,7 @@ export default {
 						})
 					})
 
-					ctx.commit('lists/addLists', lists, {root:true})
+					ctx.commit('lists/addLists', lists, {root: true})
 
 					return Promise.resolve()
 				})

src/styles/components/list.scss

@@ -142,3 +142,7 @@
     }
   }
 }
+
+.list-namespace-title {
+  color: $grey;
+}

src/views/tasks/TaskDetailView.vue

@@ -229,7 +229,7 @@
 						</h3>
 						<div class="field has-addons">
 							<div class="control is-expanded">
-								<list-search @selected="changeList"/>
+								<list-search @selected="changeList" ref="moveList"/>
 							</div>
 						</div>
 					</div>