QuioscoVue/src/views/public/Home.vue

<template>
  <div class="mt-5">
    <div class="alert alert-danger alert-rounded pt-5 m-3" v-if="strError.length != 0">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
      <i class="material-icons icon-align">report_problem</i>
      {{ strError }}
    </div>
    <div class="container-fluid background-estantes">
      <div class="row">
        <div class="col-12 offset-sm-2 col-sm-9 offset-lg-2 col-lg-9 pb-5">
          <div class="row">
            <div class="col-sm-12">
              <h4 class="text-center mt-5">
                ÚLTIMOS
                <span class="text-danger">CAMBIOS</span>
              </h4>
              <hr
                style="border: 3px solid rgb(228, 47, 43);
                width: 40px;
                border-radius: 30px 30px 30px 30px;"
              />
            </div>
            <div class="col-sm-12" style="background:#fff;border-radius:30px;">
              <div class="news-estantes p-2 m-3">
                <slick ref="slick" :options="slickOptions" v-if="newEstantes.length">
                  <router-link
                    :to="{ name:'estantes', params:  { est: slug(estante.ESTA) } }"
                    tag="a"
                    class="p-2"
                    v-for="estante in newEstantes"
                    :key="estante.IDES"
                  >
                    <div class="card p-1">
                      <img :data-lazy="estante.IDIM" class="img-responsive" :id="estante.IDES" />
                      <b-tooltip :target="estante.IDES" placement="bottom">
                        <span class="text-lowercase">{{ estante.ESTA }}</span>
                      </b-tooltip>
                    </div>
                  </router-link>
                </slick>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid whithoutPadding" id="divEstantes">
      <div class="row">
        <div class="col-sm-3" style="background: #fff">
          <div class="row" style="background: #E30425 none repeat scroll 0% 0%">
            <div class="col-sm-12 p-4">
              <h6 class="pb-1 text-white">BUSCAR</h6>
              <div class="input-group">
                <div class="input-group-append">
                  <span class="input-group-text" id="inputGroup">
                    <i class="material-icons">search</i>
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  v-model="buscar"
                  placeholder="Escriba su búsqueda"
                />
              </div>
              <hr />

              <h6 class="pb-1 text-white">ORDENAR POR</h6>
              <div class="datepicker-trigger">
                <div class="input-group">
                  <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2">
                      <i class="material-icons align-middle">date_range</i>
                    </span>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    id="datepicker-trigger"
                    placeholder="Selecciona un rango"
                    :value="formatoFechaCalendario(filtroFecha.fechaInicial,filtroFecha.fechaFinal)"
                  />
                </div>
                <p>
                  <a
                    href="#"
                    @click.prevent="filtroFecha.fechaInicial='';
                    filtroFecha.fechaFinal='';
                    filtroFecha.activar = false"
                    class="btn btn-sm btn-danger bg-dark text-white mt-3 float-right"
                    v-show="filtroFecha.fechaInicial !== ''&&filtroFecha.fechaFinal !== ''"
                  >Borrar filtro</a>
                </p>
              </div>
              <AirbnbStyleDatepicker
                :trigger-element-id="'datepicker-trigger'"
                :mode="'range'"
                :fullscreen-mobile="false"
                :date-one="filtroFecha.fechaInicial"
                :date-two="filtroFecha.fechaFinal"
                :end-date="filtroFecha.fechaLimiteCalendario"
                @date-one-selected="val => { filtroFecha.fechaInicial = val }"
                @date-two-selected="val => { filtroFecha.fechaFinal = val }"
                @apply="filtroFecha.activar = true"
              />
            </div>
          </div>
        </div>
        <div class="col-sm-9" style="background: #fff">
          <div class="container-fluid background-todosEstantes">
            <div class="col-sm-12 pb-1">
              <h4 class="text-center">
                TODOS LOS
                <span class="text-danger">ESTANTES</span>
              </h4>
              <hr
                style="border: 3px solid rgb(228, 47, 43);
                width: 40px;
                border-radius: 30px 30px 30px 30px;"
              />
            </div>
            <div class="row">
              <div class="col-sm-12 offset-lg-1 offset-xl-1">
                <transition-group name="flip-list" tag="div">
                  <div
                    v-for="estante in buscarEstante"
                    :key="estante.IDES"
                    class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 list-item m-lg-4 m-xl-4 p-4 p-sm-3 p-md-3 p-lg-0 p-xl-0"
                  >
                    <router-link
                      :to="{ name:'estantes', params:  { est: slug(estante.ESTA) } }"
                      tag="div"
                      class="ribbon-wrapper-reverse card shadow-sm p-1"
                      style="cursor:pointer"
                    >
                      <h6 class="mb-0 ml-3 mr-3 mt-3">{{ estante.ESTA }}</h6>
                      <img class="img-responsive p-1" v-lazy="estante.IDIM" />
                      <label class="m-1 label text-muted">Publicado el {{estante.FECR }}</label>
                    </router-link>
                  </div>
                </transition-group>
              </div>
              <div class="col-sm-12">
                <p
                  class="text-center"
                  v-if="buscarEstante.length === 0 && !loading  && 
                  (buscar !== '' || filtroFecha.fechaFinal !== '') && estantesPermitidos.length !== 0"
                >No se encontraron resultados para su búsqueda.</p>
              </div>
            </div>

            <div
              v-if="mensajeEstantesVacios"
              class="alert alert-secondary text-center mt-3"
              role="alert"
            >No se encontraron estantes para mostrar.</div>

            <infinite-loading @infinite="infiniteEstante" v-else>
              <div slot="no-more" class="text-muted"></div>
              <div slot="no-results">No tenemos estantes... :c</div>
            </infinite-loading>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
