15,06 Add a Show tasks in one list Setting

src/components/Tasks/TasksCompleted.vue

@@ -4,8 +4,13 @@
     enter-active-class="animated zoomIn"
     leave-active-class="animated zoomOut"
   >
-    <div class="q-mt-lg">
+    <div
-      <list-header bgColor="bg-green-4">Completed</list-header>
+      :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>
 

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>
 

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>

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 () {

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)
   }
 }