Add "create class" view

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

@@ -16,16 +16,52 @@ describe('Class Management', () => {
   });
 
   it('should join class', () => {
+    const name = 'KF1A';
+    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
+    const __typename = 'SchoolClassNode';
+
+    let localMe = {
+      ...me
+    };
+
     cy.mockGraphqlOps({
       operations: {
-        MeQuery: me,
+        MeQuery: localMe,
+        // JoinClass() {
+        //   // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
+        //   let schoolClass = {
+        //     id,
+        //     name,
+        //     // __typename
+        //   };
+        //   // localMe.me.schoolClasses.edges.push({
+        //   //   node: schoolClass,
+        //   //   __typename: 'SchoolClassNodeEdge'
+        //   // });
+        //   return {
+        //     joinClass: {
+        //       success: true,
+        //       schoolClass
+        //     }
+        //   }
+        // },
         JoinClass: {
           joinClass: {
             success: true,
             schoolClass: {
-              id: "U2Nob29sQ2xhc3NOb2RlOjI=",
+              name,
-              name: "KF1A",
+              id
-              __typename: "SchoolClassNode"
+            }
+          }
+        },
+        MySchoolClassQuery: {
+          me: {
+            ...selectedClass.me,
+            selectedClass: {
+              __typename,
+              name,
+              id,
+              members: []
             }
           }
         }
@@ -37,7 +73,7 @@ describe('Class Management', () => {
     cy.get('[data-cy=header-user-widget]').within(() => {
       cy.get('[data-cy=user-widget-avatar]').click();
     });
-
+    //
     cy.get('[data-cy=class-selection]').click();
     cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
     cy.get('[data-cy=class-selection]').click();
@@ -47,12 +83,16 @@ describe('Class Management', () => {
     cy.get('[data-cy=input-class-code]').type('XXXX');
     cy.get('[data-cy=join-class]').click();
 
+    cy.get('[data-cy=school-class-name]').should('contain', name);
+    cy.get('[data-cy=current-class-name]').should('contain', name);
+
     cy.get('[data-cy=header-user-widget]').within(() => {
       cy.get('[data-cy=user-widget-avatar]').click();
     });
 
     cy.get('[data-cy=class-selection]').click();
     cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
+    //
   });
 
   it('should not be able to leave class', () => {
@@ -169,5 +209,77 @@ describe('Class Management', () => {
     cy.get('[data-cy=edit-class-name-input]').type('{selectall}{backspace}').type(className);
     cy.get('[data-cy=modal-save-button]').click();
     cy.get('[data-cy=school-class-name]').should('contain', className);
-  })
+  });
+
+  it.only('creates a new class', () => {
+    const name = 'Moordale';
+    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
+    const __typename = "SchoolClassNode";
+    let localMe = {...me};
+
+    cy.mockGraphqlOps({
+      operations: {
+        MeQuery: () => {
+          return localMe;
+        },
+        CreateSchoolClass() {
+          // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
+          let schoolClass = {
+            id,
+            name,
+            __typename
+          };
+          // localMe.me.schoolClasses.edges.push({
+          //   node: schoolClass,
+          //   __typename: 'SchoolClassNodeEdge'
+          // });
+          return {
+            createSchoolClass: {
+              success: true,
+              schoolClass
+            }
+          }
+        },
+        MySchoolClassQuery: {
+          me: {
+            ...selectedClass.me,
+            selectedClass: {
+              __typename,
+              name,
+              id,
+              members: []
+            }
+          }
+        }
+      }
+    });
+
+    cy.visit('/me/my-class');
+
+    cy.get('h1').should('exist');
+
+    cy.get('[data-cy=header-user-widget]').within(() => {
+      cy.get('[data-cy=user-widget-avatar]').click();
+    });
+
+    cy.get('[data-cy=class-selection]').click();
+    cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
+
+
+    cy.get('[data-cy=create-class-link]').click();
+
+    cy.get('[data-cy=input-class-name]').type(name);
+
+    cy.get('[data-cy=create-class]').click();
+
+    cy.get('[data-cy=school-class-name]').should('contain', name);
+    cy.get('[data-cy=current-class-name]').should('contain', name);
+
+    cy.get('[data-cy=header-user-widget]').within(() => {
+      cy.get('[data-cy=user-widget-avatar]').click();
+    });
+
+    cy.get('[data-cy=class-selection]').click();
+    cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
+  });
 });

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

@@ -17,7 +17,9 @@
           @click="updateSelectedClassAndHidePopover(schoolClass)">
         {{schoolClass.name}}
       </li>
-      <li class="popover-links__link popover-links__link--large popover-links__divider">Klasse erfassen</li>
+      <li class="popover-links__link popover-links__link--large popover-links__divider" data-cy="create-class-link" @click="closeSidebar">
+        <router-link :to="{name: 'create-class'}">Klasse erfassen</router-link>
+      </li>
       <li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
         <router-link :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>
       </li>
@@ -30,10 +32,9 @@
   import ChevronDown from '@/components/icons/ChevronDown';
   import CurrentClass from '@/components/school-class/CurrentClass';
 
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
-
   import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
   import sidebarMixin from '@/mixins/sidebar';
+  import meMixin from '@/mixins/me';
 
   export default {
     components: {
@@ -49,29 +50,10 @@
       }
     },
 
-    mixins: [updateSelectedClassMixin, sidebarMixin],
+    mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
-
-    apollo: {
-      me: {
-        query: ME_QUERY,
-        manual: true,
-        result({data, loading, networkStatus}) {
-          if (!loading) {
-            this.me = this.$getRidOfEdges(data).me;
-          }
-        }
-      }
-    },
 
     data() {
       return {
-        me: {
-          selectedClass: {
-            id: ''
-          },
-          permissions: [],
-          schoolClasses: []
-        },
         showPopover: false
       }
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="current-class">{{currentClassName}}</span>
+  <span class="current-class" data-cy="current-class-name">{{currentClassName}}</span>
 </template>
 
 <script>

client/src/mixins/add-school-class.js

@@ -0,0 +1,21 @@
+import ME_QUERY from '@/graphql/gql/meQuery';
+
+export default {
+  methods: {
+    addSchoolClass(store, schoolClass) {
+      const query = ME_QUERY;
+      if (schoolClass) {
+        console.log('updating school class');
+        const data = store.readQuery({query});
+        if (data) {
+          data.me.schoolClasses.edges.push({
+            node: schoolClass,
+            __typename: 'SchoolClassNodeEdge'
+          });
+          data.me.selectedClass.id = schoolClass.id;
+          store.writeQuery({query, data});
+        }
+      }
+    },
+  }
+}

client/src/pages/createClass.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="create-class">
+    <h1 class="create-class__title">Klasse erfassen</h1>
+
+    <div>
+      <div class="skillboxform-input">
+        <label for="class-name" class="skillboxform-input__label">Name</label>
+        <input
+          id="class-name"
+          class="skillbox-input skillboxform-input__input"
+          :class="{'skillboxform-input__input--error': error}"
+          data-cy="input-class-name"
+          :value="name"
+          @input="updateName">
+        <small
+          v-if="error"
+          class="skillboxform-input__error"
+          data-cy="email-local-errors"
+        >{{ 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>
+  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';
+
+  export default {
+    mixins: [addSchoolClassMixin],
+    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'
+            });
+          },
+          refetchQueries: [{
+            query: MY_SCHOOL_CLASS_QUERY
+          }]
+        });
+      },
+      cancel() {
+        this.$router.go(-1);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .create-class {
+  }
+</style>

client/src/pages/joinClass.vue

@@ -30,9 +30,13 @@
 
 <script>
   import JOIN_CLASS_MUTATION from '@/graphql/gql/mutations/joinClass.gql';
-  import ME_QUERY from '@/graphql/gql/meQuery.gql';
+  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
+
+  import addSchoolClassMixin from '@/mixins/add-school-class';
 
   export default {
+    mixins: [addSchoolClassMixin],
+
     data: () => ({
       code: '',
       error: ''
@@ -44,6 +48,7 @@
         this.error = '';
       },
       joinClass(code) {
+        let self = this;
         this.$apollo.mutate({
           mutation: JOIN_CLASS_MUTATION,
           variables: {
@@ -52,20 +57,13 @@
             }
           },
           update(store, {data: {joinClass: {schoolClass}}}) {
-            if (schoolClass) {
+            self.addSchoolClass(store, schoolClass);
-              const data = store.readQuery({query: ME_QUERY});
+            self.$router.push({name: 'my-class'});
-              if (data) {
+          },
-                data.me.schoolClasses.edges.push({
+          refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}]
-                  node: schoolClass,
-                  __typename: 'SchoolClassNode'
-                });
-                store.writeQuery({query: ME_QUERY, data});
-              }
-            }
-          }
         })
           .then(() => {
-            this.$router.push({name: 'my-class'});
+
           })
           .catch(e => {
             console.debug(e);

client/src/router/index.js

@@ -32,6 +32,7 @@ import registration from '@/pages/registration'
 import waitForClass from '@/pages/waitForClass'
 import joinClass from '@/pages/joinClass'
 import oldClasses from '@/pages/oldClasses';
+import createClass from '@/pages/createClass';
 
 import store from '@/store/index';
 
@@ -118,7 +119,7 @@ const routes = [
         component: oldClasses,
         meta: {isProfile: true}
       },
-
+      {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
     ]
   },
   {path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},