@burh/nuxt-core 1.0.0

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

@@ -0,0 +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;
+        console.log(text, this.searchEmpty);
+
+        //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>