Add modal for objective group addition

client/src/App.vue

@@ -14,6 +14,7 @@
   import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
   import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
   import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
+  import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
 
   export default {
     name: 'App',
@@ -26,7 +27,8 @@
       NewContentBlockWizard,
       EditContentBlockWizard,
       NewRoomEntryWizard,
-      EditRoomEntryWizard
+      EditRoomEntryWizard,
+      NewObjectiveGroupWizard
     },
 
     computed: {

client/src/components/AddObjectiveGroupButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="add-objective-group-button" @click="addObjectiveGroup()">
+    <add-icon class="add-objective-group-button__icon"></add-icon>
+    <div class="add-objective-group-button__text">Zusätzlich Lernziele für «{{typeDescription}}» erfassen</div>
+  </div>
+</template>
+
+<script>
+  import AddIcon from '@/components/icons/AddIcon';
+
+  export default {
+    props: ['type', 'module'],
+
+    components: {
+      AddIcon
+    },
+
+    computed: {
+      typeDescription() {
+        if (this.type === 'society') {
+          return 'Gesellschaft'
+        }
+        return 'Sprache & Kommunikation';
+      }
+    },
+
+    methods: {
+      addObjectiveGroup() {
+        this.$store.dispatch('addObjectiveGroup', {
+          module: this.module,
+          type: this.type
+        });
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .add-objective-group-button {
+    display: grid;
+    grid-template-columns: 45px auto;
+    align-items: center;
+    margin-top: -20px;
+    margin-bottom: 35px;
+    cursor: pointer;
+
+    &__icon {
+      width: 25px;
+      height: 25px;
+      fill: $color-grey;
+    }
+
+    &__text {
+      color: $color-grey;
+      font-family: $sans-serif-font-family;
+    }
+  }
+</style>

client/src/components/modules/Module.vue

@@ -10,19 +10,25 @@
     <h3 id="objectives">Lernziele</h3>
 
     <objective-groups :groups="languageCommunicationObjectiveGroups"></objective-groups>
+    <add-objective-group-button type="languageCommunication" :module="module.id"></add-objective-group-button>
+
     <objective-groups :groups="societyObjectiveGroups"></objective-groups>
+    <add-objective-group-button type="society" :module="module.id"></add-objective-group-button>
 
     <chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
     <h3 id="objectives-confirm">Alles klar?</h3>
 
-    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="languageCommunicationObjectiveGroups" :control="true"></objective-groups>
-    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="societyObjectiveGroups" :control="true"></objective-groups>
+    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="languageCommunicationObjectiveGroups"
+                      :control="true"></objective-groups>
+    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="societyObjectiveGroups"
+                      :control="true"></objective-groups>
   </div>
 </template>
 
 <script>
-  import ObjectiveGroups from '@/components/modules/ObjectiveGroups.vue';
-  import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl.vue';
+  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';
   import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
@@ -33,6 +39,7 @@
     components: {
       ObjectiveGroups,
       ObjectiveGroupControl,
+      AddObjectiveGroupButton,
       Chapter
     },
 

client/src/components/objective-groups/NewObjectiveGroupWizard.vue

@@ -0,0 +1,102 @@
+<template>
+  <modal class="new-objective-group-wizard">
+    <template slot="header">
+      <h4 class="new-objective-group-wizard__heading">Lernziele: {{title}}</h4>
+    </template>
+
+    <objective-form
+      :objective="objective"
+      v-for="(objective, index) in objectives"
+      @input="updateObjective($event, index)"
+      :key="index"></objective-form>
+    <add-content-element @add-element="addObjective"></add-content-element>
+
+    <div slot="footer">
+      <a class="button button--primary" data-cy="modal-save-button" @click="saveObjectiveGroup">Speichern</a>
+      <a class="button" @click="hideModal">Abbrechen</a>
+    </div>
+
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import ObjectiveForm from '@/components/objective-groups/ObjectiveForm';
+  import AddContentElement from '@/components/AddContentElement';
+
+  export default {
+    components: {
+      AddContentElement,
+      Modal,
+      ObjectiveForm
+    },
+
+    computed: {
+      title() {
+        if (this.$store.state.objectiveGroupType === 'society') {
+          return 'Gesellschaft';
+        }
+        return 'Sprache & Kommunikation';
+      }
+    },
+
+    methods: {
+      addObjective() {
+        this.objectives.push({});
+      },
+      updateObjective(value) {
+        console.log(value);
+      },
+      saveObjectiveGroup() {
+        console.log('saving');
+        this.$apollo.mutate({
+          mutation: NEW_OBJECTIVE_GROUP_MUTATION,
+          variables: {
+            input: {
+              roomEntry: Object.assign({}, this.objectives, {
+                room: this.room.id
+              })
+            }
+          },
+          update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
+            try {
+              const query = ROOM_ENTRIES_QUERY;
+              const variables = {slug: this.room.slug};
+              const data = store.readQuery({query, variables});
+              if (data.room && data.room.roomEntries) {
+                data.room.roomEntries.edges.unshift({
+                  node: roomEntry,
+                  __typename: 'RoomEntryNode'
+                });
+                store.writeQuery({query, variables, data});
+              }
+            } catch (e) {
+              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+            }
+          }
+        }).then(() => {
+          this.hideModal();
+        });
+      },
+      hideModal() {
+        this.$store.dispatch('hideModal');
+      },
+    },
+
+    data() {
+      return {
+        objectives: [
+          {},
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .new-objective-group-wizard {
+    &__heading {
+      margin-bottom: 0;
+    }
+  }
+</style>

client/src/components/objective-groups/ObjectiveForm.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="objective-form">
+    <modal-input class="objective-form__input"
+                 placeholder="Lernziel erfassen..."
+                 :value="objective.value"
+                 @input="$emit('input', $event)"
+    ></modal-input>
+    <a class="icon-button">
+      <trash-icon class="icon-button__icon"></trash-icon>
+    </a>
+  </div>
+
+</template>
+
+<script>
+  import TrashIcon from '@/components/icons/TrashIcon';
+  import ModalInput from "@/components/ModalInput";
+
+  export default {
+    props: ['objective'],
+
+    components: {
+      ModalInput,
+      TrashIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .objective-form {
+    display: grid;
+    grid-template-columns: 1fr 50px;
+    margin-bottom: 10px;
+
+    &__input {
+      width: $modal-input-width;
+    }
+  }
+</style>

client/src/store/index.js

@@ -14,7 +14,9 @@ export default new Vuex.Store({
     filterForSchoolClass: '',
     currentContentBlock: '',
     currentRoomEntry: '',
-    parentRoom: null
+    parentRoom: null,
+    parentModule: '',
+    objectiveGroupType: ''
   },
 
   getters: {},
@@ -23,9 +25,18 @@ export default new Vuex.Store({
     setSpecialContainerClass({commit}, payload) {
       commit('setSpecialContainerClass', payload);
     },
-    hideModal({commit}) {
+    hideModal({commit, dispatch}) {
       document.body.classList.remove('no-scroll'); // won't get at the body any other way
       commit('setModal', false);
+      dispatch('resetModalState');
+    },
+    resetModalState({commit}) {
+      commit('setCurrentRoomEntry', '');
+      commit('setCurrentContentBlock', '');
+      commit('setContentBlockPosition', {});
+      commit('setParentRoom', null);
+      commit('setParentModule', '');
+      commit('setObjectiveGroupType', '');
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -49,6 +60,11 @@ export default new Vuex.Store({
       commit('setCurrentRoomEntry', payload);
       dispatch('showModal', 'edit-room-entry-wizard');
     },
+    addObjectiveGroup({commit, dispatch}, {module, type}) {
+      commit('setParentModule', module);
+      commit('setObjectiveGroupType', type);
+      dispatch('showModal', 'new-objective-group-wizard');
+    },
     showModal({commit}, payload) {
       document.body.classList.add('no-scroll'); // won't get at the body any other way
       commit('setModal', payload);
@@ -85,6 +101,12 @@ export default new Vuex.Store({
     },
     setCurrentRoomEntry(state, payload) {
       state.currentRoomEntry = payload;
+    },
+    setParentModule(state, payload) {
+      state.parentModule = payload;
+    },
+    setObjectiveGroupType(state, payload) {
+      state.objectiveGroupType = payload;
     }
   }
 })