Remove school class select from new room form

client/cypress/integration/frontend/rooms/rooms-page.spec.js

@@ -83,4 +83,52 @@ describe('The Rooms Page', () => {
     cy.getByDataCy('room-widget').should('have.length', 1);
     cy.get('[data-cy=add-room]').should('not.exist');
   });
+
+  it.only('adds a room as teacher', () => {
+    const getRoom = (title, appearance, description) => {
+      let id = title.toLowerCase().replace(' ', '-');
+      return {
+        id,
+        slug: id,
+        title: title,
+        entryCount: 3,
+        appearance: appearance,
+        description: description,
+      };
+    };
+    let rooms = [
+      getRoom('First Room', 'blue', 'Some description')
+    ];
+
+    const operations = {
+      MeQuery: getMinimalMe({isTeacher: true}),
+      RoomsQuery() {
+        return {
+          rooms: {
+            edges: rooms.map(room => ({node: room})),
+          },
+        };
+      },
+      AddRoom({input: {room: {title, appearance, description}}}) {
+        const room = getRoom(title, appearance, description);
+        rooms.push(room);
+        return {
+          addRoom: {
+            room,
+          },
+        };
+      },
+    };
+    cy.mockGraphqlOps({
+      operations,
+    });
+    cy.visit('/rooms');
+    cy.getByDataCy('room-widget').should('have.length', 1);
+    cy.getByDataCy('add-room').click();
+    cy.getByDataCy('page-form-input-titel').type('Strg F');
+    cy.getByDataCy('school-class-select').should('not.exist');
+    cy.getByDataCy('color-select').eq(2).click();
+    cy.getByDataCy('room-form-save').click();
+    cy.getByDataCy('room-widget').should('have.length', 2);
+  });
 });

client/src/components/ColorChooser.vue

@@ -4,6 +4,7 @@
       :key="index"
       :class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}"
       class="color-chooser__color-wrapper"
+      data-cy="color-select"
       v-for="(color, index) in colors"
       @click="$emit('input', color.name)">
       <div

client/src/components/rooms/RoomForm.vue

@@ -12,25 +12,6 @@
       label="Beschreibung"
       type="textarea"/>
 
-    <label
-      class="room-form__property-heading"
-      for="room-class">Klasse</label>
-    <select
-      v-model="localRoom.schoolClass"
-      class="skillbox-input room-form__input"
-      id="room-class"
-    >
-      <option
-        :value="{}"
-        disabled
-        hidden>Klasse wählen</option>
-      <option
-        :key="schoolClass.id"
-        :value="schoolClass"
-        v-for="schoolClass in schoolClasses"
-      >{{ schoolClass.name }}
-      </option>
-    </select>
     <h2 class="room-form__property-heading">Farbe</h2>
     <color-chooser
       :selected-color="localRoom.appearance"
@@ -38,9 +19,8 @@
     />
     <template slot="footer">
       <button
-        :class="{'button--disabled': noClassSelected}"
-        :disabled="noClassSelected"
         type="submit"
+        data-cy="room-form-save"
         class="button button--primary room-form__save-button"
       >Speichern
       </button>
@@ -75,15 +55,6 @@
       };
     },
 
-    computed: {
-      schoolClasses() {
-        return this.$getRidOfEdges(this.me.schoolClasses);
-      },
-      noClassSelected() {
-        return this.localRoom.schoolClass.id === undefined;
-      }
-    },
-
     created() {
       this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
     },
@@ -108,8 +79,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .room-form {
     &__property-heading {

client/src/pages/newRoom.vue

@@ -44,7 +44,7 @@
               if (data.rooms) {
                 data.rooms.edges.push({
                   node: room,
-                  __typename: 'RoomNode'
+                  __typename: 'RoomNodeEdge'
                 });
                 store.writeQuery({query: ROOMS_QUERY, data});
               }

client/src/pages/room.vue

@@ -57,20 +57,16 @@
     },
 
     apollo: {
-      modules: {
+      room: {
         query: ROOM_ENTRIES_QUERY,
         variables() {
           return {
             slug: this.slug
           };
         },
-        manual: true,
+        update({room}) {
-        // todo: do we really need manual here? update should do the trick too
+          this.$store.dispatch('setSpecialContainerClass', room.appearance);
-        result({data, loading, networkStatus}) {
+          return this.$getRidOfEdges(room);
-          if (!loading) {
-            this.room = Object.assign({}, this.$getRidOfEdges(data).room);
-            this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
-          }
         },
         pollInterval: 5000,
       }