home.vue

<template>
  <v-content class="px-0 mx-0 pt-5">
    <v-container fluid class="px-0 pt-0 container-margin-top">
      <v-row justify="center" align="center">
        <v-col md="12" lg="10" xs="12" class="py-5 ">
          <homeStartScreen />
        </v-col>
      </v-row>
    </v-container>

    <!-- <v-container fluid class="pa-0 py-2" >
      <v-row justify="center" align="center">
        <v-col md="12" lg="10" xs="12" class="py-0 " :class="this.$vuetify.theme.dark == true?'darkModeContainer':'lightModeContainer'">
          <whatwedo />
        </v-col>
      </v-row>
    </v-container> -->

    <v-container fluid class="pa-0 py-5" >
      <v-row justify="center" align="center" style="background:#4C4A78" class="py-5">
        <v-col md="12" lg="10" xs="12" class="py-0" >
          <aboutCommunity />
        </v-col>
      </v-row>
    </v-container>
     <!-- <v-container fluid class="pa-0 py-5" >
      <v-row justify="center" align="center" style="background:white" class="py-5">
        <v-col md="12" lg="10" xs="12" class="py-0" >
          <youtube />
        </v-col>
      </v-row>
    </v-container> -->

    <!-- <v-container fluid class="pa-0 py-2" >
      <v-row justify="center" align="center">
        <v-col md="12" lg="10" xs="12" class="py-0">
          <events />
        </v-col>
      </v-row>
    </v-container> -->


    <!-- <v-container fluid class="pa-0 py-0" >
      <v-row justify="center" align="center" class="py-4" :class="this.$vuetify.theme.dark == true?'grey darken-4':'grey lighten-4'">
        <v-col md="12" lg="10" xs="12" class="py-0">
          <featureEvents />
        </v-col>
      </v-row>
    </v-container> -->

     <v-container fluid class="pa-0 py-2" >
      <v-row justify="center" align="center">
        <v-col md="12" lg="10" xs="12" class="py-0">
          <hometeam />
        </v-col>
      </v-row>
    </v-container>
    <v-divider color="#693b95" height="10px"> </v-divider>
 
 <!-- <v-container fluid class="pa-0 py-2" >
     <v-row justify="center" align="center" style="background:#4C4A78" class="py-5">
        <v-col md="12" lg="10" xs="12" class="py-0">
     
          <upcomingEvents />
        </v-col>
      </v-row>
    </v-container> -->
     <v-container fluid class="pa-0 py-2" id>
      <v-row justify="center" align="center"   class="py-5">
        <v-col md="12" lg="10" xs="12" class="py-0">
     
          <consultation />
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</template>

<script>
import homeStartScreen from '../components/home/homeScreen';
import whatwedo from '../components/home/whatwedo';
import aboutCommunity from '../components/home/aboutCommunity';
import events from '../components/home/events';
import featureEvents from '../components/home/featureEvents';
import partners from '../components/common/partners';
import upcomingEvents from '../components/events/upcomingEvents';
import hometeam from '../components/Team/hometeam';
import consultation from '../components/core/consultation';
import youtube from '../components/socialmedia/youtubeembed';


export default {
  components: {
    homeStartScreen,
    whatwedo,
    aboutCommunity,
    events,
    featureEvents,
    partners,
    upcomingEvents,
    hometeam,
    consultation,
    youtube
  },
  created(){
    let metaThemeColor = document.querySelector("meta[name=theme-color]");
    if(this.$vuetify.theme.dark){
      metaThemeColor.setAttribute("content", '#212121');
    }else{
        metaThemeColor.setAttribute("content", '#0277bd');
    }
  }
};
</script>

<style scoped>
  /* for large screen */
  @media screen and (min-width: 600px) {
    .container-margin-top{
      margin-top:40px
    }
  }
  /* for small screen */
  @media screen and (max-width: 600px) {
  }
</style>

hometeam.vue

