shihaam/karudhaas
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Source View more articles and date fix

Browse Source
This commit is contained in:
Mohamed Jinas
2020-08-21 02:33:35 +05:00
parent be04822ce3
commit 660eda24cf
15 changed files with 251 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
resources/js/components/SourceView.vue Normal file
View File

@@ -0,0 +1,151 @@
<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="#">
<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="#">
<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">
<button
:disabled="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;
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>