Add button to change the school class name

client/cypress/integration/school-class.spec.js

@@ -151,9 +151,7 @@ describe('Class Management', () => {
 
     cy.get('[data-cy=edit-class-name-link]').click();
     cy.get('[data-cy=edit-class-name-input]').type('{selectall}{backspace}').type(className);
-    cy.get('[data-cy=save-button]').click();
-    cy.get('[data-cy=class-name-heading]').should('equal', className);
-
-
+    cy.get('[data-cy=modal-save-button]').click();
+    cy.get('[data-cy=school-class-name]').should('contain', className);
   })
 });

client/src/App.vue

@@ -23,6 +23,7 @@
   import NewObjectiveWizard from '@/components/objective-groups/NewObjectiveWizard';
   import NewNoteWizard from '@/components/notes/NewNoteWizard';
   import EditNoteWizard from '@/components/notes/EditNoteWizard';
+  import EditClassNameWizard from '@/components/school-class/EditClassNameWizard';
   import FullscreenImage from '@/components/FullscreenImage';
   import FullscreenInfographic from '@/components/FullscreenInfographic';
   import FullscreenVideo from '@/components/FullscreenVideo';
@@ -49,6 +50,7 @@
       NewObjectiveWizard,
       NewNoteWizard,
       EditNoteWizard,
+      EditClassNameWizard,
       FullscreenImage,
       FullscreenInfographic,
       FullscreenVideo

client/src/components/modules/Module.vue

@@ -31,7 +31,6 @@
 <script>
   import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
   import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl.vue';
-  import AddObjectiveGroupButton from '@/components/AddObjectiveGroupButton';
   import Chapter from '@/components/Chapter.vue';
 
   import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
@@ -49,7 +48,6 @@
       BookmarkActions,
       ObjectiveGroups,
       ObjectiveGroupControl,
-      AddObjectiveGroupButton,
       Chapter
     },
 

client/src/components/profile/ClassList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="school-class">
-    <h2 class="school-class__name">{{name}}</h2>
+    <h2 class="school-class__heading"><span class="school-class__name" data-cy="school-class-name">{{name}}</span> <edit-class-name @edit="editClassName"></edit-class-name></h2>
     <div class="school-class__members school-class-members">
       <ul class="school-class-members__list simple-list simple-list--active" data-cy="active-class-members-list">
         <li
@@ -38,14 +38,24 @@
 </template>
 
 <script>
+  import EditClassName from '@/components/school-class/EditClassName';
+
   export default {
-    props: ['members', 'name', 'teacher'],
+    props: ['members', 'name', 'teacher', 'id'],
+
+    components: {
+      EditClassName
+    },
+
     methods: {
       fullName(member) {
         return `${member.firstName} ${member.lastName}`;
       },
       role({isTeacher}) {
         return isTeacher ? 'Lehrperson' : 'Schüler';
+      },
+      editClassName() {
+        this.$store.dispatch('editClassName');
       }
     },
     computed: {
@@ -68,6 +78,10 @@
       @include heading-4;
       margin-bottom: $small-spacing;
     }
+
+    &__name {
+      @include heading-2;
+    }
   }
 
   .member-item {

client/src/components/school-class/EditClassName.vue

@@ -0,0 +1,27 @@
+<template>
+  <a class="edit-class-name" @click="$emit('edit')" data-cy="edit-class-name-link">
+    <pen-icon class="edit-class-name__icon"></pen-icon>
+  </a>
+</template>
+
+<script>
+  import PenIcon from '@/components/icons/PenIcon';
+
+  export default {
+    components: {
+      PenIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .edit-class-name {
+    &__icon {
+      width: 20px;
+      height: 20px;
+      fill: $color-brand;
+    }
+  }
+</style>

client/src/components/school-class/EditClassNameWizard.vue

@@ -0,0 +1,74 @@
+<template>
+  <modal :hide-header="false" :small="true" title="Hello">
+    <h4 slot="header">Klasse bearbeiten</h4>
+    <modal-input v-on:input="name = $event"
+                 placeholder="Klassenname"
+                 data-cy="edit-class-name-input"
+                 :value="name"
+    ></modal-input>
+    <div slot="footer">
+      <a class="button button--primary" data-cy="modal-save-button"
+         @click="save">Speichern</a>
+      <a class="button" @click="hide">Abbrechen</a>
+    </div>
+
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import ModalInput from '@/components/ModalInput';
+
+  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass.gql';
+  import UPDATE_SCHOOL_CLASS_MUTATION from '@/graphql/gql/mutations/updateSchoolClass.gql';
+
+  export default {
+    components: {
+      Modal,
+      ModalInput
+    },
+
+    methods: {
+      save() {
+        this.$apollo.mutate({
+          mutation: UPDATE_SCHOOL_CLASS_MUTATION,
+          variables: {
+            input: {
+              name: this.name,
+              id: this.schoolClass.id
+            }
+          },
+          update(store, {data: {updateSchoolClass: {schoolClass: {name}}}}) {
+            let query = MY_SCHOOL_CLASS_QUERY;
+            let data = store.readQuery({query});
+            data.me.selectedClass.name = name;
+            store.writeQuery({query, data});
+          }
+        });
+        this.hide();
+      },
+      hide() {
+        this.$store.dispatch('hideModal');
+      }
+    },
+
+    apollo: {
+      schoolClass: {
+        query: MY_SCHOOL_CLASS_QUERY,
+        update(data) {
+          return this.$getRidOfEdges(data).me.selectedClass
+        }
+      }
+    },
+
+    mounted() {
+      this.name = this.schoolClass ? this.schoolClass.name : '';
+    },
+
+    data() {
+      return {
+        name: ''
+      }
+    }
+  }
+</script>

client/src/graphql/gql/mutations/updateSchoolClass.gql

@@ -0,0 +1,8 @@
+mutation UpdateSchoolClass($input: UpdateSchoolClassInput!) {
+  updateSchoolClass(input: $input) {
+    success
+    schoolClass {
+      name
+    }
+  }
+}

client/src/pages/myClass.vue

@@ -6,6 +6,7 @@
       :name="me.selectedClass.name"
       :members="me.selectedClass.members"
       :teacher="me.isTeacher"
+      :id="me.selectedClass.id"
       @remove="remove"
       @add="add"
     ></class-list>

client/src/store/index.js

@@ -166,6 +166,9 @@ export default new Vuex.Store({
     },
     editModule({commit}, payload) {
       commit('setEditModule', payload)
+    },
+    editClassName({commit, dispatch}, payload) {
+      dispatch('showModal', 'edit-class-name-wizard');
     }
   },
 

server/users/mutations.py

@@ -164,9 +164,30 @@ class AddRemoveMember(relay.ClientIDMutation):
         return cls(success=True)
 
 
+class UpdateSchoolClass(relay.ClientIDMutation):
+    class Input:
+        id = graphene.ID(required=True)
+        name = graphene.String()
+
+    success = graphene.Boolean()
+    school_class = graphene.Field(SchoolClassNode)
+
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **kwargs):
+        id = kwargs.get('id')
+        name = kwargs.get('name')
+
+        school_class = get_object(SchoolClass, id)
+        school_class.name = name
+        school_class.save()
+
+        return cls(success=True, school_class=school_class)
+
+
 class ProfileMutations:
     update_password = UpdatePassword.Field()
     update_avatar = UpdateAvatar.Field()
     update_setting = UpdateSetting.Field()
     join_class = JoinClass.Field()
     add_remove_member = AddRemoveMember.Field()
+    update_school_class = UpdateSchoolClass.Field()