parent
2dfdd2f45f
commit
83a5d8a56c
1 changed files with 67 additions and 0 deletions
@ -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…
Reference in new issue