Topic FIlter component

2020-09-28 07:29:46 +05:00
parent 0c6476bea6
commit d9d23977d1
4 changed files with 104 additions and 2 deletions
--- a/resources/js/components/TopicFilter.vue
+++ b/resources/js/components/TopicFilter.vue
@@ -0,0 +1,100 @@
+<template>
+   <div class="mb-10 border-t mt-5">
+        <div>
+            <h3
+                class="text-gray-800 text-3xl text-center mt-5 mb-2 mr-3 MvAamu"
+                style="font-weight: 100;"
+                v-text="label"
+            >
+            </h3>
+        </div>
+
+        <div class="container mx-auto">
+            <div class="flex md:-mx-4 flex-row-reverse flex-wrap mb-7 md:px-0">
+                <div
+                    class="w-1/2 md:w-1/4 px-4 py-4 flex-grow"
+                    v-for="article in articles"
+                    :key="article.id"
+                >
+                    <a :href="`/article/${article.source.slug}/${article.guid}`">
+                        <div
+                            class="w-full h-auto overflow-hidden relative rounded"
+                        >
+                            <img :src="article.featured_image" />
+                        </div>
+                    </a>
+                    <div class="w-full h-auto text-right overflow-hidden mt-3">
+                        <a
+                            :href="`/article/${article.source.slug}/${article.guid}`"
+                            class="text-md leading-9 font-semibold text-right text-gray-700 py-3 MvTyper hover:underline"
+                            style="direction:rtl;"
+                            v-text="article.title"
+                        ></a>
+                        <div class="flex items-center justify-end mt-3 mb-3">
+                            <a :href="'/source/' + article.source.slug">
+                                <div class="flex justify-end items-center">
+                                    <div>
+                                        <p
+                                            class="font-semibold text-gray-600 text-sm capitalize MvTyper"
+                                            v-text="article.source.name"
+                                        ></p>
+                                    </div>
+
+                                    <img
+                                        :src="article.source.logo"
+                                        class="h-10 w-10 rounded-full ml-1 object-cover"
+                                    />
+                                </div>
+                            </a>
+                        </div>
+                        <p
+                            class="ml-1 text-gray-600 text-right MvTyper"
+                            style="direction:rtl; font-size:13px;"
+                        >
+                            {{ article.published_date | dhivehiDate }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as moment from "moment";
+
+export default {
+    name: "topic-filter",
+    props: ['topic','label'],
+
+    data() {
+        return {
+            articles: []
+        }
+    },
+
+     filters: {
+        dhivehiDate: function(date) {
+            if (!date) return "";
+            moment.locale("dv");
+            return moment(date).format("Do MMMM YYYY  h:mm");
+        }
+    },
+
+    mounted() {
+        axios
+            .get(`api/topic/${this.topic}`)
+            .then(response => {
+                this.articles = response.data.articles.data;
+            })
+            .catch(error => {
+                console.log(error);
+            });
+    }
+
+}
+</script>
+<style>
+.dark-img {
+    filter: brightness(90%);
+}
+</style>