Add the posts view

master
Raymonzut 5 years ago
parent 2dfdd2f45f
commit 83a5d8a56c
No known key found for this signature in database
GPG Key ID: 97CF2D8BE2C69FC7
  1. 67
      client/src/views/posts.vue

@ -0,0 +1,67 @@
<template>
<div id="posts" v-if="months.length >= 0">
<h3 class="month" v-for="(month, i) in months" :key="i">
{{ month }}
<div class="listAlign">
<ul>
<li v-for="(postItem, j) in getPostItems(month)" :key="j">
{{ getPostItemDate(postItem) }} {{ postItem.title }}
</li>
</ul>
</div>
<br>
</h3>
</div>
<h2 v-else>There are no posts yet, but don't worry they will be added soon</h2>
</template>
<script>
import { getPosts } from '../remote'
export default {
name: "posts",
computed: {
months: function () {
const dates = this.posts.map(post => new Date(post.date))
// Contains the month followed by the year
const months = dates.map(date => `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`)
const uniques = Array.from(new Set(months))
return uniques
}
},
data() {
return {
posts: []
}
},
methods: {
getPosts,
getPostItems: function (month) {
const month_index = new Date(`1 ${month}`).getMonth()
return this.posts.filter((post) => (new Date(post.date)).getMonth() === month_index)
},
getPostItemDate: function (postItem) {
const date = new Date(postItem.date)
return `${date.getFullYear()} ${date.toLocaleString('default', { month: 'short' })} ${date.getDate()}`
}
},
mounted() {
getPosts.call(this)
},
}
</script>
<style scoped>
ul {
text-align: left;
}
@media (min-width: 420px) {
.month {
text-indent: 1em;
text-align: left;
}
}
</style>
Loading…
Cancel
Save