add facility filters to toolbar

components/Facility/List.vue

@@ -597,8 +597,8 @@ export default {
       }
 
       return !(
-        ftBoolArr.reduce((a, b) => a && b) &&
-        statusBoolArr.reduce((a, b) => a && b)
+        ftBoolArr.reduce((a, b) => a && b, 0) &&
+        statusBoolArr.reduce((a, b) => a && b, 0)
       )
     },
     isSelected(stationId) {

components/Toolbar/Facilities/Wide.vue

@@ -15,10 +15,18 @@
       v-if="ready"
       class="data-options-bar">
 
-      <!-- <div>
-        <EnergyDataOptions />
+      <div>
+        <FacilityFilters
+          :selected-techs="selectedTechs"
+          :selected-statuses="selectedStatuses"
+          :selected-sizes="selectedSizes"
+          @techsSelect="(d) => selectedTechs = d"
+          @selectedStatuses="(d) => selectedStatuses = d"
+          @selectedSizes="(d) => selectedSizes = d"
+          @facilityNameFilter="(d) => filterString = d"
+        />
       </div>
- -->
+
 
     </div>
 
@@ -50,11 +58,13 @@
 import { mapGetters } from 'vuex'
 import ViewDropdown from '~/components/ui/ViewDropdown'
 import RegionDropdown from '~/components/ui/RegionDropdown'
+import FacilityFilters from '~/components/Facility/Filters.vue'
 
 export default {
   components: {
     ViewDropdown,
     RegionDropdown,
+    FacilityFilters
   },
 
   data() {
@@ -66,7 +76,43 @@ export default {
   computed: {
     ...mapGetters({
       tabletBreak: 'app/tabletBreak'
-    })
+    }),
+
+    filterString: {
+      get() {
+        return this.$store.getters['facility/filterString']
+      },
+      set(val) {
+        this.$store.commit('facility/filterString', val)
+      }
+    },
+
+    selectedSizes: {
+      get() {
+        return this.$store.getters['facility/selectedSizes']
+      },
+      set(val) {
+        this.$store.commit('facility/selectedSizes', val)
+      }
+    },
+
+    selectedStatuses: {
+      get() {
+        return this.$store.getters['facility/selectedStatuses']
+      },
+      set(val) {
+        this.$store.commit('facility/selectedStatuses', val)
+      }
+    },
+
+    selectedTechs: {
+      get() {
+        return this.$store.getters['facility/selectedTechs']
+      },
+      set(val) {
+        this.$store.commit('facility/selectedTechs', val)
+      }
+    }
   },
 
   mounted() {

pages/facilities/_region/index.vue

@@ -1,16 +1,6 @@
 <template>
   <div>
-    <facility-filters
-      :selected-techs="selectedTechs"
-      :selected-statuses="selectedStatuses"
-      :selected-sizes="selectedSizes"
-      class="facility-filters"
-      @techsSelect="handleTechsSelected"
-      @selectedStatuses="handleStatusesSelected"
-      @selectedSizes="handleSizesSelected"
-      @facilityNameFilter="handleFacilityNameFilter"
-    />
-
+
     <transition name="fade">
       <div 
         v-if="!ready" 
@@ -160,13 +150,9 @@ export default {
   data() {
     return {
       ready: false,
-      filterString: '',
       facilityData: [],
       selectedFacility: null,
       hoveredFacility: null,
-      selectedStatuses: [],
-      selectedTechs: [],
-      selectedSizes: [],
       sortBy: 'displayName',
       orderBy: ASCENDING,
       totalFacilities: 0,
@@ -238,15 +224,46 @@ export default {
     facilityOrderBy() {
       return this.$store.getters['facility/orderBy']
     },
-    facilitySelectedStatuses() {
-      return this.$store.getters['facility/selectedStatuses']
-    },
-    facilitySelectedTechs() {
-      return this.$store.getters['facility/selectedTechs']
-    },
     facilitySelectedView() {
       return this.$store.getters['facility/selectedView']
     },
+
+    filterString: {
+      get() {
+        return this.$store.getters['facility/filterString']
+      },
+      set(val) {
+        this.$store.commit('facility/filterString', val)
+      }
+    },
+
+    selectedSizes: {
+      get() {
+        return this.$store.getters['facility/selectedSizes']
+      },
+      set(val) {
+        this.$store.commit('facility/selectedSizes', val)
+      }
+    },
+
+    selectedStatuses: {
+      get() {
+        return this.$store.getters['facility/selectedStatuses']
+      },
+      set(val) {
+        this.$store.commit('facility/selectedStatuses', val)
+      }
+    },
+
+    selectedTechs: {
+      get() {
+        return this.$store.getters['facility/selectedTechs']
+      },
+      set(val) {
+        this.$store.commit('facility/selectedTechs', val)
+      }
+    },
+
     cardFilename() {
       return this.useDev
         ? `${this.baseUrl}opennem-facilities-dev.png`
@@ -283,7 +300,6 @@ export default {
     this.$store.dispatch('currentView', 'facilities')
     this.sortBy = this.facilitySortBy
     this.orderBy = this.facilityOrderBy
-    // this.selectedStatuses = this.facilitySelectedStatuses
     this.selectedStatuses = this.queryStatus
     this.selectedTechs = this.queryTech
     this.selectedSizes = this.querySize
@@ -414,6 +430,8 @@ export default {
         regionIds = getNEMRegionArray()
       }
 
+      this.updateQuery()
+
       async function updateFilter() {
         return filtered.filter(
           (g) =>
@@ -459,14 +477,6 @@ export default {
       return order === ASCENDING ? DESCENDING : ASCENDING
     },
 
-    setFilterString(string) {
-      this.filterString = string
-      this.updateFacilitiesData()
-    },
-
-    handleFacilityNameFilter(string) {
-      this.filterString = string
-    },
     handleOrderChange(orderName) {
       if (this.sortBy === orderName) {
         this.orderBy = this.toggleOrder(this.orderBy)
@@ -527,21 +537,6 @@ export default {
         query
       })
     },
-    handleTechsSelected(techs) {
-      this.selectedTechs = techs
-      this.$store.dispatch('facility/selectedTechs', techs)
-      this.updateQuery()
-    },
-    handleStatusesSelected(statuses) {
-      this.selectedStatuses = statuses
-      this.$store.dispatch('facility/selectedStatuses', statuses)
-      this.updateQuery()
-    },
-    handleSizesSelected(sizes) {
-      this.selectedSizes = sizes
-      this.$store.dispatch('facility/selectedSizes', sizes)
-      this.updateQuery()
-    },
     handleCloseDetail() {
       this.selectedFacility = null
     },
@@ -598,7 +593,7 @@ export default {
       position: fixed;
       right: 0;
       top: 126px;
-      z-index: 9999;
+      z-index: 99;
       padding: 0 1rem 0 0;
     }
   }

store/facility.js

@@ -54,6 +54,7 @@ export const state = () => ({
   selectedView: 'list',
   selectedMapStyle: MAP_STYLE_LIGHT,
   filteredFacilities: [],
+  filterString: '',
 
   previousPath: '',
   fetchingFacility: false,
@@ -105,6 +106,9 @@ export const mutations = {
   filteredFacilities(state, data) {
     state.filteredFacilities = data
   },
+  filterString(state, data) {
+    state.filterString = data
+  },
 
   previousPath(state, data) {
     state.previousPath = data
@@ -178,6 +182,7 @@ export const getters = {
   selectedView: (state) => state.selectedView,
   selectedMapStyle: (state) => state.selectedMapStyle,
   filteredFacilities: (state) => state.filteredFacilities,
+  filterString: (state) => state.filterString,
 
   previousPath: (state) => state.previousPath,
   fetchingFacility: (state) => state.fetchingFacility,