ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pagination

Browse Source
This commit is contained in:
Ehab Hassan
2021-02-09 17:52:25 +02:00
parent 78a119826f
commit 2689db23b8
5 changed files with 142 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/pages/Blog.vue
View File

@@ -1,6 +1,6 @@
<template>
<Layout>
<NewsFilterHeader
<NewsFilterHeader
@selectedTopic="setTopic"
@selectedYear="setYear"
@selectedMonth="setMonth"
@@ -8,8 +8,8 @@
:topics="topics"
:years="years"
:months="months"
/>
<div
/>
<div
class="container sm:pxi-0 mx-auto mt-8"
:style="{ 'min-height': contentHeight + 'px' }"
>
@@ -21,23 +21,22 @@
/>
</div>
<div class="pagination flex justify-center mb-8">
<Pagination
baseUrl=""
:currentPage="blogs.pageInfo.currentPage"
:totalPages="blogs.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="blogs.pageInfo.totalPages > 1"
/>
</div>
<div class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="baseurl"
:currentPage="blogs.pageInfo.currentPage"
:totalPages="blogs.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="blogs.pageInfo.totalPages > 1 && blogs.edges.length > 0"
/>
</div>
</div>
</Layout>
</template>
<page-query>
query{
entries: allBlog(sortBy: "created", order: DESC) {
query($page: Int){
entries: allBlog(perPage: 10, page: $page, sortBy: "created", order: DESC, filter: {category: { id: {in: ["farming"]}}}) @paginate{
totalCount
pageInfo {
totalPages
@@ -52,6 +51,10 @@ query{
path
}
excerpt
category{
id
title
}
image(width:800)
path
humanTime : created(format:"DD MMM YYYY")
@@ -84,7 +87,7 @@ import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
export default {
data() {
const allMonths = [
"All",
"All Months",
"January",
"February",
"March",
@@ -99,23 +102,23 @@ export default {
"December",
];
const currYear = new Date().getFullYear();
var years = ["All"]
var r = this.range(2019, currYear)
var years = ["All Years"];
var r = this.range(2019, currYear);
r.forEach((year) => years.push(String(year)));
return {
selectedTopic: "All",
selectedYear: "All",
selectedMonth: "All",
return {
selectedTopic: "All Topics",
selectedYear: "All Years",
selectedMonth: "All Months",
months: allMonths,
years: years,
listArchive: false,
archiveButtonText : "Archive"
archiveButtonText: "Archive",
};
},
metaInfo: {
title: "Newsroom",
title: "Blog",
},
components: {
PostListItem,
@@ -133,75 +136,68 @@ 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";
},
range(start, end, step) {
var range = [];
var typeofStart = typeof start;
var typeofEnd = typeof end;
var range = [];
var typeofStart = typeof start;
var typeofEnd = typeof end;
if (step === 0) {
throw TypeError("Step cannot be zero.");
if (step === 0) {
throw TypeError("Step cannot be zero.");
}
if (typeofStart == "undefined" || typeofEnd == "undefined") {
throw TypeError("Must pass start and end arguments.");
} else if (typeofStart != typeofEnd) {
throw TypeError("Start and end arguments must be of same type.");
}
typeof step == "undefined" && (step = 1);
if (end < start) {
step = -step;
}
if (typeofStart == "number") {
while (step > 0 ? end >= start : end <= start) {
range.push(start);
start += step;
}
} else if (typeofStart == "string") {
if (start.length != 1 || end.length != 1) {
throw TypeError("Only strings with one character are supported.");
}
if (typeofStart == "undefined" || typeofEnd == "undefined") {
throw TypeError("Must pass start and end arguments.");
} else if (typeofStart != typeofEnd) {
throw TypeError("Start and end arguments must be of same type.");
start = start.charCodeAt(0);
end = end.charCodeAt(0);
while (step > 0 ? end >= start : end <= start) {
range.push(String.fromCharCode(start));
start += step;
}
} else {
throw TypeError("Only string and number types are supported");
}
typeof step == "undefined" && (step = 1);
if (end < start) {
step = -step;
}
if (typeofStart == "number") {
while (step > 0 ? end >= start : end <= start) {
range.push(start);
start += step;
}
} else if (typeofStart == "string") {
if (start.length != 1 || end.length != 1) {
throw TypeError("Only strings with one character are supported.");
}
start = start.charCodeAt(0);
end = end.charCodeAt(0);
while (step > 0 ? end >= start : end <= start) {
range.push(String.fromCharCode(start));
start += step;
}
} else {
throw TypeError("Only string and number types are supported");
}
return range;
}
return range;
},
},
computed: {
topics: function () {
var res = ["All"];
var res = ["All Topics"];
this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
return res;
},
},
contentHeight() {
if (process.isClient) {
return window.innerHeight - 100;
}
},
blogs() {
blogs() {
var res = {};
var old = this.$page.entries;
res.totalCount = old.totalCount;
@@ -210,27 +206,29 @@ export default {
for (var i = 0; i < old.edges.length; i++) {
var node = old.edges[i].node;
// Now check topic
var topics = ["All"];
var topics = ["All Topics"];
node.tags.forEach((tag) => topics.push(tag.title));
var nodeDate = new Date(node.datetime);
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]];
// Check Month
var months = ["All Months", this.months[nodeDate.getMonth() + 1]];
if (!months.includes(this.selectedMonth)) continue;
res.edges.push({ node: node, id: node.id });
}
return res;
},
},
baseurl() {
return "/blog/";
},
},
};
</script>