From b84aa504430024bf21b57753bd709fd0d7a6b0b0 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 25 Mar 2021 17:58:52 +0100
Subject: [PATCH] Add update team name mutation and modal

---
 client/src/App.vue                            |  3 +-
 .../components/profile/EditTeamNameWizard.vue | 69 +++++++++++++++++++
 .../src/graphql/gql/mutations/updateTeam.gql  |  8 +++
 client/src/pages/me/joinTeam.vue              |  1 +
 client/src/pages/me/myTeam.vue                |  7 ++
 client/src/store/index.js                     |  5 +-
 schema.graphql                                | 13 ++++
 7 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/profile/EditTeamNameWizard.vue
 create mode 100644 client/src/graphql/gql/mutations/updateTeam.gql

diff --git a/client/src/App.vue b/client/src/App.vue
index 540e74da..2680ec21 100644
--- a/client/src/App.vue
+++ b/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,
diff --git a/client/src/components/profile/EditTeamNameWizard.vue b/client/src/components/profile/EditTeamNameWizard.vue
new file mode 100644
index 00000000..7e2cf48a
--- /dev/null
+++ b/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>
diff --git a/client/src/graphql/gql/mutations/updateTeam.gql b/client/src/graphql/gql/mutations/updateTeam.gql
new file mode 100644
index 00000000..d3f74c42
--- /dev/null
+++ b/client/src/graphql/gql/mutations/updateTeam.gql
@@ -0,0 +1,8 @@
+mutation UpdateTeam($input: UpdateTeamInput!) {
+  updateTeam(input: $input) {
+    success
+    team {
+      name
+    }
+  }
+}
diff --git a/client/src/pages/me/joinTeam.vue b/client/src/pages/me/joinTeam.vue
index 2838f5c6..ed3910c5 100644
--- a/client/src/pages/me/joinTeam.vue
+++ b/client/src/pages/me/joinTeam.vue
@@ -38,6 +38,7 @@
         this.$router.push(this.teamRoute);
       },
       joinTeam(code) {
+        // todo
         console.log('joinTeam', code);
       },
     },
diff --git a/client/src/pages/me/myTeam.vue b/client/src/pages/me/myTeam.vue
index 43f09980..c883884b 100644
--- a/client/src/pages/me/myTeam.vue
+++ b/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>
 
diff --git a/client/src/store/index.js b/client/src/store/index.js
index abd69f39..4d0722f5 100644
--- a/client/src/store/index.js
+++ b/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');
diff --git a/schema.graphql b/schema.graphql
index a1480fd3..9bedcc40 100644
--- a/schema.graphql
+++ b/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!