Add new pages for joining and creating teams

client/src/components/profile/JoinForm.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <h1 data-cy="join-class-title">{{ title }}</h1>
+    <div>
+      <div class="skillboxform-input">
+        <label
+          for="join-code"
+          class="skillboxform-input__label">{{ labelText }}</label>
+        <input
+          :class="{'skillboxform-input__input--error': error}"
+          :value="value"
+          class="skillbox-input skillboxform-input__input"
+          data-cy="input-class-code"
+          id="join-code"
+          @input="$emit('input', $event)">
+        <small
+          class="skillboxform-input__error"
+          v-if="error"
+        >{{ error }}
+        </small>
+      </div>
+
+      <div>
+        <a
+          class="button button--primary button--big"
+          data-cy="join-class"
+          @click="$emit('confirm', value)">{{ okText }}</a>
+        <button
+          class="button button--big"
+          data-cy="join-class-cancel"
+          @click="$emit('cancel')">{{ cancelText }}
+        </button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      value: {
+        type: String,
+        default: ''
+      },
+      error: {
+        type: String,
+        default: ''
+      },
+      okText: {
+        type: String,
+        default: 'Klasse beitreten'
+      },
+      labelText: {
+        type: String,
+        default: 'Zugangscode eingeben'
+      },
+      cancelText: {
+        type: String,
+        default: 'Abmelden'
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/pages/createClass.vue

@@ -1,41 +1,15 @@
 <template>
-  <div class="create-class">
+  <join-form
-    <h1 class="create-class__title">Klasse erfassen</h1>
+    :value="name"
-
+    class="create-class"
-    <div>
+    title="Klasse erfassen"
-      <div class="skillboxform-input">
+    ok-text="Klasse erfassen"
-        <label
+    label-text="Name"
-          for="class-name"
+    cancel-text="Abbrechen"
-          class="skillboxform-input__label">Name</label>
+    @input="updateName"
-        <input
+    @cancel="cancel"
-          :class="{'skillboxform-input__input--error': error}"
+    @confirm="createClass"
-          :value="name"
+  />
-          class="skillbox-input skillboxform-input__input"
-          data-cy="input-class-name"
-          id="class-name"
-          @input="updateName">
-        <small
-          class="skillboxform-input__error"
-          data-cy="email-local-errors"
-          v-if="error"
-        >{{ error }}
-        </small>
-      </div>
-
-      <div>
-        <a
-          class="button button--primary button--big"
-          data-cy="create-class"
-          @click="createClass(name)">Klasse
-          erfassen</a>
-        <a
-          class="button button--big"
-          data-cy="create-class-cancel"
-          @click="cancel">Abbrechen</a>
-      </div>
-
-    </div>
-  </div>
 </template>
 
 <script>
@@ -43,12 +17,18 @@
 
   import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
   import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
+  import JoinForm from '@/components/profile/JoinForm';
 
   export default {
     mixins: [addSchoolClassMixin],
+
+    components: {
+      JoinForm
+    },
+
     data: () => ({
       name: '',
-      error: ''
+      error: '',
     }),
 
     methods: {
@@ -62,24 +42,24 @@
           mutation: CREATE_CLASS_MUTATION,
           variables: {
             input: {
-              name
+              name,
-            }
+            },
           },
           update(store, {data: {createSchoolClass: {schoolClass}}}) {
             self.addSchoolClass(store, schoolClass);
             self.$router.push({
-              name: 'my-class'
+              name: 'my-class',
             });
           },
           refetchQueries: [{
-            query: MY_SCHOOL_CLASS_QUERY
+            query: MY_SCHOOL_CLASS_QUERY,
-          }]
+          }],
         });
       },
       cancel() {
         this.$router.go(-1);
-      }
+      },
-    }
+    },
   };
 </script>
 

client/src/pages/joinClass.vue

@@ -1,40 +1,13 @@
 <template>