<template>
    <v-container class=" ">
        <v-row no-gutters class="mt-0">

            <v-col cols="12" sm="4"></v-col>

            <v-col cols="12" sm="4" class="mt-0">
                <p class="google-font mb-0" style="font-weight: 350;font-size:178%" align="center"><b> <span
                        style="color: #693b95;">Agile</span><span style="color: #0fa94b;">Chakra</span></b>&trade; Contributors
                </p>
                <br>
                <v-data-iterator
                        :items="teamData"
                        :search="search"
                        :items-per-page.sync="itemsPerPage"
                        :footer-props="{ itemsPerPageOptions }"
                        hide-default-footer
                >
                    <template v-slot:default="props" >
                        <v-row class="">
                            <v-col col="12" v-for="(item) in props.items" :key="item.name"
                                   class="pa-2" align="center"   >
                                <div style="cursor: pointer;" class="text-center py-3 elevation-4" 
                                     :class="$vuetify.theme.dark == true?'grey darken-3':'white'">
                                    <p class="mt-0 mb-0 google-font mt-0" style="font-size:95%"><b><i>{{item.designation}}</i></b></p>
                                    <v-avatar size="140">
                                        <img
                                                :src="item.image" alt="team"
                                        >
                                    </v-avatar>
                                    <p class="mt-3 mb-0 google-font mb-0" style="font-size:130%"><b>{{item.name}}</b></p>
                                    <p class="mt-0 mb-0 google-font mt-0" style="font-size:80%">{{item.mbnumber}}</p>
                                      <!-- <p class="mt-0 mb-0 google-font mt-0" style="font-size:90%" ><v-btn aria-label="social media btn" small class="mt-0 mx-0" icon v-if="item.email" :href="item.email" target="_blank">
                                        <v-icon small style="color:black">mdi-email</v-icon>
                                    </v-btn>
                                    </p> -->
                                    <v-btn aria-label="social media btn" small class="mt-0 mx-0" icon v-if="item.socialLinks.linkedin" :href="item.socialLinks.linkedin" target="_blank">
                                        <v-icon small style="color:#0077b5">mdi-linkedin</v-icon>
                                    </v-btn>
                                    &nbsp;
                                    <v-btn aria-label="social media btn" small class="mt-0 mx-0" icon v-if="item.socialLinks.twitter" :href="item.socialLinks.twitter" target="_blank">
                                        <v-icon small style="color:#0077b5">mdi-twitter</v-icon>
                                    </v-btn>
                                    &nbsp;
                                    <v-btn aria-label="social media btn" small class="mt-0 mx-0" icon v-if="item.socialLinks.facebook" :href="item.socialLinks.facebook" target="_blank">
                                        <v-icon small style="color:#0077b5">mdi-facebook</v-icon>
                                    </v-btn>
                                      &nbsp;
                                    <v-btn aria-label="social media btn" small class="mt-0 mx-0" icon v-if="item.socialLinks.web" :href="item.socialLinks.web" target="_blank">
                                        <v-icon small style="color:#0077b5">mdi-earth</v-icon>
                                    </v-btn>

                                </div>
                            </v-col>
                        </v-row>
                    </template>
                </v-data-iterator>

            </v-col>
            <v-col cols="12" sm="4"></v-col>


        </v-row>
    </v-container>
</template>