require("../../../node_modules/slick-carousel/slick/slick.css");
require("../../../node_modules/slick-carousel/slick/slick-theme.css");

import { token } from "../../_mixin/user_mixin.js";
import { downloadMixin } from "../../_mixin/public_mixin.js";

import slick from "vue-slick";
import InfiniteLoading from "vue-infinite-loading";
import { BTooltip } from "bootstrap-vue";
import moment from "moment";
var _ = require("lodash");
export default {
  name: "Estantes",
  components: {
    BTooltip,
    slick,
    InfiniteLoading
  },
  mixins: [downloadMixin, token],
  data() {
    return {
      porPagina: 6,
      inicioPagina: 1,
      estantesTemp: [],
      estantesPermitidos: [],
      permisosDatos: [],
      slickOptions: {
        centerPadding: "10px",
        slidesToShow: 6,
        adaptiveHeight: true,
        autoplay: true,
        lazyLoad: "ondemand",
        responsive: [
          {
            breakpoint: 768,
            settings: {
              centerMode: true,
              centerPadding: "15px",
              slidesToShow: 3
            }
          },
          {
            breakpoint: 480,
            settings: {
              arrows: false,
              centerMode: true,
              centerPadding: "15px",
              slidesToShow: 1
            }
          }
        ]
      },
      mensajeEstantesVacios: false
    };
  },
  async mounted() {
    await this.getEstantes();
    this.permisosEstantes();
    this.inicioPagina = 0;
  },
  methods: {
    permisosEstantes() {
      if (this.$store.getters.user.role === "colaborador") {
        this.permisosDatos = JSON.parse(this.$store.getters.permisos);

        let estantesConAcceso = _.filter(
          this.permisosDatos[0].children,
          perm => !perm.text.match("Sin Acceso")
        );

        let estantesPermitidos = _.values(
          _.mapValues(estantesConAcceso, est => {
            let arrEstanteAndId = est.text.split(" | ");
            let strEstante = arrEstanteAndId[0].split(" - ");
            let resultadoFinal = _.find(this.estantes, ["ESTA", strEstante[0]]);
            return resultadoFinal;
          })
        );
        this.estantesPermitidos = estantesPermitidos;
      }

      if (this.$store.getters.user.role === "admin") {
        this.estantesPermitidos = this.estantes;
        this.mensajeEstantesVacios =
          this.estantesPermitidos.length === 0 ? true : false;
      }
    },
    infiniteEstante(state) {
      setTimeout(() => {
        // Calcular la página
        const indiceInicio = (this.inicioPagina - 1) * this.porPagina;
        const indiceFinal =
          indiceInicio + this.porPagina >= this.estantesPermitidos.length
            ? this.estantesPermitidos.length
            : indiceInicio + this.porPagina;
        if (indiceInicio >= 0) {
          this.estantesTemp = this.estantesTemp.concat(
            this.estantesPermitidos.slice(indiceInicio, indiceFinal)
          );
        }
        state.loaded();
        if (this.inicioPagina * this.porPagina > indiceFinal) {
          return state.complete();
        }
      }, 1000);
      // Aumentamos pagina cada vez que se ejecute la funcion
      this.inicioPagina++;
    }
  },
  computed: {
    newEstantes: function() {
      return this.estantesPermitidos.slice(0, 7);
    },
    buscarEstante() {
      if (this.filtroFecha.activar || this.buscar.length) {
        var estantesFiltroFecha = this.filtrarFecha("est");
        // filtramos por input busqueda
        return estantesFiltroFecha.filter(estante => {
          return estante.ESTA.toLowerCase().match(this.buscar.toLowerCase());
        });
      }
      return this.estantesTemp;
    }
  }
};
</script>
<style  scoped>
.card {
  transition: ease-in 0.3s;
}
.card:hover {
  box-shadow: 0 0.3rem 0.95rem rgba(0, 0, 0, 0.18) !important;
}
</style>

<style>
/* infinite scroll */
.loading {
  text-align: center;
  position: absolute;
  color: #fff;
  z-index: 9;
  background: blue;
  padding: 8px 18px;
  border-radius: 5px;
  left: calc(50% - 45px);
  top: calc(50% - 18px);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.slick-prev::before,
.slick-next::before {
  font-size: 27px !important;
  color: #dc3545 !important;
}

.background-estantes {
  background-image: url("../../assets/images/fondo-nuevos-estantes.png");
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bg-image--2 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 350px;
}
.section__title {
  margin: 0 auto;
  max-width: 650px;
}
.section__title h2 {
  color: #333;
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 20px;
  position: relative;
  text-transform: uppercase;
}
.section__title h2 span {
  color: #0581d3;
}
.container-fluid.whithoutPadding {
  padding: 0px 0px !important;
}

/* transition flip */
.flip-list-move {
  transition: transform 0.8s;
}
.list-item {
  display: inline-block;
  margin-bottom: 10px;
}
</style>