Add edit objective form wizard to client

client/src/App.vue

@@ -15,6 +15,7 @@
   import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
   import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
   import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
+  import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
 
   export default {
     name: 'App',
@@ -28,7 +29,8 @@
       EditContentBlockWizard,
       NewRoomEntryWizard,
       EditRoomEntryWizard,
-      NewObjectiveGroupWizard
+      NewObjectiveGroupWizard,
+      EditObjectiveGroupWizard
     },
 
     computed: {

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

@@ -0,0 +1,107 @@
+<template>
+  <objective-group-form
+    :title="title"
+    :objectives="objectives"
+    @save="saveObjectiveGroup"
+    @hide="hideModal"
+  ></objective-group-form>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  import ObjectiveGroupForm from '@/components/objective-groups/ObjectiveGroupForm';
+  import AddContentElement from '@/components/AddContentElement';
+
+  import UPDATE_OBJECTIVE_GROUP_MUTATION from '@/graphql/gql/mutations/updateObjectiveGroup.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+  import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/objectiveGroupQuery.gql';
+
+  export default {
+    components: {
+      AddContentElement,
+      Modal,
+      ObjectiveGroupForm
+    },
+
+    computed: {
+      title() {
+        if (this.$store.state.objectiveGroupType === 'society') {
+          return 'Gesellschaft';
+        }
+        return 'Sprache & Kommunikation';
+      },
+      objectives() {
+        return this.objectiveGroup.objectives.edges.map(edge => edge.node)
+      }
+    },
+
+    methods: {
+      saveObjectiveGroup(objectives) {
+        const objectiveGroup = {
+          id: this.$store.state.currentObjectiveGroup,
+          objectives,
+        };
+        this.$apollo.mutate({
+          mutation: UPDATE_OBJECTIVE_GROUP_MUTATION,
+          variables: {
+            input: {
+              objectiveGroup
+            }
+          },
+          // todo: make update work
+          // update: (store, {data: {addObjectiveGroup: {objectiveGroup}}}) => {
+          //   const query = MODULE_DETAILS_QUERY;
+          //   const variables = {slug: this.$route.params.slug};
+          //   const data = store.readQuery({query, variables});
+          //   debugger;
+          //   if (data.module && data.module.objectiveGroups) {
+          //     data.module.objectiveGroups.edges.push({
+          //       node: objectiveGroup,
+          //       __typename: 'ObjectiveGroupNode'
+          //     });
+          //     store.writeQuery({query, variables, data});
+          //   }
+          //
+          // }
+          refetchQueries: [{
+            query: MODULE_DETAILS_QUERY,
+            variables: {
+              slug: this.$route.params.slug
+            }
+          }]
+
+        }).then(() => {
+          this.hideModal();
+        });
+      },
+      hideModal() {
+        this.$store.dispatch('hideModal');
+      },
+    },
+
+    apollo: {
+      objectiveGroup() {
+        return {
+          query: OBJECTIVE_GROUP_QUERY,
+          variables: {
+            id: this.$store.state.currentObjectiveGroup
+          }
+        }
+      }
+    },
+
+    data() {
+      return {
+        objectiveGroup: {
+          objectives: {
+            edges: []
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,27 +1,15 @@
 <template>
-  <modal class="new-objective-group-wizard">
+  <objective-group-form
-    <template slot="header">
+    :title="title"
-      <h4 class="new-objective-group-wizard__heading">Lernziele: {{title}}</h4>
+    :objectives="objectives"
-    </template>
+    @save="saveObjectiveGroup"
-    
+    @hide="hideModal"
-    <objective-form
+  ></objective-group-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 ObjectiveGroupForm from '@/components/objective-groups/ObjectiveGroupForm';
   import AddContentElement from '@/components/AddContentElement';
 
   import NEW_OBJECTIVE_GROUP_MUTATION from '@/graphql/gql/mutations/addObjectiveGroup.gql';
@@ -31,7 +19,7 @@
     components: {
       AddContentElement,
       Modal,
-      ObjectiveForm
+      ObjectiveGroupForm
     },
 
     computed: {
@@ -44,18 +32,11 @@
     },
 
     methods: {
-      addObjective() {
+      saveObjectiveGroup(objectives) {
-        this.objectives.push({});
-      },
-      updateObjective(text, index) {
-        this.objectives.splice(index, 1, {text});
-      },
-      saveObjectiveGroup() {
-        console.log('saving');
         const objectiveGroup = {
           title: this.$store.state.objectiveGroupType,
-          objectives: this.objectives,
+          module: this.$store.state.parentModule,
-          module: this.$store.state.parentModule
+          objectives,
         };
         this.$apollo.mutate({
           mutation: NEW_OBJECTIVE_GROUP_MUTATION,
@@ -106,9 +87,5 @@
 </script>
 
 <style scoped lang="scss">
-  .new-objective-group-wizard {
+
-    &__heading {
-      margin-bottom: 0;
-    }
-  }
 </style>

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

@@ -2,10 +2,10 @@
   <div class="objective-form">
     <modal-input class="objective-form__input"
                  placeholder="Lernziel erfassen..."
-                 :value="objective.value"
+                 :value="objective.text"
                  @input="$emit('input', $event)"
     ></modal-input>
-    <a class="icon-button">
+    <a class="icon-button" @click="$emit('delete')">
       <trash-icon class="icon-button__icon"></trash-icon>
     </a>
   </div>
@@ -14,7 +14,7 @@
 
 <script>
   import TrashIcon from '@/components/icons/TrashIcon';
-  import ModalInput from "@/components/ModalInput";
+  import ModalInput from '@/components/ModalInput';
 
   export default {
     props: ['objective'],

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

@@ -3,6 +3,10 @@
     <div class="objective-group__actions">
       <visibility-action :block="group">
       </visibility-action>
+      <a @click="editObjectiveGroup()" v-if="group.mine" class="objective-group__action-button">
+        <pen-icon class="objective-group__action-icon action-icon"></pen-icon>
+      </a>
+
     </div>
 
     <h4>{{group.displayTitle}}</h4>
@@ -19,6 +23,7 @@
 <script>
   import VisibilityAction from '@/components/visibility/VisibilityAction';
   import EyeIcon from '@/components/icons/EyeIcon';
+  import PenIcon from '@/components/icons/PenIcon';
 
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
@@ -32,7 +37,8 @@
 
     components: {
       VisibilityAction,
-      EyeIcon
+      EyeIcon,
+      PenIcon
     },
 
     apollo: {
@@ -45,6 +51,12 @@
       canManageContent() {
         return this.me.permissions.includes('users.can_manage_school_class_content');
       }
+    },
+
+    methods: {
+      editObjectiveGroup() {
+        this.$store.dispatch('editObjectiveGroup', this.group.id);
+      }
     }
   }
 </script>

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

@@ -0,0 +1,64 @@
+<template>
+  <modal class="objective-group-form">
+    <template slot="header">
+      <h4 class="objective-group-form__heading">Lernziele: {{title}}</h4>
+    </template>
+
+    <objective-form
+      :objective="objective"
+      v-for="(objective, index) in initialObjectives"
+      @input="updateObjective($event, index)"
+      @delete="removeObjective(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="$emit('save', initialObjectives)">Speichern</a>
+      <a class="button" @click="$emit('hide')">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 {
+    props: ['title', 'objectives'],
+
+    components: {
+      AddContentElement,
+      Modal,
+      ObjectiveForm
+    },
+
+    methods: {
+      addObjective() {
+        this.initialObjectives.push({});
+      },
+      updateObjective(text, index) {
+        this.initialObjectives.splice(index, 1, {text});
+      },
+      removeObjective(index) {
+        this.initialObjectives.splice(index, 1);
+      }
+    },
+
+    data() {
+      return {
+        initialObjectives: this.objectives
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .objective-group-form {
+    &__heading {
+      margin-bottom: 0;
+    }
+  }
+</style>

client/src/graphql/client.js

@@ -44,7 +44,8 @@ const cache = new InMemoryCache({
       contentBlock: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ContentBlockNode', id: args.id}),
       chapter: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ChapterNode', id: args.id}),
       assignment: (_, args, {getCacheKey}) => getCacheKey({__typename: 'AssignmentNode', id: args.id}),
-      objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id})
+      objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id}),
+      objectiveGroup: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveGroupNode', id: args.id})
     }
   }
 });

client/src/graphql/gql/fragments/objectiveGroupParts.gql

@@ -2,6 +2,7 @@ fragment ObjectiveGroupParts on ObjectiveGroupNode {
   id
   title
   displayTitle
+  mine
   owner {
     id
   }

client/src/graphql/gql/mutations/updateObjectiveGroup.gql

@@ -0,0 +1,16 @@
+#import "../fragments/objectiveGroupParts.gql"
+mutation UpdateObjectiveGroup($input: UpdateObjectiveGroupInput!) {
+  updateObjectiveGroup(input: $input) {
+    objectiveGroup {
+      ...ObjectiveGroupParts
+      objectives {
+        edges {
+          node {
+            id
+            text
+          }
+        }
+      }
+    }
+  }
+}

client/src/graphql/gql/objectiveGroupQuery.gql

@@ -0,0 +1,14 @@
+#import "./fragments/objectiveGroupParts.gql"
+query ObjectiveGroupQuery($id: ID!) {
+  objectiveGroup(id: $id) {
+    ...ObjectiveGroupParts
+    objectives {
+      edges {
+        node {
+          id
+          text
+        }
+      }
+    }
+  }
+}

client/src/store/index.js

@@ -16,7 +16,8 @@ export default new Vuex.Store({
     currentRoomEntry: '',
     parentRoom: null,
     parentModule: '',
-    objectiveGroupType: ''
+    objectiveGroupType: '',
+    currentObjectiveGroup: ''
   },
 
   getters: {},
@@ -37,6 +38,7 @@ export default new Vuex.Store({
       commit('setParentRoom', null);
       commit('setParentModule', '');
       commit('setObjectiveGroupType', '');
+      commit('setCurrentObjectiveGroup', '');
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -65,6 +67,10 @@ export default new Vuex.Store({
       commit('setObjectiveGroupType', type);
       dispatch('showModal', 'new-objective-group-wizard');
     },
+    editObjectiveGroup({commit, dispatch}, payload) {
+      commit('setCurrentObjectiveGroup', payload);
+      dispatch('showModal', 'edit-objective-group-wizard');
+    },
     showModal({commit}, payload) {
       document.body.classList.add('no-scroll'); // won't get at the body any other way
       commit('setModal', payload);
@@ -107,6 +113,9 @@ export default new Vuex.Store({
     },
     setObjectiveGroupType(state, payload) {
       state.objectiveGroupType = payload;
+    },
+    setCurrentObjectiveGroup(state, payload) {
+      state.currentObjectiveGroup = payload;
     }
   }
 })