ostandari/pages/_portal/search/index.vue

<template>
  <div class="search-result">
    <section class="results-for">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h2>
              <span>نتایج جستجو برای: </span>
              <b>{{ $route.query.sq }}</b>
            </h2>
          </div>
        </div>
      </div>
    </section>

    <section class="news">
      <div class="container">
        <div class="row title">
          <div class="col-12">
            <h2 @click="toggleResults('news')">
              <i class="fas fa-chevron-circle-left" :class="newsOpen && 'open'"></i>
              <span>نتایج جستجو در اخبار:</span>
              <b>{{ result.news.length }}</b>
            </h2>
            <p v-if="!result.news.length">هیچ نتیجه ای پیدا نشد.</p>
          </div>
        </div>
        <!----------------------- Short result ------------------------->
        <div class="row align-items-stretch">
          <div class="col-12 col-md-6 col-lg-3 mb-5" v-for="(item,index) in result.news" :key="item._id" :title="item.title" v-if="index < 4">
            <div class="news-item">
              <img :src="item.thumbCover" :alt="item.title">
              <h2>{{ item.title }}</h2>
              <p>{{ item.summaryTitle }}</p>
              <nuxt-link class="btn btn-primary" :to="{name: 'portal-news-details',params: {portal: item.modelType,details: item._id}}">ادامه مطلب</nuxt-link>
            </div>
          </div>
        </div>
        <!----------------------- Short result ------------------------->

        <!----------------------- Full result ------------------------->
        <div class="row align-items-stretch results">
          <div class="col-12 col-md-6 col-lg-3 mb-5" v-for="(item,index) in result.news" :key="item._id" :title="item.title" v-if="index >= 4">
            <div class="news-item">
              <img :src="item.thumbCover" :alt="item.title">
              <h2>{{ item.title }}</h2>
              <p>{{ item.summaryTitle }}</p>
              <nuxt-link class="btn btn-primary" :to="{name: 'portal-news-details',params: {portal: item.modelType,details: item._id}}">ادامه مطلب</nuxt-link>
            </div>
          </div>
        </div>
        <!----------------------- Full result ------------------------->

        <div class="row seeMore" v-if="result.news.length > 4">
          <div class="col-12">
            <button @click="toggleResults('news')">
              <span v-if="!newsOpen">نتایج بیشتر</span>
              <span v-else>نتایج کمتر</span>
              <i class="fas fa-chevron-double-down" :class="newsOpen && 'open'"></i>
            </button>
          </div>
          <!--          <div class="col-12">-->
          <!--            <div class="line"></div>-->
          <!--          </div>-->
        </div>
      </div>
    </section>

    <section class="pages">
      <div class="container">
        <div class="row title">
          <div class="col-12">
            <h2 @click="toggleResults('pages')">
              <i class="fas fa-chevron-circle-left" :class="pagesOpen && 'open'"></i>
              <span>نتایج جستجو در صفحات:</span>
              <b>{{ result.pages.length }}</b>
            </h2>
            <p v-if="!result.pages.length">هیچ نتیجه ای پیدا نشد.</p>
          </div>
        </div>
        <!----------------------- Short result ------------------------->
        <div class="row align-items-stretch">
          <div class="col-12 col-md-4 col-lg-3 mb-3" v-for="(item,index) in result.pages" :key="item._id" :title="item.title" v-if="index < 4">
            <div class="pages-item">
              <nuxt-link v-if="!item.url" :to="{name: 'portal-category-details',params: {portal: item.modelType,details: item.title}, query: categoryURLQuery(item)}">{{ item.title }}</nuxt-link>
              <a v-else :href="item.url">ادامه مطلب</a>
            </div>
          </div>
        </div>
        <!----------------------- Short result ------------------------->

        <!----------------------- full result ------------------------->
        <div class="row align-items-stretch results">
          <div class="col-12 col-md-4 col-lg-3 mb-3" v-for="(item,index) in result.pages" :key="item._id" :title="item.title" v-if="index >= 4">
            <div class="pages-item">
              <nuxt-link v-if="!item.url" :to="{name: 'portal-category-details',params: {portal: item.modelType,details: item.title}, query: categoryURLQuery(item)}">{{ item.title }}</nuxt-link>
              <a v-else :href="item.url">ادامه مطلب</a>
            </div>
          </div>
        </div>
        <!----------------------- full result ------------------------->

        <div class="row seeMore" v-if="result.pages.length > 4">

          <div class="col-12">
            <button @click="toggleResults('pages')">
              <span v-if="!pagesOpen">نتایج بیشتر</span>
              <span v-else>نتایج کمتر</span>
              <i class="fas fa-chevron-double-down" :class="pagesOpen && 'open'"></i>
            </button>
          </div>
          <!--          <div class="col-12 mt-4">-->
          <!--            <div class="line"></div>-->
          <!--          </div>-->
        </div>
      </div>
    </section>

    <section class="media">
      <div class="container">
        <div class="row title">
          <div class="col-12">
            <h2 @click="toggleResults('media')">
              <i class="fas fa-chevron-circle-left" :class="mediaOpen && 'open'"></i>
              <span>نتایج جستجو در رسانه:</span>
              <b>{{ result.media.length }}</b>
            </h2>
            <p v-if="!result.media.length">هیچ نتیجه ای پیدا نشد.</p>
          </div>
        </div>
        <!----------------------- Short result ------------------------->
        <div class="row align-items-stretch">
          <div class="col-12 col-md-6 col-lg-3 mb-3" v-for="(item,index) in result.media" :key="item._id" :title="item.title" v-if="index < 4">
            <div class="media-item">
              <img :src="item.thumbCover" :alt="item.title">
              <div class="txtBox">
                <h2>{{ item.title }}</h2>
                <template v-if="item.galleryType === 'video'">
                  <nuxt-link class="btn btn-primary" :to="{name: 'portal-videos-video',params: {portal: item.modelType,video: item._id}}">ادامه مطلب</nuxt-link>
                  <span class="tag">فیلم</span>
                </template>
                <template v-if="item.galleryType === 'image'">
                  <nuxt-link class="btn btn-primary" :to="{name: 'portal-gallery-media',params: {portal: item.modelType,media: item._id}}">ادامه مطلب</nuxt-link>
                  <span class="tag">تصویر</span>
                </template>
                <template v-if="item.galleryType === 'graphic'">
                  <nuxt-link class="btn btn-primary" :to="{name: 'portal-graphics-graphic',params: {portal: item.modelType,graphic: item._id}}">ادامه مطلب</nuxt-link>
                  <span class="tag">گرافیک</span>
                </template>
              </div>
            </div>
          </div>
        </div>
        <!----------------------- Short result ------------------------->

        <!----------------------- Full result ------------------------->
        <div class="row align-items-stretch results">
          <div class="col-12 col-md-6 col-lg-3 mb-3" v-for="(item,index) in result.media" :key="item._id" :title="item.title" v-if="index >= 4">
            <div class="media-item">
              <img :src="item.thumbCover" :alt="item.title">
              <div class="txtBox">
                <h2>{{ item.title }}</h2>
                <template v-if="item.galleryType === 'video'">
                  <nuxt-link class="btn btn-primary" :to="{name: 'portal-videos-video',params: {portal: item.modelType,video: item._id}}">ادامه مطلب</nuxt-link>
                  <span class="tag">فیلم</span>
                </template>
                <template v-if="item.galleryType === 'image'">
                  <nuxt-link class="btn btn-primary" :to="{name: 'portal-gallery-media',params: {portal: item.modelType,media: item._id}}">ادامه مطلب</nuxt-link>
                  <span class="tag">تصویر</span>
                </template>
                <template v-if="item.galleryType === 'graphic'">
                  <nuxt-link class="btn btn-primary" :to="{name: 'portal-graphics-graphic',params: {portal: item.modelType,graphic: item._id}}">ادامه مطلب</nuxt-link>
                  <span class="tag">گرافیک</span>
                </template>
              </div>
            </div>
          </div>
        </div>
        <!----------------------- Full result ------------------------->

        <div class="row seeMore" v-if="result.media.length > 4">
          <!--          <div class="col-12 mt-4">-->
          <!--            <div class="line"></div>-->
          <!--          </div>-->
          <div class="col-12">
            <button @click="toggleResults('media')">
              <span v-if="!mediaOpen">نتایج بیشتر</span>
              <span v-else>نتایج کمتر</span>
              <i class="fas fa-chevron-double-down" :class="mediaOpen && 'open'"></i>
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>


