Add team mutations and pages

client/src/components/profile/ProfileSidebar.vue

@@ -21,6 +21,7 @@
         </div>
         <div
           class="profile-sidebar__item"
+          v-if="me.isTeacher"
           @click="close">
           <router-link
             :to="myTeamPage"
@@ -64,40 +65,40 @@
 
   import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
-  import sidebarMixin from '@/mixins/sidebar';
+  import sidebar from '@/mixins/sidebar';
+  import me from '@/mixins/me';
   import LogoutWidget from '@/components/LogoutWidget';
   import {MY_TEAM} from '@/router/me.names';
 
   export default {
 
-    mixins: [sidebarMixin],
+    mixins: [sidebar, me],
 
     components: {
       LogoutWidget,
       ClassSelectionWidget,
       ProfileWidget,
-      Cross
+      Cross,
     },
 
     computed: {
       myTeamPage() {
         return {
-          name: MY_TEAM
+          name: MY_TEAM,
         };
-      }
+      },
     },
 
     methods: {
       close() {
         this.closeSidebar('profile');
-      }
+      },
     },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   $desktop-width: 333px;
 

client/src/graphql/gql/meQuery.gql

@@ -2,6 +2,16 @@
 query MeQuery {
   me {
     ...UserParts
+    team {
+      name
+      code
+      id
+      members {
+        firstName
+        lastName
+        id
+      }
+    }
     isTeacher
     permissions
     onboardingVisited

client/src/graphql/gql/mutations/createTeam.gql

@@ -0,0 +1,9 @@
+mutation CreateTeamMutation($input: CreateTeamInput!) {
+  createTeam(input: $input) {
+    success
+    team {
+      name
+      code
+    }
+  }
+}

client/src/graphql/gql/mutations/joinTeam.gql

@@ -0,0 +1,9 @@
+mutation JoinTeamMutation($input: JoinTeamInput!) {
+  joinTeam(input: $input) {
+    success
+    team {
+      name
+      code
+    }
+  }
+}

client/src/mixins/me.js

@@ -10,6 +10,7 @@ export default {
         permissions: [],
         schoolClasses: [],
         isTeacher: false,
+        team: null
       },
       showPopover: false,
     };

client/src/pages/me/createTeam.vue

@@ -13,12 +13,15 @@
 </template>
 
 <script>
-  import addSchoolClassMixin from '@/mixins/add-school-class';
+  import addTeamMixin from '@/mixins/add-team';
 
   import JoinForm from '@/components/profile/JoinForm';
 
+  import CREATE_TEAM_MUTATION from '@/graphql/gql/mutations/createTeam.gql';
+  import {MY_TEAM} from '@/router/me.names';
+
   export default {
-    mixins: [addSchoolClassMixin],
+    mixins: [addTeamMixin],
 
     components: {
       JoinForm
@@ -35,22 +38,20 @@
         this.error = '';
       },
       createTeam(name) {
-        throw new Error('not implemented', name);
+        this.$apollo.mutate({
-        // let self = this;
+          mutation: CREATE_TEAM_MUTATION,
-        // this.$apollo.mutate({
+          variables: {
-        //   mutation: CREATE_CLASS_MUTATION,
+            input: {
-        //   variables: {
+              name,
-        //     input: {
+            },
-        //       name,
+          },
-        //     },
+          update: (store, {data: {createTeam: {team}}}) => {
-        //   },
+            this.addTeam(store, team);
-        //   update(store, {data: {createSchoolClass: {schoolClass}}}) {
+            this.$router.push({
-        //     self.addSchoolClass(store, schoolClass);
+              name: MY_TEAM,
-        //     self.$router.push({
+            });
-        //       name: 'my-class',
+          },
-        //     });
+        });
-        //   },
-        // });
       },
       cancel() {
         this.$router.go(-1);
@@ -58,10 +59,3 @@
     },
   };
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .create-class {
-  }
-</style>

client/src/pages/me/showTeamCode.vue

@@ -0,0 +1,17 @@
+<template>
+  <show-code
+    :name="me.team.name"
+    :code="me.team.code"
+    class="show-school-class-code"
+    type="Team"/>
+</template>
+
+<script>
+  import me from '@/mixins/me';
+  import ShowCode from '@/components/profile/ShowCode';
+
+  export default {
+    mixins: [me],
+    components: {ShowCode},
+  };
+</script>

client/src/router/me.names.js

@@ -1,3 +1,5 @@
 export const MY_TEAM = 'my-team';
 export const JOIN_TEAM = 'join-team';
 export const CREATE_TEAM = 'create-team';
+export const SHOW_SCHOOL_CLASS_CODE = 'show-school-class-code';
+export const SHOW_TEAM_CODE = 'show-teams-code';

client/src/router/me.routes.js

@@ -4,12 +4,13 @@ import myClass from '@/pages/myClass';
 import activity from '@/pages/activity';
 import oldClasses from '@/pages/oldClasses';
 import createClass from '@/pages/createClass';
-import showCode from '@/pages/showCode';
+import showSchoolClassCode from '@/pages/me/showSchoolClassCode';
-import myTeam from '@/pages/me/team';
+import showTeamCode from '@/pages/me/showTeamCode';
+import myTeam from '@/pages/me/myTeam';
 import joinTeam from '@/pages/me/joinTeam';
 import createTeam from '@/pages/me/createTeam';
 
-import {JOIN_TEAM, MY_TEAM, CREATE_TEAM} from './me.names';
+import {CREATE_TEAM, JOIN_TEAM, MY_TEAM, SHOW_SCHOOL_CLASS_CODE, SHOW_TEAM_CODE} from './me.names';
 
 export default [
   {
@@ -17,7 +18,7 @@ export default [
     component: profilePage,
     children: [
       {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
-      {path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
+      {path: 'class', alias: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
       {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
       {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
       {
@@ -26,11 +27,29 @@ export default [
         component: oldClasses,
         meta: {isProfile: true},
       },
-      {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
+      {
-      {path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
+        path: 'class/create',
-      {path: 'my-team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
+        alias: 'create-class',
-      {path: 'join-team', name: JOIN_TEAM, component: joinTeam, meta: {isProfile: true, layout: 'simple'}},
+        name: 'create-class',
-      {path: 'create-team', name: CREATE_TEAM, component: createTeam, meta: {isProfile: true, layout: 'simple'}},
+        component: createClass,
+        meta: {layout: 'simple'},
+      },
+      {
+        path: 'class/code',
+        alias: 'show-code',
+        name: SHOW_SCHOOL_CLASS_CODE,
+        component: showSchoolClassCode,
+        meta: {layout: 'simple'},
+      },
+      {path: 'team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
+      {path: 'team/join', name: JOIN_TEAM, component: joinTeam, meta: {isProfile: true, layout: 'simple'}},
+      {path: 'team/create', name: CREATE_TEAM, component: createTeam, meta: {isProfile: true, layout: 'simple'}},
+      {
+        path: 'team/code',
+        name: SHOW_TEAM_CODE,
+        component: showTeamCode,
+        meta: {layout: 'simple'},
+      },
     ],
   },
 ];