Search.vue

<template>
  <div class="search container">
    <div class="columns">
      <div class="column">
        <h1 class="title is-6 filterTitle">Filters</h1>
        <Filters v-bind:tags="tags" v-on:setTags="setTags"/>
      </div>
      <div v-if="result" class="column is-four-fifths">
        <h1 class="title is-6 searchTitle">Search</h1>
        <b-field grouped>
          <b-input placeholder="Search..."
            type="search"
            icon="magnify"
            v-model="paramSearch"
            v-on:keyup.enter.native="setSearch"
            expanded
            />
          <b-select placeholder="Order by" icon="filter" @input="setOrder">
            <option value="vote">Most vote</option>
            <option value="date">Most recent</option>
          </b-select>
        </b-field>
        <h1 class="title is-6">{{result.total}} result - page {{result.page}}</h1>
        <div v-for="model in result.models" v-bind:key="model.name">
          <ModelCard v-bind:model="model"/>
        </div>
        <b-pagination :total="result.total" :current.sync="result.page" :per-page="resultSize" @change="changePage"/>
      </div>
      <div v-else class="column is-four-fifths">
        <h1 class="title">no modelo</h1>
      </div>
    </div>
    <b-loading :active.sync="isLoading" :is-full-page="false"/>
  </div>
</template>

<script>
import Filters from '@/components/Filters.vue'
import ModelCard from '@/components/ModelCard.vue'

export default {
  name: 'Search',
  components: {
    Filters,
    ModelCard
  },
  data () {
    return {
      tags: '',
      result: true,
      paramTags: '',
      paramSearch: '',
      paramOrder: '',
      paramPerf: '',
      resultSize: 10,
      page: 1,
      isLoading: true
    }
  },
  async mounted () {
    const search = this.$route.query.n
    if (search != null) this.paramSearch = search
    this.tags = await this.getTags()
    this.result = await this.getResult()
    this.isLoading = false
  },
  methods: {
    async changePage (page) {
      this.page = page
      this.result = await this.getResult()
    },
    async setSearch () {
      this.result = await this.getResult()
    },
    async setOrder (order) {
      this.paramOrder = order
      this.result = await this.getResult()
    },
    async setTags (tags, perfValue) {
      this.paramTags = tags
      this.paramPerf = perfValue
      this.result = await this.getResult()
    },
    async getTags () {
      const url = this.$serverurl + 'models/tags'
      const response = await fetch(url)
      try {
        return await response.json()
      } catch (error) {
        return null
      }
    },
    async getResult () {
      const url = new URL(this.$serverurl + 'search')
      const params = new URLSearchParams()

      if (this.paramSearch != null) params.append('q', this.paramSearch)
      if (this.paramTags != null) params.append('tag', this.paramTags)
      if (this.paramPerf != null) params.append('perf', this.paramPerf)
      if (this.paramOrder != null) params.append('order', this.paramOrder)

      params.append('size', this.resultSize)
      params.append('page', this.page)

      console.log('get models ' + this.paramSearch + ' + ' + this.paramPerf + ' + ' + this.paramTags)

      url.search = params
      const response = await fetch(url)
      try {
        return await response.json()
      } catch (error) {
        return null
      }
    }
  }
}
</script>

<style scoped>
.search {
  padding-top: 50px;
}

.filterTitle {
  margin-left: 15px;
  margin-bottom: 0;
}

.searchTitle {
  margin-bottom: 5px;
}
</style>