UI Updates

app/Http/Controllers/API/TopicFilter.php

@@ -17,7 +17,8 @@ class TopicFilter extends Controller
     public function __invoke(Request $request)
     {
         $request->validate([
-            "keys" => "required"
+            "keys" => "required|string",
+            "per_page" => "nullable|numeric"
         ]);
 
         $keys = explode(',', $request->get('keys'));
@@ -26,6 +27,6 @@ class TopicFilter extends Controller
             $q->whereIn('slug', $keys);
         })
             ->latest('published_date')
-            ->paginate(8);
+            ->paginate($request->get('per_page')?:8);
     }
 }

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=9d010a5161a0dd4a64df",
+    "/js/app.js": "/js/app.js?id=a0d4e88c5aeb25127f6c",
     "/css/app.css": "/css/app.css?id=68dfaea3ff29afe7eab0",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
     "/js/vendor.js": "/js/vendor.js?id=aa27c0f3cc35e93603fe"

resources/js/components/TopicFilter.vue

@@ -1,12 +1,11 @@
 <template>
-   <div class="mb-10 border-t mt-5">
+    <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>
-            </h3>
         </div>
 
         <div class="container mx-auto">
@@ -16,7 +15,11 @@
                     v-for="article in articles"
                     :key="article.id"
                 >
-                    <a :href="`/article/${article.source.slug}/${article.guid}`">
+                    <a
+                        :href="
+                            `/article/${article.source.slug}/${article.guid}`
+                        "
+                    >
                         <div
                             class="w-full h-auto overflow-hidden relative rounded"
                         >
@@ -25,7 +28,9 @@
                     </a>
                     <div class="w-full h-auto text-right overflow-hidden mt-3">
                         <a
-                            :href="`/article/${article.source.slug}/${article.guid}`"
+                            :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"
@@ -65,17 +70,21 @@ import * as moment from "moment";
 export default {
     name: "topic-filter",
     props: {
-        topics : String,
+        topics: String,
-        label : String
+        label: String,
+        per_page: {
+            default: 8,
+            type: Number
+        }
     },
 
     data() {
         return {
             articles: []
-        }
+        };
     },
 
-     filters: {
+    filters: {
         dhivehiDate: function(date) {
             if (!date) return "";
             moment.locale("dv");
@@ -85,7 +94,7 @@ export default {
 
     mounted() {
         axios
-            .get(`api/topic_filter/?keys=${this.topics}`)
+            .get(`api/topic_filter/?keys=${this.topics}&per_page=${this.per_page}`)
             .then(response => {
                 this.articles = response.data.data;
             })
@@ -93,8 +102,7 @@ export default {
                 console.log(error);
             });
     }
-
+};
-}
 </script>
 <style>
 .dark-img {

resources/views/home.blade.php

@@ -26,7 +26,7 @@
 
 <recent-stories></recent-stories>
 
-<topic-filter topics="{{implode(',',config('karudhaas.topic_filters.covid19')) }}" label="ކޮރޯނާވައިރަހުގެ އަދާހަމަ">
+<topic-filter topics="{{implode(',',config('karudhaas.topic_filters.covid19')) }}" label="ކޮރޯނާވައިރަހުގެ އަދާހަމަ" :per_page="6">
 </topic-filter>
 
 <topic-filter topics="{{implode(',',config('karudhaas.topic_filters.sports')) }}" label="ކުޅިވަރުގެ އަދާހަމަ">