Added functions to have a list of teams

src/App.vue

@@ -25,12 +25,18 @@
 				<div class="box">
 					<div class="columns">
 						<div class="column is-3">
-								<router-link :to="{name: 'newNamespace'}" class="button is-success is-fullwidth button-bottom">
+							<router-link :to="{name: 'listTeams'}" class="button is-primary is-fullwidth button-bottom">
-									<span class="icon is-small">
+								<span class="icon is-small">
-										<icon icon="layer-group"/>
+									<icon icon="users"/>
-									</span>
+								</span>
-									New Namespace
+								Teams
-								</router-link>
+							</router-link>
+							<router-link :to="{name: 'newNamespace'}" class="button is-success is-fullwidth button-bottom">
+								<span class="icon is-small">
+									<icon icon="layer-group"/>
+								</span>
+								New Namespace
+							</router-link>
 							<aside class="menu">
 								<p class="menu-label" v-if="loading">Loading...</p>
 								<template v-for="n in namespaces">

src/components/teams/ListTeams.vue

@@ -0,0 +1,85 @@
+<template>
+	<div class="content">
+		<h1>Teams</h1>
+		<ul class="teams box">
+			<li v-for="t in teams" :key="t.id">
+				<router-link :to="{name: 'editTeam', params: {id: t.id}}">
+					{{t.name}}
+				</router-link>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+    import auth from '../../auth'
+    import router from '../../router'
+    import {HTTP} from '../../http-common'
+    import message from '../../message'
+
+    export default {
+        name: "ListTeams",
+        data() {
+            return {
+                teams: [],
+                error: '',
+                loading: false,
+            }
+        },
+        beforeMount() {
+            // Check if the user is already logged in, if so, redirect him to the homepage
+            if (!auth.user.authenticated) {
+                router.push({name: 'home'})
+            }
+        },
+        created() {
+            this.loadTeams()
+        },
+		methods: {
+			loadTeams() {
+                this.loading = true
+
+                HTTP.get(`teams`, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+                    .then(response => {
+                        this.$set(this, 'teams', response.data)
+                        this.loading = false
+                    })
+                    .catch(e => {
+                        this.handleError(e)
+                    })
+			},
+            handleError(e) {
+                this.loading = false
+                message.error(e, this)
+            },
+		}
+    }
+</script>
+
+<style lang="scss" scoped>
+	ul.teams{
+
+		padding: 0;
+		margin-left: 0;
+
+		li{
+			list-style: none;
+			margin: 0;
+			border-bottom: 1px solid darken(#fff, 25%);
+
+			a{
+				color: #363636;
+				display: block;
+				padding: 0.5rem 1rem;
+
+				&:hover{
+					background: darken(#fff, 2%);
+				}
+			}
+		}
+
+		li:last-child{
+			border-bottom: none;
+		}
+	}
+</style>

src/main.js

@@ -25,6 +25,7 @@ import { faCog } from '@fortawesome/free-solid-svg-icons'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+import { faUsers } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faSignOutAlt)
@@ -35,6 +36,7 @@ library.add(faCog)
 library.add(faAngleRight)
 library.add(faLayerGroup)
 library.add(faTrashAlt)
+library.add(faUsers)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/router/index.js

@@ -12,6 +12,9 @@ import EditListComponent from '@/components/lists/EditList'
 // Namespace Handling
 import NewNamespaceComponent from '@/components/namespaces/NewNamespace'
 import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
+// Team Handling
+import ListTeamsComponent from '@/components/teams/ListTeams'
+import EditTeamComponent from '@/components/teams/EditTeam'
 
 Vue.use(Router)
 
@@ -56,6 +59,16 @@ export default new Router({
       path: '/namespaces/:id/edit',
       name: 'editNamespace',
       component: EditNamespaceComponent
-    }
+    },
+    {
+      path: '/teams',
+      name: 'listTeams',
+      component: ListTeamsComponent
+    },
+    {
+      path: '/teams/:id/edit',
+      name: 'editTeam',
+      component: EditTeamComponent
+    },
   ]
 })