This repository has been archived on 2024-02-08. You can view files and clone it, but cannot push or open issues or pull requests.
frontend/src/components/lists/ShowList.vue
konrad 724275e653
All checks were successful
continuous-integration/drone/push Build is passing
Table View for tasks (#76)
Save sort order to local storage

Save selected columns to localStorage

Loading spinner

More sorting

Add sorting

Styling and hiding of column filter

Add checkbox to show/hide columns

Use fancycheckbox everywhere

Fix is done badge

Change sort order in table view

Add is done column to table

Better text handling

Refactor is done into seperate component

Add pagination to table view

Add assignees to table view

Fix redirecting to table view

Add date tooltip to date field

Add date tooltip to date field

labels for table view

Styling

Add basic table view

Extend priority label

Split list view in mixins

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: #76
2020-04-01 20:13:57 +00:00

90 lines
2.9 KiB
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.is_archived">
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 !== ''
) {
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>