Added tag filtering to gallery

src/components/paneDisplayComponents/galleryDisplay.vue

@@ -1,11 +1,32 @@
 <template>
-	<div class="galleryDisplay uk-padding uk-padding-remove-right">
+	<div class="galleryDisplay uk-padding-remove">
 
-    <div uk-lightbox="toggle: .lightbox-link">
+    <nav class="uk-navbar-container" uk-navbar="mode: click">
+        <div class="uk-navbar-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
+
+            <ul class="uk-navbar-nav">
+                <li>
+                  <a href="#">Filter</a>
+                  <div class="uk-navbar-dropdown">
+                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                      <form class="uk-form-stacked">
+                        <div v-for="tag in allTags" :key="tag" class="uk-margin-small">
+                          <label><input class="uk-checkbox" type="checkbox" v-bind:id="tag" v-bind:value="tag" v-model="checkedTags" checked> {{ tag }}</label>
+                        </div>
+                      </form>
+                    </ul>
+                  </div>
+                </li>
+            </ul>
+
+        </div>
+    </nav>
+
+    <div class="uk-padding uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
       <div class="uk-grid-medium uk-padding uk-padding-remove-right uk-grid-match" uk-grid>
       
         <captureCard 
-          v-for="capture in captureList" 
+          v-for="capture in filteredCaptures" 
           :key="capture.metadata.id"
           :metadata="capture.metadata"
           :temporary="capture.temporary"
@@ -32,7 +53,8 @@ export default {
 
   data: function () {
     return {
-      captureList: []
+      captureList: [],
+      checkedTags: []
     }  
   },
 
@@ -66,8 +88,45 @@ export default {
     captureApiUri: function () {
       return this.$store.getters.uri + "/camera/capture"
     },
-    orderedcaptureList: function () {
+
-      return _.orderBy(this.captureList, 'metadata_path', 'desc')
+    allTags: function () {
+      // Return an array of unique tags across all captures
+      var tags = [];
+      for (var i in this.captureList) {
+        var capture = this.captureList[i]
+        for (var j in capture.metadata.tags) {
+          var tag = capture.metadata.tags[j]
+          if (!tags.includes(tag)) {
+            tags.push(tag)
+          };
+        };
+      };
+      return tags
+    },
+
+    filteredCaptures: function () {
+      var captures = [];
+      for (var i in this.captureList) {
+        // Quickly access capture object
+        var capture = this.captureList[i];
+        // Assume exclusion
+        var includeCapture = false;
+
+        // Filter by selected tags
+        var tags = capture.metadata.tags;
+        let checker = (arr, target) => target.every(v => arr.includes(v));
+        // True if all tags match
+        includeCapture = checker(tags, this.checkedTags)
+
+        // Add to capture list if matched
+        if (includeCapture == true) {
+          captures.push(capture)
+        }
+
+      };
+
+    return captures
+      
     }
   }