From b0fdfb9c5ac5247c758fd7ff198359782f28613e Mon Sep 17 00:00:00 2001
From: Mayank Bansal <mayank.bansal.0527@gmail.com>
Date: Wed, 30 Aug 2023 20:34:55 +0530
Subject: [PATCH] adding dropdown to teampage

---
 package.json                              | 11 +--
 src/components/Header.vue                 | 81 +++++++++++++++------
 src/router/index.js                       | 15 ++--
 src/views/{Profile.vue => AlumniTeam.vue} | 86 +++++++++++------------
 src/views/CurrentTeam.vue                 | 42 +++++++++++
 src/views/Project.vue                     |  7 +-
 6 files changed, 164 insertions(+), 78 deletions(-)
 rename src/views/{Profile.vue => AlumniTeam.vue} (71%)
 create mode 100644 src/views/CurrentTeam.vue

diff --git a/package.json b/package.json
index 902264f..56e1378 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
+    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
+},
   "dependencies": {
     "core-js": "^3.6.4",
     "node-sass": "^7.0.1",
@@ -42,4 +42,7 @@
       "git add"
     ]
   }
+ 
 }
+
+
diff --git a/src/components/Header.vue b/src/components/Header.vue
index d0bccfd..f93677a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,30 +1,51 @@
 <template lang="pug">
