people page - redo

src/components/Group.vue

@@ -0,0 +1,54 @@
+<template>
+        <section class="py-12 px-4 text-center">
+  <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">{{title}}</h2>
+  
+  <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>
+
+  </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">
+    <g-image
+        :src="obj.image"
+        :alt="obj.name"
+        class="w-1/2 mx-auto mb-4 rounded-full"
+      ></g-image>
+    </g-link>
+      <h3 class="text-xl mb-1 font-semibold font-heading font-semibold">{{ obj.name }}</h3>
+      <!-- <span>{{ edge.node.title }}</span> -->
+    </div> 
+  </div>
+</section>
+
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: "",
+     
+    }
+  },
+
+  props: {
+    title: String,
+    description: String,
+    objects: {},
+    tags: {},
+    filter: Function
+  },
+  methods: {
+    setSelected: function(tag){
+      this.selected = tag
+    }
+  },
+}
+</script>

src/templates/People.vue

@@ -2,14 +2,13 @@
   <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">
-        <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
+        <Group title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="people" :tags="memberships" :filter="filter" />
       </div>
     </div>
   </Layout>
 </template>
 
 <page-query>
-
 query ($private: Int){
   entries: allPerson (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}){
     totalCount
@@ -35,23 +34,68 @@ query ($private: Int){
       }
     }
   }
+
+  memberships: allMembership{
+     edges{
+      node{
+        id
+        title
+        path
+      }
+    }
+  }
 }
 
 </page-query>
 
 <script>
 import Pagination from "~/components/Pagination.vue";
-import PostListItem from '~/components/PostListItem.vue';
+import Group from '~/components/Group.vue';
 
 export default {
   metaInfo: {
     title: "People"
   },
   components: {
-    PostListItem,
+    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/"
     }