fixes to group

src/components/Group.vue

@@ -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">
+    <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">{{ tag }}</button>
+    <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)" v-if="index != 0" class="hover:text-indigo-600">{{ tag }}</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">
+    <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.path" class="post-card-image-link">
+    <g-link :to="obj.node.path" class="post-card-image-link">
     <g-image
-        :src="obj.image"
+        :src="obj.node.image"
-        :alt="obj.name"
+        :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>

src/templates/People.vue

@@ -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/"
     }