Add update team name mutation and modal

client/src/App.vue

@@ -11,7 +11,6 @@
       :is="showModal"
       v-if="showModal"/>
     <component :is="layout"/>
-
   </div>
 </template>
 
@@ -32,6 +31,7 @@
   import NewNoteWizard from '@/components/notes/NewNoteWizard';
   import EditNoteWizard from '@/components/notes/EditNoteWizard';
   import EditClassNameWizard from '@/components/school-class/EditClassNameWizard';
+  import EditTeamNameWizard from '@/components/profile/EditTeamNameWizard';
   import FullscreenImage from '@/components/FullscreenImage';
   import FullscreenInfographic from '@/components/FullscreenInfographic';
   import FullscreenVideo from '@/components/FullscreenVideo';
@@ -60,6 +60,7 @@
       NewNoteWizard,
       EditNoteWizard,
       EditClassNameWizard,
+      EditTeamNameWizard,
       FullscreenImage,
       FullscreenInfographic,
       FullscreenVideo,

client/src/components/profile/EditTeamNameWizard.vue

@@ -0,0 +1,69 @@
+<template>
+  <edit-name-wizard
+    :name="name"
+    type="Team"
+    @input="name = $event"
+    @hide="hide"
+    @save="save"
+  />
+</template>
+
+<script>
+  import me from '@/mixins/me';
+  import EditNameWizard from '@/components/profile/EditNameWizard';
+  import UPDATE_TEAM_MUTATION from '@/graphql/gql/mutations/updateTeam.gql';
+  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+
+  export default {
+    mixins: [me],
+
+    components: {
+      EditNameWizard,
+    },
+
+    data() {
+      return {
+        name: ''
+      };
+    },
+
+    computed: {
+      team() {
+        return this.me.team;
+      }
+    },
+
+    mounted() {
+      this.name = this.team ? this.team.name : '';
+    },
+
+    methods: {
+      save() {
+        this.$apollo.mutate({
+          mutation: UPDATE_TEAM_MUTATION,
+          variables: {
+            input: {
+              name: this.name,
+              id: this.team.id
+            }
+          },
+          update(store, {data: {updateTeam: {team: {name}}}}) {
+            const query = ME_QUERY;
+            const data = store.readQuery({query});
+            data.me.team.name = name;
+            store.writeQuery({query, data});
+          }
+        });
+        this.hide();
+      },
+      hide() {
+        this.$store.dispatch('hideModal');
+      }
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/graphql/gql/mutations/updateTeam.gql

@@ -0,0 +1,8 @@
+mutation UpdateTeam($input: UpdateTeamInput!) {
+  updateTeam(input: $input) {
+    success
+    team {
+      name
+    }
+  }
+}

client/src/pages/me/joinTeam.vue

@@ -38,6 +38,7 @@
         this.$router.push(this.teamRoute);
       },
       joinTeam(code) {
+        // todo
         console.log('joinTeam', code);
       },
     },

client/src/pages/me/myTeam.vue

@@ -8,6 +8,7 @@
         :show-code="true"
         :name="me.team.name"
         title="Mein Team"
+        @edit="editTeamName"
       />
     </template>
     <template v-else>
@@ -53,6 +54,12 @@
         }
       };
     },
+
+    methods: {
+      editTeamName() {
+        this.$store.dispatch('editTeamName');
+      }
+    }
   };
 </script>
 

client/src/store/index.js

@@ -185,9 +185,12 @@ export default new Vuex.Store({
     editModule({commit}, payload) {
       commit('setEditModule', payload);
     },
-    editClassName({dispatch}, payload) {
+    editClassName({dispatch}) {
       dispatch('showModal', 'edit-class-name-wizard');
     },
+    editTeamName({dispatch}) {
+      dispatch('showModal', 'edit-team-name-wizard');
+    },
     deactivateUser({commit, dispatch}, payload) {
       commit('setModulePayload', payload);
       return dispatch('showModal', 'deactivate-person');

schema.graphql

@@ -378,6 +378,7 @@ type CustomMutation {
   updateOnboardingProgress: UpdateOnboardingProgress
   createTeam(input: CreateTeamInput!): CreateTeamPayload
   joinTeam(input: JoinTeamInput!): JoinTeamPayload
+  updateTeam(input: UpdateTeamInput!): UpdateTeamPayload
   addProject(input: AddProjectInput!): AddProjectPayload
   updateProject(input: UpdateProjectInput!): UpdateProjectPayload
   deleteProject(input: DeleteProjectInput!): DeleteProjectPayload
@@ -1300,6 +1301,18 @@ type UpdateSubmissionFeedbackPayload {
   clientMutationId: String
 }
 
+input UpdateTeamInput {
+  id: ID!
+  name: String
+  clientMutationId: String
+}
+
+type UpdateTeamPayload {
+  success: Boolean
+  team: TeamNode
+  clientMutationId: String
+}
+
 input UserGroupBlockVisibility {
   schoolClassId: ID!
   hidden: Boolean!