Skip to content

Commit 1c6ffdd

Browse files
yuvrajrathvayuvrajrathva
authored
Merge pull request #88 from Bansal0527/vue
Enhancements: Dropdown Menu, Google Sheet Projects, Home Link, and Routing Implementation(alumni team and current team)
2 parents b8ed222 + 1fd63d9 commit 1c6ffdd

File tree

6 files changed

+162
-73
lines changed

6 files changed

+162
-73
lines changed

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
9-
},
6+
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
7+
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
8+
"lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
9+
},
1010
"dependencies": {
1111
"core-js": "^3.6.4",
1212
"node-sass": "^7.0.3",
@@ -42,4 +42,7 @@
4242
"git add"
4343
]
4444
}
45+
4546
}
47+
48+

‎src/components/Header.vue‎

Lines changed: 61 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
11
<template lang="pug">
2-
v-card.elevation-24
3-
v-app-bar(app clipped-right flat floating style="opacity:1.0")
4-
5-
v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
6-
v-avatar(size="48px")
7-
v-img(src="../assets/logo.jpeg")
8-
v-toolbar-title.hidden-sm-and-down.white--text
9-
span.title.ml-3.mr-5(text style="color:black") Devlup Labs&nbsp;
10-
v-spacer
11-
div.hidden-sm-and-down
12-
v-btn.pa-2.ma-1(text v-for="link in links" :key="link.text" :to="{name:link.text}" label exact) {{link.text}}
13-
v-navigation-drawer(v-model="drawer" app left temporary style="z-index:5")
14-
v-list(dense)
15-
v-list-item( v-for="link in links" :key="link.text" @click="" :to="{name:link.text}" exact)
16-
v-list-item-action
17-
v-icon {{link.icon}}
18-
v-list-item-content
19-
v-list-item-title.grey--text {{link.text}}
2+
v-card.elevation-24
3+
v-app-bar(app clipped-right flat floating style="opacity: 1.0")
4+
v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
5+
router-link(to='/')
6+
v-avatar(size="48px")
7+
v-img(src="../assets/logo.jpeg")
8+
router-link(to='/', style="text-decoration: none")
9+
v-toolbar-title.hidden-sm-and-down.white--text()
10+
span.title.ml-3.mr-5(text style="color: black", ) Devlup Labs&nbsp;
11+
v-spacer
12+
div.hidden-sm-and-down
13+
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 }}
14+
v-btn#menu-activator(pa-2.ma-1 :key="team" style="box-shadow : none") Team
15+
v-menu(activator='#menu-activator')
16+
v-list
17+
v-list-item(pa-2.ma-1 v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
18+
v-list-item-title {{ item.text }}
19+
20+
v-navigation-drawer(v-model="drawer" app left temporary style="z-index: 5")
21+
v-list(dense)
22+
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")
23+
v-list-item-action
24+
v-icon {{ link.icon }}
25+
v-list-item-content
26+
v-list-item-title.grey--text {{ link.text }}
27+
28+
v-list-item
29+
v-list-item-action
30+
v-icon mdi-account-group
31+
v-menu
32+
template.ml-16(v-slot:activator="{ on }")
33+
v-list-item-content(v-on="on")
34+
v-list-item-title.grey--text Team
35+
v-list
36+
v-list-item(v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
37+
v-list-item-title {{ item.text }}
38+
39+
40+
2041
</template>
2142

2243
<script>
2344
export default {
2445
name: "Header",
25-
2646
data() {
2747
return {
48+
show: false,
2849
drawer: null,
2950
links: [
3051
{ text: "Home", icon: "mdi-home" },
@@ -33,10 +54,30 @@ export default {
3354
{ text: "Timeline", icon: "mdi-timeline-text" },
3455
{ text: "Blog", icon: "mdi-forum" },
3556
{ text: "Videos", icon: "mdi-television" },
36-
{ text: "Team", icon: "mdi-human-male-male" },
57+
{ text: "Team", icon: "mdi-human-male-male" }, // Empty routeName for the dropdown menu
3758
{ text: "WoC", icon: "mdi-briefcase-edit-outline" }
59+
],
60+
teams: [
61+
{
62+
text: "Current Team",
63+
link: "current_team",
64+
icon: "mdi-human-male-male"
65+
},
66+
{
67+
text: "Alumni Team",
68+
link: "alumni_team",
69+
icon: "mdi-human-male-male"
70+
}
3871
]
3972
};
73+
},
74+
computed: {
75+
teamLinks() {
76+
return [
77+
{ text: "Current Team", icon: "mdi-human-male-male" },
78+
{ text: "Alumni Team", icon: "mdi-human-male-male" }
79+
];
80+
}
4081
}
4182
};
4283
</script>

‎src/router/index.js‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Vue from "vue";
22
import VueRouter from "vue-router";
3-
43
Vue.use(VueRouter);
54

65
const routes = [
@@ -47,16 +46,22 @@ const routes = [
4746
meta: { title: "Podcast" }
4847
},
4948
{
50-
path: "/team",
51-
name: "Team",
52-
component: () => import("../views/Profile"),
53-
meta: { title: "Team" }
49+
path: "/current_team",
50+
name: "current_team",
51+
component: () => import("../views/CurrentTeam"), // Replace "../views/Profile" with the path to the component for the current team
52+
meta: { title: "Current Team" }
5453
},
5554
{
5655
path: "/WoC",
5756
name: "WoC",
5857
component: () => import("../views/WoC"),
5958
meta: { title: "WoC" }
59+
},
60+
{
61+
path: "/alumni_team",
62+
name: "alumni_team",
63+
component: () => import("../views/AlumniTeam"), // Add the route for the AlumniTeam component
64+
meta: { title: "Alumni Team" }
6065
}
6166
];
6267

‎src/views/Profile.vue‎ renamed to ‎src/views/AlumniTeam.vue‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,42 @@
1-
<!-- Profile[0]->Profile index -->
2-
<template lang="pug">
3-
div(align='center', justify='center')
4-
div(v-if="loading")
5-
Preloader
6-
div(v-else)
7-
v-container
8-
v-row(justify='left')
9-
v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
10-
ProfileCard(:Profile='Profile')
11-
</template>
12-
13-
<script>
14-
const ProfileCard = () => import("../components/ProfileCard");
15-
const Preloader = () => import("../components/Preloader");
16-
export default {
17-
name: "Profile",
18-
components: { ProfileCard, Preloader },
19-
data: () => ({
20-
loading: true,
21-
profiles: []
22-
}),
23-
methods: {
24-
fetchProfiles() {
25-
// spreadsheetID=17O_B9OCnz6Byey-Y1o0K5WCTTlXJterlwNDgpjSN-s4
26-
const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
27-
this.loading = true;
28-
fetch(url)
29-
.then(e =>
30-
e.json().then(e => {
31-
console.log(e);
32-
this.profiles = e;
33-
console.log(this.profiles);
34-
})
35-
)
36-
.finally(() => (this.loading = false));
37-
}
38-
},
39-
mounted() {
40-
this.fetchProfiles();
41-
}
42-
};
43-
</script>
1+
<!-- Profile[0]->Profile index -->
2+
<template lang="pug">
3+
div(align='center', justify='center')
4+
div(v-if="loading")
5+
Preloader
6+
div(v-else)
7+
v-container
8+
v-row(justify='left')
9+
v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
10+
ProfileCard(:Profile='Profile')
11+
</template>
12+
13+
<script>
14+
const ProfileCard = () => import("../components/ProfileCard");
15+
const Preloader = () => import("../components/Preloader");
16+
export default {
17+
name: "Profile",
18+
components: { ProfileCard, Preloader },
19+
data: () => ({
20+
loading: true,
21+
profiles: []
22+
}),
23+
methods: {
24+
fetchProfiles() {
25+
const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
26+
this.loading = true;
27+
fetch(url)
28+
.then(e =>
29+
e.json().then(e => {
30+
console.log(e);
31+
this.profiles = e;
32+
console.log(this.profiles);
33+
})
34+
)
35+
.finally(() => (this.loading = false));
36+
}
37+
},
38+
mounted() {
39+
this.fetchProfiles();
40+
}
41+
};
42+
</script>

‎src/views/CurrentTeam.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!-- Profile[0]->Profile index -->
2+
<template lang="pug">
3+
div(align='center', justify='center')
4+
div(v-if="loading")
5+
Preloader
6+
div(v-else)
7+
v-container
8+
v-row(justify='left')
9+
v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
10+
ProfileCard(:Profile='Profile')
11+
</template>
12+
13+
<script>
14+
const ProfileCard = () => import("../components/ProfileCard");
15+
const Preloader = () => import("../components/Preloader");
16+
export default {
17+
name: "Profile",
18+
components: { ProfileCard, Preloader },
19+
data: () => ({
20+
loading: true,
21+
profiles: []
22+
}),
23+
methods: {
24+
fetchProfiles() {
25+
const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
26+
this.loading = true;
27+
fetch(url)
28+
.then(e =>
29+
e.json().then(e => {
30+
console.log(e);
31+
this.profiles = e;
32+
console.log(this.profiles);
33+
})
34+
)
35+
.finally(() => (this.loading = false));
36+
}
37+
},
38+
mounted() {
39+
this.fetchProfiles();
40+
}
41+
};
42+
</script>

‎src/views/Project.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export default {
2323
}),
2424
methods: {
2525
fetchProjects() {
26-
// spreadsheetID=17O_B9OCnz6Byey-Y1o0K5WCTTlXJterlwNDgpjSN-s4
2726
const url = `https://script.google.com/macros/s/AKfycbxsb_2WN21NJ4p_yEVS8DoCIcs-3lL9VlB5zgbGXeEhfERHkjkIcFOTvkhw1m69irgH7g/exec`;
2827
this.loading = true;
2928
fetch(url)

0 commit comments

Comments
 (0)