<script>
export default {
  data() {
    return {
      result: null,
      newsOpen: false,
      pagesOpen: false,
      mediaOpen: false
    }
  },
  computed: {
    searchQuery() {
      return this.$route.query.sq
    }
  },
  watch: {
    searchQuery(newVal, oldVal) {
      this.$nuxt.refresh()
    }
  },
  mounted() {
    $(document).ready(() => {
      $('.search-result .results').slideUp()
    })
  },
  methods: {
    toggleResults(item) {
      if (item === 'news') this.newsOpen = !this.newsOpen
      if (item === 'pages') this.pagesOpen = !this.pagesOpen
      if (item === 'media') this.mediaOpen = !this.mediaOpen
      $(`.search-result .${item} .results`).slideToggle(500)
    },
    categoryURLQuery(item) {
      const query = {type: item.defaultPageType, id: item._id}
      if (item.defaultPageType === 'news') return {...query, page: 1}
      if (item.defaultPageType === 'gallery-image') return {...query, page: 1, type: 'gallery', galleryType: 'image'}
      if (item.defaultPageType === 'gallery-video') return {...query, page: 1, type: 'gallery', galleryType: 'video'}
      if (item.defaultPageType === 'gallery-graphic') return {...query, page: 1, type: 'gallery', galleryType: 'graphic'}
      else return query
    }
  },
  async asyncData({$axios, error, query}) {
    const searchQuery = query.sq
    try {
      if (searchQuery?.length) {
        const result = await $axios.get('/api/public/search', {
          params: {
            terms: searchQuery
          }
        })
        return {
          result: result.data
        }
      } else {
        return {
          result: {
            news: [],
            media: [],
            pages: []
          }
        }
      }
    } catch (e) {
      error({status: 404})
    }
  }
}
</script>