ShowEasyFrontEnd/FrontEnd/components/home/headerInlineSearch.vue

<template>
  <div class="search tw-w-full">
    <div v-click-outside="clickOutSide" @click="open()"
      :class="['tw-relative tw-flex tw-rounded-[16px] tw-border-solid tw-border tw-transition-all tw-duration-200 tw-delay-75 tw-ease-in-out',bigSearch ? 'tw-border-primary-default tw-w-full tw-px-[16px] tw-py-[11px]' :'tw-border-neutrals-200 tw-w-[320px] tw-px-[16px] tw-py-[11px]']">
      <div v-if="bigSearch" class="btn-group tw-flex tw-rounded-none xl:tw-pr-[16px] xl:tw-mr-[16px]">
        <v-btn class="border-radius-14 remove-upper mx-0 tw-hidden xl:tw-block"
          :class="tabToggle == 0 ? 'white--text primary' : 'primary--text'" style="font-size: 14px" height="40" text
          @click="clickExhibition">{{ $t('Exhibition')}}</v-btn>
        <v-btn class="border-radius-14 remove-upper mx-0 tw-hidden xl:tw-block"
          :class="tabToggle == 1 ? 'white--text primary' : 'primary--text'" style="font-size: 14px" text height="40"
          @click="clickService">{{ $t('Service')}}</v-btn>
      </div>
      <input v-show="!bigSearch"
        class="custom-control flex-grow-1 tw-placeholder-text-[14px] md:tw-placeholder-text-[16px]"
        :placeholder="$t(customPlaceholder)" />
      <input v-show="bigSearch" ref="search"
        class="custom-control flex-grow-1 tw-placeholder-text-[14px] md:tw-placeholder-text-[16px]" v-model="inputs"
        :placeholder="$t(customPlaceholder)" @input="handleInput" @click="handleClick"
        v-on:keyup.enter="$router.push(localePath(`/${type}?q=${inputs}`));" />
      <svg width="24" height="24" class="tw-my-auto" shape-rendering="geometricPrecision"
        @click="$router.push(localePath(`/${type}?q=${inputs}`));">
        <image xlink:href="@/assets/svg/icon-search-small.svg" src="@/assets/svg/icon-search-small.svg" width="24"
          height="24" />
      </svg>
      <v-card class="search-result white rounded-lg above" v-if="keywords.length != 0 && keyword"
        style="z-index: 999 !important" :max-width="width">
        <template v-for="(keyword, idx) in populars.search">
        <v-row v-if="type=='exhibition'" :key="idx"
          class="mx-2 my-2 grey--text text--lighten-1">
          <nuxt-link :to="localePath(`/${type}?q=${keyword}`)" class="remove-underline"
            style="width: 100%; height: 100%">
            <v-card flat color="transparent" width="100%" height="40" style="padding: 0px 12px"
              class="d-flex align-center">
              {{ keyword }}
            </v-card>
          </nuxt-link>
        </v-row>
      </template>
        <template v-for="(keyword, idx) in popular.service">
        <v-row v-if="type=='service'" :key="idx"
          class="mx-2 my-2 grey--text text--lighten-1">
          <nuxt-link :to="localePath(`/${type}?q=${keyword}`)" class="remove-underline"
            style="width: 100%; height: 100%">
            <v-card flat color="transparent" width="100%" height="40" style="padding: 0px 12px"
              class="d-flex align-center">
              {{ keyword }}
            </v-card>
          </nuxt-link>
        </v-row>
      </template>
      </v-card>

      <!-- exhibition -->
      <v-container
        class="search-result white border-radius-16 hidden-sm-and-down  xl:tw-px-[20px] xl:tw-py-[20px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
        v-if="exhibition">
        <!-- <div class="tw-mb-[20px]">
          <div class="tw-mb-[20px]">
            <div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('History') }} </div>
            <div class="tw-flex tw-flex-wrap">
              <nuxt-link
                class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
                v-for="(item, idx) in servicesSearchs" :key="idx" :to="localePath(`/exhibition?q=${item}`)">
                {{ item }}
              </nuxt-link>
            </div>
          </div>
        </div> -->
        <div class="tabs tw-flex tw-mb-[16px] md:tw-mb-[20px]">
          <button
            :class="['tw-mr-[30px] tw-body-3 tw-transition-all tw-duration-300 tw-ease-in-out tab',tabs == 'exhibitionsCategories' ? 'active tw-text-black tw-font-bold':'tw-text-neutrals-500']"
            @click="tabs = 'exhibitionsCategories'">{{
            $t('Exhibition Categories')
            }}</button>
          <button
            :class="['tw-body-3 tw-transition-all tw-duration-300 tw-ease-in-out tab',tabs == 'location' ? 'active tw-text-black tw-font-bold':'tw-text-neutrals-500']"
            @click="tabs = 'location'">{{ $t('Location')
            }}</button>
        </div>

        <div v-if="tabs=='exhibitionsCategories'">
          <div class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-10"
            @mouseleave="exhibitionActiveIndex=0">
            <div class="customDropMenu exhibition tw-w-full tw-overflow-hidden">
              <div class="tw-relative tw-grid tw-grid-cols-2 tw-h-[270px]">
                <div
                  class="tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-grid tw-grid-cols-1 tw-gap-[20px]">
                  <div class="tw-list-none tw-pr-[20px]" v-for="(item,index) in exhibitionsCategories" :key="index"
                    @mouseover="exhibitionActiveIndex=index">
                    <div
                      :class="['exhibitionDropdownLink tw-w-full  tw-body-4 tw-font-normal hover:tw-text-primary-default',exhibitionActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
                      <span class="tw-block tw-flex tw-items-center tw-break-words tw-pr-[20px]">{{
                      $t(item.title)
                      }}</span>
                    </div>
                  </div>
                </div>
                <div class="tw-overflow-x-hidden tw-overflow-y-auto">
                  <ul class="tw-list-none tw-grid tw-grid-cols-1 tw-gap-[20px] tw-px-[20px] ">
                    <li class="tw-list-none"><a
                        :href="localePath(`/exhibition?category=${exhibitionsCategories[exhibitionActiveIndex].id}`)"
                        class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
                        $t('All')}}</a>
                    </li>
                    <li v-for="(sub,index) in exhibitionsCategories[exhibitionActiveIndex].subcategory" :key="index"
                      class="tw-list-none"><a :href="localePath(`/exhibition?subcategory=${sub.id}`)"
                        class="tw-block tw-min-h-[30px] tw-body-4 tw-font-normal tw-min-w-[230px] tw-text-neutral-800 hover:tw-text-primary-default">{{
                        sub.title }}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="tabs=='location'">
          <div class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-10">
            <div class="customDropMenu exhibition tw-w-full tw-overflow-hidden">
              <div class="tw-relative tw-grid tw-grid-cols-[1fr_1fr_1fr] tw-h-[270px]">
                <div
                  class="tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-flex tw-flex-col tw-pr-[20px]">
                  <div v-for="(item,index) in exhibitionsLocations" :key="index"
                    @mouseover="locationActiveIndex=index;cityActiveIndex=0"
                    :class="['exhibitionDropdownLink tw-block tw-w-full tw-body-4 tw-font-normal  tw-mb-[20px] tw-pr-[20px] hover:tw-text-primary-default',locationActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
                    {{
                    $t(item.region)
                    }}</div>
                </div>
                <div class="tw-overflow-x-hidden tw-overflow-y-auto">
                  <ul class="tw-px-[20px] tw-list-none tw-flex tw-flex-col tw-flex-wrap">
                    <li class="tw-list-none tw-mb-[20px]"><a
                        :href="localePath(`/exhibition?region=${exhibitionsLocations[locationActiveIndex].id}`)"
                        class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
                        $t('All')}}</a>
                    </li>
                    <li v-for="(countries,index) in exhibitionsLocations[locationActiveIndex].countries" :key="index"
                      @mouseover="cityActiveIndex=index"
                      :class="['exhibitionDropdownLink tw-block tw-w-full tw-body-4 tw-font-normal  tw-mb-[20px] tw-pr-[20px] hover:tw-text-primary-default',cityActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
                      {{
                      countries.country }}
                    </li>
                  </ul>
                </div>
                <div class="tw-overflow-x-hidden tw-overflow-y-auto">
                  <ul class="tw-px-[20px] tw-list-none tw-flex tw-flex-col tw-flex-wrap">
                    <li class="tw-list-none tw-mb-[20px]"><a
                        :href="localePath(`/exhibition?region=${exhibitionsLocations[locationActiveIndex].countries[cityActiveIndex].id}`)"
                        class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
                        $t('All')}}</a>
                    </li>
                    <li
                      v-for="(cities,index) in exhibitionsLocations[locationActiveIndex].countries[cityActiveIndex].cities"
                      :key="index" class="tw-list-none tw-mb-[20px]"><a
                        :href="localePath(`/exhibition?city=${cities.id}`)"
                        class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
                        cities.city }}</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </v-container>
      <!-- exhibition -->

      <!-- service -->
      <v-container
        class="search-result tw-px-[30px] tw-py-[20px] tw-bg-white tw-rounded-[16px] tw-hidden  xl:tw-px-[20px] xl:tw-py-[20px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)] xl:tw-block"
        v-if="service" v-click-outside="">
        <div class="">
          <!-- <div class="tw-mb-[20px]">
            <div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('History') }} </div>
            <div class="tw-flex tw-flex-wrap">
              <nuxt-link
                class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
                v-for="(item, idx) in servicesSearchs" :key="idx" :to="localePath(`/service?q=${item}`)">
                {{ item }}
              </nuxt-link>
            </div>
          </div> -->
          <div>
            <div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('Location') }} </div>
            <div class="tw-flex tw-flex-wrap">
              <nuxt-link
                class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
                v-for="(servicesLocation, idx) in servicesLocations" :key="idx"
                :to="localePath(`/service?q=${servicesLocation}`)">
                {{ servicesLocation }}
              </nuxt-link>
            </div>
          </div>
        </div>
      </v-container>
      <!-- service -->
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  props: {
    servicesSearchs: {
      type: Array,
      default: () => []
    },
    servicesLocations: {
      type: Array,
      default: () => []
    },
    exhibitionsSearchs: {
      type: Array,
      default: () => []
    },
    exhibitionsLocations: {
      type: Array,
      default: () => []
    },
    exhibitionsCategories: {
      type: Array,
      default: () => []
    },
    serviceKeywords: {
      type: Array,
      default: () => []
    },
    exhibitionsKeywords: {
      type: Array,
      default: () => []
    },
    populars: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      type: 'exhibition',
      toggle_exclusive: 1,
      inputs: "",
      keywords: [],
      tabToggle: 0,
      tab: null,
      tab2: null,
      tabs: 'exhibitionsCategories',
      exhibition: false,
      service: false,
      keyword: false,
      locationsIdx: 0,
      countriesIdx: 0,
      categoriesIdx: 0,
      exhibitionActiveIndex: 0,
      locationActiveIndex: 0,
      cityActiveIndex: 0,
      WindowsWidth: undefined,
      bigSearch: false,
      customPlaceholder: 'Search exhibitions or services...',
    };
  },
  created() {
    if (process.client) {
      this.WindowsWidth = window.innerWidth;
    }
  },
  methods: {
    onResize() {
      if (process.client) {
        this.WindowsWidth = window.innerWidth;
      }
    },
    open() {
      let vm = this;
      vm.bigSearch = true;
      vm.$nextTick(() => {
        vm.$refs.search.focus();
        setTimeout(function () {
          vm.handleClick();
        }, 300)
      }
      );
    },
    handleClick() {
      if (this.tabToggle == 0) {
        this.exhibition = true;
        this.service = false;
      } else {
        this.exhibition = false;
        this.service = true;
      }
      if (this.inputs.length > 0) {
        this.keyword = true;
        this.exhibition = false;
        this.service = false;
      }
      if (this.WindowsWidth < 1366) {
        this.$store.dispatch('toggleSearchDialog', true);
      }
    },
    handleInput() {
      this.keyword = true;
      this.exhibition = false;
      this.service = false;
      this.keywords = [];
    },
    clickOutSide() {
      this.exhibition = false;
      this.service = false;
      this.bigSearch = false;
      this.tabs = 'exhibitionsCategories';
      this.exhibitionActiveIndex = 0;
      this.locationActiveIndex = 0;
      this.cityActiveIndex = 0;
      this.tabToggle = 0;
    },
    clickExhibition() {
      let oringalToggle = this.tabToggle;
      if (this.tabToggle != 0) {
        this.tabToggle = 0;
      }
      if (this.service == true) {
        this.service = false;
        this.exhibition = true;
      }
      if (this.keyword == true) {
        this.keyword = false;
      }
      if (this.inputs.length > 0) {
        this.exhibition = false;
        this.service = false;
        this.keyword = true;
      } else {
        if (oringalToggle == 0) {
          this.exhibition = false;
        }
      }
      this.keywords = this.exhibitionsKeywords;
      this.type = 'exhibition';
      if (this.WindowWidth >= 1366) {
        this.customPlaceholder = 'Explore global exhibitions';
      }
    },
    clickService() {
      let oringalToggle = this.tabToggle;
      if (this.tabToggle != 1) {
        this.tabToggle = 1;
      }
      if (this.exhibition == true) {
        this.service = true;
        this.exhibition = false;
      }
      if (this.keyword == true) {
        this.keyword = false;
      }
      if (this.inputs.length > 0) {
        this.exhibition = false;
        this.service = false;
        this.keyword = true;
      } else {
        if (oringalToggle == 1) {
          this.service = false;
        }
      }
      this.keywords = this.serviceKeywords;
      this.type = 'service';
      if (this.WindowWidth >= 1366) {
        this.customPlaceholder = 'Search exhibitions or services...';
      }
    },
  },
  computed: {
    WindowWidth() {
      if (process.client) {
        this.WindowsWidth = window.innerWidth;
      }
      return this.WindowsWidth;
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
      if (this.WindowWidth >= 1366) {
        this.customPlaceholder = 'Explore global exhibitions';
      } else {
        this.customPlaceholder = 'Search exhibitions or services...';
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
};
</script>

<style lang="scss" scoped>
.search-result {
  position: absolute;
  left: 0px;
  top: 70px;
  width: 100%;
  z-index: 10;
}

.v-tab {
  margin: 0;
}

:deep() {
  .above {
    z-index: 99 !important;
  }
}

.custom-control:focus {
  outline: none !important;
}

.nuxt-link-active {
  color: #232323;
  text-decoration: none;
}

.nuxt-link-active:hover {
  color: primary;
  text-decoration: underline;
  text-decoration-style: dashed;
}

.nuxt-link-exact-active {
  color: #232323;
  text-decoration: none;
}

.tabs {
  .tab {
    position: relative;
    padding-bottom: 15px;

    &.active {
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: #f48800;
      }
    }
  }
}

.exhibitionDropdownLink {
  &.active {
    background-image: url('@/assets/svg/icon-arrow.svg');
    background-position: right center;
    background-size: 16px;
    background-repeat: no-repeat;
  }
}

@media screen and (min-width:1366px) {
  .btn-group {
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      height: 16px;
      background-color: #f5cda8;
      margin: auto;
    }
  }
}
</style>