1 files changed, 22 insertions(+), 2 deletions(-)

M frontend/src/SpendingLog.vue

@@ 6,6 6,17 @@
     <button @click="addTransaction"
             class="primary">Add</button>
   </div>
+  <div class="spending-log__filter">
+    <h3>Filter:</h3>
+    <select v-model="filterCategoryId">
+      <option value="">All Categories</option>
+      <option v-for="category in categories"
+              :key="category.id"
+              :value="category.id">
+        {{ category.name }}
+      </option>
+    </select>
+  </div>
   <div v-if="loading">Loading...</div>
   <div v-else
        class="spending_log_table">


@@ 59,7 70,8 @@ export default {
   },
   data () {
     return {
-      limit: true
+      limit: true,
+      filterCategoryId: ''
     }
   },
   methods: {


@@ 102,7 114,10 @@ export default {
       if (!log) {
         return log
       }
-      const processedLog = log.slice().reverse().filter(s => this.category(s))
+      let processedLog = log.slice().reverse().filter(s => this.category(s))
+      if (this.filterCategoryId) {
+        processedLog = processedLog.filter(s => s.category === this.filterCategoryId)
+      }
       if (this.limit) {
         return processedLog.slice(0, 5)
       } else {


@@ 135,6 150,11 @@ export default {
     font-weight: bold;
 }
 
+.spending-log__filter {
+    display: flex;
+    justify-content: center;
+}
+
 .c-spending-log_color-box {
     display: inline-block;
     border-radius: 10px;