vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

wip: feat: import all views dynamically #752

Closed
dpschen wants to merge 2 commits from dpschen/frontend:feature/import-view-dynamically into main
pull from: dpschen/frontend:feature/import-view-dynamically
merge into: vikunja:main
Conversation 14 Commits 2 Files Changed 4 +90 -193
4 changed files with 90 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
src/router/index.js
View File

@ -1,98 +1,9 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HomeComponent from '../views/Home' // Importing using vites glob import
import NotFoundComponent from '../views/404' // see: https://vitejs.dev/guide/features.html#glob-import
import LoadingComponent from '../components/misc/loading' const components = import.meta.glob('../views/**/*.vue')
import ErrorComponent from '../components/misc/error'
import About from '../views/About'
// User Handling
import LoginComponent from '../views/user/Login'
import RegisterComponent from '../views/user/Register'
import OpenIdAuth from '../views/user/OpenIdAuth'
import DataExportDownload from '../views/user/DataExportDownload'
// Tasks
import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
import TaskDetailView from '../views/tasks/TaskDetailView'
import ListNamespaces from '../views/namespaces/ListNamespaces'
// Team Handling
import ListTeamsComponent from '../views/teams/ListTeams'
// Label Handling
import ListLabelsComponent from '../views/labels/ListLabels'
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'
// List Settings
import ListSettingEdit from '../views/list/settings/edit'
import ListSettingBackground from '../views/list/settings/background'
import ListSettingDuplicate from '../views/list/settings/duplicate'
import ListSettingShare from '../views/list/settings/share'
import ListSettingDelete from '../views/list/settings/delete'
import ListSettingArchive from '../views/list/settings/archive'
import FilterSettingEdit from '../views/filters/settings/edit'
import FilterSettingDelete from '../views/filters/settings/delete'
// Namespace Settings
import NamespaceSettingEdit from '../views/namespaces/settings/edit'
import NamespaceSettingShare from '../views/namespaces/settings/share'
import NamespaceSettingArchive from '../views/namespaces/settings/archive'
import NamespaceSettingDelete from '../views/namespaces/settings/delete'
// Saved Filters
import CreateSavedFilter from '../views/filters/CreateSavedFilter'
const PasswordResetComponent = () => ({
component: import('../views/user/PasswordReset'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
const GetPasswordResetComponent = () => ({
component: import('../views/user/RequestPasswordReset'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
const UserSettingsComponent = () => ({
component: import('../views/user/Settings'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
// List Handling
const NewListComponent = () => ({
component: import('../views/list/NewList'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
// Namespace Handling
const NewNamespaceComponent = () => ({
component: import('../views/namespaces/NewNamespace'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
const EditTeamComponent = () => ({
component: import('../views/teams/EditTeam'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
const NewTeamComponent = () => ({
component: import('../views/teams/NewTeam'),
loading: LoadingComponent,
error: ErrorComponent,
timeout: 60000,
})
Vue.use(Router) Vue.use(Router)
@ -118,366 +29,367 @@ export default new Router({
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeComponent, component: components['../views/Home.vue'],
}, },
{ {
path: '*', path: '*',
name: '404', name: '404',
component: NotFoundComponent, component: components['../views/404.vue'],
}, },
{ {
path: '/login', path: '/login',
name: 'user.login', name: 'user.login',
component: LoginComponent, component: components['../views/user/Login.vue'],
}, },
{ {
path: '/get-password-reset', path: '/get-password-reset',
name: 'user.password-reset.request', name: 'user.password-reset.request',
component: GetPasswordResetComponent, component: components['../views/user/RequestPasswordReset.vue'],
}, },
{ {
path: '/password-reset', path: '/password-reset',
name: 'user.password-reset.reset', name: 'user.password-reset.reset',
component: PasswordResetComponent, component: components['../views/user/PasswordReset.vue'],
}, },
{ {
path: '/register', path: '/register',
name: 'user.register', name: 'user.register',
component: RegisterComponent, component: components['../views/user/Register.vue'],
}, },
{ {
path: '/user/settings', path: '/user/settings',
name: 'user.settings', name: 'user.settings',
component: UserSettingsComponent, component: components['../views/user/Settings.vue'],
}, },
{ {
path: '/user/export/download', path: '/user/export/download',
name: 'user.export.download', name: 'user.export.download',
component: DataExportDownload, component: components['../views/user/DataExportDownload.vue'],
}, },
{ {
path: '/share/:share/auth', path: '/share/:share/auth',
name: 'link-share.auth', name: 'link-share.auth',
component: LinkShareAuthComponent, component: components['../views/sharing/LinkSharingAuth.vue'],
}, },
{ {
path: '/namespaces', path: '/namespaces',
name: 'namespaces.index', name: 'namespaces.index',
component: ListNamespaces, component: components['../views/namespaces/ListNamespaces.vue'],
}, },
{ {
path: '/namespaces/new', path: '/namespaces/new',
name: 'namespace.create', name: 'namespace.create',
components: { components: {
popup: NewNamespaceComponent, popup: components['../views/namespaces/NewNamespace.vue'],
}, },
}, },
{ {
path: '/namespaces/:id/list', path: '/namespaces/:id/list',
name: 'list.create', name: 'list.create',
components: { components: {
popup: NewListComponent, popup: components['../views/list/NewList.vue'],
}, },
}, },
{ {
path: '/namespaces/:id/settings/edit', path: '/namespaces/:id/settings/edit',
name: 'namespace.settings.edit', name: 'namespace.settings.edit',
components: { components: {
popup: NamespaceSettingEdit, popup: components['../views/namespaces/settings/edit.vue'],
}, },
}, },
{ {
path: '/namespaces/:id/settings/share', path: '/namespaces/:id/settings/share',
name: 'namespace.settings.share', name: 'namespace.settings.share',
components: { components: {
popup: NamespaceSettingShare, popup: components['../views/namespaces/settings/share.vue'],
}, },
}, },
{ {
path: '/namespaces/:id/settings/archive', path: '/namespaces/:id/settings/archive',
name: 'namespace.settings.archive', name: 'namespace.settings.archive',
components: { components: {
popup: NamespaceSettingArchive, popup: components['../views/namespaces/settings/archive.vue'],
}, },
}, },
{ {
path: '/namespaces/:id/settings/delete', path: '/namespaces/:id/settings/delete',
name: 'namespace.settings.delete', name: 'namespace.settings.delete',
components: { components: {
popup: NamespaceSettingDelete, popup: components['../views/namespaces/settings/delete.vue'],
}, },
}, },
{ {
path: '/tasks/:id', path: '/tasks/:id',
name: 'task.detail', name: 'task.detail',
component: TaskDetailView, component: components['../views/tasks/TaskDetailView.vue'],
}, },
{ {
path: '/tasks/by/upcoming', path: '/tasks/by/upcoming',
name: 'tasks.range', name: 'tasks.range',
component: ShowTasksInRangeComponent, component: components['../views/tasks/ShowTasksInRange.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'list.settings.edit', name: 'list.settings.edit',
components: { components: {
popup: ListSettingEdit, popup: components['../views/list/settings/edit.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/background', path: '/lists/:listId/settings/background',
name: 'list.settings.background', name: 'list.settings.background',
components: { components: {
popup: ListSettingBackground, popup: components['../views/list/settings/background.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/duplicate', path: '/lists/:listId/settings/duplicate',
name: 'list.settings.duplicate', name: 'list.settings.duplicate',
components: { components: {
popup: ListSettingDuplicate, popup: components['../views/list/settings/duplicate.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/share', path: '/lists/:listId/settings/share',
name: 'list.settings.share', name: 'list.settings.share',
components: { components: {
popup: ListSettingShare, popup: components['../views/list/settings/share.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'list.settings.delete', name: 'list.settings.delete',
components: { components: {
popup: ListSettingDelete, popup: components['../views/list/settings/delete.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/archive', path: '/lists/:listId/settings/archive',
name: 'list.settings.archive', name: 'list.settings.archive',
components: { components: {
popup: ListSettingArchive, popup: components['../views/list/settings/archive.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'filter.settings.edit', name: 'filter.settings.edit',
components: { components: {
popup: FilterSettingEdit, popup: components['../views/filters/settings/edit.vue'],
}, },
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'filter.settings.delete', name: 'filter.settings.delete',
components: { components: {
popup: FilterSettingDelete, popup: components['../views/filters/settings/delete.vue'],
}, },
}, },
{ {
path: '/lists/:listId', path: '/lists/:listId',
name: 'list.index', name: 'list.index',
component: ShowListComponent, component: components['../views/list/ShowList.vue'],
children: [ children: [
{ {
path: '/lists/:listId/list', path: '/lists/:listId/list',
name: 'list.list', name: 'list.list',
component: List, component: components['../views/list/views/List.vue'],
children: [ children: [
{ {
path: '/tasks/:id', path: '/tasks/:id',
name: 'task.list.detail', name: 'task.list.detail',
component: TaskDetailViewModal, component: components['../views/tasks/TaskDetailViewModal.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'list.list.settings.edit', name: 'list.list.settings.edit',
component: ListSettingEdit, component: components['../views/list/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/background', path: '/lists/:listId/settings/background',
name: 'list.list.settings.background', name: 'list.list.settings.background',
component: ListSettingBackground, component: components['../views/list/settings/background.vue'],
}, },
{ {
path: '/lists/:listId/settings/duplicate', path: '/lists/:listId/settings/duplicate',
name: 'list.list.settings.duplicate', name: 'list.list.settings.duplicate',
component: ListSettingDuplicate, component: components['../views/list/settings/duplicate.vue'],
}, },
{ {
path: '/lists/:listId/settings/share', path: '/lists/:listId/settings/share',
name: 'list.list.settings.share', name: 'list.list.settings.share',
component: ListSettingShare, component: components['../views/list/settings/share.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'list.list.settings.delete', name: 'list.list.settings.delete',
component: ListSettingDelete, component: components['../views/list/settings/delete.vue'],
}, },
{ {
path: '/lists/:listId/settings/archive', path: '/lists/:listId/settings/archive',
name: 'list.list.settings.archive', name: 'list.list.settings.archive',
component: ListSettingArchive, component: components['../views/list/settings/archive.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'filter.list.settings.edit', name: 'filter.list.settings.edit',
component: FilterSettingEdit, component: components['../views/filters/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'filter.list.settings.delete', name: 'filter.list.settings.delete',
component: FilterSettingDelete, component: components['../views/filters/settings/delete.vue'],
}, },
], ],
}, },
{ {
path: '/lists/:listId/gantt', path: '/lists/:listId/gantt',
name: 'list.gantt', name: 'list.gantt',
component: Gantt, component: components['../views/list/views/Gantt.vue'],
children: [ children: [
{ {
path: '/tasks/:id', path: '/tasks/:id',
name: 'task.gantt.detail', name: 'task.gantt.detail',
component: TaskDetailViewModal, component: components['../views/tasks/TaskDetailViewModal.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'list.gantt.settings.edit', name: 'list.gantt.settings.edit',
component: ListSettingEdit, component: components['../views/list/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/background', path: '/lists/:listId/settings/background',
name: 'list.gantt.settings.background', name: 'list.gantt.settings.background',
component: ListSettingBackground, component: components['../views/list/settings/background.vue'],
}, },
{ {
path: '/lists/:listId/settings/duplicate', path: '/lists/:listId/settings/duplicate',
name: 'list.gantt.settings.duplicate', name: 'list.gantt.settings.duplicate',
component: ListSettingDuplicate, component: components['../views/list/settings/duplicate.vue'],
}, },
{ {
path: '/lists/:listId/settings/share', path: '/lists/:listId/settings/share',
name: 'list.gantt.settings.share', name: 'list.gantt.settings.share',
component: ListSettingShare, component: components['../views/list/settings/share.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'list.gantt.settings.delete', name: 'list.gantt.settings.delete',
component: ListSettingDelete, component: components['../views/list/settings/delete.vue'],
}, },
{ {
path: '/lists/:listId/settings/archive', path: '/lists/:listId/settings/archive',
name: 'list.gantt.settings.archive', name: 'list.gantt.settings.archive',
component: ListSettingArchive, component: components['../views/list/settings/archive.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'filter.gantt.settings.edit', name: 'filter.gantt.settings.edit',
component: FilterSettingEdit, component: components['../views/filters/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'filter.gantt.settings.delete', name: 'filter.gantt.settings.delete',
component: FilterSettingDelete, component: components['../views/filters/settings/delete.vue'],
}, },
], ],
}, },
{ {
path: '/lists/:listId/table', path: '/lists/:listId/table',
name: 'list.table', name: 'list.table',
component: Table, component: components['../views/list/views/Table.vue'],
children: [ children: [
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'list.table.settings.edit', name: 'list.table.settings.edit',
component: ListSettingEdit, component: components['../views/list/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/background', path: '/lists/:listId/settings/background',
name: 'list.table.settings.background', name: 'list.table.settings.background',
component: ListSettingBackground, component: components['../views/list/settings/background.vue'],
}, },
{ {
path: '/lists/:listId/settings/duplicate', path: '/lists/:listId/settings/duplicate',
name: 'list.table.settings.duplicate', name: 'list.table.settings.duplicate',
component: ListSettingDuplicate, component: components['../views/list/settings/duplicate.vue'],
}, },
{ {
path: '/lists/:listId/settings/share', path: '/lists/:listId/settings/share',
name: 'list.table.settings.share', name: 'list.table.settings.share',
component: ListSettingShare, component: components['../views/list/settings/share.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'list.table.settings.delete', name: 'list.table.settings.delete',
component: ListSettingDelete, component: components['../views/list/settings/delete.vue'],
}, },
{ {
path: '/lists/:listId/settings/archive', path: '/lists/:listId/settings/archive',
name: 'list.table.settings.archive', name: 'list.table.settings.archive',
component: ListSettingArchive, component: components['../views/list/settings/archive.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'filter.table.settings.edit', name: 'filter.table.settings.edit',
component: FilterSettingEdit, component: components['../views/filters/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'filter.table.settings.delete', name: 'filter.table.settings.delete',
component: FilterSettingDelete, component: components['../views/filters/settings/delete.vue'],
}, },
], ],
}, },
{ {
path: '/lists/:listId/kanban', path: '/lists/:listId/kanban',
name: 'list.kanban', name: 'list.kanban',
component: Kanban, component: components['../views/list/views/Kanban.vue'],
children: [ children: [
{ {
path: '/tasks/:id', path: '/tasks/:id',
name: 'task.kanban.detail', name: 'task.kanban.detail',
component: TaskDetailViewModal, component: components['../views/tasks/TaskDetailViewModal.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'list.kanban.settings.edit', name: 'list.kanban.settings.edit',
component: ListSettingEdit, component: components['../views/list/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/background', path: '/lists/:listId/settings/background',
name: 'list.kanban.settings.background', name: 'list.kanban.settings.background',
component: ListSettingBackground, component: components['../views/list/settings/background.vue'],
}, },
{ {
path: '/lists/:listId/settings/duplicate', path: '/lists/:listId/settings/duplicate',
name: 'list.kanban.settings.duplicate', name: 'list.kanban.settings.duplicate',
component: ListSettingDuplicate, component: components['../views/list/settings/duplicate.vue'],
}, },
{ {
path: '/lists/:listId/settings/share', path: '/lists/:listId/settings/share',
name: 'list.kanban.settings.share', name: 'list.kanban.settings.share',
component: ListSettingShare, component: components['../views/list/settings/share.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'list.kanban.settings.delete', name: 'list.kanban.settings.delete',
component: ListSettingDelete, component: components['../views/list/settings/delete.vue'],
}, },
{ {
path: '/lists/:listId/settings/archive', path: '/lists/:listId/settings/archive',
name: 'list.kanban.settings.archive', name: 'list.kanban.settings.archive',
component: ListSettingArchive, component: components['../views/list/settings/archive.vue'],
}, },
{ {
path: '/lists/:listId/settings/edit', path: '/lists/:listId/settings/edit',
name: 'filter.kanban.settings.edit', name: 'filter.kanban.settings.edit',
component: FilterSettingEdit, component: components['../views/filters/settings/edit.vue'],
}, },
{ {
path: '/lists/:listId/settings/delete', path: '/lists/:listId/settings/delete',
name: 'filter.kanban.settings.delete', name: 'filter.kanban.settings.delete',
component: FilterSettingDelete, component: components['../views/filters/settings/delete.vue'],
}, },
], ],
}, },
@ -486,58 +398,58 @@ export default new Router({
{ {
path: '/teams', path: '/teams',
name: 'teams.index', name: 'teams.index',
component: ListTeamsComponent, component: components['../views/teams/ListTeams.vue'],
}, },
{ {
path: '/teams/new', path: '/teams/new',
name: 'teams.create', name: 'teams.create',
components: { components: {
popup: NewTeamComponent, popup: components['../views/teams/NewTeam.vue'],
}, },
}, },
{ {
path: '/teams/:id/edit', path: '/teams/:id/edit',
name: 'teams.edit', name: 'teams.edit',
component: EditTeamComponent, component: components['../views/teams/EditTeam.vue'],
}, },
{ {
path: '/labels', path: '/labels',
name: 'labels.index', name: 'labels.index',
component: ListLabelsComponent, component: components['../views/labels/ListLabels.vue'],
}, },
{ {
path: '/labels/new', path: '/labels/new',
name: 'labels.create', name: 'labels.create',
components: { components: {
popup: NewLabelComponent, popup: components['../views/labels/NewLabel.vue'],
}, },
}, },
{ {
path: '/migrate', path: '/migrate',
name: 'migrate.start', name: 'migrate.start',
component: MigrationComponent, component: components['../views/migrator/Migrate.vue'],
}, },
{ {
path: '/migrate/:service', path: '/migrate/:service',
name: 'migrate.service', name: 'migrate.service',
component: MigrateServiceComponent, component: components['../views/migrator/MigrateService.vue'],
}, },
{ {
path: '/filters/new', path: '/filters/new',
name: 'filters.create', name: 'filters.create',
components: { components: {
popup: CreateSavedFilter, popup: components['../views/filters/CreateSavedFilter.vue'],
}, },
}, },
{ {
path: '/auth/openid/:provider', path: '/auth/openid/:provider',
name: 'openid.auth', name: 'openid.auth',
component: OpenIdAuth, component: components['../views/user/OpenIdAuth.vue'],
}, },
{ {
path: '/about', path: '/about',
name: 'about', name: 'about',
component: About, component: components['../views/About.vue'],
}, },
], ],
}) })

8
src/views/Home.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<div class="content has-text-centered"> <div class="content has-text-centered">
<h2> <h2 v-if="userInfo">
{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}! {{ $t(`home.welcome${welcome}`, {
username: userInfo.name !== ''
? userInfo.name
:userInfo.username
}) }}!
</h2> </h2>
<div class="notification is-danger" v-if="deletionScheduledAt !== null"> <div class="notification is-danger" v-if="deletionScheduledAt !== null">
{{ {{

3
src/views/list/ShowList.vue
View File

@ -52,9 +52,6 @@ export default {
listLoaded: 0, listLoaded: 0,
} }
}, },
mounted() {
this.loadList()
},
watch: { watch: {
// call again the method if the route changes // call again the method if the route changes
'$route.path': { '$route.path': {

22
vite.config.js
View File

@ -94,26 +94,10 @@ module.exports = {
target: 'es2015', target: 'es2015',
rollupOptions: { rollupOptions: {
plugins: [ plugins: [
visualizer(), visualizer({
path: 'stats.html',
}),
], ],
output: {
manualChunks: {
'user-settings': [
'./src/views/user/PasswordReset',
'./src/views/user/RequestPasswordReset',
'./src/views/user/Settings',
],
'settings': [
'./src/views/list/NewList',
'./src/views/namespaces/NewNamespace',
'./src/views/teams/EditTeam',
'./src/views/teams/NewTeam',
],
'highlight': [
'highlight.js',
],
},
},
}, },
}, },
} }