Tutorials/Quasar_Todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

22.02 Add a Loading View for the Todo Page

Browse Source
This commit is contained in:
Fredrick W. Warren 2021-02-15 09:02:15 -08:00
parent f6de60571b
commit 13559be43a
2 changed files with 44 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/PageTodo.vue
View File

@ -3,41 +3,47 @@
<div class="q-pa-md absolute full-width full-height column"> <div class="q-pa-md absolute full-width full-height column">
<div class="row q-mb-lg"> <template v-if="tasksDownloaded">
<search /> <div class="row q-mb-lg">
<sort /> <search />
</div> <sort />
</div>
<q-scroll-area class="q-scroll-area-tasks"> <q-scroll-area class="q-scroll-area-tasks">
<p <p
v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length"> v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
No Search Results No Search Results
</p> </p>
<noTasks <noTasks
v-if="!Object.keys(tasksTodo).length && !search && !settings.showTasksInOnelist" /> v-if="!Object.keys(tasksTodo).length && !search && !settings.showTasksInOnelist" />
<tasks-todo <tasks-todo
v-if="Object.keys(tasksTodo).length" v-if="Object.keys(tasksTodo).length"
:tasksTodo="tasksTodo" /> :tasksTodo="tasksTodo" />
<tasks-completed <tasks-completed
v-if="Object.keys(tasksCompleted).length" v-if="Object.keys(tasksCompleted).length"
:tasksCompleted="tasksCompleted" :tasksCompleted="tasksCompleted"
class="q-mb-xl" /> class="q-mb-xl" />
</q-scroll-area> </q-scroll-area>
<div class="absolute-bottom text-center q-mb-lg no-pointer-events"> <div class="absolute-bottom text-center q-mb-lg no-pointer-events">
<q-btn <q-btn
@click="showAddTask = true" @click="showAddTask = true"
round round
class="all-pointer-events" class="all-pointer-events"
color="primary" color="primary"
size="24px" size="24px"
icon="add" icon="add"
/> />
</div> </div>
</template>
</div> <template v-else>
<p>Loading...</p>
</template>
</div>
<q-dialog v-model="showAddTask"> <q-dialog v-model="showAddTask">
<add-task @close="showAddTask = false" /> <add-task @close="showAddTask = false" />
@ -73,7 +79,7 @@ export default {
computed: { computed: {
...mapGetters('tasks', ['tasksTodo', 'tasksCompleted']), ...mapGetters('tasks', ['tasksTodo', 'tasksCompleted']),
...mapGetters('settings', ['settings']), ...mapGetters('settings', ['settings']),
...mapState('tasks', ['search']) ...mapState('tasks', ['search', 'tasksDownloaded'])
}, },
mounted () { mounted () {
this.$root.$on('showAddTask', () => { this.$root.$on('showAddTask', () => {

9
src/store/store-tasks.js
View File

@ -26,7 +26,8 @@ const state = {
*/ */
}, },
search: '', search: '',
sort: 'name' sort: 'name',
tasksDownloaded: false
} }
const mutations = { const mutations = {
@ -44,7 +45,11 @@ const mutations = {
}, },
setSort (state, value) { setSort (state, value) {
state.sort = value state.sort = value
} },
setTasksDownloaded (state, value) {
state.tasksDownloaded = value
},
} }
const actions = { const actions = {