From 61867fc787beeebbf1d8673e5408a725268e456f Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Fri, 14 Sep 2018 19:19:50 +0200
Subject: [PATCH] Added methods to create a new teams

---
 src/components/teams/ListTeams.vue |  7 +++
 src/components/teams/NewTeam.vue   | 73 ++++++++++++++++++++++++++++++
 src/router/index.js                |  6 +++
 todo.md                            | 10 ++--
 4 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 src/components/teams/NewTeam.vue

diff --git a/src/components/teams/ListTeams.vue b/src/components/teams/ListTeams.vue
index 6fa3e72f..7a39bc6f 100644
--- a/src/components/teams/ListTeams.vue
+++ b/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;
diff --git a/src/components/teams/NewTeam.vue b/src/components/teams/NewTeam.vue
new file mode 100644
index 00000000..ce29c045
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index fa96af95..a95dc438 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/todo.md b/todo.md
index 4f80b8e5..972bfd50 100644
--- a/todo.md
+++ b/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