From c636bb6f82d375f1fd0ebc87ac5d0567c171dc0d Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Fri, 25 Feb 2022 00:58:38 +0100
Subject: [PATCH] Add filter for colors;

---
 src/views/Notes.vue | 59 ++++++++++++++++++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/views/Notes.vue b/src/views/Notes.vue
index 9ca3cb5..5110c15 100644
--- a/src/views/Notes.vue
+++ b/src/views/Notes.vue
@@ -2,29 +2,49 @@
     <div class="row">
         <div class="col-sm-12">
             <div class="float-end">
+                <a href="javascript:"
+                   v-if="colorToFilter !== ''"
+                   v-on:click="colorToFilter = ''"
+                   class="color-change-button disable-filter-button"
+                   :style="'background-color: '+colorToFilter">
+                    Filter aus
+                </a>
+                <span v-for="color in noteColors"
+                      v-bind:key="color">
+                    <a href="javascript:"
+                       v-if="colorToFilter !== color"
+                       v-on:click="colorToFilter = color"
+                       class="color-change-button"
+                       :style="'background-color: ' + color">
+                        <i class="fas fa-filter filter-icon"></i>
+                    </a>
+                </span>
+                &nbsp;
                 <a href="javascript:" v-on:click="createNote()" class="btn btn-sm btn-success">Neue Notiz</a>
             </div>
             <h5><i class="fa fa-pen"></i> Notizen</h5>
         </div>
 
         <div id="note-container" class="row">
-            <div class="col-lg-4 col-md-6" v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
-                <div class="card">
-                    <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
-                        <textarea v-model="note.body" spellcheck="false" @keydown="this.$store.commit('saveNotes')"></textarea>
-                        <div class="color-changer">
+            <div v-for="(note, noteIndex) in $store.state.notes" v-bind:key="noteIndex">
+                <div class="col-lg-4 col-md-6" v-if="colorToFilter === '' || note.color === colorToFilter">
+                    <div class="card">
+                        <div class="card-body note" :style="'background-color:' + note.color ?? '#ffea77'">
+                            <textarea v-model="note.body" spellcheck="false" @keydown="this.$store.commit('saveNotes')"></textarea>
+                            <div class="color-changer">
                             <span v-for="color in noteColors"
-                               v-bind:key="color">
+                                  v-bind:key="color">
                                 <span href="javascript:"
-                                   @click="changeColor(note, color);"
-                                   class="color-change-button"
-                                   v-if="color !== note.color"
-                                   :style="'background-color: ' + color">
+                                      @click="changeColor(note, color);"
+                                      class="color-change-button"
+                                      v-if="color !== note.color"
+                                      :style="'background-color: ' + color">
                                 </span>
                             </span>
-                        </div>
-                        <div class="float-end">
-                            <a href="javascript:" class="delete-button" @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a>
+                            </div>
+                            <div class="float-end">
+                                <a href="javascript:" class="delete-button" @click="$store.commit('deleteNote', noteIndex)"><i class="fas fa-trash"></i></a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -40,7 +60,8 @@ export default {
     name: "Notes",
     data() {
         return {
-            noteColors: ['#ffea77', '#ee6352', '#59cd90', '#3fa7d6', '#fac05e', '#f79d84']
+            noteColors: ['#ffea77', '#ee6352', '#59cd90', '#3fa7d6', '#fac05e', '#f79d84'],
+            colorToFilter: ''
         }
     },
     methods: {
@@ -126,4 +147,14 @@ textarea:focus {
 .delete-button:hover * {
     color: white;
 }
+
+.filter-icon {
+    color: white;
+    font-size: 0.7em;
+}
+
+.disable-filter-button {
+    color: white;
+    background-color: grey;
+}
 </style>
\ No newline at end of file