From 64a2daae25b15a4c36feec7278353355dfbd892e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Wed, 12 Sep 2018 22:34:59 +0200
Subject: [PATCH] Work on showing the tasks

---
 package-lock.json                          |  5 ++
 package.json                               |  3 +-
 src/app.vue                                |  2 +-
 src/components/TheCollections/Calendar.vue | 57 +++++++++++++++-------
 src/components/TheCollections/General.vue  |  6 +++
 src/components/TheDetails.vue              | 13 ++++-
 src/components/TheRouter.js                |  7 ++-
 src/components/TheSettings.vue             |  2 +-
 src/dummyCalendars.js                      | 12 +++++
 src/main.js                                |  3 ++
 src/store.js                               |  8 ++-
 11 files changed, 93 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bf8dbd53..be84e3a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12853,6 +12853,11 @@
 			"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
 			"integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
 		},
+		"vuex-router-sync": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz",
+			"integrity": "sha512-Mry2sO4kiAG64714X1CFpTA/shUH1DmkZ26DFDtwoM/yyx6OtMrc+MxrU+7vvbNLO9LSpgwkiJ8W+rlmRtsM+w=="
+		},
 		"w3c-hr-time": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
diff --git a/package.json b/package.json
index bad568f1..2c66fa2f 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
 		"v-tooltip": "2.0.0-rc.33",
 		"vue": "^2.5.17",
 		"vue-router": "3.0.1",
