@burh/nuxt-core 1.0.503 → 1.0.504

package/components/burh-ds/Capsules/SearchSlug.vue

@@ -1,860 +1,860 @@
-<template>
-  <interface-spa
-    :class="isMobileOnlyWatch ? 'interface-spa--mobile' : ''"
-    classesHeader="jobs-aside--header"
-    classesAside="jobs-aside"
-    class="printable"
-    asideSize="big"
-  >
-    <burh-modals
-      slot="interface-header"
-      :render="['phone', 'address']"
-      :active="activeModal"
-      v-on:modal-close="clearActive($event)"
-      v-on:updatedOtherInformations="setUpdatedOtherInformations($event)"
-      :title="'Aviso'"
-      :description="`Para se candidatar é necessário informar seu ${activeModal == 'phone' ? 'telefone': 'endereço'}`"
-    >
-    </burh-modals>
-
-    <div class="interface-spa__filter" slot="interface-header">
-
-      <span class="d-block bg-lighter px-4 w-100 h-100" v-if="isMobileOnlyWatch" v-on:click="toggleFilterMobile()">
-        <!-- <font-awesome-icon :icon="['fas', 'chevron-down']" /> Sorocaba - CLT, PJ Sorocaba - CLT, PJ Sorocaba - CLT, PJ -->
-        <font-awesome-icon :icon="['fas', 'filter']" class="mr-2" /> <span>Filtros Avançados</span>
-      </span>
-      <h4 class="interface-spa__filter__header" v-on:click="toggleFilterMobile()">
-        <font-awesome-icon :icon="['fas', 'chevron-left']" class="mr-2" /> <span>Filtros avançados</span>
-      </h4>
-      <div class="interface-spa__filter__fields">
-        <auto-complete :valueDefault="city" :preventDefaultValue="true" v-on:change="onAutoCompleteChange($event)" txtPlaceholder="Cidade" :request="true" :doRequest="funcRequest" :listWords="['itu', 'itupeva', 'sorocaba', 'votorantim', 'salto', 'salto de pirapora']" class="mr-2"/>
-
-        <base-input class="mr-2">
-          <el-select
-            v-model="selects.hiringType"
-            filterable
-            placeholder="Tipo de contratação"
-            popper-class="z-master"
-            @change="searchParams()"
-          >
-            <el-option
-              v-for="option in hiringType"
-              :key="option.label"
-              :label="option.label"
-              :value="option.label"
-            ></el-option>
-          </el-select>
-        </base-input>
-        <base-input class="mr-2">
-          <el-select
-            v-model="selects.date"
-            filterable
-            placeholder="Tempo de Abertura"
-            popper-class="z-master"
-            @change="searchParams()"
-          >
-            <el-option
-              v-for="option in date"
-              :key="option.label"
-              :label="option.label"
-              :value="option.value"
-            ></el-option>
-          </el-select>
-        </base-input>
-        <base-input class="mr-2">
-          <el-select
-            v-model="selects.handicapped"
-            filterable
-            placeholder="PCD"
-            popper-class="z-master"
-            @change="searchParams()"
-          >
-            <el-option
-              v-for="option in handicapped"
-              :key="option.label"
-              :label="option.label"
-              :value="option.value"
-            ></el-option>
-          </el-select>
-        </base-input>
-
-        <button class="btn btn-primary btn-sm btn-block mt-4" v-if="isMobileOnlyWatch" v-on:click="toggleFilterMobile()">Aplicar filtro</button>
-      </div>
-    </div>
-
-    <div v-if="!isMobileOnlyWatch" slot="aside-header" class="d-flex">
-      <template v-if="details != null && details.total != null">
-        Página {{currentPage}} de {{details.total}} vagas.
-        <br />
-      </template>
-    </div>
-
-    <ul class="list-unstyled search__list" slot="aside-body">
-      <template v-if="!searchEmpty">
-      <li class="search__list__item" v-if="(jobs == null || jobs.length <= 0)">
-        <div class="card card--job cursor-pointer skeleton">
-          <div class="card-header">
-            <span class="avatar rounded-circle">
-            </span>
-            <ul class="card__controls list-inline">
-              <li class="list-inline-item"></li>
-              <li class="list-inline-item"></li>
-            </ul>
-          </div>
-          <div class="card-body">
-            <span class="card__company"></span>
-            <h5 class="card-title"></h5>
-            <span class="card__local"></span>
-          </div>
-          <div class="card-footer">
-            <p class="card__published"></p>
-          </div>
-        </div>
-      </li>
-      </template>
-      <template v-if="!searchEmpty">
-        <li class="search__list__item" v-for="(job, index) in jobs" :key="job.job_id" :class="{'search__list__item--opened': details != null && job.job_id == details.job_id}">
-          <opportunityCard
-            v-on:share-click="onClickShareJob"
-            v-on:save-click="onClickSaveJob(job)"
-            v-on:card-click="featureDetails(job.job_id, index)"
-            v-on:avatar-click="featureDetails(job.job_id, index)"
-            v-on:company-name-click="featureDetails(job.job_id, index)"
-            :fullHeart="job.subscription != null && job.subscription.user_bookmarked"
-            :link="job.job_id"
-            :img="!job.private ? job.company_logo : '/img/content/logoempresaconfidencial.png'"
-            :title="job.job_title"
-            :date="job.created_at"
-            :href="''"
-            :company="!job.private ? job.company_name : 'Empresa Confidencial'"
-            :local="job.city_name"
-            :pcd="job.handicapped"
-          ></opportunityCard>
-        </li>
-        <li class="p-4">
-          <v-pagination
-            v-if="details.last_page != null"
-            v-model="currentPage"
-            :classes="bootstrapPaginationClasses"
-            :labels="paginationAnchorTexts"
-            :page-count="details.last_page"
-          ></v-pagination>
-        </li>
-      </template>
-      <template v-if="searchEmpty && isMobileOnlyWatch">
-        <li class="search__list__item">
-          <div class="p-4">
-            <h2 class="display-3 mt-5">Sem Resultados</h2>
-            <p>Para conseguir mais resultados, tente ajustar alterando a sua busca ou verifique se a Burh já esta disponível em sua cidade.</p>
-            <button class="btn btn-sm btn-outline-primary" @click="$router.push('/busca')">Ver sugestões</button>
-          </div>
-        </li>
-      </template>
-      <share-modal :show="modals" :url="jobLinkShare" />
-    </ul>
-
-
-    <!-- <div slot="aside-footer" class="d-none d-sm-block">
-      <template v-if="jobs != null && jobs.length > 0">
-        <font-awesome-icon :icon="['far', 'eye']" />
-        <small>
-          Você ainda tem
-          <b>{{jobsLeft()}}</b> vagas para visualizar
-        </small>
-      </template>
-    </div> -->
-
-    <!-- <job-detail :title="this.details.title" :img="this.details.img" :location="this.details.location" :company="this.details.company" :description="this.details.description"></job-detail> -->
-    <job-detail
-      class="skeleton"
-      :link="''"
-      v-if="jobs == null || jobs.length <= 0"
-      slot="content"
-      :title="''"
-      :hiring="''"
-      :img="''"
-      :location="''"
-      :company="''"
-      :description="''"
-      :benefits="[]"
-      :company_private="true"
-      :searchEmpty="searchEmpty"
-      :skeleton="true"
-    ></job-detail>
-
-    <job-detail
-      v-on:share-click="onClickShareJob"
-      v-on:save-click="onClickSaveJobDetail(details)"
-      :link="this.details.job_id"
-      v-if="this.details.total"
-      slot="content"
-      :fullHeart="this.details.user_bookmarked"
-      :title="this.details.title"
-      :hiring="this.details.hiring"
-      :img="this.details.img"
-      :location="this.details.location"
-      :company="this.details.company"
-      :description="this.details.description"
-      :benefits="this.details.benefits"
-      :company_private="this.details.private"
-      :company_slug="this.details.company_slug"
-      :applied="this.details.applied"
-      :canUnSubscribe="this.details.can_unsubscribe"
-      :handicapped="this.details.handicapped"
-      :salary="this.details.salary"
-      :searchEmpty="searchEmpty"
-      v-on:apply-to-job="applyToJob($event)"
-    >
-      <div class="row printable__qrcode" slot="qrcode">
-        <div class="col mb-4">
-          <div class="qr-code">
-            <qrcode
-              :value="baseUrl +'/'+ details.link"
-              :options="{ width: 156, height: 156 }"
-              class="border"
-            ></qrcode>
-          </div>
-        </div>
-      </div>
-    </job-detail>
-
-    <div class="job-detail__footer d-flex w-100 justify-content-end" slot="footer-content">
-      <div class="box-payment mr-md-4">
-        <span class="text-muted d-block">Salário</span>
-        <bpInterfaceSpa class="lead">R$ {{this.details.salary}}</bpInterfaceSpa>
-      </div>
-      <button class="btn btn-primary" @click="applyToJob()">Candidatar-se</button>
-    </div>
-  </interface-spa>
-</template>
-<script>
-import { isMobile, isMobileOnly } from "mobile-device-detect";
-import { Select, Option } from "element-ui";
-import jobDetail from "~/components/burh-ds/Jobs/JobDetail.vue";
-import InterfaceSpa from "~/components/burh-ds/InterfaceSpa/InterfaceSpa.vue";
-import opportunityCard from "~/components/burh-ds/Cards/OpportunityCard.vue";
-import ShareModal from "~/components/burh-ds/Modals/ShareModal.vue";
-import AutoComplete from "~/components/burh-ds/Input/AutoComplete.vue";
-import https from "https";
-import swal from 'sweetalert2';
-import BurhModals from "@/pages/burh/modals/modals";
-import { getCookie } from '~/util/cookie';
-import {userSaveJob} from '~/services/user'
-
-
-export default {
-  name: "search-slug",
-  components: {
-    InterfaceSpa,
-    opportunityCard,
-    jobDetail,
-    [Select.name]: Select,
-    [Option.name]: Option,
-    ShareModal,
-    BurhModals,
-    AutoComplete
-  },
-  props: ['searchData'],
-  watch:{
-    '$store.state.localStorage.currentUser'(newValue){
-      this.currentUser = newValue;
-    },
-    $route (to, from){
-        this.term = to.query.term;
-        if (from.query.term != to.query.term) {
-          this.search(1, true);
-        }
-    },
-    currentPage(newValue) {
-      this.searchParams(newValue);
-    }
-  },
-
-  async mounted() {
-    this.currentUser = this.$store.state.localStorage.currentUser;
-    this.isMobileOnlyWatch = isMobileOnly;
-
-    if(this.city == null) {
-        this.city = await this.$location();
-    }
-
-    this.onLoadSearch();
-  },
-
-  updated() {
-    this.selects.handicapped = this.$route.query.handicapped
-      ? this.$route.query.handicapped == "true"
-        ? "Sim"
-        : "Não"
-      : "";
-    this.selects.hiringType = this.$route.query.type
-      ? this.$route.query.type
-      : "";
-    // this.autoComplete();
-  },
-
-  data() {
-    return {
-        city: null,
-        currentUser: null,
-        funcRequest: {"request": this.doSearchCities},
-        isMobileOnlyWatch: false,
-        searching: false,
-        bootstrapPaginationClasses: {
-        ul: 'pagination pagination-sm',
-        li: 'page-item',
-        liActive: 'active',
-        liDisable: 'disabled',
-        button: 'page-link'
-        },
-        paginationAnchorTexts: {
-        first: false,
-        prev: 'Anterior',
-        next: 'Próximo',
-        last: false,
-        },
-        pagination: {
-        default: 1,
-        last: 1
-        },
-        baseUrl: process.env.baseAppUrl,
-        userPhoneNumber: null,
-        activeModal: '',
-        jobLinkShare: "",
-        modals: {
-        modal0: false
-        },
-        autocomplete: null,
-        jobs: [],
-        currentresult: 15,
-        details: {
-          img: "",
-          title: "",
-          description: "",
-          location: "",
-          company: "",
-          salary: null,
-          total: 0,
-          hiring: "",
-          private: false,
-          link: "",
-          job_id: null,
-          company_slug: null,
-          applied: null,
-          can_unsubscribe: null,
-          user_bookmarked: null,
-          index: null,
-        },
-        loading: false,
-        address: "",
-        handicapped: [
-        {
-            label: "Sim",
-            value: true
-        },
-        {
-            label: "Não",
-            value: false
-        }
-        ],
-        date: [
-            {
-                label: "90 dias",
-                value: 90
-            },
-            {
-                label: "60 dias",
-                value: 60
-            },
-            {
-                label: "30 dias",
-                value: 30
-            },
-            {
-                label: "15 dias",
-                value: 15
-            },
-            {
-                label: "7 dias",
-                value: 7
-            },
-            {
-                label: "Hoje",
-                value: 1
-            }
-        ],
-        hiringType: [
-            {
-                label: "Todos",
-                value: 1
-            },
-            {
-                label: "CLT",
-                value: 2
-            },
-            {
-                label: "CNPJ",
-                value: 3
-            },
-            {
-                label: "Estágio",
-                value: 4
-            },
-            {
-                label: "RPA",
-                value: 5
-            },
-            {
-                label: "Temporário",
-                value: 6
-            }
-        ],
-        searchEmpty: false,
-        selects: this.searchData.selects,
-        term: this.searchData.term,
-        city: this.searchData.city,
-        currentPage: this.searchData.currentPage
-    };
-  },
-
-  methods: {
-    async onClickSaveJob(item){
-      if ( this.currentUser == null ) {
-        swal.fire({
-          title: `Aviso`,
-          html: `Você precisa estar logado para realizar esta função.`,
-          buttonsStyling: false,
-          confirmButtonClass: 'btn btn-primary btn-fill',
-        });
-        return;
-      }
-
-      if(await userSaveJob(item.job_id, item.subscription.user_bookmarked)) {
-        item.subscription.user_bookmarked = !item.subscription.user_bookmarked;
-        if (item.job_id == this.details.job_id) {
-          this.details.user_bookmarked = item.subscription.user_bookmarked ;
-        }
-      }
-    },
-
-    async onClickSaveJobDetail(item){
-      if ( this.currentUser == null ) {
-        swal.fire({
-          title: `Aviso`,
-          html: `Você precisa estar logado para realizar esta função.`,
-          buttonsStyling: false,
-          confirmButtonClass: 'btn btn-primary btn-fill',
-        });
-        return;
-      }
-
-      if(await userSaveJob(item.job_id, item.user_bookmarked)) {
-        item.user_bookmarked = !item.user_bookmarked;
-        this.jobs[item.index].subscription.user_bookmarked = item.user_bookmarked;
-      }
-    },
-
-    onAutoCompleteChange(e) {
-      if(e == this.$route.query.city) {
-        return;
-      }
-      this.city = e.split(`,`)[0].replace('value:','');
-      this.searchParams();
-    },
-
-    async doSearchCities(key = null){
-      let {data} = await this.$axios.get(process.env.routes.api.searchCities.replace(':hash',key));
-      let items = [...new Set(data.data.cities)]; //remove cities duplicated
-      return items;
-    },
-
-    onLoadSearch() {
-        this.search(1, false);
-    },
-    openModal(modal, data = null, index = null) {
-        //this.index = index;
-        this.activeModal = modal;
-        //this.userData = data;
-        document.body.classList.add("modal-open");
-        document.body.classList.add("no-scroll");
-      },
-
-      clearActive(e) {
-        this.activeModal = "";
-        //this.userData = null;
-        document.body.classList.remove("no-scroll");
-        document.body.classList.remove("modal-open");
-        document.getElementsByTagName("html")[0].classList.remove("modal-open");
-      },
-
-    getUserPhoneNumber(){
-      if(this.currentUser.contact != null && this.currentUser.contact.cellphone){
-        this.userPhoneNumber = this.currentUser.contact.cellphone;
-      }else{
-        this.userPhoneNumber = null;
-      }
-    },
-    jobsLeft() {
-      if(this.details.total == null || this.jobs == null) { return 0 }
-      return this.details.total - this.jobs.length;
-    },
-    async applyToJob(applied) {
-      if(this.currentUser == null) {
-        swal.fire({
-          title: `Login necessário`,
-          html: `É necessário ter uma conta e estar credenciado para realizar essa ação.`,
-          buttonsStyling: false,
-          confirmButtonText: 'Ir para login',
-          confirmButtonClass: 'btn btn-primary btn-fill',
-          showCancelButton: true,
-          cancelButtonText: 'Cancelar',
-          cancelButtonClass: 'btn btn-outline-default btn-fill',
-          reverseButtons: true
-        }).then((result) => {
-          if(result.value) {
-            let rollback = this.$route.fullPath;
-
-            this.$router.push('/entrar?rollback=' + rollback);
-          }
-        });
-      } else if(this.currentUser.profile_completion >= 60) {
-
-        this.getUserPhoneNumber();
-
-        if (this.userPhoneNumber == null && applied == true){
-          this.openModal('phone');
-          return;
-        }
-
-        if (this.currentUser.profile_pendencies.includes('Endereço') && applied == true) {
-          this.openModal('address');
-          return;
-        }
-
-        let obj = {
-          data: {
-            job_id: this.details.job_id,
-            user_id: this.currentUser.user_id
-          }
-        }
-
-        let {data} = await this.$axios.post(process.env.routes.api.user.applyToJob, obj, {
-          headers: {
-            Authorization: `Bearer ${this.$store.state.localStorage.token}`
-          }
-        });
-
-        this.details.applied = applied;
-        this.details.can_unsubscribe = true;
-        let index = this.jobs.findIndex(job => job.job_id === this.details.job_id);
-        if(index != -1) { //equal -1 job_id is not found.
-          this.jobs[index].subscription.applied = applied
-        }
-
-        swal.fire({
-          title: `${applied ? "Inscrição realizada com sucesso" : "Você saiu dessa vaga"}`,
-          buttonsStyling: false,
-          confirmButtonClass: 'btn btn-primary btn-fill'
-        });
-      } else if(this.details.applied){
-        let obj = {
-            data:{
-              job_id: this.details.job_id,
-              user_id: this.currentUser.user_id
-            }
-          }
-
-          let {data} = await this.$axios.post(process.env.routes.api.user.applyToJob, obj, {
-            headers: {
-              Authorization: `Bearer ${this.$store.state.localStorage.token}`
-            }
-          });
-
-          swal.fire({
-            title: {"Você saiu dessa vaga": !this.details.applied },
-            buttonsStyling: false,
-            confirmButtonClass: 'btn btn-primary btn-fill'
-          });
-
-          this.details.applied = !this.details.applied;
-          let index = this.jobs.findIndex(job => job.job_id === this.details.job_id);
-          if(index != -1) { //equal -1 job_id is not found.
-            this.jobs[index].subscription.applied = this.details.applied;
-          }
-
-      } else {
-        swal.fire({
-          title: `Perfil Incompleto`,
-          html: `Alguma das informações que faltam em seu perfil: ${this.currentUser.profile_pendencies.join(', ')}`,
-          buttonsStyling: false,
-          confirmButtonClass: 'btn btn-primary btn-fill',
-          showCancelButton: true,
-          cancelButtonText: 'Cancelar',
-          cancelButtonClass: 'btn btn-outline-default btn-fill',
-          reverseButtons: true
-        });
-      }
-    },
-    onClickShareJob(idJob) {
-      this.jobLinkShare = process.env.baseAppUrl + "/vagas/" + idJob;
-      this.modals.modal0 = true;
-    },
-    async search(page, reset) {
-      this.searching = true;
-      let search = {
-        city: this.city == null || this.city.trim() == '' ? null : this.city,
-        date_posted: this.$route.query.date
-          ? parseInt(this.$route.query.date)
-          : 90,
-        query: this.$route.query.term ? this.$route.query.term : "",
-        handicapped: this.$route.query.handicapped
-          ? this.$route.query.handicapped == "true"
-            ? true
-            : false
-          : "",
-        hiring_type: this.$route.query.type ? this.$route.query.type : null
-      };
-
-      let response = await this.$axios.post(`${process.env.baseApiUrl}/nb/jobs/search?page=${page ? page : 1}${this.$store.state.localStorage.currentUser ? "&id=" + this.$store.state.localStorage.currentUser.user_id :''}`, search, {
-          headers: {
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${this.$store.state.localStorage.token}`
-          },
-          httpsAgent: new https.Agent({
-              rejectUnauthorized: false
-          })
-      });
-      this.details.total = response.data.data.total;
-      this.details.last_page = response.data.data.last_page;
-      this.jobs = response.data.data.data;
-
-      var text = "";
-      if (this.details.total > 0) {
-        this.getDetails(this.jobs[0].job_id);
-        if (this.$route.query.term) {
-          text = `Página 1 de ${this.details.total} vagas de ${this.$route.query.term}`;
-        } else if (this.details.total > 15) {
-          text = `Página 1 de ${this.details.total - 5} vagas`;
-        } else {
-          text = "Resultados para sua busca";
-        }
-        this.searchEmpty = false;
-      } else {
-        text = "Não há resultados para sua busca";
-        this.searchEmpty = true;
-        
-
-        //this.$router.push({ path: "/", query: { term: this.$route.query.term, city: this.$route.query.city ? this.$route.query.city : await this.$location(), type: this.$route.query.type, date: this.$route.query.date, page: 1, handicapped: this.$route.query.handicapped, error: "404_job"}, });
-      }
-      this.searchtext = text;
-
-      this.currentresult = this.jobs.length;
-      this.pagination.last = response.data.data.last_page;
-      this.searching = false;
-    },
-    async featureDetails(id, index){
-      await this.getDetails(id, index);
-      this.goToDetails(id);
-    },
-
-    goToDetails(id){
-      if(this.isMobileOnlyWatch){
-        this.$router.push('/vagas/' + id);
-      }
-    },
-
-    async getDetails(id, index = 0) {
-      let jobs = this.jobs;
-      let job = await jobs.filter(function(e) {
-        return e.job_id == id;
-      });
-
-      this.details.job_id = id;
-      this.details.index = index;
-      this.details.img = job[0].company_logo;
-      this.details.title = job[0].job_title;
-      this.details.description = job[0].job_description;
-      this.details.location = job[0].city_name;
-      this.details.company = job[0].company_name;
-      this.details.salary = job[0].salary;
-      this.details.benefits = job[0].job_benefits ? job[0].job_benefits.length > 0 ? job[0].job_benefits : null : null;
-      this.details.hiring = job[0].type_hiring;
-      this.details.private = job[0].private;
-      this.details.link = process.env.baseAppUrl + '/vagas/' + id;
-      this.details.applied = job[0].subscription == null ? false : job[0].subscription.applied;
-      this.details.can_unsubscribe = job[0].subscription == null ? false : job[0].subscription.can_unsubscribe;
-      this.details.user_bookmarked = job[0].subscription == null ? false : job[0].subscription.user_bookmarked;
-      this.details.handicapped = job[0].handicapped;
-      this.details.company_slug = job[0].company_slug;
-    },
-
-    searchParams(page = 1) {
-      window.location.href= `/busca?term=${this.term}&city=${this.city}&type=${this.selects.hiringType}&date=${this.selects.date}&handicapped=${this.selects.handicapped}&page=${page}`;
-    },
-    toggleFilterMobile: function() {
-      let el = document.querySelector('.interface-spa.interface-spa--mobile');
-      el.classList.toggle('opened');
-    },
-  }
-};
-</script>
-<style lang="scss">
-@import "~bootstrap/scss/functions.scss";
-@import "~bootstrap/scss/mixins.scss";
-@import "assets/sass/burh-ds/variables.scss";
-@import "assets/sass/burh-ds/variables/_colors.scss";
-
-div.pac-container {
-  z-index: 10000;
-}
-
-.interface-spa__header {
-  flex-wrap: wrap;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-
-  .h1 {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 0;
-  }
-  p {
-    font-size: 0.85rem;
-    white-space: nowrap;
-    width: 100%;
-    margin-bottom: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-.search__list {
-  overflow-x: hidden;
-}
-.interface-spa__content {
-  .search__header {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    align-content: center;
-    padding: 0 3rem;
-
-    .h2 {
-      width: 100%;
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: 0;
-    }
-    p {
-      font-size: 0.85rem;
-      white-space: nowrap;
-      width: 90%;
-      margin-bottom: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-}
-.search-pagination {
-  display: flex;
-  justify-content: center;
-}
-.interface-spa__filter {
-  &__fields {
-    display: flex;
-  }
-}
-
-.interface-spa--mobile {
-  .interface-spa__header {
-    padding: 0;
-  }
-  .interface-spa__filter {
-    &__header {
-      display: none;
-    }
-    &__fields {
-      display: none;
-      width: 100%;
-    }
-    > .d-block {
-      height: calc(80px / 1.4) !important;
-      line-height: calc(80px / 1.4) !important;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-  &.opened {
-
-    .interface-spa__header {
-      top: 0;
-      height: 100vh;
-      z-index: 10000;
-      padding: 0;
-    }
-    .interface-spa__filter {
-      align-content: flex-start;
-
-      &__header {
-        display: flex;
-        width: 100%;
-        font-size: 1rem !important;
-        height: 70px;
-        margin-bottom: 0 !important;
-        justify-content: flex-start !important;
-        align-items: center;
-        padding: 1rem !important;
-        background-color: #f8f9fe;
-        color: #32325d;
-
-        span {
-          display: block;
-          width: 100%;
-          text-align: center;
-        }
-      }
-      .form-group {
-        margin-bottom: 1rem;
-      }
-      &__fields {
-        display: block;
-        height: auto;
-        overflow: auto;
-        padding: 2rem;
-      }
-      > .d-block {
-        display: none !important;
-      }
-    }
-  }
-}
-.interface-spa__aside {
-  .pagination {
-    justify-content: center;
-
-    .page-item {
-      &:first-child,
-      &:last-child {
-        &,
-        .page-link {
-          border: 0;
-          color: $primary;
-          width: auto;
-
-          &:hover {
-            background: none;
-            text-decoration: underline;
-          }
-        }
-        &.disabled {
-          opacity: 0;
-        }
-      }
-    }
-
-  }
-}
-.z-master {
-  z-index: 20000 !important;
-}
-</style>
+<template>
+  <interface-spa
+    :class="isMobileOnlyWatch ? 'interface-spa--mobile' : ''"
+    classesHeader="jobs-aside--header"
+    classesAside="jobs-aside"
+    class="printable"
+    asideSize="big"
+  >
+    <burh-modals
+      slot="interface-header"
+      :render="['phone', 'address']"
+      :active="activeModal"
+      v-on:modal-close="clearActive($event)"
+      v-on:updatedOtherInformations="setUpdatedOtherInformations($event)"
+      :title="'Aviso'"
+      :description="`Para se candidatar é necessário informar seu ${activeModal == 'phone' ? 'telefone': 'endereço'}`"
+    >
+    </burh-modals>
+
+    <div class="interface-spa__filter" slot="interface-header">
+
+      <span class="d-block bg-lighter px-4 w-100 h-100" v-if="isMobileOnlyWatch" v-on:click="toggleFilterMobile()">
+        <!-- <font-awesome-icon :icon="['fas', 'chevron-down']" /> Sorocaba - CLT, PJ Sorocaba - CLT, PJ Sorocaba - CLT, PJ -->
+        <font-awesome-icon :icon="['fas', 'filter']" class="mr-2" /> <span>Filtros Avançados</span>
+      </span>
+      <h4 class="interface-spa__filter__header" v-on:click="toggleFilterMobile()">
+        <font-awesome-icon :icon="['fas', 'chevron-left']" class="mr-2" /> <span>Filtros avançados</span>
+      </h4>
+      <div class="interface-spa__filter__fields">
+        <auto-complete :valueDefault="city" :preventDefaultValue="true" v-on:change="onAutoCompleteChange($event)" txtPlaceholder="Cidade" :request="true" :doRequest="funcRequest" :listWords="['itu', 'itupeva', 'sorocaba', 'votorantim', 'salto', 'salto de pirapora']" class="mr-2"/>
+
+        <base-input class="mr-2">
+          <el-select
+            v-model="selects.hiringType"
+            filterable
+            placeholder="Tipo de contratação"
+            popper-class="z-master"
+            @change="searchParams()"
+          >
+            <el-option
+              v-for="option in hiringType"
+              :key="option.label"
+              :label="option.label"
+              :value="option.label"
+            ></el-option>
+          </el-select>
+        </base-input>
+        <base-input class="mr-2">
+          <el-select
+            v-model="selects.date"
+            filterable
+            placeholder="Tempo de Abertura"
+            popper-class="z-master"
+            @change="searchParams()"
+          >
+            <el-option
+              v-for="option in date"
+              :key="option.label"
+              :label="option.label"
+              :value="option.value"
+            ></el-option>
+          </el-select>
+        </base-input>
+        <base-input class="mr-2">
+          <el-select
+            v-model="selects.handicapped"
+            filterable
+            placeholder="PCD"
+            popper-class="z-master"
+            @change="searchParams()"
+          >
+            <el-option
+              v-for="option in handicapped"
+              :key="option.label"
+              :label="option.label"
+              :value="option.value"
+            ></el-option>
+          </el-select>
+        </base-input>
+
+        <button class="btn btn-primary btn-sm btn-block mt-4" v-if="isMobileOnlyWatch" v-on:click="toggleFilterMobile()">Aplicar filtro</button>
+      </div>
+    </div>
+
+    <div v-if="!isMobileOnlyWatch" slot="aside-header" class="d-flex">
+      <template v-if="details != null && details.total != null">
+        Página {{currentPage}} de {{details.total}} vagas.
+        <br />
+      </template>
+    </div>
+
+    <ul class="list-unstyled search__list" slot="aside-body">
+      <template v-if="!searchEmpty">
+      <li class="search__list__item" v-if="(jobs == null || jobs.length <= 0)">
+        <div class="card card--job cursor-pointer skeleton">
+          <div class="card-header">
+            <span class="avatar rounded-circle">
+            </span>
+            <ul class="card__controls list-inline">
+              <li class="list-inline-item"></li>
+              <li class="list-inline-item"></li>
+            </ul>
+          </div>
+          <div class="card-body">
+            <span class="card__company"></span>
+            <h5 class="card-title"></h5>
+            <span class="card__local"></span>
+          </div>
+          <div class="card-footer">
+            <p class="card__published"></p>
+          </div>
+        </div>
+      </li>
+      </template>
+      <template v-if="!searchEmpty">
+        <li class="search__list__item" v-for="(job, index) in jobs" :key="job.job_id" :class="{'search__list__item--opened': details != null && job.job_id == details.job_id}">
+          <opportunityCard
+            v-on:share-click="onClickShareJob"
+            v-on:save-click="onClickSaveJob(job)"
+            v-on:card-click="featureDetails(job.job_id, index)"
+            v-on:avatar-click="featureDetails(job.job_id, index)"
+            v-on:company-name-click="featureDetails(job.job_id, index)"
+            :fullHeart="job.subscription != null && job.subscription.user_bookmarked"
+            :link="job.job_id"
+            :img="!job.private ? job.company_logo : '/img/content/logoempresaconfidencial.png'"
+            :title="job.job_title"
+            :date="job.created_at"
+            :href="''"
+            :company="!job.private ? job.company_name : 'Empresa Confidencial'"
+            :local="job.city_name"
+            :pcd="job.handicapped"
+          ></opportunityCard>
+        </li>
+        <li class="p-4">
+          <v-pagination
+            v-if="details.last_page != null"
+            v-model="currentPage"
+            :classes="bootstrapPaginationClasses"
+            :labels="paginationAnchorTexts"
+            :page-count="details.last_page"
+          ></v-pagination>
+        </li>
+      </template>
+      <template v-if="searchEmpty && isMobileOnlyWatch">
+        <li class="search__list__item">
+          <div class="p-4">
+            <h2 class="display-3 mt-5">Sem Resultados</h2>
+            <p>Para conseguir mais resultados, tente ajustar alterando a sua busca ou verifique se a Burh já esta disponível em sua cidade.</p>
+            <button class="btn btn-sm btn-outline-primary" @click="$router.push('/busca')">Ver sugestões</button>
+          </div>
+        </li>
+      </template>
+      <share-modal :show="modals" :url="jobLinkShare" />
+    </ul>
+
+
+    <!-- <div slot="aside-footer" class="d-none d-sm-block">
+      <template v-if="jobs != null && jobs.length > 0">
+        <font-awesome-icon :icon="['far', 'eye']" />
+        <small>
+          Você ainda tem
+          <b>{{jobsLeft()}}</b> vagas para visualizar
+        </small>
+      </template>
+    </div> -->
+
+    <!-- <job-detail :title="this.details.title" :img="this.details.img" :location="this.details.location" :company="this.details.company" :description="this.details.description"></job-detail> -->
+    <job-detail
+      class="skeleton"
+      :link="''"
+      v-if="jobs == null || jobs.length <= 0"
+      slot="content"
+      :title="''"
+      :hiring="''"
+      :img="''"
+      :location="''"
+      :company="''"
+      :description="''"
+      :benefits="[]"
+      :company_private="true"
+      :searchEmpty="searchEmpty"
+      :skeleton="true"
+    ></job-detail>
+
+    <job-detail
+      v-on:share-click="onClickShareJob"
+      v-on:save-click="onClickSaveJobDetail(details)"
+      :link="this.details.job_id"
+      v-if="this.details.total"
+      slot="content"
+      :fullHeart="this.details.user_bookmarked"
+      :title="this.details.title"
+      :hiring="this.details.hiring"
+      :img="this.details.img"
+      :location="this.details.location"
+      :company="this.details.company"
+      :description="this.details.description"
+      :benefits="this.details.benefits"
+      :company_private="this.details.private"
+      :company_slug="this.details.company_slug"
+      :applied="this.details.applied"
+      :canUnSubscribe="this.details.can_unsubscribe"
+      :handicapped="this.details.handicapped"
+      :salary="this.details.salary"
+      :searchEmpty="searchEmpty"
+      v-on:apply-to-job="applyToJob($event)"
+    >
+      <div class="row printable__qrcode" slot="qrcode">
+        <div class="col mb-4">
+          <div class="qr-code">
+            <qrcode
+              :value="baseUrl +'/'+ details.link"
+              :options="{ width: 156, height: 156 }"
+              class="border"
+            ></qrcode>
+          </div>
+        </div>
+      </div>
+    </job-detail>
+
+    <div class="job-detail__footer d-flex w-100 justify-content-end" slot="footer-content">
+      <div class="box-payment mr-md-4">
+        <span class="text-muted d-block">Salário</span>
+        <bpInterfaceSpa class="lead">R$ {{this.details.salary}}</bpInterfaceSpa>
+      </div>
+      <button class="btn btn-primary" @click="applyToJob()">Candidatar-se</button>
+    </div>
+  </interface-spa>
+</template>
+<script>
+import { isMobile, isMobileOnly } from "mobile-device-detect";
+import { Select, Option } from "element-ui";
+import jobDetail from "~/components/burh-ds/Jobs/JobDetail.vue";
+import InterfaceSpa from "~/components/burh-ds/InterfaceSpa/InterfaceSpa.vue";
+import opportunityCard from "~/components/burh-ds/Cards/OpportunityCard.vue";
+import ShareModal from "~/components/burh-ds/Modals/ShareModal.vue";
+import AutoComplete from "~/components/burh-ds/Input/AutoComplete.vue";
+import https from "https";
+import swal from 'sweetalert2';
+import BurhModals from "@/pages/burh/modals/modals";
+import { getCookie } from '~/util/cookie';
+import {userSaveJob} from '~/services/user'
+
+
+export default {
+  name: "search-slug",
+  components: {
+    InterfaceSpa,
+    opportunityCard,
+    jobDetail,
+    [Select.name]: Select,
+    [Option.name]: Option,
+    ShareModal,
+    BurhModals,
+    AutoComplete
+  },
+  props: ['searchData'],
+  watch:{
+    '$store.state.localStorage.currentUser'(newValue){
+      this.currentUser = newValue;
+    },
+    $route (to, from){
+        this.term = to.query.term;
+        if (from.query.term != to.query.term) {
+          this.search(1, true);
+        }
+    },
+    currentPage(newValue) {
+      this.searchParams(newValue);
+    }
+  },
+
+  async mounted() {
+    this.currentUser = this.$store.state.localStorage.currentUser;
+    this.isMobileOnlyWatch = isMobileOnly;
+
+    if(this.city == null) {
+        this.city = await this.$location();
+    }
+
+    this.onLoadSearch();
+  },
+
+  updated() {
+    this.selects.handicapped = this.$route.query.handicapped
+      ? this.$route.query.handicapped == "true"
+        ? "Sim"
+        : "Não"
+      : "";
+    this.selects.hiringType = this.$route.query.type
+      ? this.$route.query.type
+      : "";
+    // this.autoComplete();
+  },
+
+  data() {
+    return {
+        city: null,
+        currentUser: null,
+        funcRequest: {"request": this.doSearchCities},
+        isMobileOnlyWatch: false,
+        searching: false,
+        bootstrapPaginationClasses: {
+        ul: 'pagination pagination-sm',
+        li: 'page-item',
+        liActive: 'active',
+        liDisable: 'disabled',
+        button: 'page-link'
+        },
+        paginationAnchorTexts: {
+        first: false,
+        prev: 'Anterior',
+        next: 'Próximo',
+        last: false,
+        },
+        pagination: {
+        default: 1,
+        last: 1
+        },
+        baseUrl: process.env.baseAppUrl,
+        userPhoneNumber: null,
+        activeModal: '',
+        jobLinkShare: "",
+        modals: {
+        modal0: false
+        },
+        autocomplete: null,
+        jobs: [],
+        currentresult: 15,
+        details: {
+          img: "",
+          title: "",
+          description: "",
+          location: "",
+          company: "",
+          salary: null,
+          total: 0,
+          hiring: "",
+          private: false,
+          link: "",
+          job_id: null,
+          company_slug: null,
+          applied: null,
+          can_unsubscribe: null,
+          user_bookmarked: null,
+          index: null,
+        },
+        loading: false,
+        address: "",
+        handicapped: [
+        {
+            label: "Sim",
+            value: true
+        },
+        {
+            label: "Não",
+            value: false
+        }
+        ],
+        date: [
+            {
+                label: "90 dias",
+                value: 90
+            },
+            {
+                label: "60 dias",
+                value: 60
+            },
+            {
+                label: "30 dias",
+                value: 30
+            },
+            {
+                label: "15 dias",
+                value: 15
+            },
+            {
+                label: "7 dias",
+                value: 7
+            },
+            {
+                label: "Hoje",
+                value: 1
+            }
+        ],
+        hiringType: [
+            {
+                label: "Todos",
+                value: 1
+            },
+            {
+                label: "CLT",
+                value: 2
+            },
+            {
+                label: "CNPJ",
+                value: 3
+            },
+            {
+                label: "Estágio",
+                value: 4
+            },
+            {
+                label: "RPA",
+                value: 5
+            },
+            {
+                label: "Temporário",
+                value: 6
+            }
+        ],
+        searchEmpty: false,
+        selects: this.searchData.selects,
+        term: this.searchData.term,
+        city: this.searchData.city,
+        currentPage: this.searchData.currentPage
+    };
+  },
+
+  methods: {
+    async onClickSaveJob(item){
+      if ( this.currentUser == null ) {
+        swal.fire({
+          title: `Aviso`,
+          html: `Você precisa estar logado para realizar esta função.`,
+          buttonsStyling: false,
+          confirmButtonClass: 'btn btn-primary btn-fill',
+        });
+        return;
+      }
+
+      if(await userSaveJob(item.job_id, item.subscription.user_bookmarked)) {
+        item.subscription.user_bookmarked = !item.subscription.user_bookmarked;
+        if (item.job_id == this.details.job_id) {
+          this.details.user_bookmarked = item.subscription.user_bookmarked ;
+        }
+      }
+    },
+
+    async onClickSaveJobDetail(item){
+      if ( this.currentUser == null ) {
+        swal.fire({
+          title: `Aviso`,
+          html: `Você precisa estar logado para realizar esta função.`,
+          buttonsStyling: false,
+          confirmButtonClass: 'btn btn-primary btn-fill',
+        });
+        return;
+      }
+
+      if(await userSaveJob(item.job_id, item.user_bookmarked)) {
+        item.user_bookmarked = !item.user_bookmarked;
+        this.jobs[item.index].subscription.user_bookmarked = item.user_bookmarked;
+      }
+    },
+
+    onAutoCompleteChange(e) {
+      if(e == this.$route.query.city) {
+        return;
+      }
+      this.city = e.split(`,`)[0].replace('value:','');
+      this.searchParams();
+    },
+
+    async doSearchCities(key = null){
+      let {data} = await this.$axios.get(process.env.routes.api.searchCities.replace(':hash',key));
+      let items = [...new Set(data.data.cities)]; //remove cities duplicated
+      return items;
+    },
+
+    onLoadSearch() {
+        this.search(1, false);
+    },
+    openModal(modal, data = null, index = null) {
+        //this.index = index;
+        this.activeModal = modal;
+        //this.userData = data;
+        document.body.classList.add("modal-open");
+        document.body.classList.add("no-scroll");
+      },
+
+      clearActive(e) {
+        this.activeModal = "";
+        //this.userData = null;
+        document.body.classList.remove("no-scroll");
+        document.body.classList.remove("modal-open");
+        document.getElementsByTagName("html")[0].classList.remove("modal-open");
+      },
+
+    getUserPhoneNumber(){
+      if(this.currentUser.contact != null && this.currentUser.contact.cellphone){
+        this.userPhoneNumber = this.currentUser.contact.cellphone;
+      }else{
+        this.userPhoneNumber = null;
+      }
+    },
+    jobsLeft() {
+      if(this.details.total == null || this.jobs == null) { return 0 }
+      return this.details.total - this.jobs.length;
+    },
+    async applyToJob(applied) {
+      if(this.currentUser == null) {
+        swal.fire({
+          title: `Login necessário`,
+          html: `É necessário ter uma conta e estar credenciado para realizar essa ação.`,
+          buttonsStyling: false,
+          confirmButtonText: 'Ir para login',
+          confirmButtonClass: 'btn btn-primary btn-fill',
+          showCancelButton: true,
+          cancelButtonText: 'Cancelar',
+          cancelButtonClass: 'btn btn-outline-default btn-fill',
+          reverseButtons: true
+        }).then((result) => {
+          if(result.value) {
+            let rollback = this.$route.fullPath;
+
+            this.$router.push('/entrar?rollback=' + rollback);
+          }
+        });
+      } else if(this.currentUser.profile_completion >= 60) {
+
+        this.getUserPhoneNumber();
+
+        if (this.userPhoneNumber == null && applied == true){
+          this.openModal('phone');
+          return;
+        }
+
+        if (this.currentUser.profile_pendencies.includes('Endereço') && applied == true) {
+          this.openModal('address');
+          return;
+        }
+
+        let obj = {
+          data: {
+            job_id: this.details.job_id,
+            user_id: this.currentUser.user_id
+          }
+        }
+
+        let {data} = await this.$axios.post(process.env.routes.api.user.applyToJob, obj, {
+          headers: {
+            Authorization: `Bearer ${this.$store.state.localStorage.token}`
+          }
+        });
+
+        this.details.applied = applied;
+        this.details.can_unsubscribe = true;
+        let index = this.jobs.findIndex(job => job.job_id === this.details.job_id);
+        if(index != -1) { //equal -1 job_id is not found.
+          this.jobs[index].subscription.applied = applied
+        }
+
+        swal.fire({
+          title: `${applied ? "Inscrição realizada com sucesso" : "Você saiu dessa vaga"}`,
+          buttonsStyling: false,
+          confirmButtonClass: 'btn btn-primary btn-fill'
+        });
+      } else if(this.details.applied){
+        let obj = {
+            data:{
+              job_id: this.details.job_id,
+              user_id: this.currentUser.user_id
+            }
+          }
+
+          let {data} = await this.$axios.post(process.env.routes.api.user.applyToJob, obj, {
+            headers: {
+              Authorization: `Bearer ${this.$store.state.localStorage.token}`
+            }
+          });
+
+          swal.fire({
+            title: {"Você saiu dessa vaga": !this.details.applied },
+            buttonsStyling: false,
+            confirmButtonClass: 'btn btn-primary btn-fill'
+          });
+
+          this.details.applied = !this.details.applied;
+          let index = this.jobs.findIndex(job => job.job_id === this.details.job_id);
+          if(index != -1) { //equal -1 job_id is not found.
+            this.jobs[index].subscription.applied = this.details.applied;
+          }
+
+      } else {
+        swal.fire({
+          title: `Perfil Incompleto`,
+          html: `Alguma das informações que faltam em seu perfil: ${this.currentUser.profile_pendencies.join(', ')}`,
+          buttonsStyling: false,
+          confirmButtonClass: 'btn btn-primary btn-fill',
+          showCancelButton: true,
+          cancelButtonText: 'Cancelar',
+          cancelButtonClass: 'btn btn-outline-default btn-fill',
+          reverseButtons: true
+        });
+      }
+    },
+    onClickShareJob(idJob) {
+      this.jobLinkShare = process.env.baseAppUrl + "/vagas/" + idJob;
+      this.modals.modal0 = true;
+    },
+    async search(page, reset) {
+      this.searching = true;
+      let search = {
+        city: this.city == null || this.city.trim() == '' ? null : this.city,
+        date_posted: this.$route.query.date
+          ? parseInt(this.$route.query.date)
+          : 90,
+        query: this.$route.query.term ? this.$route.query.term : "",
+        handicapped: this.$route.query.handicapped
+          ? this.$route.query.handicapped == "true"
+            ? true
+            : false
+          : "",
+        hiring_type: this.$route.query.type ? this.$route.query.type : null
+      };
+
+      let response = await this.$axios.post(`${process.env.baseApiUrl}/nb/jobs/search?page=${page ? page : 1}${this.$store.state.localStorage.currentUser ? "&id=" + this.$store.state.localStorage.currentUser.user_id :''}`, search, {
+          headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${this.$store.state.localStorage.token}`
+          },
+          httpsAgent: new https.Agent({
+              rejectUnauthorized: false
+          })
+      });
+      this.details.total = response.data.data.total;
+      this.details.last_page = response.data.data.last_page;
+      this.jobs = response.data.data.data;
+
+      var text = "";
+      if (this.details.total > 0) {
+        this.getDetails(this.jobs[0].job_id);
+        if (this.$route.query.term) {
+          text = `Página 1 de ${this.details.total} vagas de ${this.$route.query.term}`;
+        } else if (this.details.total > 15) {
+          text = `Página 1 de ${this.details.total - 5} vagas`;
+        } else {
+          text = "Resultados para sua busca";
+        }
+        this.searchEmpty = false;
+      } else {
+        text = "Não há resultados para sua busca";
+        this.searchEmpty = true;
+        
+
+        //this.$router.push({ path: "/", query: { term: this.$route.query.term, city: this.$route.query.city ? this.$route.query.city : await this.$location(), type: this.$route.query.type, date: this.$route.query.date, page: 1, handicapped: this.$route.query.handicapped, error: "404_job"}, });
+      }
+      this.searchtext = text;
+
+      this.currentresult = this.jobs.length;
+      this.pagination.last = response.data.data.last_page;
+      this.searching = false;
+    },
+    async featureDetails(id, index){
+      await this.getDetails(id, index);
+      this.goToDetails(id);
+    },
+
+    goToDetails(id){
+      if(this.isMobileOnlyWatch){
+        this.$router.push('/vagas/' + id);
+      }
+    },
+
+    async getDetails(id, index = 0) {
+      let jobs = this.jobs;
+      let job = await jobs.filter(function(e) {
+        return e.job_id == id;
+      });
+
+      this.details.job_id = id;
+      this.details.index = index;
+      this.details.img = job[0].company_logo;
+      this.details.title = job[0].job_title;
+      this.details.description = job[0].job_description;
+      this.details.location = job[0].city_name;
+      this.details.company = job[0].company_name;
+      this.details.salary = job[0].salary;
+      this.details.benefits = job[0].job_benefits ? job[0].job_benefits.length > 0 ? job[0].job_benefits : null : null;
+      this.details.hiring = job[0].type_hiring;
+      this.details.private = job[0].private;
+      this.details.link = process.env.baseAppUrl + '/vagas/' + id;
+      this.details.applied = job[0].subscription == null ? false : job[0].subscription.applied;
+      this.details.can_unsubscribe = job[0].subscription == null ? false : job[0].subscription.can_unsubscribe;
+      this.details.user_bookmarked = job[0].subscription == null ? false : job[0].subscription.user_bookmarked;
+      this.details.handicapped = job[0].handicapped;
+      this.details.company_slug = job[0].company_slug;
+    },
+
+    searchParams(page = 1) {
+      window.location.href= `/busca?term=${this.term}&city=${this.city}&type=${this.selects.hiringType}&date=${this.selects.date}&handicapped=${this.selects.handicapped}&page=${page}`;
+    },
+    toggleFilterMobile: function() {
+      let el = document.querySelector('.interface-spa.interface-spa--mobile');
+      el.classList.toggle('opened');
+    },
+  }
+};
+</script>
+<style lang="scss">
+@import "~bootstrap/scss/functions.scss";
+@import "~bootstrap/scss/mixins.scss";
+@import "assets/sass/burh-ds/variables.scss";
+@import "assets/sass/burh-ds/variables/_colors.scss";
+
+div.pac-container {
+  z-index: 10000;
+}
+
+.interface-spa__header {
+  flex-wrap: wrap;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+
+  .h1 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0;
+  }
+  p {
+    font-size: 0.85rem;
+    white-space: nowrap;
+    width: 100%;
+    margin-bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.search__list {
+  overflow-x: hidden;
+}
+.interface-spa__content {
+  .search__header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    align-content: center;
+    padding: 0 3rem;
+
+    .h2 {
+      width: 100%;
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 0;
+    }
+    p {
+      font-size: 0.85rem;
+      white-space: nowrap;
+      width: 90%;
+      margin-bottom: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+.search-pagination {
+  display: flex;
+  justify-content: center;
+}
+.interface-spa__filter {
+  &__fields {
+    display: flex;
+  }
+}
+
+.interface-spa--mobile {
+  .interface-spa__header {
+    padding: 0;
+  }
+  .interface-spa__filter {
+    &__header {
+      display: none;
+    }
+    &__fields {
+      display: none;
+      width: 100%;
+    }
+    > .d-block {
+      height: calc(80px / 1.4) !important;
+      line-height: calc(80px / 1.4) !important;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+  &.opened {
+
+    .interface-spa__header {
+      top: 0;
+      height: 100vh;
+      z-index: 10000;
+      padding: 0;
+    }
+    .interface-spa__filter {
+      align-content: flex-start;
+
+      &__header {
+        display: flex;
+        width: 100%;
+        font-size: 1rem !important;
+        height: 70px;
+        margin-bottom: 0 !important;
+        justify-content: flex-start !important;
+        align-items: center;
+        padding: 1rem !important;
+        background-color: #f8f9fe;
+        color: #32325d;
+
+        span {
+          display: block;
+          width: 100%;
+          text-align: center;
+        }
+      }
+      .form-group {
+        margin-bottom: 1rem;
+      }
+      &__fields {
+        display: block;
+        height: auto;
+        overflow: auto;
+        padding: 2rem;
+      }
+      > .d-block {
+        display: none !important;
+      }
+    }
+  }
+}
+.interface-spa__aside {
+  .pagination {
+    justify-content: center;
+
+    .page-item {
+      &:first-child,
+      &:last-child {
+        &,
+        .page-link {
+          border: 0;
+          color: $primary;
+          width: auto;
+
+          &:hover {
+            background: none;
+            text-decoration: underline;
+          }
+        }
+        &.disabled {
+          opacity: 0;
+        }
+      }
+    }
+
+  }
+}
+.z-master {
+  z-index: 20000 !important;
+}
+</style>