166 lines
6.2 KiB
Vue
166 lines
6.2 KiB
Vue
<template>
|
|
<div>
|
|
<section class="mx-auto max-w-6xl py-5">
|
|
<div class="flex flex-col">
|
|
<div
|
|
class="flex flex-col md:flex-row justify-center items-center"
|
|
>
|
|
<div
|
|
class="transition-all ease-in-out duration-1000 flex flex-col justify-center"
|
|
>
|
|
<div slot="middle-right" class="max-w-xs">
|
|
<div class="flex flex-col justify-center h-48 p-3">
|
|
<div
|
|
class="flex flex-col items-center shadow hover:shadow-lg rounded-lg p-3"
|
|
>
|
|
<img :src="source.logo" class="h-16 w-16" />
|
|
<div
|
|
class="text-3xl font-bold text-gray-800 text-center MvAamu mt-2"
|
|
>
|
|
{{ source.name }}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="text-sm my-3 MvTyper text-center leading-6"
|
|
style="direction:rtl;"
|
|
>
|
|
{{ source.name }} ނޫހުން ޝާޢިޢުކޮއްފައިވާ
|
|
ލިޔުންތަށް
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8"
|
|
>
|
|
<div
|
|
v-for="article in articles"
|
|
:key="article.id"
|
|
class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2"
|
|
>
|
|
<div slot="bottom-left" class="max-w-xs">
|
|
<div class="p-5 shadow-md m-2 mt-4">
|
|
<a :href="'/article/' + article.id">
|
|
<img
|
|
class="object-scale-down h-30"
|
|
:src="article.featured_image"
|
|
:alt="article.meta['title']"
|
|
/>
|
|
</a>
|
|
|
|
<div
|
|
class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper"
|
|
>
|
|
{{ article.source.name }}
|
|
</div>
|
|
<p
|
|
class="font-semibold text-gray-400 text-xs MvTyper"
|
|
style="direction: rtl;"
|
|
>
|
|
{{ article.published_date | dhivehiDate }}
|
|
</p>
|
|
|
|
<a :href="'/article/' + article.id">
|
|
<div
|
|
class="text-md font-bold leading-7 mb-2 mt-1 text-gray-800 MvTyper text-right hover:underline"
|
|
>
|
|
{{ article.title }}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<div v-show="loading">
|
|
<lottie-player
|
|
src="https://assets9.lottiefiles.com/private_files/lf30_bIUWq7.json"
|
|
background="transparent"
|
|
speed="3"
|
|
style="width: 100px; height: 100px;"
|
|
loop
|
|
autoplay
|
|
></lottie-player>
|
|
</div>
|
|
|
|
<button
|
|
v-show="loading == 0"
|
|
v-if="moreArticles"
|
|
@click="fetchNewArticles()"
|
|
class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
|
|
>
|
|
{{ loading ? "Loading...." : "Show more" }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as moment from "moment";
|
|
|
|
export default {
|
|
props: {
|
|
source: Object
|
|
},
|
|
name: "source-view",
|
|
|
|
data() {
|
|
return {
|
|
articles: [],
|
|
current_page: 0,
|
|
totalCount: {
|
|
count: 0
|
|
},
|
|
loading: 0
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
axios.get(`/api/source/${this.source.slug}`).then(response => {
|
|
this.current_page = response.data.articles.current_page;
|
|
this.totalCount.count = response.data.articles.total;
|
|
this.articles = response.data.articles.data;
|
|
});
|
|
},
|
|
|
|
computed: {
|
|
moreArticles() {
|
|
//Calculating if there is any more articles
|
|
return this.articles.length < this.totalCount.count;
|
|
}
|
|
},
|
|
|
|
filters: {
|
|
dhivehiDate: function(date) {
|
|
if (!date) return "";
|
|
moment.locale("dv");
|
|
return moment(date).format("Do MMMM YYYY h:mm");
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
fetchNewArticles() {
|
|
this.loading = true;
|
|
sleep(2000).then(() => {
|
|
axios
|
|
.get(
|
|
`/api/source/${this.source.slug}?page=${this
|
|
.current_page + 1}`
|
|
)
|
|
.then(response => {
|
|
this.current_page = response.data.articles.current_page;
|
|
// spread the array item into individual arguments
|
|
this.articles.push(...response.data.articles.data);
|
|
this.loading = false;
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|