vikunja-frontend/src/components/lists/ShowList.vue

<template>
	<div class="loader-container" :class="{ 'is-loading': listService.loading}">
		<div class="content">
			<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
				<icon icon="cog" size="2x"/>
			</router-link>
			<h1 :style="{ 'opacity': list.title === '' ? '0': '1' }">{{ list.title === '' ? 'Loading...': list.title}}</h1>
			<div class="notification is-warning" v-if="list.isArchived">
				This list is archived.
				It is not possible to create new or edit tasks or it.
			</div>
			<div class="switch-view">
				<router-link :to="{ name: 'showList', params: { id: list.id } }" :class="{'is-active': $route.params.type !== 'gantt' && $route.params.type !== 'table'}">List</router-link>
				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'gantt' } }" :class="{'is-active': $route.params.type === 'gantt'}">Gantt</router-link>
				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'table' } }" :class="{'is-active': $route.params.type === 'table'}">Table</router-link>
			</div>
		</div>

		<gantt :list="list" v-if="$route.params.type === 'gantt'"/>
		<table-view :list="list" v-else-if="$route.params.type === 'table'"/>
		<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 Gantt from '../tasks/Gantt'

	import ListModel from '../../models/list'
	import ListService from '../../services/list'
	import authType from '../../models/authTypes'
	import TableView from '../tasks/TableView'

	export default {
		data() {
			return {
				listId: this.$route.params.id,
				listService: ListService,
				list: ListModel,
			}
		},
		components: {
			TableView,
			Gantt,
			ShowListTask,
		},
		beforeMount() {
			// Check if the user is already logged in, if so, redirect him to the homepage
			if (!auth.user.authenticated && auth.user.infos.type !== authType.LINK_SHARE) {
				router.push({name: 'home'})
			}

			// If the type is invalid, redirect the user
			if (
				auth.user.authenticated &&
				auth.user.infos.type !== authType.LINK_SHARE &&
				this.$route.params.type !== 'gantt' &&
				this.$route.params.type !== 'table' &&
				this.$route.params.type !== 'list' &&
				this.$route.params.type !== ''
			) {
				router.push({name: 'showList', params: { id:  this.$route.params.id }})
			}
		},
		created() {
			this.listService = new ListService()
			this.list = new ListModel()
			this.loadList()
		},
		watch: {
			// call again the method if the route changes
			'$route.path': 'loadList'
		},
		methods: {
			loadList() {
				// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
				let list = new ListModel({id: this.$route.params.id})
				this.listService.get(list)
					.then(r => {
						this.$set(this, 'list', r)
					})
					.catch(e => {
						this.error(e, this)
					})
			},
		}
	}
</script>