-    v-card.elevation-24
-        v-app-bar(app clipped-right flat floating style="opacity:1.0")
-          
-            v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
-            v-avatar(size="48px")
-                v-img(src="../assets/logo.jpeg")
-            v-toolbar-title.hidden-sm-and-down.white--text
-                span.title.ml-3.mr-5(text style="color:black") Devlup Labs&nbsp;
-            v-spacer
-            div.hidden-sm-and-down
-              v-btn.pa-2.ma-1(text v-for="link in links" :key="link.text" :to="{name:link.text}" label exact) {{link.text}} 
-        v-navigation-drawer(v-model="drawer" app left temporary style="z-index:5")
-          v-list(dense)
-            v-list-item( v-for="link in links" :key="link.text" @click="" :to="{name:link.text}" exact)
-              v-list-item-action
-                v-icon {{link.icon}}
-              v-list-item-content
-                v-list-item-title.grey--text {{link.text}}
+  v-card.elevation-24
+    v-app-bar(app clipped-right flat floating style="opacity: 1.0")
+      v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
+      router-link(to='/')
+        v-avatar(size="48px")
+          v-img(src="../assets/logo.jpeg") 
+      router-link(to='/', style="text-decoration: none")
+        v-toolbar-title.hidden-sm-and-down.white--text()
+          span.title.ml-3.mr-5(text style="color: black", ) Devlup Labs&nbsp;
+      v-spacer
+      div.hidden-sm-and-down
+        v-btn(pa-2.ma-1 v-for="link in links" :key="link.text" :to="{ name: link.text }" v-if="link.text !== 'Team' && link.text !== 'CurrentTeam' && link.text !== 'AlumniTeam'" label exact sty style="box-shadow : none") {{ link.text }}
+        v-btn#menu-activator(pa-2.ma-1 :key="team" style="box-shadow : none")  Team
+          v-menu(activator='#menu-activator')
+            v-list
+              v-list-item(pa-2.ma-1 v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
+                v-list-item-title {{ item.text }} 
+                
+    v-navigation-drawer(v-model="drawer" app left temporary style="z-index: 5")
+      v-list(dense)  
+        v-list-item(v-for="link in links" :key="link.text" :to="{ name: link.text }" v-if="link.text !== 'Team' && link.text !== 'CurrentTeam' && link.text !== 'AlumniTeam'" exact sty style="box-shadow : none") 
+          v-list-item-action
+            v-icon {{ link.icon }}
+          v-list-item-content
+            v-list-item-title.grey--text {{ link.text }}
+
+        v-list-item
+          v-list-item-action
+            v-icon mdi-account-group
+          v-menu
+            template.ml-16(v-slot:activator="{ on }")
+              v-list-item-content(v-on="on")
+                v-list-item-title.grey--text Team
+            v-list
+              v-list-item(v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
+                 v-list-item-title {{ item.text }}
+
+
+
 </template>
 
 <script>
 export default {
   name: "Header",
-
   data() {
     return {
+      show: false,
       drawer: null,
       links: [
         { text: "Home", icon: "mdi-home" },
@@ -33,10 +54,30 @@ export default {
         { text: "Timeline", icon: "mdi-timeline-text" },
         { text: "Blog", icon: "mdi-forum" },
         { text: "Videos", icon: "mdi-television" },
-        { text: "Team", icon: "mdi-human-male-male" },
+        { text: "Team", icon: "mdi-human-male-male" }, // Empty routeName for the dropdown menu
         { text: "WoC", icon: "mdi-briefcase-edit-outline" }
+      ],
+      teams: [
+        {
+          text: "Current Team",
+          link: "current_team",
+          icon: "mdi-human-male-male"
+        },
+        {
+          text: "Alumni Team",
+          link: "alumni_team",
+          icon: "mdi-human-male-male"
+        }
       ]
     };
+  },
+  computed: {
+    teamLinks() {
+      return [
+        { text: "Current Team", icon: "mdi-human-male-male" },
+        { text: "Alumni Team", icon: "mdi-human-male-male" }
+      ];
+    }
   }
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 21e9211..e550a47 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-
 Vue.use(VueRouter);
 
 const routes = [
@@ -47,16 +46,22 @@ const routes = [
     meta: { title: "Podcast" }
   },
   {
-    path: "/team",
-    name: "Team",
-    component: () => import("../views/Profile"),
-    meta: { title: "Team" }
+    path: "/current_team",
+    name: "current_team",
+    component: () => import("../views/CurrentTeam"), // Replace "../views/Profile" with the path to the component for the current team
+    meta: { title: "Current Team" }
   },
   {
     path: "/WoC",
     name: "WoC",
     component: () => import("../views/WoC"),
     meta: { title: "WoC" }
+  },
+  {
+    path: "/alumni_team",
+    name: "alumni_team",
+    component: () => import("../views/AlumniTeam"), // Add the route for the AlumniTeam component
+    meta: { title: "Alumni Team" }
   }
 ];
 
diff --git a/src/views/Profile.vue b/src/views/AlumniTeam.vue
similarity index 71%
rename from src/views/Profile.vue
rename to src/views/AlumniTeam.vue
index b0fdf77..b295060 100644
--- a/src/views/Profile.vue
+++ b/src/views/AlumniTeam.vue
@@ -1,44 +1,42 @@
-<!-- Profile[0]->Profile index -->
-<template lang="pug">
-div(align='center', justify='center')
-  div(v-if="loading")
-        Preloader
-  div(v-else)
-    v-container
-      v-row(justify='left')
-        v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
-          ProfileCard(:Profile='Profile')
-</template>
-
-<script>
-const ProfileCard = () => import("../components/ProfileCard");
-const Preloader = () => import("../components/Preloader");
-export default {
-  name: "Profile",
-  components: { ProfileCard, Preloader },
-  data: () => ({
-    loading: true,
-    profiles: []
-  }),
-  methods: {
-    fetchProfiles() {
-      const spreadsheetId = "1gEG08lGpzhtVYzmjyOuYF5qlTFAWhvR2FeAuQlIlIuY";
-      const sheetname = "Profile";
-      const theKey = process.env.VUE_APP_API;
-      const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetname}?alt=json&key=${theKey}`;
-      this.loading = true;
-      fetch(url)
-        .then(e =>
-          e.json().then(e => {
-            this.profiles = [...e.values.slice(1)];
-            console.log(this.profiles);
-          })
-        )
-        .finally(() => (this.loading = false));
-    }
-  },
-  mounted() {
-    this.fetchProfiles();
-  }
-};
-</script>
+<!-- Profile[0]->Profile index -->
+<template lang="pug">
+div(align='center', justify='center')
+  div(v-if="loading")
+        Preloader
+  div(v-else)
+    v-container
+      v-row(justify='left')
+        v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
+          ProfileCard(:Profile='Profile')
+</template>
+
+<script>
+const ProfileCard = () => import("../components/ProfileCard");
+const Preloader = () => import("../components/Preloader");
+export default {
+  name: "Profile",
+  components: { ProfileCard, Preloader },
+  data: () => ({
+    loading: true,
+    profiles: []
+  }),
+  methods: {
+    fetchProfiles() {
+      const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
+      this.loading = true;
+      fetch(url)
+        .then(e =>
+          e.json().then(e => {
+            console.log(e);
+            this.profiles = e;
+            console.log(this.profiles);
+          })
+        )
+        .finally(() => (this.loading = false));
+    }
+  },
+  mounted() {
+    this.fetchProfiles();
+  }
+};
+</script>
diff --git a/src/views/CurrentTeam.vue b/src/views/CurrentTeam.vue
new file mode 100644
index 0000000..3e4c8ad
--- /dev/null
+++ b/src/views/CurrentTeam.vue
@@ -0,0 +1,42 @@
+<!-- Profile[0]->Profile index -->
+<template lang="pug">
+div(align='center', justify='center')
+  div(v-if="loading")
+        Preloader
+  div(v-else)
+    v-container
+      v-row(justify='left')
+        v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
+          ProfileCard(:Profile='Profile')
+</template>
+
+<script>
+const ProfileCard = () => import("../components/ProfileCard");
+const Preloader = () => import("../components/Preloader");
+export default {
+  name: "Profile",
+  components: { ProfileCard, Preloader },
+  data: () => ({
+    loading: true,
+    profiles: []
+  }),
+  methods: {
+    fetchProfiles() {
+      const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
+      this.loading = true;
+      fetch(url)
+        .then(e =>
+          e.json().then(e => {
+            console.log(e);
+            this.profiles = e;
+            console.log(this.profiles);
+          })
+        )
+        .finally(() => (this.loading = false));
+    }
+  },
+  mounted() {
+    this.fetchProfiles();
+  }
+};
+</script>
diff --git a/src/views/Project.vue b/src/views/Project.vue
index f61d2ee..ee8b786 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -23,16 +23,13 @@ export default {
   }),
   methods: {
     fetchProjects() {
-      const spreadsheetId = "1gEG08lGpzhtVYzmjyOuYF5qlTFAWhvR2FeAuQlIlIuY";
-      const theKey = process.env.VUE_APP_API;
-      const sheetname = "Project";
-      const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${sheetname}?key=${theKey}`;
+      const url = `https://script.google.com/macros/s/AKfycbxsb_2WN21NJ4p_yEVS8DoCIcs-3lL9VlB5zgbGXeEhfERHkjkIcFOTvkhw1m69irgH7g/exec`;
       this.loading = true;
       fetch(url)
         .then(e =>
           e.json().then(e => {
             console.log(e);
-            this.projects = [...e.values.slice(1)];
+            this.projects = e;
           })
         )
         .finally(() => (this.loading = false));