From 92a7f0df0d45b4bce1bc152da87d7b1a83d6fd4e Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 16:40:59 -0800
Subject: [PATCH] 15,06 Add a Show tasks in one list Setting

---
 src/components/Tasks/TasksCompleted.vue | 15 +++++++++++---
 src/components/Tasks/TasksTodo.vue      | 11 +++++++++--
 src/pages/PageSettings.vue              | 26 ++++++++++++++++++++++++-
 src/pages/PageTodo.vue                  |  3 ++-
 src/store/store-settings.js             |  9 ++++++++-
 5 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/components/Tasks/TasksCompleted.vue b/src/components/Tasks/TasksCompleted.vue
index 4df4248..4ff42c0 100644
--- a/src/components/Tasks/TasksCompleted.vue
+++ b/src/components/Tasks/TasksCompleted.vue
@@ -4,8 +4,13 @@
     enter-active-class="animated zoomIn"
     leave-active-class="animated zoomOut"
   >
-    <div class="q-mt-lg">
-      <list-header bgColor="bg-green-4">Completed</list-header>
+    <div
+      :class="{ 'q-mt-lg' : !settings.showTasksInOnelist }"
+    >
+      <list-header
+        v-if="!settings.showTasksInOnelist"
+        bgColor="bg-green-4"
+      >Completed</list-header>
       <q-list
         separator
         bordered>
@@ -22,6 +27,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import task from 'components/Tasks/Task.vue'
 import listHeader from 'components/Shared/ListHeader.vue'
 
@@ -33,7 +39,10 @@ export default {
   },
   props: [
     'tasksCompleted'
-  ]
+  ],
+  computed: {
+    ...mapGetters('settings', ['settings'])
+  }
 }
 </script>
 
diff --git a/src/components/Tasks/TasksTodo.vue b/src/components/Tasks/TasksTodo.vue
index 37bb0d4..0aae150 100644
--- a/src/components/Tasks/TasksTodo.vue
+++ b/src/components/Tasks/TasksTodo.vue
@@ -5,7 +5,10 @@
     leave-active-class="animated zoomOut absolute-top"
   >
     <div>
-      <list-header bgColor="bg-orange-4">Todo</list-header>
+      <list-header
+        v-if="!settings.showTasksInOnelist"
+        bgColor="bg-orange-4"
+      >Todo</list-header>
       <q-list
         separator
         bordered>
@@ -23,6 +26,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import task from 'components/Tasks/Task.vue'
 import listHeader from 'components/Shared/ListHeader.vue'
 
@@ -34,7 +38,10 @@ export default {
   },
   props: [
     'tasksTodo'
-  ]
+  ],
+  computed: {
+    ...mapGetters('settings', ['settings'])
+  }
 }
 </script>
 
diff --git a/src/pages/PageSettings.vue b/src/pages/PageSettings.vue
index b102054..1ddb912 100644
--- a/src/pages/PageSettings.vue
+++ b/src/pages/PageSettings.vue
@@ -14,6 +14,19 @@
           />
         </q-item-section>
       </q-item>
+
+      <q-item tag="label" v-ripple>
+        <q-item-section>
+          <q-item-label>Show tasks in one list</q-item-label>
+        </q-item-section>
+        <q-item-section side >
+          <q-toggle
+            color="blue"
+            v-model="showTasksInOnelist"
+          />
+        </q-item-section>
+      </q-item>
+
     </q-list>
   </q-page>
 </template>
@@ -32,10 +45,21 @@ export default {
       set (value) {
         this.setShow12HourTimeFormat(value)
       }
+    },
+    showTasksInOnelist: {
+      get () {
+        return this.settings.showTasksInOnelist
+      },
+      set (value) {
+        this.setShowTasksInOnelist(value)
+      }
     }
   },
   methods: {
-    ...mapActions('settings', ['setShow12HourTimeFormat'])
+    ...mapActions('settings', [
+      'setShow12HourTimeFormat',
+      'setShowTasksInOnelist'
+    ])
   }
 }
 </script>
diff --git a/src/pages/PageTodo.vue b/src/pages/PageTodo.vue
index 0754702..846efd8 100644
--- a/src/pages/PageTodo.vue
+++ b/src/pages/PageTodo.vue
@@ -14,7 +14,7 @@
           No Search Results
         </p>
         <noTasks
-          v-if="!Object.keys(tasksTodo).length && !search" />
+          v-if="!Object.keys(tasksTodo).length && !search && !settings.showTasksInOnelist" />
 
         <tasks-todo
           v-if="Object.keys(tasksTodo).length"
@@ -72,6 +72,7 @@ export default {
   },
   computed: {
     ...mapGetters('tasks', ['tasksTodo', 'tasksCompleted']),
+    ...mapGetters('settings', ['settings']),
     ...mapState('tasks', ['search'])
   },
   mounted () {
diff --git a/src/store/store-settings.js b/src/store/store-settings.js
index 6c4e521..18e88a7 100644
--- a/src/store/store-settings.js
+++ b/src/store/store-settings.js
@@ -1,18 +1,25 @@
 const state = {
   settings: {
-    show12HourTimeFormat: false
+    show12HourTimeFormat: false,
+    showTasksInOnelist: false
   }
 }
 
 const mutations = {
   setShow12HourTimeFormat (state, value) {
     state.settings.show12HourTimeFormat = value
+  },
+  setShowTasksInOnelist (state, value) {
+    state.settings.showTasksInOnelist = value
   }
 }
 
 const actions = {
   setShow12HourTimeFormat ({ commit }, value) {
     commit('setShow12HourTimeFormat', value)
+  },
+  setShowTasksInOnelist ({ commit }, value) {
+    commit('setShowTasksInOnelist', value)
   }
 }