<script>
    import firebase from 'firebase/app'
    import {firestore} from 'firebase';
    import {configData} from "@/config/config";
    import AddTeam from '../../components/Admin/Team/addTeam'
    import Team from '../../components/Admin/Team/viewTeam'

    export default {
        components: {
            AddTeam,
            Team
        },
        name: "admin-dashboard",
        data: () => ({
            teamRole: ["Core Team", "Organizing Team", "Volunteer"],
            itemsPerPageOptions: [8, 16, 32],
            itemsPerPage: 8,
            removeSuccess: false,
            teamLoader: true,
            search: '',
            loading: true,
            teamData: [],
            snackbarSuccess: false
        }),
        created() {
            if (this.$route.query.msg) {
                this.removeSuccess = true
                // this.alert  = this.$route.query.msg;
            }
        },
        computed: {
            // fitlerData(){
            //   return this.teamData.filter(team=>{
            //     // console.log(team)
            //     return team.name.match(this.search)
            //   })
            // }
        },
        mounted() {
            // firebase.auth().currentUser
            if (firebase.auth().currentUser) {
                // this.userEmail = firebase.auth.currentUser.email
                this.showData()
            } else {
                this.showData()
            }
        },
        methods: {
            showTeam(id) {
                this.$router.replace('/admin/dashboard/team/' + id)
            },
            getImgUrl(pic) {
                if (pic.length > 0) {
                    return pic
                    // return require('@/assets/img/team/'+pic)
                } else {
                    return require('@/assets/img/common/avatar.png')
                }
            },
            showData() {
                this.teamLoader = true
                // this.dataLoadingStatus = true
                this.teamData = []
                console.log('Calling Show Data')
                firebase.firestore().collection('team').get()
                    .then((snapshot) => {
                        snapshot.forEach((doc) => {
                            this.id = doc.id
                            // console.log(this.id)
                            // doc.data().docId = this.id
                            // Object.assign(doc.data(), {docID: doc.id});
                            // console.log(typeof(doc.data()))
                            this.teamData.push(doc.data())
                            // console.log(this.teamData)

                        });
                        this.teamLoader = false
                        this.loading = false
                    })
                    .catch((err) => {
                        console.log('Error getting documents', err);
                    });
                // this.snackbarSuccess = true
                // this.dataLoadingStatus = false
            }
        }
    }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    drawer: false,
    adminDrawer:true,
    adminLinks:[
      { 
        text: 'Home', 
        to: '/admin/dashboard/home', 
        icon:'mdi-home', 
        meta:{
          showToolbar: false,
          showBottomNav: true
        }, 
      },
      { 
        text: 'Events', 
        to: '/admin/dashboard/events', 
        icon: 'mdi-assistant', 
        meta:{
          showToolbar: false,
          showBottomNav: true
        }, 
      },
      {
        text: 'Team',
        to: '/admin/dashboard/team',
        icon: 'mdi-account-group',
        meta:{
          showToolbar: false,
          showBottomNav: true
        },
      },
      { 
        text: 'Speaker', 
        to: '/admin/dashboard/speaker', 
        icon: 'mdi-account-switch', 
        meta:{
          showToolbar: false,
          showBottomNav: true
        }, 
      },
      { 
        text: 'PushNotifications', 
        to: '/admin/dashboard/pushNotification', 
        icon: 'mdi-bell-ring', 
        meta:{
          showToolbar: false,
          showBottomNav: true
        }, 
      },
      { 
        text: 'Web Config', 
        to: '/admin/dashboard/config/web', 
        icon: 'mdi-web', 
        meta:{
          showToolbar: false,
          showBottomNav: true
        }, 
      }
      
    ],
    items: [ 
      { 
        text: 'Home', 
        to: '/', 
        icon:'mdi-home', 
        meta:{
          showToolbar: true,
          showBottomNav: true
        }, 
      },
      { 
        text: 'Events', 
        to: '/events', 
        icon: 'mdi-assistant', 
        meta:{
          showToolbar: false,
          showBottomNav: false
        }, 
      },
      { 
        text: 'Contributors', 
        to: '/team', icon:'mdi-account-multiple',
        meta:{
          showToolbar: true,
          showBottomNav: true
        }, 
      },
      
      { 
        text: 'Free Session', 
        to: '/session', icon:'mdi-ticket',
        meta:{
          showToolbar: true,
          showBottomNav: true
        }
      }
      // },
      // { 
      //   text: 'About', 
      //   to: '/about', 
      //   icon: 'mdi-comment-alert-outline',
      //   meta:{
      //     showToolbar: true,
      //     showBottomNav: true
      //   }, 
      // },
      // { 
      //   text: 'Contact', 
      //   to: '/contact', 
      //   icon:'mdi-contacts',
      //   meta:{
      //     showToolbar: true,
      //     showBottomNav: true
      //   }, 
      // },
      // { 
      //   text: 'Partners', 
      //   to: '/partners', 
      //   icon:'mdi-currency-usd',
      //   meta:{
      //     showToolbar: false,
      //     showBottomNav: false
      //   }, 
      // },
      // { 
      //   text: 'Blogs', 
      //   to: '/blogs', 
      //   icon:'mdi-blogger',
      //   meta:{
      //     showToolbar: true,
      //     showBottomNav: false
      //   }, 
      // }
    ]
  },
  getters:{
    links: (state) => {
      return state.items
    },
    AdminLinks: (state) => {
      return state.adminLinks
    }
  },
  mutations: {
    setDrawer: (state, payload) => (state.drawer = payload),
    toggleDrawer: state => (state.drawer = !state.drawer),
    
    // For Admin
    ADsetDrawer: (state, payload) => (state.adminDrawer = payload),
    ADtoggleDrawer: state => (state.adminDrawer = !state.adminDrawer)
  },
  actions: {

  }
})