Merge branch 'feature/objectives-created-by-user'

client/src/App.vue

@@ -14,6 +14,8 @@
   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';
+  import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
 
   export default {
     name: 'App',
@@ -26,7 +28,9 @@
       NewContentBlockWizard,
       EditContentBlockWizard,
       NewRoomEntryWizard,
-      EditRoomEntryWizard
+      EditRoomEntryWizard,
+      NewObjectiveGroupWizard,
+      EditObjectiveGroupWizard
     },
 
     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/content-block-form/ContentsForm.vue

@@ -14,7 +14,6 @@
                 @input="setContentBlockType"
                 class="contents-form__task"
       ></checkbox>
-
     </template>
 
     <add-content-element class="contents-form__add"
@@ -44,9 +43,9 @@
         v-on:assignment-change-assignment="changeAssignmentAssignment"
       >
       </component>
-      <a class="contents-form__remove" v-on:click="removeElement(index)">
+      <a class="contents-form__remove icon-button" @click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
-                    class="contents-form__trash-icon"></trash-icon>
+                    class="contents-form__trash-icon icon-button__icon"></trash-icon>
       </a>
 
       <add-content-element class="contents-form__add"
@@ -267,19 +266,9 @@
     }
 
     &__remove {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      height: 50px;
     }
 
     &__trash-icon {
-      width: 25px;
-      height: 25px;
-      fill: $color-grey;
-      cursor: pointer;
-      justify-self: center;
     }
 
     &__chooser {

client/src/components/modules/Module.vue

@@ -10,29 +10,36 @@
     <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="languageCommunicationObjectiveGroups"
-    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="societyObjectiveGroups" :control="true"></objective-groups>
+                      :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 ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
-  import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl.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';
 
-  const withoutOwnerFirst = (a, b) => a.owner ? 1 : 0;
+  import {withoutOwnerFirst} from '@/helpers/sorting';
 
   export default {
     components: {
       ObjectiveGroups,
       ObjectiveGroupControl,
+      AddObjectiveGroupButton,
       Chapter
     },
 

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

@@ -0,0 +1,91 @@
+<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 NEW_OBJECTIVE_GROUP_MUTATION from '@/graphql/gql/mutations/addObjectiveGroup.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+
+  export default {
+    components: {
+      AddContentElement,
+      Modal,
+      ObjectiveGroupForm
+    },
+
+    computed: {
+      title() {
+        if (this.$store.state.objectiveGroupType === 'society') {
+          return 'Gesellschaft';
+        }
+        return 'Sprache & Kommunikation';
+      }
+    },
+
+    methods: {
+      saveObjectiveGroup(objectives) {
+        const objectiveGroup = {
+          title: this.$store.state.objectiveGroupType,
+          module: this.$store.state.parentModule,
+          objectives,
+        };
+        this.$apollo.mutate({
+          mutation: NEW_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');
+      },
+    },
+
+    data() {
+      return {
+        objectives: [
+          {},
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+</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.text"
+                 @input="$emit('input', $event)"
+    ></modal-input>
+    <a class="icon-button" @click="$emit('delete')">
+      <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/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/components/objective-groups/ObjectiveGroups.vue

@@ -15,9 +15,10 @@
 </template>
 
 <script>
-  import ObjectiveGroup from '@/components/modules/ObjectiveGroup';
+  import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
-  import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl';
+  import ObjectiveGroupControl from '@/components/objective-groups/ObjectiveGroupControl';
   import {meQuery} from '@/graphql/queries';
+  import {withoutOwnerFirst} from '@/helpers/sorting';
 
   export default {
     props: {
@@ -55,7 +56,7 @@
           return this.groups;
         } else {
           // todo: maybe this can be done a bit more elegantly
-          const groups = [...this.groups];
+          const groups = [...this.groups].sort(withoutOwnerFirst);
           const objectives = groups.map(g => g.objectives).flat(); // get all objectives in one array
           const firstGroup = Object.assign({}, groups.shift(), {objectives});
 

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/addObjectiveGroup.gql

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

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/helpers/sorting.js

@@ -0,0 +1 @@
+export const withoutOwnerFirst = (a, b) => a.owner ? 1 : -1;

client/src/store/index.js

@@ -14,7 +14,10 @@ export default new Vuex.Store({
     filterForSchoolClass: '',
     currentContentBlock: '',
     currentRoomEntry: '',
-    parentRoom: null
+    parentRoom: null,
+    parentModule: '',
+    objectiveGroupType: '',
+    currentObjectiveGroup: ''
   },
 
   getters: {},
@@ -23,9 +26,19 @@ 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', '');
+      commit('setCurrentObjectiveGroup', '');
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -49,6 +62,15 @@ 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');
+    },
+    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);
@@ -85,6 +107,15 @@ export default new Vuex.Store({
     },
     setCurrentRoomEntry(state, payload) {
       state.currentRoomEntry = payload;
+    },
+    setParentModule(state, payload) {
+      state.parentModule = payload;
+    },
+    setObjectiveGroupType(state, payload) {
+      state.objectiveGroupType = payload;
+    },
+    setCurrentObjectiveGroup(state, payload) {
+      state.currentObjectiveGroup = payload;
     }
   }
 })

client/src/styles/_buttons.scss

@@ -24,3 +24,19 @@
     background-color: $color-lightgrey;
   }
 }
+
+.icon-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+
+  &__icon {
+    width: 25px;
+    height: 25px;
+    fill: $color-grey;
+    cursor: pointer;
+    justify-self: center;
+  }
+}

server/objectives/inputs.py

@@ -0,0 +1,18 @@
+import graphene
+from graphene import InputObjectType
+
+
+class ObjectiveInput(InputObjectType):
+    text = graphene.String(required=True)
+    id = graphene.ID()
+
+
+class AddObjectiveGroupArgument(InputObjectType):
+    title = graphene.String(required=True)
+    module = graphene.ID(required=True)
+    objectives = graphene.List(ObjectiveInput)
+
+
+class UpdateObjectiveGroupArgument(InputObjectType):
+    id = graphene.ID(required=True)
+    objectives = graphene.List(ObjectiveInput)

server/objectives/mutations.py

@@ -1,8 +1,12 @@
 import graphene
 from graphene import relay, InputObjectType
+from graphql_relay import from_global_id
+
 from api.utils import get_object
+from books.models import Module
 from books.schema.inputs import UserGroupBlockVisibility
 from core.utils import set_visible_for, set_hidden_for
+from objectives.inputs import AddObjectiveGroupArgument, UpdateObjectiveGroupArgument
 from objectives.models import ObjectiveProgressStatus, Objective, ObjectiveGroup
 from objectives.schema import ObjectiveNode, ObjectiveGroupNode
 
@@ -52,6 +56,58 @@ class UpdateObjectiveGroupVisibility(relay.ClientIDMutation):
 
             objective_group.save()
 
+        return cls(objective_group=objective_group)
+
+
+class AddObjectiveGroup(relay.ClientIDMutation):
+    class Input:
+        objective_group = graphene.Argument(AddObjectiveGroupArgument)
+
+    objective_group = graphene.Field(ObjectiveGroupNode)
+
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **kwargs):
+        objective_group_data = kwargs.get('objective_group')
+        title = objective_group_data.get('title')
+        if title != 'society':
+            title = 'language_communication'
+        module_id = objective_group_data.get('module')
+        module = get_object(Module, module_id)
+        owner = info.context.user
+        new_objective_group = ObjectiveGroup.objects.create(title=title, module=module, owner=owner)
+        objectives = objective_group_data.get('objectives')
+        for objective in objectives:
+            Objective.objects.create(text=objective.get('text'), group=new_objective_group)
+        return cls(objective_group=new_objective_group)
+
+
+class UpdateObjectiveGroup(relay.ClientIDMutation):
+    class Input:
+        objective_group = graphene.Argument(UpdateObjectiveGroupArgument)
+
+    objective_group = graphene.Field(ObjectiveGroupNode)
+
+    @classmethod
+    def mutate_and_get_payload(cls, root, info, **kwargs):
+        objective_group_data = kwargs.get('objective_group')
+        id = objective_group_data.get('id')
+        objective_group = get_object(ObjectiveGroup, id)
+        objectives = objective_group_data.get('objectives')
+        existing_objective_ids = list(objective_group.objectives.values_list('id', flat=True))
+        for objective in objectives:
+            if objective.get('id') is not None:
+                objective_id = objective.get('id')
+                updated_objective = get_object(Objective, objective_id)
+                updated_objective.text = objective.get('text')
+                updated_objective.save()
+                existing_objective_ids.remove(int(from_global_id(objective_id)[1]))
+            else:
+                Objective.objects.create(text=objective.get('text'), group=objective_group)
+
+        # remove existing items that are not in payload
+        for objective_id in existing_objective_ids:
+            objective = Objective.objects.get(pk=objective_id)
+            objective.delete()
 
         return cls(objective_group=objective_group)
 
@@ -59,3 +115,5 @@ class UpdateObjectiveGroupVisibility(relay.ClientIDMutation):
 class ObjectiveMutations:
     update_objective_progress = UpdateObjectiveProgress.Field()
     update_objective_group_visibility = UpdateObjectiveGroupVisibility.Field()
+    add_objective_group = AddObjectiveGroup.Field()
+    update_objective_group = UpdateObjectiveGroup.Field()

server/objectives/schema.py

@@ -9,6 +9,7 @@ from objectives.models import ObjectiveGroup, Objective, ObjectiveProgressStatus
 class ObjectiveGroupNode(DjangoObjectType):
     pk = graphene.Int()
     display_title = graphene.String()
+    mine = graphene.Boolean()
 
     class Meta:
         model = ObjectiveGroup
@@ -21,6 +22,9 @@ class ObjectiveGroupNode(DjangoObjectType):
     def resolve_display_title(self, *args, **kwargs):
         return self.get_title_display()
 
+    def resolve_mine(self, info, **kwargs):
+        return self.owner is not None and self.owner.pk == info.context.user.pk
+
 
 
 class ObjectiveNode(DjangoObjectType):