Use named views for details, get task by route

src/app.vue

@@ -33,7 +33,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		</div>
 
 		<div id="app-sidebar" :class="{disappear: $route.params.taskId === undefined}">
-			<theDetails />
+			<router-view name="details" />
 		</div>
 	</div>
 </template>
@@ -41,14 +41,12 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import TheList from './components/TheList'
 import TheSettings from './components/TheSettings'
-import TheDetails from './components/TheDetails'
 
 export default {
 	name: 'App',
 	components: {
 		'theSettings': TheSettings,
-		'theList': TheList,
-		'theDetails': TheDetails
+		'theList': TheList
 	}
 }
 </script>

src/components/TheDetails.vue

@@ -22,8 +22,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 <template>
 	<div ng-click="endEdit($event)"
 		class="content-wrapper">
-		<div class="flex-container"
-			ng-show="TaskState()=='found'"
+		<div v-if="task!=undefined"
+			class="flex-container"
 			ng-class="{'disabled': !task.calendar.writable}">
 			<div class="title" ng-class="{'editing':route.parameter=='name'}">
 				<a :aria-checked="task.completed"
@@ -40,8 +40,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				<div :class="{'strike-through':task.completed}"
 					class="title-text"
 					ng-click="editName($event, task)"
-					oc-click-focus="{selector: '#editName', timeout: 0}"
-					ng-bind-html="task.summary | linky:'_blank':{rel: 'nofollow'}" />
+					oc-click-focus="{selector: '#editName', timeout: 0}">
+					{{ task.summary }}
+				</div>
 				<div class="expandable-container">
 					<div class="expandingArea active">
 						<pre><span>{{ task.summary }}</span><br></pre>
@@ -251,35 +252,29 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<!-- <div ng-show="TaskState()=='loading'" class="notice">
 			<span>{{ t('tasks', 'Loading the task...') }}</span>
 			<div class="loading" style="height: 50px;"></div>
-		</div>
-		<div ng-show="TaskState()==null" class="notice">
-			<span>{{ t('tasks', 'Task not found!') }}</span>
 		</div> -->
+		<div v-else class="notice">
+			<span>{{ t('tasks', 'Task not found!') }}</span>
+		</div>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 
 export default {
 	components: {
 	},
 	data: function() {
-		return {
-			task: {
-				calendar: {
-					writable: true
-				},
-				complete: 4,
-				completed: false,
-				priority: 5,
-				cats: [],
-				note: 'Migrate this app to vue.'
-			}
-		}
+		return {}
 	},
-	computed: mapState({
-	}),
+	computed: Object.assign(
+		mapState({
+		}),
+		mapGetters({
+			task: 'getTaskByRoute'
+		})
+	),
 	methods: {
 		closeDetails: function() {
 			if (this.$route.params.calendarId) {

src/components/TheRouter.js

@@ -25,6 +25,7 @@ import VueRouter from 'vue-router'
 import CollectionGeneral from './TheCollections/General'
 import CollectionWeek from './TheCollections/Week'
 import CollectionCalendar from './TheCollections/Calendar'
+import TheDetails from './TheDetails'
 
 const routes = [
 	// using
@@ -35,11 +36,11 @@ const routes = [
 	// reliably with router-link due to
 	// https://github.com/vuejs/vue-router/issues/419
 	{ path: '/collections/week', component: CollectionWeek },
-	{ path: '/collections/week/tasks/:taskId', component: CollectionWeek },
+	{ path: '/collections/week/tasks/:taskId', components: { default: CollectionWeek, details: TheDetails } },
 	{ path: '/collections/:collectionId', component: CollectionGeneral, props: true },
-	{ path: '/collections/:collectionId/tasks/:taskId', component: CollectionGeneral, props: true },
+	{ path: '/collections/:collectionId/tasks/:taskId', components: { default: CollectionGeneral, details: TheDetails }, props: { default: true } },
 	{ path: '/calendars/:calendarId', component: CollectionCalendar, props: true },
-	{ path: '/calendars/:calendarId/tasks/:taskId', component: CollectionCalendar, props: true }
+	{ path: '/calendars/:calendarId/tasks/:taskId', components: { default: CollectionCalendar, details: TheDetails }, props: { default: true } }
 ]
 
 Vue.use(VueRouter)

src/store.js

@@ -149,6 +149,26 @@ export default new Vuex.Store({
 			return tasks
 		},
 
+		/**
+		 * Returns the task currently opened by route
+		 */
+		getTaskByRoute: (state) => {
+			// If a calendar is given, only search in that calendar.
+			if (state.route.params.calendarId) {
+				return state.calendars[state.route.params.calendarId].tasks.find(task => {
+					return task.uri === state.route.params.taskId
+				})
+			}
+			// Else, we have to search all calendars
+			var task
+			for (let calendar of Object.values(state.calendars)) {
+				task = calendar.tasks.find(task => {
+					return task.uri === state.route.params.taskId
+				})
+				if (task) return task
+			}
+		},
+
 		/**
 		 * Returns the current calendar
 		 */