update pagination

src/pages/News.vue

@@ -32,15 +32,15 @@
         :currentPage="$page.entries.pageInfo.currentPage"
         :totalPages="$page.entries.pageInfo.totalPages"
         :maxVisibleButtons="5"
-        v-if="$page.entries.pageInfo.totalPages > 1"
+        v-if="$page.entries.pageInfo.totalPages > 1 && news.edges.length > 0"
       />
     </div>
   </Layout>
 </template>
 
 <page-query>
-query{
-  entries: allNews(sortBy: "created", order: DESC) {
+query($page: Int){
+  entries: allNews(perPage: 10, page: $page, sortBy: "created", order: DESC, filter: {category: { id: {in: ["farming"]}}}) @paginate{
     totalCount
     pageInfo {
       totalPages
@@ -55,6 +55,10 @@ query{
           path
         }
         excerpt
+        category{
+          id
+          title
+        }
         image(width:800)
         path
         humanTime : created(format:"DD MMM YYYY")
@@ -82,7 +86,7 @@ import Pagination from "~/components/custom/Pagination.vue";
 export default {
   data() {
     const allMonths = [
-      "All",
+      "All Months",
       "January",
       "February",
       "March",
@@ -97,14 +101,14 @@ export default {
       "December",
     ];
     const currYear = new Date().getFullYear();
-    var years = ["All"];
+    var years = ["All Years"];
     var r = this.range(2019, currYear);
     r.forEach((year) => years.push(String(year)));
 
     return {
-      selectedTopic: "All",
-      selectedYear: "All",
-      selectedMonth: "All",
+      selectedTopic: "All Topics",
+      selectedYear: "All Years",
+      selectedMonth: "All Months",
       months: allMonths,
       years: years,
       listArchive: false,
@@ -131,9 +135,9 @@ export default {
       this.selectedMonth = month;
     },
     resetAll() {
-      this.selectedTopic = "All";
-      this.selectedYear = "All";
-      this.selectedMonth = "All";
+      this.selectedTopic = "All Topics";
+      this.selectedYear = "All Years";
+      this.selectedMonth = "All Months";
     },
     toggleListArchive() {
       if (this.listArchive) {
@@ -198,13 +202,13 @@ export default {
   },
   computed: {
     topics: function () {
-      var res = ["All"];
+      var res = ["All Topics"];
       this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
       return res;
     },
 
     baseurl: function () {
-      return "";
+      return "/news/";
     },
 
     news() {
@@ -221,26 +225,26 @@ export default {
         const diffDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
         var selected = false;
 
-        if (!this.listArchive && diffDays <= 30) {
-          selected = true;
-        } else if (this.listArchive && diffDays > 30) {
-          selected = true;
-        }
+        // if (!this.listArchive && diffDays <= 180) {
+        //   selected = true;
+        // } else if (this.listArchive && diffDays > 180) {
+        //   selected = true;
+        // }
 
-        if (!selected) continue;
+        // if (!selected) continue;
 
         // Now check topic
-        var topics = ["All"];
+        var topics = ["All Topics"];
         node.tags.forEach((tag) => topics.push(tag.title));
 
         if (!topics.includes(this.selectedTopic)) continue;
 
         // Check year
-        var years = ["All", String(nodeDate.getFullYear())];
+        var years = ["All Years", String(nodeDate.getFullYear())];
         if (!years.includes(this.selectedYear)) continue;
 
         // Check Month
-        var months = ["All", this.months[nodeDate.getMonth() + 1]];
+        var months = ["All Months", this.months[nodeDate.getMonth() + 1]];
 
         if (!months.includes(this.selectedMonth)) continue;
         res.edges.push({ node: node, id: node.id });