Added year filter

SpeciesFileGroup · Dec 11, 2019 · 9ce2f4b · 9ce2f4b
1 parent 2116c83
commit 9ce2f4b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/app/javascript/vue/tasks/otu/browse/components/NomenclatureHistory.vue b/app/javascript/vue/tasks/otu/browse/components/NomenclatureHistory.vue
@@ -34,7 +34,7 @@
       <ul class="taxonomic_history">
         <li 
           v-for="item in nomenclature.items"
-          v-show="checkFilter(item)">
+          v-if="checkFilter(item)">
           <span v-html="item.label_html"/>
         </li>
       </ul>
@@ -73,7 +73,9 @@
             </li>
           </ul>
           <h4 class="capitalize separate-bottom">Year</h4>
-          <year-picker :years="nomenclature.sources.year_metadata"/>
+          <year-picker 
+            v-model.number="filterSections.year[0].value"
+            :years="nomenclature.sources.year_metadata"/>
         </div>
         <div>
           <h4 class="capitalize separate-bottom">Topic</h4>
@@ -140,16 +142,25 @@ export default {
           {
             label: 'First',
             key: 'history-is-first',
-            value: true,
-            attribute: true
+            value: false,
+            attribute: true,
+            equal: true
           },
           {
             label: 'End',
             key: 'history-is-last',
-            value: true,
-            attribute: true
+            value: false,
+            attribute: true,
+            equal: true
           }
         ],
+        year: [{
+          label: 'Year',
+          key: 'history-year',
+          value: undefined,
+          attribute: true,
+          equal: true
+        }],
         metadata: [
           {
             label: 'Notes',
@@ -255,17 +266,19 @@ export default {
         (this.tabSelected.label === 'All')) && 
         keys.every(key => {
           return this.filterSections[key].every(filter => {
-            return filter.hasOwnProperty('attribute') || filter.attribute ? item.data_attributes[filter.key] !== filter.value : true
+            if (filter.value === undefined) return true
+            return !filter.hasOwnProperty('attribute') || filter.attribute ? 
+            (filter.hasOwnProperty('equal') && filter.equal ? 
+            item.data_attributes[filter.key] === filter.value : 
+            item.data_attributes[filter.key] !== filter.value) : true
           })
         })
     },
     filterSource(source) {
       let globalIds = source.objects
-      return this.nomenclature.items.find(item => {
-        if (this.checkFilter(item)) {
-          return globalIds.includes(item.data_attributes['history-object-id'])
-        }
-      })
+      return (this.nomenclature.items.filter(item => { return this.checkFilter(item) }).find(item => {
+        return globalIds.includes(item.data_attributes['history-object-id']) 
+      }) != undefined)
     }
   }
 }

diff --git a/app/javascript/vue/tasks/otu/browse/components/nomenclature/yearsPick.vue b/app/javascript/vue/tasks/otu/browse/components/nomenclature/yearsPick.vue
@@ -3,17 +3,18 @@
     <ul class="no_bullets">
       <li
         class="full_width year-line"
-        v-for="(value, year) in years"
+        v-for="(count, year) in years"
+        @click="setYear(Number(year))"
         :key="year"
         :style="{
-          background: `linear-gradient(to right, #5D9ECE ${getSize(value)}%, transparent ${getSize(value)}% ${100-getSize(value)}%)`
+          background: `linear-gradient(to right, ${value === Number(year) ? '#F5F5F5' : '#5D9ECE'} ${getSize(count)}%, transparent ${getSize(count)}% ${100-getSize(count)}%)`
           }">
         <div
           class="full_width year-string"
           :style="{
-            background: `linear-gradient(to right, white ${getSize(value)}%, black ${getSize(value)}% ${100-getSize(value)}%)`,
+            background: `linear-gradient(to right, white ${getSize(count)}%, black ${getSize(count)}% ${100-getSize(count)}%)`,
             '-webkit-background-clip': 'text',
-            '-webkit-text-fill-color': 'transparent'
+            '-webkit-text-fill-color': value === Number(year) ? 'black' : 'transparent'
           }"
           >{{ year }}</div>
       </li>
@@ -27,24 +28,28 @@ export default {
     years: {
       type: Object,
       required: true
+    },
+    value: {
+      type: [Number, String],
+      default: undefined
     }
   },
   data () {
     return {
-      max: undefined
+      max: undefined,
     }
   },
   watch: {
     years: {
       handler(newVal) {
-        this.setYears(newVal)
+        this.max = Math.max(...Object.values(newVal))
       },
       immediate: true
     }
   },
   methods: {
-    setYears (years) {
-      this.max = Math.max(...Object.values(years))
+    setYear (year) {
+      this.$emit('input', this.value === year ? undefined : year)
     },
     getSize (value) {
       return (value / this.max) * 100