From c110b75c064996c16d9dd565fa9259f54bae1f16 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Wed, 10 Feb 2021 11:20:12 -0800
Subject: [PATCH] 11.7 Add No Tasks Banner

---
 src/components/Tasks/NoTasks.vue | 21 +++++++++++++++++++++
 src/pages/PageTodo.vue           |  8 ++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Tasks/NoTasks.vue

diff --git a/src/components/Tasks/NoTasks.vue b/src/components/Tasks/NoTasks.vue
new file mode 100644
index 0000000..87e8551
--- /dev/null
+++ b/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>
diff --git a/src/pages/PageTodo.vue b/src/pages/PageTodo.vue
index 822cbe6..4ff2140 100644
--- a/src/pages/PageTodo.vue
+++ b/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 {