-		"vuex": "^3.0.1"
+		"vuex": "^3.0.1",
+		"vuex-router-sync": "^5.0.0"
 	},
 	"devDependencies": {
 		"@vue/test-utils": "^1.0.0-beta.24",
diff --git a/src/app.vue b/src/app.vue
index e210c183..c302a18b 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -121,7 +121,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</div>
 		</div>
 
-		<div id="app-sidebar">
+		<div id="app-sidebar" :class="{disappear: $route.params.taskId === undefined}">
 			<theDetails />
 		</div>
 	</div>
diff --git a/src/components/TheCollections/Calendar.vue b/src/components/TheCollections/Calendar.vue
index 8392160b..830ddfc9 100644
--- a/src/components/TheCollections/Calendar.vue
+++ b/src/components/TheCollections/Calendar.vue
@@ -21,8 +21,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div>
-		<div class="grouped-tasks"
-			ng-class="{'completed-hidden':!settingsmodel.getById('various').showHidden}">
+		<div :class="{'completed-hidden': showHidden}"
+			class="grouped-tasks">
 			<ol :calendarID="$route.params.calendarId"
 				class="tasks"
 				collectionID="uncompleted"
@@ -30,9 +30,11 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				dnd-list="draggedTasks"
 				dnd-drop="dropAsRootTask(event, item, index)"
 				dnd-dragover="dragover(event, index)">
-				<li v-for="task in tasks"
-					:taskID="task.uri"
+				<router-link v-for="task in tasks"
+					:task-id="task.uri"
 					:key="task.id"
+					:to="'/calendars/' + $route.params.calendarId + '/tasks/' + task.uri"
+					tag="li"
 					class="task-item ui-draggable handler"
 					ng-click="openDetails(task.uri,$event)"
 					ng-class="{done: task.completed}"
@@ -41,10 +43,10 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					dnd-dragend="dragEnd(event)">
 					<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
 					<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
-					<task />
-				</li>
+					<!-- <task /> -->
+				</router-link>
 			</ol>
-			<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" ng-click="toggleHidden()">
+			<h2 class="heading-hiddentasks icon-triangle-s handler" ng-show="getCount(route.calendarID,'completed')" @click="toggleHidden">
 				<!-- {{ getCountString(route.calendarID,'completed') }} -->
 			</h2>
 			<ol :calendarID="$route.params.calendarId"
@@ -54,9 +56,11 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				dnd-list="draggedTasks"
 				dnd-drop="dropAsRootTask(event, item, index)"
 				dnd-dragover="dragover(event, index)">
-				<li v-for="task in tasks"
-					:taskID="task.uri"
+				<router-link v-for="task in tasks"
+					:task-id="task.uri"
 					:key="task.id"
+					:to="'/calendars/' + $route.params.calendarId + '/tasks/' + task.uri"
+					tag="li"
 					class="task-item handler"
 					ng-click="openDetails(task.uri,$event)"
 					ng-class="{done: task.completed}"
@@ -65,8 +69,8 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					dnd-dragend="dragEnd(event)">
 					<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':true} | orderBy:'completed_date':true"> -->
 					<!-- dnd-effect-allowed="{{ allow(task) }}"> -->
-					<task />
-				</li>
+					<!-- <task /> -->
+				</router-link>
 			</ol>
 			<div class="loadmore handler" ng-hide="loadedCompleted(route.calendarID)">
 				<span ng-click="getCompletedTasks(route.calendarID)">{{ t('tasks', 'Load remaining completed tasks.') }}</span>
@@ -76,17 +80,36 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import Task from '../Task'
 
 export default {
 	components: {
 		'task': Task
 	},
-	computed: Object.assign({},
-		mapState({
-			tasks: state => state.tasks
-		})
-	)
+	props: {
+		calendarId: {
+			type: String,
+			default: ''
+		}
+	},
+	computed: Object.assign({
+		showHidden: {
+			get() {
+				return this.$store.state.settings.showHidden
+			},
+			set(value) {
+				this.$store.dispatch('setSetting', { type: 'showHidden', value: value })
+			}
+		} },
+	mapGetters({
+		tasks: 'getTasks'
+	})
+	),
+	methods: {
+		toggleHidden: function() {
+			this.showHidden = +!this.showHidden
+		}
+	}
 }
 </script>
diff --git a/src/components/TheCollections/General.vue b/src/components/TheCollections/General.vue
index 6a97a7c0..7298e238 100644
--- a/src/components/TheCollections/General.vue
+++ b/src/components/TheCollections/General.vue
@@ -66,6 +66,12 @@ export default {
 	components: {
 		'task-body': TaskBody
 	},
+	props: {
+		collectionId: {
+			type: String,
+			default: ''
+		}
+	},
 	computed: Object.assign({},
 		mapState({
 			calendars: state => state.calendars,
diff --git a/src/components/TheDetails.vue b/src/components/TheDetails.vue
index 9ae6833e..0742ae0c 100644
--- a/src/components/TheDetails.vue
+++ b/src/components/TheDetails.vue
@@ -243,7 +243,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					ng-show="task.calendar.writable">
 					<span class="icon icon-trash" />
 				</a>
-				<a class="handler right close-all reactive">
+				<a class="handler right close-all reactive" @click="closeDetails">
 					<span class="icon icon-hide" />
 				</a>
 			</div>
@@ -279,6 +279,15 @@ export default {
 		}
 	},
 	computed: mapState({
-	})
+	}),
+	methods: {
+		closeDetails: function() {
+			if (this.$route.params.calendarId) {
+				this.$router.push({ path: `/calendars/${this.$route.params.calendarId}` })
+			} else {
+				this.$router.push({ path: `/collections/${this.$route.params.collectionId}` })
+			}
+		}
+	}
 }
 </script>
diff --git a/src/components/TheRouter.js b/src/components/TheRouter.js
index 72af1ba6..cbd81494 100644
--- a/src/components/TheRouter.js
+++ b/src/components/TheRouter.js
@@ -35,8 +35,11 @@ const routes = [
 	// reliably with router-link due to
 	// https://github.com/vuejs/vue-router/issues/419
 	{ path: '/collections/week', component: CollectionWeek },
-	{ path: '/collections/:collectionId', component: CollectionGeneral },
-	{ path: '/calendars/:id', component: CollectionCalendar, props: true }
+	{ path: '/collections/week/tasks/:taskId', component: CollectionWeek },
+	{ path: '/collections/:collectionId', component: CollectionGeneral, props: true },
+	{ path: '/collections/:collectionId/tasks/:taskId', component: CollectionGeneral, props: true },
+	{ path: '/calendars/:calendarId', component: CollectionCalendar, props: true },
+	{ path: '/calendars/:calendarId/tasks/:taskId', component: CollectionCalendar, props: true }
 ]
 
 Vue.use(VueRouter)
diff --git a/src/components/TheSettings.vue b/src/components/TheSettings.vue
index c336cce3..ded0deb7 100644
--- a/src/components/TheSettings.vue
+++ b/src/components/TheSettings.vue
@@ -20,7 +20,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-	<div id="app-settings" ng-controller="SettingsController">
+	<div id="app-settings">
 		<div id="app-settings-header">
 			<button class="settings-button" data-apps-slide-toggle="#app-settings-content">
 				<span>{{ t('tasks', 'Settings') }}</span>
diff --git a/src/dummyCalendars.js b/src/dummyCalendars.js
index 57b01b16..5636661d 100644
--- a/src/dummyCalendars.js
+++ b/src/dummyCalendars.js
@@ -35,6 +35,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydf95848mn',
+					uri: 'ydf95848mn.ics',
 					due: '20180902T200933',
 					summary: 'Test 1 - Task 1',
 					complete: 1,
@@ -48,6 +49,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydf95748mn',
+					uri: 'ydf95748mn.ics',
 					due: '20180901T200926',
 					summary: 'Test 1 - Task 2',
 					complete: 3,
@@ -61,6 +63,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydf95849mn',
+					uri: 'ydf95849mn.ics',
 					due: '20170903T200916',
 					summary: 'Test 1 - Task 3',
 					complete: 6,
@@ -84,6 +87,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydf91848mn',
+					uri: 'ydf91848mn.ics',
 					due: '20180929T200912',
 					start: '20171003T100912',
 					summary: 'Test 2 - Task 1',
@@ -98,6 +102,7 @@ export default ({
 						writable: true
 					},
 					uid: 'yef91848mn',
+					uri: 'yef91848mn.ics',
 					due: '20181003T200912',
 					start: '20171003T200912',
 					summary: 'Test 2 - Task 2',
@@ -112,6 +117,7 @@ export default ({
 						writable: true
 					},
 					uid: 'yff91848mn',
+					uri: 'yff91848mn.ics',
 					due: '',
 					start: '',
 					summary: 'Test 2 - Task 3',
@@ -126,6 +132,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydg91848mn',
+					uri: 'ydg91848mn.ics',
 					due: '20180907T200912',
 					summary: 'Test 2 - Task 4',
 					complete: 6,
@@ -139,6 +146,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydh91848mn',
+					uri: 'ydh91848mn.ics',
 					summary: 'Test 2 - Task 5',
 					complete: 6,
 					completed: false,
@@ -161,6 +169,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydi92848mn',
+					uri: 'ydi92848mn.ics',
 					summary: 'Test 3 - Task 1',
 					complete: 1,
 					completed: false,
@@ -173,6 +182,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydj91848mn',
+					uri: 'ydj91848mn.ics',
 					summary: 'Test 3 - Task 2',
 					complete: 3,
 					completed: true,
@@ -185,6 +195,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydk91848mn',
+					uri: 'ydk91848mn.ics',
 					summary: 'Test 3 - Task 3',
 					complete: 6,
 					completed: false,
@@ -197,6 +208,7 @@ export default ({
 						writable: true
 					},
 					uid: 'ydl91848mn',
+					uri: 'ydl91848mn.ics',
 					summary: 'Test 3 - Task 4',
 					complete: 6,
 					completed: false,
diff --git a/src/main.js b/src/main.js
index 39eddaca..ba1ffff2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,8 +26,11 @@ import Vue from 'vue'
 
 import router from './components/TheRouter'
 import store from './store'
+import { sync } from 'vuex-router-sync'
 import VTooltip from 'v-tooltip'
 
+sync(store, router)
+
 Vue.use(VTooltip)
 
 if (!OCA.Tasks) {
diff --git a/src/store.js b/src/store.js
index 41d9cfc0..3c09c08b 100644
--- a/src/store.js
+++ b/src/store.js
@@ -31,7 +31,6 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
 	state: {
-		tasks: [],
 		collections: [
 		],
 		calendars: DummyCalendars.calendars,
@@ -87,6 +86,13 @@ export default new Vuex.Store({
 			return calendars.some(calendar => {
 				return (calendar.displayname === name && calendar.uri !== uri)
 			})
+		},
+
+		/**
+		 * Returns all tasks corresponding to current route value
+		 */
+		getTasks: state => {
+			return Object.values(state.calendars[state.route.params.calendarId].tasks)
 		}
 	},
 	mutations: {