#756 User is able to select filters quickly

app/javascript/pages/browse/Filters.vue

@@ -1,29 +1,37 @@
 <template>
   <section>
     <b-collapse :open="false" id="collapse-filters">
-      <span
-        class="subtitle is-4"
-        slot="trigger"
-        slot-scope="props"
-      >
+      <span class="subtitle is-4" slot="trigger" slot-scope="props">
         <b-icon :icon="props.open ? 'caret-down' : 'caret-right'"></b-icon>
         Filters
       </span>
-
-      <div class="columns mt-1">
+      <div class="field mt-1">
+        <b-checkbox
+          id='toggle-all-filters'
+          @input="toggleAllFilters"
+          :value="allFiltersSelected"
+          :indeterminate="indeterminateAll"
+          >Select all</b-checkbox
+        >
+      </div>
+      <div class="columns">
         <b-collapse
           class="column"
           v-for="(type, index) of filterTypes"
           :key="index"
           :open="initialOpenStatus(index)"
         >
-          <span
-            class="subtitle is-5"
-            slot="trigger"
-            slot-scope="props"
-          >
+          <span class="subtitle is-5" slot="trigger" slot-scope="props">
             {{ type.name }} <a>{{ props.open ? '-' : '+' }}</a>
           </span>
+          <b-checkbox
+            :id="`toggle-filters-${type.name}`"
+            @input="toggleFilters(type.filters)"
+            :value="filterTypeSelectAllValue(type.filters)"
+            :indeterminate="indeterminate(type.filters)"
+          >
+            Select all
+          </b-checkbox>
           <ul class="mt-1">
             <li v-for="filter of type.filters" :key="filter.id">
               <b-checkbox
@@ -59,6 +67,16 @@ export default {
     prop: 'currentFilters',
     event: 'change',
   },
+  computed: {
+    allFiltersSelected: function () {
+      return JSON.stringify(this.allFilters.sort()) == JSON.stringify(this.currentFilters.sort())
+    },
+    indeterminateAll: function () {
+      return this.currentFilters.length == 0
+        ? false
+        : this.currentFilters.length < this.allFilters.length
+    },
+  },
   methods: {
     initialOpenStatus(index) {
       // return index < 2
@@ -67,6 +85,37 @@ export default {
     showIconsForFilter(filterName) {
       return !!this.hasFilterIcons[filterName]
     },
+    currentFiltersForFilterType(filterIds) {
+      return this.currentFilters.filter((el) => filterIds.includes(el))
+    },
+    filterTypeSelectAllValue(filters) {
+      let filterIds = filters.map((f) => f.id)
+      return this.currentFiltersForFilterType(filterIds).length == filterIds.length
+    },
+    indeterminate(filters) {
+      let filterIds = filters.map((f) => f.id)
+      return this.currentFiltersForFilterType(filterIds).length == 0
+        ? false
+        : this.currentFiltersForFilterType(filterIds).length < filterIds.length
+    },
+    toggleFilters(filters) {
+      let filterIds = filters.map((f) => f.id)
+      if (this.currentFiltersForFilterType(filterIds).length < filterIds.length) {
+        this.$emit('change', [...new Set([...this.currentFilters, ...filterIds])])
+      } else {
+        this.$emit(
+          'change',
+          this.currentFilters.filter((el) => !filterIds.includes(el))
+        )
+      }
+    },
+    toggleAllFilters() {
+      if (this.currentFilters.length < this.allFilters.length) {
+        this.$emit('change', this.allFilters)
+      } else {
+        this.$emit('change', [])
+      }
+    },
   },
   data() {
     return {
@@ -78,6 +127,9 @@ export default {
           })
           return memo
         }, {}),
+      allFilters: [].concat(
+        ...this.filterTypes.map((fType) => fType.filters.map((filter) => filter.id))
+      ),
     }
   },
 }

spec/javascript/pages/browse/Filters.spec.js

@@ -1,4 +1,4 @@
-import {mount} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Filters from 'pages/browse/Filters'
 import filterTypes from '../../../../lib/filterCategories.json'
 
@@ -9,11 +9,42 @@ describe('Filters', function () {
       result = event
     }
     const wrapper = mount(Filters, {
-      propsData: {filterTypes: filterTypes},
-      listeners: {change: clickHandler},
+      propsData: { filterTypes: filterTypes },
+      listeners: { change: clickHandler },
     })
-    const checkbox = wrapper.find('input[type=checkbox]')
+    const checkbox = wrapper.findAll('input[type=checkbox]').at(2)
     checkbox.trigger('click')
     assert.deepEqual(result, [filterTypes[0].filters[0].id])
   })
+
+  it('toggle-filters works', function () {
+    var result = {}
+    const clickHandler = function (event, trash) {
+      result = event
+    }
+    const wrapper = mount(Filters, {
+      propsData: { filterTypes: filterTypes },
+      listeners: { change: clickHandler },
+    })
+    const checkbox = wrapper.find(`#toggle-filters-${filterTypes[0].name}`)
+    checkbox.trigger('click')
+    assert.deepEqual(result, filterTypes[0].filters.map(f=>f.id))
+  })
+
+  it('toggle-all-filters works', function () {
+    var result = {}
+    const clickHandler = function (event, trash) {
+      result = event
+    }
+    const wrapper = mount(Filters, {
+      propsData: { filterTypes: filterTypes },
+      listeners: { change: clickHandler },
+    })
+    const checkbox = wrapper.find('#toggle-all-filters')
+    checkbox.trigger('click')
+    const allFilters = [].concat(
+      ...filterTypes.map((fType) => fType.filters.map((filter) => filter.id))
+    )
+    assert.deepEqual(result.sort(), allFilters.sort())
+  })
 })