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

13
gridsome.config.js
View File

@@ -238,13 +238,19 @@ module.exports = {
tags: { tags: {
typeName: 'BlogTag', typeName: 'BlogTag',
create: true create: true
},
category: {
typeName: 'BlogCategory',
create: true
} }
} }
} }
}, },
{ {
use: '@gridsome/source-filesystem', use: '@gridsome/source-filesystem',
options: { options: {
typeName: 'News', typeName: 'News',
path: './content/news/**/*.md', path: './content/news/**/*.md',
@@ -253,6 +259,11 @@ module.exports = {
tags: { tags: {
typeName: 'NewsTag', typeName: 'NewsTag',
create: true create: true
},
category: {
typeName: 'NewsCategory',
create: true
} }
} }
} }

18
src/components/VerticalNav.vue
View File

@@ -5,10 +5,9 @@
v-for="(slide, index) in slides" v-for="(slide, index) in slides"
:key="index" :key="index"
:href="`#${index}`" :href="`#${index}`"
class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150" class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium hover:text-gray-900 hover:bg-gray-400 focus:outline-none transition border-blue-500 hover:bg-gray-100 transition ease-in-out duration-150"
:class="{ :class="{
'text-gray-900 border-r-3 border-blue-500 hover:bg-gray-100': 'border-r-3 border-blue-500 hover:bg-gray-100': activeIndex === index,
activeIndex === index,
}" }"
@click="setActive(index)" @click="setActive(index)"
> >
@@ -20,12 +19,14 @@
class="content inline-block h-full w-3/4 align-top p-5 transition ease-in-out duration-150" class="content inline-block h-full w-3/4 align-top p-5 transition ease-in-out duration-150"
> >
<div :id="slides[activeIndex]" class="hidden" style="display: block"> <div :id="slides[activeIndex]" class="hidden" style="display: block">
<img <g-image
v-if="slides[activeIndex].img" v-if="slides[activeIndex].image"
:src="slides[activeIndex].img.src" :src="
require(`!!assets-loader!@images/sliders/${slides[activeIndex].image}`)
"
:alt="slides[activeIndex].title" :alt="slides[activeIndex].title"
/> />
<p v-html="slides[activeIndex].content"></p> <div v-html="slides[activeIndex].content"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -45,5 +46,4 @@ export default {
}, },
}, },
}; };
</script> </script>

13
src/components/custom/TagFilterHeader.vue
View File

@@ -9,6 +9,11 @@
>filter:</span >filter:</span
> >
</div> </div>
<div class="sm:block md:hidden">
<ul class="list-none inline-flex justify-center md:justify-end">
<li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
</ul>
</div>
</div> </div>
<nav <nav
@@ -70,6 +75,11 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="hidden md:ml-auto md:inline-block md:order-last">
<ul class="list-none inline-flex justify-center md:justify-end">
<li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
</ul>
</div>
</header> </header>
</div> </div>
</template> </template>
@@ -105,6 +115,9 @@ export default {
this.open = false; this.open = false;
} }
}, },
resetAll() {
this.$emit("resetAll", true);
},
}, },
mounted() { mounted() {
document.addEventListener("click", this.close); document.addEventListener("click", this.close);

166
src/pages/Blog.vue
View File

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

48
src/pages/News.vue
View File

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