SitioWebRake/js/blog-vue.js

Vue.component('latest-posts', {
    props: ['posts'],
    template: `

  <div class="recent-post">
  <!-- start single post -->
  <div class="recent-single-post">
  <div class="post-img">
  <a @click.prevent="$root.verNoticia(posts.id)">
  <img :src="posts.imagenPreview" alt="">
  </a>
  </a>
  </div>
  <div class="pst-content">
  <p><a href="#" @click.prevent="$root.verNoticia(posts.id)"
  > {{ posts.titulo }} </a></p>
  </div>
  </div>
  </div>

  `
});

Vue.component('latest-posts-index', {
    props: ['posts'],
    template: `
  <div class="col-md-4 col-sm-4 col-xs-12">
  <div class="single-blog">
  <div class="single-blog-img">
  <a href="#">
  <img :src="posts.imagenPreview" :alt="posts.titulo">
  </a>
  </div>
  <div class="blog-meta">
  <span class="date-type">
  <i class="fa fa-calendar"></i> {{ posts.fecha }}
  </span>
  </div>
  <div class="blog-text">
  <h4>
  <a href="#">{{ posts.titulo }}  </a>
  </h4>
  <p>
  {{ posts.preview  }}
  </p>
  </div>
  <span>
  <a href="blog" class="ready-btn">Leer más</a>
  </span>
  </div>
  </div>
  `
});


Vue.component('post-details', {
    props: ['details'],
    template: `
  <article class="blog-post-wrapper">
  <a @click="$root.verDetalles = false" class="btn btn-primary"><i class="glyphicon glyphicon-arrow-left" aria-hidden="true"></i></a><br><br>

  <!-- Carousel container -->
  <div id="my-pics" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
  <li data-target="#my-pics" v-for="(imagen,index) in details.imagenes" :key="index" :class="[index === 0 ? 'active':'']" :data-slide-to="index"></li>
  </ol>

  <!-- Content -->
  <div class="carousel-inner" role="listbox">



  <div class="item" v-for="(imagen,index) in details.imagenes" :key="index" :class="[index === 1 ? 'active':'']">
  <img :src="imagen.path" alt="Rob Roy Glacier" style="height:450px; width:650px">
  </div>


  </div>

  <!-- Previous/Next controls -->
  <a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
  <span class="icon-prev" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
  <span class="icon-next" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>

  </div>

  <div class="post-information">
  <h2> {{ details.titulo }} </h2>
  <div class="entry-meta">
  <span><i class="fa fa-calendar"></i> {{ details.fecha }} </span>
  <span class="tag-meta"></span>
  </div>
  <div v-html="details.contenido" class="entry-content">

  </div>
  </div>
  </article>`
});

Vue.component('posts', {
    props: ['publish'],
    template: `
  <div class="col-md-12 col-sm-12 col-xs-12">
  <div class="single-blog">
  <div class="single-blog-img">
  <a href='#'>
  <img :src='publish.imagenPreview' alt="Imagen">
  </a>
  </div>
  <div class="blog-meta">
  <span class="date-type">
  <i class="fa fa-calendar"></i> {{ publish.fecha }}
  </span>
  </div>
  <div class="blog-text">
  <h4>
  {{ publish.titulo }}
  </h4>
  <p>
  {{ publish.preview }}
  </p>
  </div>
  <span>
  <a href="blog-details" @click.prevent="$root.verNoticia(publish.id)" class="ready-btn">Leer más</a>
  </span>
  </div>
  </div>
  `
});

var blog = new Vue({
    el: '#publicaciones',
    data: {
        publicaciones: [],
        post: [],
        verDetalles: false,
        search: '',
        perPage: 3,
        currentPage: 1,
        totalRows: 2,
        verPaginador: true
    },
    created() {
        this.getData();
    },
    computed: {
        filtroBusqueda: function() {
            if (this.search.length != 0) {
                this.verPaginador = false;
                return arrFilter = this.publicaciones.filter((pub) => {
                    return pub.titulo.toLowerCase().match(this.search.toLowerCase())
                });
            } else {
                // Implementar páginador
                this.verPaginador = true;
                return this.paginador();
            }
        },
        filtrolatestPub: function() {
            // Calculamos los 3 últimos
            var publiTotal = parseInt(this.publicaciones.length) - 3;

            return arrFilter = this.publicaciones.filter((pub) => {
                return pub.id > publiTotal
            });
        },
        rows() {
            return this.publicaciones.length
        }
    },
    methods: {
        verNoticia: function(id) {
            this.verDetalles = true;
            this.post = this.publicaciones.filter(function(pub) {
                return pub.id == id
            });
        },
        paginador() {
            // Calcular páginador
            const indiceInicio = (this.currentPage - 1) * this.perPage;
            const indiceFinal = indiceInicio + this.perPage > this.publicaciones.length ?
                this.publicaciones.length :
                indiceInicio + this.perPage;

            return this.publicaciones.slice(indiceInicio, indiceFinal);
        },
        getData() {
            axios.get("./shared/data/publicaciones.json")
                .then(response => { this.publicaciones = response.data });
        }
    }
});