From 5f22238722168fda2abeaf527c3f478d5af09f7d Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 26 Nov 2020 17:13:36 +0200
Subject: [PATCH] Add filtration url

---
 .../sophie_monpeyssen/sophie_monpeyssen.md    |  2 +-
 src/components/Team.vue                       | 77 ++++++++++---------
 2 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/content/person/sophie_monpeyssen/sophie_monpeyssen.md b/content/person/sophie_monpeyssen/sophie_monpeyssen.md
index e4e038548..a42058397 100644
--- a/content/person/sophie_monpeyssen/sophie_monpeyssen.md
+++ b/content/person/sophie_monpeyssen/sophie_monpeyssen.md
@@ -2,7 +2,7 @@
 id: sophie_monpeyssen
 name: Sophie Monpeyssen
 rank: 4
-memberships: guradian, ambassador
+memberships: guardian, ambassador
 bio: Sophie has devoted herself to the study of healthcare philosophies and practices that harmonize mind, body and spirit, including sophrology and massage. She is a graduate of the Sorbonne holding an MA in Musicology, Psychology and Pedagogy. Inspired by her training with Spiritual Elders since 2007, Sophie coaches companies and individuals to become the best version of themselves.
 excerpt: Co-Founder & CEO - Le Ciel Foundation
 linkedin: https://www.linkedin.com/in/sophie-monpeyssen-a92747179/
diff --git a/src/components/Team.vue b/src/components/Team.vue
index 3d46e743e..56ac25a4a 100644
--- a/src/components/Team.vue
+++ b/src/components/Team.vue
@@ -6,21 +6,27 @@
 
     <p class="max-w-xl mx-auto mb-12 text-gray-400">{{ description }}</p>
     <div class="flex max-w-lg mx-auto mb-12 justify-center border-b-2">
-      <div v-for="(tag, index) in tags" :key="tag.node.id" class="w-1/3 mr-5 pb-2">
-        <a :href="`/#${selected}`"
-          @click="setSelected('', index)"
-          v-if="index == 0"
+      <div class="w-1/3 mr-5 pb-2">
+        <a
+          href="#"
+          @click="setSelected('', -1)"
           class="pb-2 hover:text-indigo-600 capitalize"
-          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == 0 }"
         >
           All
         </a>
-        
-        <a :href="`/#${selected}`"
+      </div>
+
+      <div
+        v-for="(tag, index) in tags"
+        :key="tag.node.id"
+        class="w-1/3 mr-5 pb-2"
+      >
+        <a
+          :href="`#${tag.node.title}`"
           @click="setSelected(tag.node.title, index)"
-          v-if="index != 0"
           class="pb-2 hover:text-indigo-600 capitalize"
-          :class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
+          :class="{ 'border-b-4 border-indigo-600': activeIndex == index + 1 }"
         >
           {{ tag.node.title.replace("_", " ") }}
         </a>
@@ -40,7 +46,7 @@
           ></g-image>
         </g-link>
         <h3 class="text-xl mb-1 font-semibold font-heading font-semibold">
-          {{ obj.node.name || obj.node.title}}
+          {{ obj.node.name || obj.node.title }}
         </h3>
         <!-- <span>{{ edge.node.title }}</span> -->
       </div>
@@ -49,14 +55,13 @@
 </template>
 
 <script>
-console.log
 export default {
   data() {
-    var selected = this.$route.hash.replace("#", "")
-    var activeIndex = 0
+    var selected = this.$route.hash.replace("#", "");
+    var activeIndex = 0;
 
-    for(var i=0; i < this.tags.length; i++){
-      if (this.tags[i].node.title == selected){
+    for (var i = 0; i < this.tags.length; i++) {
+      if (this.tags[i].node.title == selected) {
         activeIndex = i;
       }
     }
@@ -73,36 +78,34 @@ export default {
     tags: {},
     tagsField: String,
   },
-  computed : {
-    url: function(){
-      return window.location.href + "#" + this.selected
-    }
+  computed: {
+    url: function () {
+      return window.location.href + "#" + this.selected;
+    },
   },
   methods: {
-    setSelected: function(tag, index){
-      this.selected = tag
-      this.activeIndex = index
+    setSelected: function (tag, index) {
+      this.selected = tag;
+      this.activeIndex = index + 1;
     },
 
-    filter: function(tag){
+    filter: function (tag) {
+      if (tag == "") return this.objects;
 
-      if (tag == '')
-        return this.objects
-      
-      var result = []
+      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
-            }
+      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>