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

fixes to group

Browse Source
This commit is contained in:
hamdy
2020-11-26 14:43:02 +02:00
parent fcc2a18721
commit a19d129041
2 changed files with 30 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Group.vue
View File

@@ -5,18 +5,19 @@
<p class="max-w-xl mx-auto mb-12 text-gray-400">{{description}}</p>
<div class="flex max-w-lg mb-12 mx-auto text-center border-b-2">
<div v-for="(tag, index) in tags" :key="tag" class="w-1/3 pb-2">
<button @click="setSelected('')" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">{{ tag }}</button>
<button @click="setSelected(tag)" v-if="index != 0" class="hover:text-indigo-600">{{ tag }}</button>
<div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 pb-2">
<button @click="setSelected('')" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">All</button>
<button @click="setSelected(tag.node.title)" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">{{ tag.node.title }}</button>
<button @click="setSelected(tag.node.title)" v-if="index != 0" class="hover:text-indigo-600">{{ tag.node.title }}</button>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div v-for="obj in filter(selected)" :key="obj.id" class="w-1/2 lg:w-1/4 p-4">
<g-link :to="obj.path" class="post-card-image-link">
<div v-for="obj in filter(selected)" :key="obj.node.id" class="w-1/2 lg:w-1/4 p-4">
<g-link :to="obj.node.path" class="post-card-image-link">
<g-image
:src="obj.image"
:alt="obj.name"
:src="obj.node.image"
:alt="obj.node.name"
class="w-1/2 mx-auto mb-4 rounded-full"
></g-image>
</g-link>
@@ -43,12 +44,31 @@ export default {
description: String,
objects: {},
tags: {},
filter: Function
tagsField: String,
},
methods: {
setSelected: function(tag){
this.selected = tag
}
},
filter: function(tag){
if (tag == '')
return this.objects
var result = []
for(var i=0; i < this.objects.length; i++){
var obj = this.objects[i].node;
for (var j=0; j<obj[this.tagsField].length; j++){
var membership = obj[this.tagsField][j];
if (membership.title == tag){
result.push(this.objects[i]);
break
}
}
}
return result;
},
},
}
</script>

37
src/templates/People.vue
View File

@@ -2,7 +2,7 @@
<Layout>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
<Group title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="people" :tags="memberships" :filter="filter" />
<Group title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="memberships" />
</div>
</div>
</Layout>
@@ -60,42 +60,7 @@ export default {
Group,
Pagination
},
methods: {
filter: function(tag){
if (tag == '')
return this.people
var result = []
for(var i=0; i < this.people.length; i++){
var person = this.people[i];
for (var j=0; j<person.memberships.length; j++){
var membership = person.memberships[j];
if (membership.title == tag){
result.push(person);
break
}
}
}
return result;
},
},
computed: {
people: function(){
var result = []
for (var i=0; i < this.$page.entries.edges.length; i++){
result.push(this.$page.entries.edges[i].node)
}
return result
},
memberships: function(){
var result = []
for (var i=0; i < this.$page.memberships.edges.length; i++){
result.push(this.$page.memberships.edges[i].node.title)
}
return result
},
baseurl: function() {
return "/people/"
}