Commit f3024b94 authored by Joel Collins's avatar Joel Collins
Browse files

Added tag filtering to gallery

parent b3f2641b
Loading
Loading
Loading
Loading
+65 −6
Original line number Diff line number Diff line
<template>
	<div class="galleryDisplay uk-padding uk-padding-remove-right">
	<div class="galleryDisplay uk-padding-remove">

    <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 uk-lightbox="toggle: .lightbox-link">
    <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
      
    }
  }