init search api usage in Search component

components/Search.vue

@@ -1,24 +1,24 @@
-<template lang="pug">
+<template>
-  v-container.pt-0.pt-md-2
+  <v-container class='pt-0.pt-md-2'>
-    v-switch.mt-0(
+    <!-- <v-switch class='mt-0'
       v-if='recurrentFilter && settings.allow_recurrent_event'
       v-model='showRecurrent'
       inset color='primary'
       hide-details
-      :label="$t('event.show_recurrent')")
+      :label="$t('event.show_recurrent')"/> -->
-    v-autocomplete(
+
+    <v-combobox
       :label='$t("common.search")'
-      :items='keywords'
+      :items='items'
+      no-filter
+      @input='input'
       hide-details
-      @change='change'
+      :menu-props="{ maxWidth: '400' }"
-      :value='selectedFilters'
+      :search-input.sync='search'>
-      clearable
+        <!-- <template v-slot:selection="{ item, on, attrs, selected, parent}">
-      :search-input.sync='search'
+          <span>{{selected}}</span>
-      item-text='label'
+        </template> -->
-      return-object
+      <!-- template(v-slot:selection="data")
-      chips single-line
-      multiple)
-      template(v-slot:selection="data")
         v-chip(v-bind="data.attrs"
           close
           :close-icon='mdiCloseCircle'
@@ -26,12 +26,20 @@
           :input-value="data.selected")
           v-avatar(left)
             v-icon(v-text="data.item.type === 'place' ? mdiMapMarker : mdiTag")
-          span {{ data.item.label }}
+          span {{ data.item.label }} -->
-      template(v-slot:item='{ item }')
+      <template v-slot:item='{ item }' >
-          v-list-item-avatar
+        <v-list-item-avatar v-if="['place','tag'].includes(item.type)">
-            v-icon(v-text="item.type === 'place' ? mdiMapMarker : mdiTag")
+          <v-icon small v-text="item.type === 'place' ? mdiMapMarker : mdiTag" />
-          v-list-item-content
+        </v-list-item-avatar>
-            v-list-item-title(v-text='item.label')
+        <v-list-item-content v-if="item.type === 'event'">
+          <v-list-item-title v-text='item.title'/>
+          <v-list-item-subtitle>{{item.start_datetime | from}} @{{item.place.name}}</v-list-item-subtitle>
+        </v-list-item-content>
+        <v-list-item-title v-else-if='item.type==="tag"' v-text='item.tag' />
+        <v-list-item-title v-else-if='item.type==="place"' v-text='item.name' />
+      </template>
+    </v-combobox>
+  </v-container>
 </template>
 
 <script>
@@ -41,61 +49,67 @@ export default {
   name: 'Search',
   props: {
     recurrentFilter: { type: Boolean, default: true },
-    filters: { type: Object, default: () => {} }
+
   },
   data () {
     return {
       mdiTag, mdiMapMarker, mdiCloseCircle,
-      tmpfilter: null,
+      item: '',
+      items: [],
       search: ''
     }
   },
-  computed: {
+  watch: {
-    ...mapState(['tags', 'places', 'settings']),
+    async search (search) {
-    showRecurrent: {
+      if (!search) return
-      get () {
+      this.items = await this.$axios.$get('/event/search', { params: { search } })
-        return this.filters.show_recurrent
-      },
-      set (v) {
-        const filters = {
-          tags: this.filters.tags,
-          places: this.filters.places,
-          show_recurrent: v
-        }
-        this.$emit('update', filters)
-      }
-    },
-    selectedFilters () {
-      const tags = this.tags.filter(t => this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
-      const places = this.places.filter(p => this.filters.places.includes(p.id))
-        .map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
-      const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
-      return keywords
-    },
-    keywords () {
-      const tags = this.tags.map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
-      const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
-      const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
-      return keywords
     }
   },
+  computed: {
+    ...mapState(['settings']),
+    // showRecurrent: {
+    //   get () {
+    //     return this.filters.show_recurrent
+    //   },
+    //   set (v) {
+    //     const filters = {
+    //       tags: this.filters.tags,
+    //       places: this.filters.places,
+    //       show_recurrent: v
+    //     }
+    //     this.$emit('update', filters)
+    //   }
+    // },
+    // selectedFilters () {
+    //   const tags = this.tags.filter(t => this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
+    //   const places = this.places.filter(p => this.filters.places.includes(p.id))
+    //     .map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
+    //   const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
+    //   return keywords
+    // },
+    // keywords () {
+    //   const tags = this.tags.map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
+    //   const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
+    //   const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
+    //   return keywords
+    // }
+  },
   methods: {
-    remove (item) {
+    // remove (item) {
-      const filters = {
+    //   const filters = {
-        tags: item.type === 'tag' ? this.filters.tags.filter(f => f !== item.id) : this.filters.tags,
+    //     tags: item.type === 'tag' ? this.filters.tags.filter(f => f !== item.id) : this.filters.tags,
-        places: item.type === 'place' ? this.filters.places.filter(f => f !== item.id) : this.filters.places,
+    //     places: item.type === 'place' ? this.filters.places.filter(f => f !== item.id) : this.filters.places,
-        show_recurrent: this.filters.show_recurrent
+    //     show_recurrent: this.filters.show_recurrent
+    //   }
+    //   this.$emit('update', filters)
+    // },
+    input (item) {
+      if (typeof item ==='object') {
+        this.$emit(`${item.type}:selected`, item)
+      } else {
+        this.$emit('update', item)
       }
-      this.$emit('update', filters)
     },
-    change (filters) {
-      filters = {
-        tags: filters.filter(t => t.type === 'tag').map(t => t.id),
-        places: filters.filter(p => p.type === 'place').map(p => p.id),
-        show_recurrent: this.filters.show_recurrent
-      }
-      this.$emit('update', filters)
-    }
   }
 }
 </script>

pages/index.vue

@@ -17,7 +17,7 @@ v-container#home(fluid)
         Calendar(@dayclick='dayChange' @monthchange='monthChange' :events='filteredEvents')
 
     .col.pt-0.pt-md-2
-      Search(:filters='filters' @update='updateFilters')
+      Search(@tag:selected="tag => $router.push(`/tag/${tag.tag}`)")
       v-chip(v-if='selectedDay' close :close-icon='mdiCloseCircle' @click:close='dayChange()') {{selectedDay}}
 
   //- Events