Add filter for colors;

src/views/Notes.vue

@@ -2,13 +2,32 @@
     <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 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>
@@ -31,6 +50,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -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>