gancio-upstream/components/Search.vue

<template lang="pug">
  div.ml-2.mt-1
    el-switch.mb-1(v-if='$auth.loggedIn'
      active-text='solo miei'
      inactive-text='tutti'
      inactive-color='lightgreen'
      v-model='onlyMine'
    )
    el-switch.mt-1.mb-1.ml-2.d-block(
      inactive-text='futuri'
      active-text='anche passati'
      inactive-color='lightgreen'
      v-model='showPast'
    )

    el-select.search(v-model='filter' multiple 
      filterable collapse-tags default-first-option
      :placeholder='$t("common.search")')
      el-option(v-for='(keyword, id) in keywords' :key='keyword.value'
        :label='keyword.label' :value='keyword.value')

</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
  data () {
    return {
      onlyMine: false,
      withPast: true,
    }
  },
  name :'Search',
  methods: mapActions(['setSearchPlaces', 'setSearchTags', 'showPastEvents']),
  computed: {
    ...mapState(['tags', 'places', 'filters', 'show_past_events']),
    // TOFIX: optimize
    keywords () {
      const tags = this.tags.map( t => ({ value: 't' + t.tag, label: t.tag, weigth: t.weigth }))
      const places = this.places.map( p => ({ value: 'p' + p.id, label: p.name, weigth: p.weigth }))
      return tags.concat(places).sort((a, b) => b.weigth-a.weigth)
    },
    showPast : {
      set (value) {
        this.showPastEvents(value)
      },
      get () {
        return this.show_past_events
      }
    },
    filter: {
      set (filters) {
        const tags = filters.filter(f => f[0] === 't').map(t => t.slice(1))
        this.setSearchTags(tags)
        const places = filters.filter(f => f[0] === 'p').map(p => +p.slice(1))
        this.setSearchPlaces(places)
      },
      get () {
        return this.filters.tags.map(t => 't' + t).concat(this.filters.places.map(p => 'p' + p))
      }
    },
  }
}
</script>