joemsak/1_layout.html.erb

## 1_layout.html.erb
<!DOCTYPE html>
<html>
  <head>
    <!-- other HEAD stuff omitted -->
    <%= stylesheet_link_tag("//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons") %>
    <%= yield :css %>
    <%= yield :js %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

## 2_admin.html.erb
<% provide :title, "Admin Data • Participants" %>
<% provide :js, javascript_pack_tag("admin") %>
<% provide :css, stylesheet_pack_tag("admin") %>

<div class="panel">
  <div id="app">
    <v-app>
      <v-container>
        <!-- other filters -->
        <season-filter></season-filter>
      </v-container>
    </v-app>
  </div>
</div>

<!-- results from searching with filters -->

## 3_app_javascript_packs_admin.js
import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import Vuex from 'vuex'
import Vuetify from 'vuetify'

import _ from 'lodash'

Vue.use(Vuex)

Vue.use(Vuetify)

import VTooltip from 'v-tooltip';

import SeasonFilter from '../admin/SeasonFilter'

import "../components/tooltip.scss";

Vue.use(TurbolinksAdapter);
Vue.use(VTooltip);

import 'vuetify/dist/vuetify.min.css'
import '../admin/main.scss'

const store = new Vuex.Store({
  state: {
    searchFilters: {
      seasons: // filter values and properties...,
    },
  },

  getters: {
    searchFilters: (state) => (opts) => {
      // return filter from opts...
    }
  },

  mutations: {
    searchFilters (state, opts) {
      // remote ajax with filters
    },
  },
})

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: "#app",

    store,

    computed: {
    },

    components: {
      SeasonFilter,
    },

    mounted () {
      console.log('admin participants')
    },
  });
});

## 4_app_javascript_admin_SeasonFilter.vue
<template>
  <div>
    <v-subheader>Seasons</v-subheader>

    <v-select
      label="Select"
      :items="seasons"
      v-model="selected"
      multiple
      chips
      deletable-chips
      hint="Choose seasons"
      persistent-hint
      ></v-select>
  </div>
</template>

<script>
export default {
  name: 'SeasonFilter',

  data () {
    return {
      seasons: this.$store.getters.searchFilters({
        name: 'seasons',
      }),

      selected: this.$store.getters.searchFilters({
        name: 'selectedSeasons',
      }),
    }
  },

  watch: {
    selected (collection) {
      this.$store.commit('searchFilters', {
        filterRoot: 'seasons',
        value: collection
      })
    },
  },

  props: [],

  components: {
  },

  methods: {
  },

  mounted () {
    console.log('season filter')
  },
}
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- other HEAD stuff omitted -->
	<%= stylesheet_link_tag("//fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons") %>
	<%= yield :css %>
	<%= yield :js %>
	</head>

	<body>
	<%= yield %>
	</body>
	</html>
	<% provide :title, "Admin Data • Participants" %>
	<% provide :js, javascript_pack_tag("admin") %>
	<% provide :css, stylesheet_pack_tag("admin") %>

	<div class="panel">
	<div id="app">
	<v-app>
	<v-container>
	<!-- other filters -->
	<season-filter></season-filter>
	</v-container>
	</v-app>
	</div>
	</div>

	<!-- results from searching with filters -->
	import TurbolinksAdapter from 'vue-turbolinks';
	import Vue from 'vue/dist/vue.esm';
	import Vuex from 'vuex'
	import Vuetify from 'vuetify'

	import _ from 'lodash'

	Vue.use(Vuex)

	Vue.use(Vuetify)

	import VTooltip from 'v-tooltip';

	import SeasonFilter from '../admin/SeasonFilter'

	import "../components/tooltip.scss";

	Vue.use(TurbolinksAdapter);
	Vue.use(VTooltip);

	import 'vuetify/dist/vuetify.min.css'
	import '../admin/main.scss'

	const store = new Vuex.Store({
	state: {
	searchFilters: {
	seasons: // filter values and properties...,
	},
	},

	getters: {
	searchFilters: (state) => (opts) => {
	// return filter from opts...
	}
	},

	mutations: {
	searchFilters (state, opts) {
	// remote ajax with filters
	},
	},
	})

	document.addEventListener('DOMContentLoaded', () => {
	new Vue({
	el: "#app",

	store,

	computed: {
	},

	components: {
	SeasonFilter,
	},

	mounted () {
	console.log('admin participants')
	},
	});
	});
	<template>
	<div>
	<v-subheader>Seasons</v-subheader>

	<v-select
	label="Select"
	:items="seasons"
	v-model="selected"
	multiple
	chips
	deletable-chips
	hint="Choose seasons"
	persistent-hint
	></v-select>
	</div>
	</template>

	<script>
	export default {
	name: 'SeasonFilter',

	data () {
	return {
	seasons: this.$store.getters.searchFilters({
	name: 'seasons',
	}),

	selected: this.$store.getters.searchFilters({
	name: 'selectedSeasons',
	}),
	}
	},

	watch: {
	selected (collection) {
	this.$store.commit('searchFilters', {
	filterRoot: 'seasons',
	value: collection
	})
	},
	},

	props: [],

	components: {
	},

	methods: {
	},

	mounted () {
	console.log('season filter')
	},
	}
	</script>