feat: mount list views as route-views
This commit is contained in:
parent
16b0d03601
commit
7eed0628d0
GPG Key ID:
B257AC0149F43A77
|
|
@ -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: [
|
||||
{
|
||||
path: '/lists/:listId/list',
|
||||
name: 'list.list',
|
||||
component: List,
|
||||
},
|
||||
{
|
||||
path: '/lists/:listId/gantt',
|
||||
name: 'list.gantt',
|
||||
component: Gantt,
|
||||
},
|
||||
{
|
||||
path: '/lists/:listId/table',
|
||||
name: 'list.table',
|
||||
component: Table,
|
||||
},
|
||||
{
|
||||
path: '/lists/:listId/kanban',
|
||||
name: 'list.kanban',
|
||||
component: Kanban,
|
||||
},
|
||||
],
|
||||
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: ListList,
|
||||
},
|
||||
{
|
||||
path: '/lists/:listId/gantt',
|
||||
name: 'list.gantt',
|
||||
component: ListGantt,
|
||||
},
|
||||
{
|
||||
path: '/lists/:listId/table',
|
||||
name: 'list.table',
|
||||
component: ListTable,
|
||||
},
|
||||
{
|
||||
path: '/lists/:listId/kanban',
|
||||
name: 'list.kanban',
|
||||
component: ListKanban,
|
||||
},
|
||||
{
|
||||
path: '/teams',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -53,7 +59,9 @@
|
|||
/>
|
||||
|
||||
</card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ListWrapper>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -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'
|
||||
|
||||
|
|
@ -1,17 +1,22 @@
|
|||
<template>
|
||||
<div class="kanban-view">
|
||||
<div class="filter-container" v-if="isSavedFilter">
|
||||
<ListWrapper>
|
||||
<template #header>
|
||||
<div class="filter-container" v-if="isSavedFilter">
|
||||
<div class="items">
|
||||
<filter-popup
|
||||
v-model="params"
|
||||
@update:modelValue="loadBuckets"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="{ 'is-loading': loading && !oneTaskUpdating}"
|
||||
class="kanban kanban-bucket-container loader-container"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<div class="kanban-view">
|
||||
<div
|
||||
:class="{ 'is-loading': loading && !oneTaskUpdating}"
|
||||
class="kanban kanban-bucket-container loader-container"
|
||||
>
|
||||
<draggable
|
||||
v-bind="dragOptions"
|
||||
:modelValue="buckets"
|
||||
|
|
@ -218,22 +223,25 @@
|
|||
</template>
|
||||
</modal>
|
||||
</transition>
|
||||
</div>
|
||||
</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,
|
||||
|
|
@ -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"
|
||||
|
|
@ -122,19 +126,22 @@
|
|||
:current-page="currentPage"
|
||||
/>
|
||||
</card>
|
||||
</div>
|
||||
</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,
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div :class="{'is-loading': loading}" class="table-view loader-container">
|
||||
<div class="filter-container">
|
||||
<ListWrapper>
|
||||
<template #header>
|
||||
<div class="filter-container">
|
||||
<div class="items">
|
||||
<popup>
|
||||
<template #trigger="{toggle}">
|
||||
|
|
@ -59,9 +60,12 @@
|
|||
@update:modelValue="loadTasks()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<card :padding="false" :has-content="false">
|
||||
<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">
|
||||
<thead>
|
||||
|
|
@ -172,14 +176,17 @@
|
|||
:total-pages="totalPages"
|
||||
:current-page="currentPage"
|
||||
/>
|
||||
</card>
|
||||
</div>
|
||||
</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,
|
||||
|
|
@ -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,
|
||||
Reference in New Issue