Add clearer call to action when no lists are available yet

This commit is contained in:
kolaente 2021-01-17 20:53:09 +01:00
parent 2139d4d528
commit 427a702bd4
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 33 additions and 8 deletions

View file

@ -1,22 +1,31 @@
<template>
<div class="content has-text-centered">
<h2>Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!</h2>
<h2>
Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!
</h2>
<template v-if="!hasTasks">
<p>Click on a list or namespace on the left to get started.</p>
<p>You can create a new list for your new tasks:</p>
<x-button
:to="{name: 'migrate.start'}"
:to="{name: 'list.create', params: { id: defaultNamespaceId }}"
:shadow="false"
v-if="migratorsEnabled"
class="ml-2"
v-if="defaultNamespaceId > 0"
>
Create a new list
</x-button>
<p class="mt-4" v-if="migratorsEnabled">
Or import your lists and tasks from other services into Vikunja:
</p>
<x-button :to="{ name: 'migrate.start' }" :shadow="false">
Import your data into Vikunja
</x-button>
</template>
<ShowTasks :show-all="true"/>
<ShowTasks :show-all="true" v-if="hasLists"/>
</div>
</template>
<script>
import {mapState} from 'vuex'
import { mapState } from 'vuex'
import ShowTasks from './tasks/ShowTasks'
export default {
@ -36,6 +45,20 @@ export default {
authenticated: state => state.auth.authenticated,
userInfo: state => state.auth.info,
hasTasks: state => state.hasTasks,
defaultNamespaceId: state => {
if (state.namespaces.namespaces.length === 0) {
return 0
}
return state.namespaces.namespaces[0].id
},
hasLists: state => {
if (state.namespaces.namespaces.length === 0) {
return false
}
return state.namespaces.namespaces[0].lists.length > 0
},
}),
}
</script>

View file

@ -170,6 +170,7 @@ import {saveListView} from '@/helpers/saveListView'
import Rights from '../../../models/rights.json'
import {mapState} from 'vuex'
import FilterPopup from '@/components/list/partials/filter-popup'
import {HAS_TASKS} from '@/store/mutation-types'
export default {
name: 'List',
@ -322,6 +323,7 @@ export default {
this.taskService.update(task)
.then(updatedTask => {
this.updateTasks(updatedTask)
this.$store.commit(HAS_TASKS, true)
})
.catch(e => {
this.error(e, this)

View file

@ -8,8 +8,8 @@
>
Show tasks without dates
</fancycheckbox>
<h3 v-if="showAll">Current tasks</h3>
<h3 v-else>
<h3 v-if="showAll && tasks.length > 0">Current tasks</h3>
<h3 v-else-if="!showAll">
Tasks from
<flat-pickr
:class="{ 'disabled': taskService.loading}"