Further refactored list page

src/components/lists/ShowList.vue

@@ -6,22 +6,24 @@
 			</router-link>
 			<h1>{{ list.title }}</h1>
 			<div class="switch-view">
-				<router-link :to="{ name: 'showList', params: { id: list.id} }" class="is-active">List</router-link>
-				<router-link :to="{ name: 'listGantt', params: { id: list.id} }">Gantt</router-link>
+				<router-link :to="{ name: 'showList', params: { id: list.id } }" :class="{'is-active': $route.params.type !== 'gantt'}">List</router-link>
+				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'gantt' } }" :class="{'is-active': $route.params.type === 'gantt'}">Gantt</router-link>
 			</div>
 		</div>
 
-		<show-list-task
-				:the-list="list"
-		/>
+		<gantt :tasks="list.tasks" v-if="$route.params.type === 'gantt'"/>
+		<show-list-task :the-list="list" v-else/>
 	</div>
 </template>
 
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import ShowListTask from '../tasks/ShowListTasks'
 	import message from '../../message'
+
+	import ShowListTask from '../tasks/ShowListTasks'
+	import Gantt from '../tasks/Gantt'
+
 	import ListModel from '../../models/list'
 	import ListService from '../../services/list'
 
@@ -34,6 +36,7 @@
 			}
 		},
 		components: {
+			Gantt,
 			ShowListTask,
 		},
 		beforeMount() {
@@ -41,6 +44,11 @@
 			if (!auth.user.authenticated) {
 				router.push({name: 'home'})
 			}
+
+			// If the type is invalid, redirect the user
+			if (this.$route.params.type !== 'gantt' && this.$route.params.type !== '') {
+				router.push({name: 'showList', params: { id:  this.$route.params.id }})
+			}
 		},
 		created() {
 			this.listService = new ListService()

src/components/tasks/Gantt.vue

@@ -1,9 +1,5 @@
 <template>
 	<div>
-		<div class="switch-view">
-			<router-link :to="{ name: 'showList', params: { id: listID} }">List</router-link>
-			<router-link :to="{ name: 'listGantt', params: { id: listID} }" class="is-active">Gantt</router-link>
-		</div>
 		<div class="fancycheckbox is-block">
 			<input id="showTaskswithoutDates" type="checkbox" style="display: none;" v-model="showTaskswithoutDates">
 			<label for="showTaskswithoutDates" class="check">
@@ -24,50 +20,21 @@
 </template>
 
 <script>
-	import auth from '../../auth'
-	import router from '../../router'
-	import message from '../../message'
 	import GanttChart from './gantt-component'
 
-	import TaskService from '../../services/task'
-	import ListModel from '../../models/list'
-	import ListService from '../../services/list'
-
 	export default {
 		name: 'Gantt',
 		components: {GanttChart},
 		data() {
 			return {
-				taskService: TaskService,
-				listService: ListService,
-				tasks: [],
-				listID: 0,
 				showTaskswithoutDates: false,
 			}
 		},
-		beforeMount() {
-			// Check if the user is already logged in, if so, redirect him to the homepage
-			if (!auth.user.authenticated) {
-				router.push({name: 'home'})
+		props: {
+			tasks: {
+				type: Array,
+				required: true,
 			}
 		},
-		created() {
-			this.taskService = new TaskService();
-			this.listService = new ListService();
-			this.listID = this.$route.params.id
-			this.loadTasks();
-		},
-		methods: {
-			loadTasks() {
-				let list = new ListModel({id: this.listID})
-				this.listService.get(list)
-					.then(r => {
-						this.$set(this, 'tasks', r.tasks)
-					})
-					.catch(e => {
-						message.error(e, this)
-					})
-			},
-		},
 	}
 </script>

src/router/index.js

@@ -21,8 +21,6 @@ import EditTeamComponent from '@/components/teams/EditTeam'
 import NewTeamComponent from '@/components/teams/NewTeam'
 // Label Handling
 import ListLabelsComponent from '@/components/labels/ListLabels'
-// Task Handling
-import GanttComponent from '@/components/tasks/Gantt'
 
 Vue.use(Router)
 
@@ -65,9 +63,9 @@ export default new Router({
 			component: EditListComponent
 		},
 		{
-			path: '/lists/:id/gantt',
-			name: 'listGantt',
-			component: GanttComponent,
+			path: '/lists/:id/:type',
+			name: 'showListWithType',
+			component: ShowListComponent,
 		},
 		{
 			path: '/namespaces/:id/list',