91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<template>
|
|
<q-page>
|
|
|
|
<div class="q-pa-md absolute full-width full-height column">
|
|
|
|
<div class="row q-mb-lg">
|
|
<search />
|
|
<sort />
|
|
</div>
|
|
|
|
<q-scroll-area class="q-scroll-area-tasks">
|
|
<p
|
|
v-if="search && !Object.keys(tasksTodo).length && !Object.keys(tasksCompleted).length">
|
|
No Search Results
|
|
</p>
|
|
<noTasks
|
|
v-if="!Object.keys(tasksTodo).length && !search" />
|
|
|
|
<tasks-todo
|
|
v-if="Object.keys(tasksTodo).length"
|
|
:tasksTodo="tasksTodo" />
|
|
|
|
<tasks-completed
|
|
v-if="Object.keys(tasksCompleted).length"
|
|
:tasksCompleted="tasksCompleted"
|
|
class="q-mb-xl" />
|
|
</q-scroll-area>
|
|
|
|
<div class="absolute-bottom text-center q-mb-lg no-pointer-events">
|
|
<q-btn
|
|
@click="showAddTask = true"
|
|
round
|
|
class="all-pointer-events"
|
|
color="primary"
|
|
size="24px"
|
|
icon="add"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<q-dialog v-model="showAddTask">
|
|
<add-task @close="showAddTask = false" />
|
|
</q-dialog>
|
|
|
|
</q-page>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapState } from 'vuex'
|
|
import tasksTodo from 'components/Tasks/TasksTodo.vue'
|
|
import noTasks from 'components/Tasks/NoTasks.vue'
|
|
import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
|
|
import addTask from 'components/Tasks/Modals/AddTask.vue'
|
|
import search from 'components/Tasks/Tools/Search.vue'
|
|
import sort from 'components/Tasks/Tools/Sort.vue'
|
|
|
|
export default {
|
|
name: 'PageTodo',
|
|
components: {
|
|
tasksTodo,
|
|
tasksCompleted,
|
|
addTask,
|
|
noTasks,
|
|
search,
|
|
sort
|
|
},
|
|
data () {
|
|
return {
|
|
showAddTask: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('tasks', ['tasksTodo', 'tasksCompleted']),
|
|
...mapState('tasks', ['search'])
|
|
},
|
|
mounted () {
|
|
this.$root.$on('showAddTask', () => {
|
|
this.showAddTask = true
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.q-scroll-area-tasks {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
</style>
|