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>