-  <div>
+  <join-form
-    <h1 data-cy="join-class-title">Einer Klasse beitreten</h1>
+    :value="code"
-    <div>
+    :error="error"
-      <div class="skillboxform-input">
+    title="Einer Klasse beitreten"
-        <label
+    ok-text="Klasse beitreten"
-          for="join-code"
+    cancel-text="Abmelden"
-          class="skillboxform-input__label">Zugangscode eingeben</label>
+    @input="updateCode"
-        <input
+    @cancel="logout"
-          :class="{'skillboxform-input__input--error': error}"
+    @confirm="joinClass"/>
-          :value="code"
-          class="skillbox-input skillboxform-input__input"
-          data-cy="input-class-code"
-          id="join-code"
-          @input="updateCode">
-        <small
-          class="skillboxform-input__error"
-          data-cy="email-local-errors"
-          v-if="error"
-        >{{ error }}
-        </small>
-      </div>
-
-      <div>
-        <a
-          class="button button--primary button--big"
-          data-cy="join-class"
-          @click="joinClass(code)">Klasse beitreten</a>
-        <button
-          class="button button--big"
-          data-cy="join-class-cancel"
-          @click="logout">Abmelden
-        </button>
-      </div>
-
-    </div>
-  </div>
 </template>
 
 <script>
@@ -44,12 +17,15 @@
   import addSchoolClass from '@/mixins/add-school-class';
   import logout from '@/mixins/logout';
 
+  import JoinForm from '@/components/profile/JoinForm';
+
   export default {
     mixins: [addSchoolClass, logout],
+    components: {JoinForm},
 
     data: () => ({
       code: '',
-      error: ''
+      error: '',
     }),
 
     methods: {
@@ -60,18 +36,18 @@
       joinClass(code) {
         let self = this;
         this.$apollo.mutate({
-          mutation: JOIN_CLASS_MUTATION,
+            mutation: JOIN_CLASS_MUTATION,
-          variables: {
+            variables: {
-            input: {
+              input: {
-              code
+                code,
-            }
+              },
-          },
+            },
-          update(store, {data: {joinClass: {schoolClass}}}) {
+            update(store, {data: {joinClass: {schoolClass}}}) {
-            self.addSchoolClass(store, schoolClass);
+              self.addSchoolClass(store, schoolClass);
-            self.$router.push({name: 'my-class'});
+              self.$router.push({name: 'my-class'});
-          },
+            },
-          refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}]
+            refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}],
-        })
+          })
           .then(() => {
 
           })
@@ -83,7 +59,7 @@
               this.error = 'Dieser Zugangscode ist nicht gültig.';
             }
           });
-      }
+      },
-    }
+    },
   };
 </script>

client/src/pages/me/createTeam.vue

