11.7 Add No Tasks Banner

src/components/Tasks/NoTasks.vue

@@ -0,0 +1,21 @@
+<template>
+  <q-banner class="bg-grey-3">
+    <template v-slot:avatar>
+    <q-icon name="check" color="primary" />
+    </template>
+      No tasks to do today!
+    <template v-slot:action>
+    <q-btn flat color="primary" label="Add Task" />
+    </template>
+  </q-banner>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/PageTodo.vue

@@ -1,8 +1,10 @@
 <template>
   <q-page class="q-pa-md">
+    <noTasks
+      v-if="!Object.keys(tasksTodo).length" />
 
     <tasks-todo
-      v-if="Object.keys(tasksTodo).length"
+      v-else
       :tasksTodo="tasksTodo" />
 
     <tasks-completed
@@ -29,6 +31,7 @@
 <script>
 import { mapGetters } 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'
 
@@ -37,7 +40,8 @@ export default {
   components: {
     tasksTodo,
     tasksCompleted,
-    addTask
+    addTask,
+    noTasks
   },
   data () {
     return {