From 76f839a587ea8de32ac896e3b48624191865d942 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Wed, 10 Feb 2021 10:14:31 -0800
Subject: [PATCH] 11.3 Display Tasks and Completed in own list

---
 src/components/Tasks/TasksCompleted.vue | 33 +++++++++++++++++++++++++
 src/components/Tasks/TasksTodo.vue      | 33 +++++++++++++++++++++++++
 src/pages/PageTodo.vue                  | 27 ++++++++++----------
 3 files changed, 79 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Tasks/TasksCompleted.vue
 create mode 100644 src/components/Tasks/TasksTodo.vue

diff --git a/src/components/Tasks/TasksCompleted.vue b/src/components/Tasks/TasksCompleted.vue
new file mode 100644
index 0000000..9e4b313
--- /dev/null
+++ b/src/components/Tasks/TasksCompleted.vue
@@ -0,0 +1,33 @@
+<template>
+    <q-list
+      v-if="Object.keys(tasksCompleted).length"
+      separator
+      bordered>
+
+      <task
+        v-for="(task, key) in tasksCompleted"
+        :key="key"
+        :task="task"
+        :id="key"
+      ></task>
+
+    </q-list>
+</template>
+
+<script>
+import task from 'components/Tasks/Task.vue'
+
+export default {
+  name: 'TasksCompleted',
+  components: {
+    task
+  },
+  props: [
+    'tasksCompleted'
+  ]
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/Tasks/TasksTodo.vue b/src/components/Tasks/TasksTodo.vue
new file mode 100644
index 0000000..f271d74
--- /dev/null
+++ b/src/components/Tasks/TasksTodo.vue
@@ -0,0 +1,33 @@
+<template>
+    <q-list
+      v-if="Object.keys(tasksTodo).length"
+      separator
+      bordered>
+
+      <task
+        v-for="(task, key) in tasksTodo"
+        :key="key"
+        :task="task"
+        :id="key"
+      ></task>
+
+    </q-list>
+</template>
+
+<script>
+import task from 'components/Tasks/Task.vue'
+
+export default {
+  name: 'TasksTodo',
+  components: {
+    task
+  },
+  props: [
+    'tasksTodo'
+  ]
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/pages/PageTodo.vue b/src/pages/PageTodo.vue
index e300d7a..eb5651b 100644
--- a/src/pages/PageTodo.vue
+++ b/src/pages/PageTodo.vue
@@ -1,18 +1,13 @@
 <template>
   <q-page class="q-pa-md">
-    <q-list
-      v-if="Object.keys(tasksTodo).length"
-      separator
-      bordered>
 
-      <task
-        v-for="(task, key) in tasksTodo"
-        :key="key"
-        :task="task"
-        :id="key"
-      ></task>
+    <tasks-todo
+      :tasksTodo="tasksTodo" />
 
-    </q-list>
+    <hr>
+
+    <tasks-completed
+      :tasksCompleted="tasksCompleted" />
 
     <div class="absolute-bottom text-center q-mb-lg">
       <q-btn
@@ -33,12 +28,16 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import tasksTodo from 'components/Tasks/TasksTodo.vue'
+import tasksCompleted from 'components/Tasks/TasksCompleted.vue'
+import addTask from 'components/Tasks/Modals/AddTask.vue'
 
 export default {
   name: 'PageTodo',
   components: {
-    task: require('components/Tasks/Task.vue').default,
-    addTask: require('components/Tasks/Modals/AddTask.vue').default
+    tasksTodo,
+    tasksCompleted,
+    addTask
   },
   data () {
     return {
@@ -46,7 +45,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('tasks', ['tasksTodo'])
+    ...mapGetters('tasks', ['tasksTodo', 'tasksCompleted'])
   }
 }
 </script>