@@ -0,0 +1,68 @@
+<template>
+  <join-form
+    :value="name"
+    class="create-team"
+    title="Team erfassen"
+    ok-text="Team erfassen"
+    label-text="Name"
+    cancel-text="Abbrechen"
+    @input="updateName"
+    @cancel="cancel"
+    @confirm="createClass"
+  />
+</template>
+
+<script>
+  import addSchoolClassMixin from '@/mixins/add-school-class';
+
+  import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
+  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
+  import JoinForm from '@/components/profile/JoinForm';
+
+  export default {
+    mixins: [addSchoolClassMixin],
+
+    components: {
+      JoinForm
+    },
+
+    data: () => ({
+      name: '',
+      error: '',
+    }),
+
+    methods: {
+      updateName(event) {
+        this.name = event.target.value;
+        this.error = '';
+      },
+      createClass(name) {
+        let self = this;
+        this.$apollo.mutate({
+          mutation: CREATE_CLASS_MUTATION,
+          variables: {
+            input: {
+              name,
+            },
+          },
+          update(store, {data: {createSchoolClass: {schoolClass}}}) {
+            self.addSchoolClass(store, schoolClass);
+            self.$router.push({
+              name: 'my-class',
+            });
+          },
+        });
+      },
+      cancel() {
+        this.$router.go(-1);
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .create-class {
+  }
+</style>

client/src/pages/me/joinTeam.vue

@@ -0,0 +1,50 @@
+<template>
+  <join-form
+    :value="code"
+    :error="error"
+    title="Einem Team beitreten"
+    ok-text="Team beitreten"
+    cancel-text="Abbrechen"
+    @input="updateCode"
+    @cancel="cancel"
+    @confirm="joinTeam"/>
+</template>
+
+<script>
+  import JoinForm from '@/components/profile/JoinForm';
+  import {MY_TEAM} from '@/router/me.names';
+
+  export default {
+    components: {
+      JoinForm,
+    },
+
+    data() {
+      return {
+        code: '',
+        error: '',
+        teamRoute: {
+          name: MY_TEAM
+        }
+      };
+    },
+
+    methods: {
+      updateCode(event) {
+        this.code = event.target.value;
+        this.error = '';
+      },
+      cancel() {
+        this.$router.push(this.teamRoute);
+      },
+      joinTeam(code) {
+        console.log('joinTeam', code);
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/pages/me/team.vue

@@ -3,17 +3,34 @@
     <h1 class="my-team__heading">Mein Team</h1>
     <div class="my-team__section">
       <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
-      <a class="button button--primary">Zugangscode eingeben</a>
+      <router-link
+        :to="joinTeamRoute"
+        class="button button--primary">Zugangscode eingeben</router-link>
     </div>
     <div class="my-team__section">
       <h2 class="my-team__subheading">Willst du ein neues Team erfassen?</h2>
-      <a class="button button--primary">Team erfassen</a>
+      <router-link
+        :to="createTeamRoute"
+        class="button button--primary">Team erfassen</router-link>
     </div>
   </div>
 </template>
 
 <script>
-  export default {};
+  import {JOIN_TEAM, CREATE_TEAM} from '@/router/me.names';
+
+  export default {
+    data() {
+      return {
+        joinTeamRoute: {
+          name: JOIN_TEAM
+        },
+        createTeamRoute: {
+          name: CREATE_TEAM
+        }
+      };
+    },
+  };
 </script>
 
 <style scoped lang="scss">

client/src/router/index.js

@@ -45,7 +45,7 @@ const routes = [
   ...portfolioRoutes,
   {path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug'},
   ...meRoutes,
-  {path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'public'}},
+  {path: '/join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},
   {
     path: '/survey/:id',
     component: surveyPage,

client/src/router/me.names.js

@@ -1 +1,3 @@
 export const MY_TEAM = 'my-team';
+export const JOIN_TEAM = 'join-team';
+export const CREATE_TEAM = 'create-team';

client/src/router/me.routes.js

@@ -6,8 +6,10 @@ import oldClasses from '@/pages/oldClasses';
 import createClass from '@/pages/createClass';
 import showCode from '@/pages/showCode';
 import myTeam from '@/pages/me/team';
+import joinTeam from '@/pages/me/joinTeam';
+import createTeam from '@/pages/me/createTeam';
 
-import {MY_TEAM} from './me.names';
+import {JOIN_TEAM, MY_TEAM, CREATE_TEAM} from './me.names';
 
 export default [
   {
@@ -17,7 +19,6 @@ export default [
       {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
       {path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
       {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
-      {path: 'my-team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
       {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
       {
         path: 'old-classes',
@@ -27,6 +28,9 @@ export default [
       },
       {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
       {path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
+      {path: 'my-team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
+      {path: 'join-team', name: JOIN_TEAM, component: joinTeam, meta: {isProfile: true, layout: 'simple'}},
+      {path: 'create-team', name: CREATE_TEAM, component: createTeam, meta: {isProfile: true, layout: 'simple'}},
     ],
   },
 ];