use cache for update, incorperate feedback

client/src/components/modules/Module.vue

@@ -25,6 +25,7 @@
   import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl.vue';
   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';
 
   export default {
     components: {
@@ -60,32 +61,25 @@
               id: objectiveId,
               done: done
             }
+          },
+          update(store, {data: {updateObjectiveProgress: {objective}}}) {
+            try {
+              if (objective) {
+                const variables = {id: objectiveId};
+                const query = OBJECTIVE_QUERY;
+                const data = store.readQuery({query, variables});
+                if (data.objective.objectiveProgress.edges.length > 0) {
+                  data.objective.objectiveProgress.edges[0].node.done = done;
+                }
+                store.writeQuery({query: OBJECTIVE_QUERY, data});
+              }
+            } catch (e) {
+              // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+            }
           }
-        }).then(() => {
+        })
-          this.updateProgress(done, objectiveId);
-        });
       },
-      updateProgress(done, objectiveId) {
+    }
-        this.module.objectiveGroups.map(group => {
-          const objective = this.findObjective(objectiveId, group);
-          if (objective) {
-            this.setStatusOnProgress(objective, done);
-          }
-        });
-      },
-      findObjective(objectiveId, group) {
-        return group.objectiveSet.filter(objective => {
-          return objective.id === objectiveId
-        })[0];
-      },
-      setStatusOnProgress(objective, done) {
-        if (objective.objectiveprogressstatusSet.length > 0) {
-          objective.objectiveprogressstatusSet[0].done = done
-        } else {
-          objective.objectiveprogressstatusSet = [{ done }] // in case the progress object did not exist
-        }
-      }
-    },
   }
 </script>
 

client/src/components/modules/ObjectiveGroupControl.vue

@@ -3,15 +3,13 @@
     <h4>{{group.title}}</h4>
 
     <ul class="objective-group__objective-list objective-group__objective-list--no-list">
-      <template v-if="objectives">
+      <li v-if="objectives" class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
-        <li class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
+          <checkbox :checked="objective.done"
-            <checkbox :checked="objective.done"
+                :item="objective"
-                  :item="objective"
+                :label="objective.text"
-                  :label="objective.text"
+                @input="updateObjectiveProgress"
-                  v-on:input="updateObjectiveProgress"
+      ></checkbox>
-        ></checkbox>
+      </li>
-        </li>
-      </template>
     </ul>
   </div>
 
@@ -37,13 +35,13 @@
         this.$emit('updateObjectiveProgress', checked, objective.id);
       },
       objectiveIsDone(objective) {
-        return objective.objectiveprogressstatusSet.length > 0 && objective.objectiveprogressstatusSet[0].done
+        return objective.objectiveProgress.length > 0 && objective.objectiveProgress[0].done
       }
     },
 
     computed: {
       objectives() {
-        return this.group.objectiveSet.map(objective => {
+        return this.group.objectives.map(objective => {
           return Object.assign({}, objective, { done: this.objectiveIsDone(objective) })
         });
       }

client/src/graphql/client.js

@@ -42,7 +42,8 @@ const cache = new InMemoryCache({
   cacheRedirects: {
     Query: {
       contentBlock: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ContentBlockNode', id: args.id}),
-      assignment: (_, args, {getCacheKey}) => getCacheKey({__typename: 'AssignmentNode', id: args.id})
+      assignment: (_, args, {getCacheKey}) => getCacheKey({__typename: 'AssignmentNode', id: args.id}),
+      objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id})
     }
   }
 });

client/src/graphql/gql/moduleDetailsQuery.gql

@@ -20,12 +20,12 @@ query ModulesQuery($slug: String!) {
         node {
           id
           title
-          objectiveSet {
+          objectives {
             edges {
               node {
                 id
                 text
-                objectiveprogressstatusSet {
+                objectiveProgress {
                   edges {
                     node {
                       id

client/src/graphql/gql/mutations/updateObjectiveProgress.gql

@@ -1,5 +1,15 @@
 mutation UpdateObjectiveProgressInput($input: UpdateObjectiveProgressInput!) {
   updateObjectiveProgress(input: $input){
-    success
+    objective {
+      id
+      objectiveProgress {
+        edges {
+          node {
+            id
+            done
+          }
+        }
+      }
+    }
   }
 }

client/src/graphql/gql/objectiveQuery.gql

@@ -0,0 +1,13 @@
+query ObjectiveQuery($id: ID!) {
+  objective(id: $id) {
+    id
+    objectiveProgress {
+      edges {
+        node {
+          id
+          done
+        }
+      }
+    }
+  }
+}

server/objectives/models.py

@@ -24,7 +24,8 @@ class Objective(models.Model):
         verbose_name_plural = 'Lernziele'
 
     text = models.CharField('text', blank=True, null=False, max_length=255)
-    group = models.ForeignKey(ObjectiveGroup, blank=False, null=False, on_delete=models.CASCADE)
+    group = models.ForeignKey(ObjectiveGroup, blank=False, null=False, on_delete=models.CASCADE,
+                              related_name='objectives')
 
     def __str__(self):
         return 'Objective {}-{}'.format(self.id, self.text)
@@ -36,7 +37,8 @@ class ObjectiveProgressStatus(models.Model):
         verbose_name_plural = 'Lernzielstatus'
 
     done = models.BooleanField('Lernziel erledigt?', default=False)
-    objective = models.ForeignKey(Objective, blank=False, null=False, on_delete=models.CASCADE)
+    objective = models.ForeignKey(Objective, blank=False, null=False, on_delete=models.CASCADE,
+                                  related_name='objective_progress')
     user = models.ForeignKey(get_user_model(), blank=True, null=True, on_delete=models.CASCADE)
 
     def __str__(self):

server/objectives/mutations.py

@@ -2,6 +2,7 @@ import graphene
 from graphene import relay
 from api.utils import get_object
 from objectives.models import ObjectiveProgressStatus, Objective
+from objectives.schema import ObjectiveNode
 
 
 class UpdateObjectiveProgress(relay.ClientIDMutation):
@@ -9,23 +10,23 @@ class UpdateObjectiveProgress(relay.ClientIDMutation):
         id = graphene.ID(required=True, description="The ID of the objective")
         done = graphene.Boolean(required=True)
 
-    success = graphene.Boolean()
     errors = graphene.List(graphene.String)
+    objective = graphene.Field(ObjectiveNode)
 
     @classmethod
     def mutate_and_get_payload(cls, root, info, **kwargs):
         objective_id = kwargs.get('id')
         done = kwargs.get('done')
         objective = get_object(Objective, objective_id)  # info.context.user = django user
-        try:
+        objective_progress, created = ObjectiveProgressStatus.objects.get_or_create(
-            objective_progress = ObjectiveProgressStatus.objects.filter(objective=objective)[0]
+            objective=objective,
-        except IndexError:
+            user=info.context.user
-            objective_progress = ObjectiveProgressStatus(objective=objective, user=info.context.user)
+        )
 
         objective_progress.done = done
         objective_progress.save()
 
-        return cls(success=True)
+        return cls(objective=objective)
 
 
 class ObjectiveMutations: