Added methods to create a new teams

src/components/teams/ListTeams.vue

@@ -1,5 +1,8 @@
 <template>
 	<div class="content">
+		<router-link :to="{name:'newTeam'}" class="button is-success button-right" >
+			New Team
+		</router-link>
 		<h1>Teams</h1>
 		<ul class="teams box">
 			<li v-for="t in teams" :key="t.id">
@@ -57,6 +60,10 @@
 </script>
 
 <style lang="scss" scoped>
+	.button-right{
+		float: right;
+	}
+
 	ul.teams{
 
 		padding: 0;

src/components/teams/NewTeam.vue

@@ -0,0 +1,73 @@
+<template>
+	<div class="content">
+		<h3>Create a new team</h3>
+		<form @submit.prevent="newTeam">
+			<div class="field is-grouped">
+				<p class="control has-icons-left is-expanded" v-bind:class="{ 'is-loading': loading}">
+					<input class="input" v-bind:class="{ 'disabled': loading}" v-model="team.name" type="text" placeholder="The team's name goes here...">
+					<span class="icon is-small is-left">
+						<icon icon="users"/>
+					</span>
+				</p>
+				<p class="control">
+					<button type="submit" class="button is-success">
+						<span class="icon is-small">
+							<icon icon="plus"/>
+						</span>
+						Add
+					</button>
+				</p>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script>
+	import auth from '../../auth'
+	import router from '../../router'
+	import {HTTP} from '../../http-common'
+	import message from '../../message'
+
+	export default {
+		name: "NewTeam",
+		data() {
+			return {
+				team: {title: ''},
+				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'})
+			}
+		},
+		methods: {
+			newTeam() {
+				this.loading = true
+
+				HTTP.put(`teams`, this.team, {headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')}})
+					.then(response => {
+						router.push({name:'editTeam', params:{id: response.data.id}})
+						this.handleSuccess({message: 'The team was successfully created.'})
+					})
+					.catch(e => {
+						this.handleError(e)
+					})
+			},
+			handleError(e) {
+				this.loading = false
+				message.error(e, this)
+			},
+			handleSuccess(e) {
+				this.loading = false
+				message.success(e, this)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -15,6 +15,7 @@ import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
 // Team Handling
 import ListTeamsComponent from '@/components/teams/ListTeams'
 import EditTeamComponent from '@/components/teams/EditTeam'
+import NewTeamComponent from '@/components/teams/NewTeam'
 
 Vue.use(Router)
 
@@ -65,6 +66,11 @@ export default new Router({
       name: 'listTeams',
       component: ListTeamsComponent
     },
+    {
+      path: '/teams/new',
+      name: 'newTeam',
+      component: NewTeamComponent
+    },
     {
       path: '/teams/:id/edit',
       name: 'editTeam',

todo.md

@@ -26,11 +26,11 @@
 
 * [ ] Teams
     * [ ] Mglkt zum Erstellen von neuen Teams
-    * [ ] Alle Teams auflisten, auf die der Nutzer Zugriff hat
-        * [ ] In der UI klarmachen, wenn der Nutzer admin ist (möglicherweise braucht das noch ne Änderung im Backend)
-        * [ ] Einzelne Teams ansehbar
-            * [ ] In den Teams, in denen der Nutzer admin ist, Bearbeitung ermöglichen
-	    * [ ] Löschen ermöglichen
+    * [x] Alle Teams auflisten, auf die der Nutzer Zugriff hat
+        * [x] In der UI klarmachen, wenn der Nutzer admin ist (möglicherweise braucht das noch ne Änderung im Backend)
+        * [x] Einzelne Teams ansehbar
+            * [x] In den Teams, in denen der Nutzer admin ist, Bearbeitung ermöglichen
+	    * [x] Löschen ermöglichen
 
 * [ ] Sharingshit
     * [ ] Listen für Nutzer