feat: add admin panel and display teams

front/src/components/Drawer.vue

@@ -12,13 +12,20 @@
                 <v-img :src="userPicture"></v-img>
             </v-list-item-avatar>
 
-            <v-list-item-title>{{user.displayName || user.email}}</v-list-item-title>
+            <v-list-item-title>{{
+                user.displayName || user.email
+            }}</v-list-item-title>
         </v-list-item>
 
         <v-divider></v-divider>
         <v-list dense nav>
             <template v-for="item in items">
-                <v-list-item :key="item.title" v-if="canDisplay(item)" link :to="item.href">
+                <v-list-item
+                    :key="item.title"
+                    v-if="canDisplay(item)"
+                    link
+                    :to="item.href"
+                >
                     <v-list-item-icon>
                         <v-icon>{{ item.icon }}</v-icon>
                     </v-list-item-icon>
@@ -31,6 +38,19 @@
         </v-list>
 
         <template v-slot:append>
+            <v-list-item
+                link
+                to="/admin"
+                v-if="isAdmin"
+            >
+                <v-list-item-icon>
+                    <v-icon color="warning">mdi-application-cog</v-icon>
+                </v-list-item-icon>
+
+                <v-list-item-content>
+                    <v-list-item-title>Administration</v-list-item-title>
+                </v-list-item-content>
+            </v-list-item>
             <v-list-item link to="/logout" v-if="user">
                 <v-list-item-icon>
                     <v-icon color="error">mdi-logout</v-icon>
@@ -63,12 +83,15 @@ export default {
         }
     },
     computed: {
-        ...mapState([ 'organizationId', 'assignedTeamId' ]),
+        ...mapState([ 'organizationId', 'assignedTeamId', 'role' ]),
         user() {
             return this.$store.getters.user;
         },
         userPicture() {
             return this.user.photoURL || `https://eu.ui-avatars.com/api/?name=${this.user.email}`
+        },
+        isAdmin() {
+            return this.user && this.role && this.role.includes('admin')
         }
     },
     methods: {

front/src/router/admin.js

@@ -0,0 +1,28 @@
+import Dashboard from '../views/admin/Dashboard.vue';
+import Organizations from '../views/admin/Organizations.vue';
+import Teams from '../views/admin/Teams.vue';
+
+const adminRoutes = [
+    {
+        path: '',
+        name: 'dashboard',
+        component: Dashboard,
+    },
+    {
+        path: 'organisations',
+        name: 'organisations',
+        component: Organizations,
+    },
+    {
+        path: 'teams',
+        name: 'teams',
+        component: Teams,
+    },
+    {
+        path: 'users',
+        name: 'users',
+        component: Dashboard,
+    },
+];
+
+export default adminRoutes;

front/src/router/index.js

@@ -1,17 +1,32 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import firebase from '@/firebase/init';
+import store from '@/store';
 import Home from '../views/Home.vue';
 import Login from '../views/Login.vue';
 import Register from '../views/Register.vue';
 import About from '../views/About.vue';
 import Faq from '../views/Faq.vue';
 import Logout from '../views/Logout.vue';
-import firebase from '@/firebase/init';
-import store from '@/store';
+import adminRoutes from './admin';
+import Admin from '../views/Admin.vue';
+
 
 Vue.use(VueRouter);
 
 const routes = [
+    {
+        path: '/admin',
+        name: 'admin',
+        meta: {
+            requireAuth: true,
+            requireAdmin: true,
+            requireOrganization: false,
+            requireTeam: false,
+        },
+        component: Admin,
+        children: [...adminRoutes],
+    },
     {
         path: '/',
         name: 'home',
@@ -112,9 +127,21 @@ const router = new VueRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-
     const requireAuth = to.matched.some((record) => record.meta.requireAuth);
     const requireTeam = to.matched.some((record) => record.meta.requireTeam);
+    const requireAdmin = to.matched.some((record) => record.meta.requireAdmin);
+
+    if (requireAdmin) {
+        if (
+            store.state &&
+            store.state.role &&
+            store.state.role.includes('admin')
+        ) {
+            next();
+        } else {
+            next('/');
+        }
+    }
 
     // When accessing a page that need an organization and no user, then login
     if (requireAuth && !(await firebase.getCurrentUser())) {

front/src/store/index.js

@@ -16,7 +16,8 @@ export default new Vuex.Store({
         status: null,
         error: null,
         assignedTeamId: null,
-        organizationId: null
+        organizationId: null,
+        role: null,
     },
     mutations: {
         setUser(state, payload) {
@@ -41,6 +42,10 @@ export default new Vuex.Store({
 
         setOrganizationId(state, payload) {
             state.organizationId = payload;
+        },
+
+        setRole(state, payload) {
+            state.role = payload;
         }
     },
     actions: {
@@ -52,6 +57,10 @@ export default new Vuex.Store({
                 .doc(userId)
                 .onSnapshot(snapshot => {
                     this.userMetadata = snapshot.data();
+                    commit(
+                        'setRole',
+                        this.userMetadata?.role
+                    );
                     commit(
                         'setAssignedTeamId',
                         this.userMetadata?.assignedTeamId

front/src/views/Admin.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="admin">
+        <v-tabs fixed-tabs>
+            <v-tab v-for="li in links" :key="li.link" :to="`/admin/${li.link}`" :disabled="li.isDisabled">
+                {{ li.label }}
+            </v-tab>
+        </v-tabs>
+        <router-view />
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'admin',
+    data() {
+        return {
+            links: [
+                { link: '', label: 'Dashboard' },
+                { link: 'organisations', label: 'Organisations', isDisabled: true },
+                { link: 'teams', label: 'Teams', isDisabled: false },
+                { link: 'users', label: 'Users', isDisabled: true },
+            ]
+        }
+    },
+    components: {
+    },
+    created(){
+
+    }
+}
+</script>

front/src/views/admin/Dashboard.vue

@@ -0,0 +1,42 @@
+<template>
+    <section class="dashboard">
+        <v-skeleton-loader
+            class="mx-auto"
+            min-width="300"
+            type="card"
+        ></v-skeleton-loader>
+        <v-skeleton-loader
+            class="mx-auto"
+            min-width="300"
+            type="card"
+        ></v-skeleton-loader>
+    </section>
+</template>
+
+<script>
+
+export default {
+    name: "dashboard",
+    components: {
+    },
+    data() {
+        return {
+        };
+    },
+    beforeCreate() {
+    },
+    watch: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.dashboard {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 25px;
+}
+</style>

front/src/views/admin/Organizations.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="d-flex">
+        <img src="" alt="" />
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "organisations",
+    components: {
+    },
+    data() {
+        return {
+
+        };
+    },
+}
+</script>
+
+<style scoped lang="scss">
+</style>