local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: mount list views as route-views

Browse source
This commit is contained in:
Dominik Pschenitschni 2021-11-14 21:33:53 +01:00
parent 16b0d03601
commit 7eed0628d0
No known key found for this signature in database
GPG key ID: B257AC0149F43A77
6 changed files with 104 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/router/index.ts
View file

@ -2,6 +2,8 @@ import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
import {saveLastVisited} from '@/helpers/saveLastVisited'
import {store} from '@/store'
import {getListView} from '@/helpers/saveListView'
import HomeComponent from '../views/Home'
import NotFoundComponent from '../views/404'
import About from '../views/About'
@ -23,12 +25,12 @@ import NewLabelComponent from '../views/labels/NewLabel'
// Migration
import MigrationComponent from '../views/migrator/Migrate'
import MigrateServiceComponent from '../views/migrator/MigrateService'
// List Views
import ShowListComponent from '../views/list/ShowList'
import Kanban from '../views/list/views/Kanban'
import List from '../views/list/views/List'
import Gantt from '../views/list/views/Gantt'
import Table from '../views/list/views/Table'
import ListList from '../views/list/ListList'
import ListGantt from '../views/list/ListGantt'
import ListTable from '../views/list/ListTable'
import ListKanban from '../views/list/ListKanban'
// List Settings
import ListSettingEdit from '../views/list/settings/edit'
@ -323,29 +325,37 @@ const router = createRouter({
{
path: '/lists/:listId',
name: 'list.index',
component: ShowListComponent,
children: [
beforeEnter(to) {
// Redirect the user to list view by default
const savedListView = getListView(to.params.listId)
console.debug('Replaced list view with', savedListView)
return {
name: savedListView,
params: {listId: to.params.listId},
}
},
},
{
path: '/lists/:listId/list',
name: 'list.list',
component: List,
component: ListList,
},
{
path: '/lists/:listId/gantt',
name: 'list.gantt',
component: Gantt,
component: ListGantt,
},
{
path: '/lists/:listId/table',
name: 'list.table',
component: Table,
component: ListTable,
},
{
path: '/lists/:listId/kanban',
name: 'list.kanban',
component: Kanban,
},
],
component: ListKanban,
},
{
path: '/teams',

13
src/views/list/views/Gantt.vue → src/views/list/ListGantt.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="gantt-chart-container">
<card :padding="false" class="has-overflow">
<ListWrapper>
<template #header>
<div class="gantt-options p-4">
<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
{{ $t('list.gantt.showTasksWithoutDates') }}
@ -44,6 +44,12 @@
</div>
</div>
</div>
</template>
<template #default>
<div class="gantt-chart-container">
<card :padding="false" class="has-overflow">
<gantt-chart
:date-from="dateFrom"
:date-to="dateTo"
@ -55,6 +61,8 @@
</card>
</div>
</template>
</ListWrapper>
</template>
<script setup>
import { ref, computed } from 'vue'
@ -64,6 +72,7 @@ import flatPickr from 'vue-flatpickr-component'
import { i18n } from '@/i18n'
import { store } from '@/store'
import ListWrapper from './ListWrapper'
import GanttChart from '@/components/tasks/gantt-component'
import Fancycheckbox from '@/components/input/fancycheckbox'

17
src/views/list/views/Kanban.vue → src/views/list/ListKanban.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="kanban-view">
<ListWrapper>
<template #header>
<div class="filter-container" v-if="isSavedFilter">
<div class="items">
<filter-popup
@ -8,6 +9,10 @@
/>
</div>
</div>
</template>
<template #default>
<div class="kanban-view">
<div
:class="{ 'is-loading': loading && !oneTaskUpdating}"
class="kanban kanban-bucket-container loader-container"
@ -220,20 +225,23 @@
</transition>
</div>
</template>
</ListWrapper>
</template>
<script>
import draggable from 'vuedraggable'
import cloneDeep from 'lodash.clonedeep'
import BucketModel from '../../../models/bucket'
import BucketModel from '../../models/bucket'
import {mapState} from 'vuex'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/constants/rights.json'
import Rights from '../../models/constants/rights.json'
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
import ListWrapper from './ListWrapper'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import Dropdown from '@/components/misc/dropdown.vue'
import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveCollapsedBucketState'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
import {calculateItemPosition} from '../../helpers/calculateItemPosition'
import KanbanCard from '@/components/tasks/partials/kanban-card'
const DRAG_OPTIONS = {
@ -250,6 +258,7 @@ const MIN_SCROLL_HEIGHT_PERCENT = 0.25
export default {
name: 'Kanban',
components: {
ListWrapper,
KanbanCard,
Dropdown,
FilterPopup,

26
src/views/list/views/List.vue → src/views/list/ListList.vue
View file

@ -1,8 +1,6 @@
<template>
<div
:class="{ 'is-loading': loading }"
class="loader-container is-max-width-desktop list-view"
>
<ListWrapper>
<template #header>
<div
class="filter-container"
v-if="list.isSavedFilter && !list.isSavedFilter()"
@ -47,7 +45,13 @@
/>
</div>
</div>
</template>
<template #default>
<div
:class="{ 'is-loading': loading }"
class="loader-container is-max-width-desktop list-view"
>
<card :padding="false" :has-content="false" class="has-overflow">
<template
v-if="!list.isArchived && canWrite && list.id > 0"
@ -124,17 +128,20 @@
</card>
</div>
</template>
</ListWrapper>
</template>
<script>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import EditTask from '../../../components/tasks/edit-task'
import AddTask from '../../../components/tasks/add-task'
import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
import ListWrapper from './ListWrapper'
import EditTask from '@/components/tasks/edit-task'
import AddTask from '@/components/tasks/add-task'
import SingleTaskInList from '@/components/tasks/partials/singleTaskInList'
import { useTaskList } from '@/composables/taskList'
import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/constants/rights.json'
import Rights from '../../models/constants/rights.json'
import FilterPopup from '@/components/list/partials/filter-popup.vue'
import {HAS_TASKS} from '@/store/mutation-types'
import Nothing from '@/components/misc/nothing.vue'
@ -142,7 +149,7 @@ import Pagination from '@/components/misc/pagination.vue'
import {ALPHABETICAL_SORT} from '@/components/list/partials/filters.vue'
import draggable from 'vuedraggable'
import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
import {calculateItemPosition} from '../../helpers/calculateItemPosition'
function sortTasks(tasks) {
if (tasks === null || tasks === []) {
@ -177,6 +184,7 @@ export default {
}
},
components: {
ListWrapper,
Nothing,
FilterPopup,
SingleTaskInList,

10
src/views/list/views/Table.vue → src/views/list/ListTable.vue
View file

@ -1,5 +1,6 @@
<template>
<div :class="{'is-loading': loading}" class="table-view loader-container">
<ListWrapper>
<template #header>
<div class="filter-container">
<div class="items">
<popup>
@ -60,7 +61,10 @@
/>
</div>
</div>
</template>
<template #default>
<div :class="{'is-loading': loading}" class="table-view loader-container">
<card :padding="false" :has-content="false">
<div class="has-horizontal-overflow">
<table class="table has-actions is-hoverable is-fullwidth mb-0">
@ -175,11 +179,14 @@
</card>
</div>
</template>
</ListWrapper>
</template>
<script setup>
import { ref, reactive, computed, toRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ListWrapper from './ListWrapper'
import Done from '@/components/misc/Done.vue'
import User from '@/components/misc/user'
import PriorityLabel from '@/components/tasks/partials/priorityLabel'
@ -254,7 +261,6 @@ function beforeLoad(params) {
const {
tasks,
loading,
showTaskFilter,
params,
loadTasks,
totalPages,

16
src/views/list/ShowList.vue → src/views/list/ListWrapper.vue
View file

@ -34,6 +34,7 @@
{{ $t('list.kanban.title') }}
</router-link>
</div>
<slot name="header" />
</div>
<transition name="fade">
<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
@ -41,13 +42,13 @@
</Message>
</transition>
<router-view/>
<slot />
</div>
</template>
<script setup>
import {ref, shallowRef, computed, watchEffect} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useRoute} from 'vue-router'
import Message from '@/components/misc/message'
@ -57,26 +58,15 @@ import ListService from '@/services/list'
import {store} from '@/store'
import {CURRENT_LIST} from '@/store/mutation-types'
import {getListView} from '@/helpers/saveListView'
import {getListTitle} from '@/helpers/getListTitle'
import {saveListToHistory} from '@/modules/listHistory'
import { useTitle } from '@/composables/useTitle'
const route = useRoute()
const router = useRouter()
const listService = shallowRef(new ListService())
const loadedListId = ref(0)
// beforeRouteEnter(to) {
// Redirect the user to list view by default
if (route.name !== 'list.index') {
const savedListView = getListView(route.params.listId)
console.debug('Replaced list view with', savedListView)
router.replace({name: 'list.list', params: {id: route.params.listId}})
}
// },
const currentList = computed(() => {
return typeof store.state.currentList === 'undefined' ? {
id: 0,