Deleting categories

src/components/TheCategoryBar.vue

@@ -12,10 +12,12 @@
       <div
         class="category"
         v-for="category in categories" :key="category"
-        :style="{ background: stringToColor(category) }"
+        :style="{background: stringToColor(category)}"
+        :class="{selected: selectedCategory===category}"
+        @click="selectCategory(category)"
       >
         {{ category }}
-        <span @click="removeCategory(category)">×</span>
+        <span @click.stop="removeCategory(category)">×</span>
       </div>
     </div>
   </div>
@@ -29,6 +31,7 @@ export default {
   data() {
     return {
       newCategory: '+',
+      selectedCategory: undefined,
     };
   },
   methods: {
@@ -38,6 +41,9 @@ export default {
     },
     removeCategory(category) {
       this.$store.commit('removeCategory', category);
+      if (category === this.selectedCategory) {
+        this.selectedCategory();
+      }
     },
     blurInput(event) {
       this.newCategory = '+';
@@ -46,6 +52,14 @@ export default {
     stringToColor(str) {
       return toColor(str);
     },
+    selectCategory(category) {
+      if (this.selectedCategory === category) {
+        this.selectedCategory = undefined;
+      } else {
+        this.selectedCategory = category;
+      }
+      this.$emit('select', this.selectedCategory);
+    },
   },
   computed: {
     ...mapState({
@@ -88,6 +102,11 @@ export default {
 
     .category {
       margin-right: 16px;
+      border: 3px solid transparent;
+
+      &.selected {
+        border: 3px double $dark;
+      }
     }
   }
 }

src/store/index.js

@@ -18,6 +18,11 @@ export default createStore({
     },
     removeCategory(state, category) {
       state.categories = state.categories.filter((element) => element !== category);
+      state.tasks = state.tasks.map((task) => {
+        const newTask = task;
+        if (newTask.category === category) newTask.category = undefined;
+        return newTask;
+      });
     },
 
     addTask(state, name) {

src/views/Home/CategoryDropdown.vue

@@ -37,7 +37,8 @@ export default {
   background: $light;
   padding: 48px 12px 12px 12px;
   border-radius: 16px;
-  width: max-content;
+  min-width: 200px;
+  max-width: max-content;
   left: 50%;
   top: -12px;
   z-index: 100;

src/views/Home/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
-    <TheCategoryBar />
-    <TheTaskList />
+    <TheCategoryBar @select="select" />
+    <TheTaskList :selectedCategory="selectedCategory" />
   </div>
 </template>
 
@@ -15,5 +15,15 @@ export default {
     TheCategoryBar,
     TheTaskList,
   },
+  data() {
+    return {
+      selectedCategory: undefined,
+    };
+  },
+  methods: {
+    select(category) {
+      this.selectedCategory = category;
+    },
+  },
 };
 </script>

src/views/Home/TheTaskList.vue

@@ -7,7 +7,7 @@
       @keypress.enter="addTask"
     />
     <Task
-      v-for="task in tasks"
+      v-for="task in filteredTasks"
       :key="task.startedAt"
       :task=task
     />
@@ -23,6 +23,9 @@ export default {
   components: {
     Task,
   },
+  props: {
+    selectedCategory: String,
+  },
   data() {
     return {
       newTask: '',
@@ -38,6 +41,12 @@ export default {
     ...mapState({
       tasks: (state) => state.tasks,
     }),
+    filteredTasks() {
+      if (this.selectedCategory) {
+        return this.tasks.filter((task) => task.category === this.selectedCategory);
+      }
+      return this.tasks;
+    },
   },
 };
 </script>