update objective progress items

client/src/components/modules/Module.vue

@@ -11,16 +11,25 @@
     <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
 
     <chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
+    <h3 id="objectives">Alles klar?</h3>
+    <objective-group-control
+      v-for="(group, index) in module.objectiveGroups"
+      :key="`${group.id}${index}`"
+      :group="group"
+      @updateObjectiveProgress="updateObjectiveProgress"></objective-group-control>
   </div>
 </template>
 
 <script>
   import ObjectiveGroup from '@/components/modules/ObjectiveGroup.vue';
+  import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl.vue';
   import Chapter from '@/components/Chapter.vue';
+  import UPDATE_OBJECTIVE_PROGRESS_MUTATION from '@/graphql/gql/mutations/updateObjectiveProgress.gql';
 
   export default {
     components: {
       ObjectiveGroup,
+      ObjectiveGroupControl,
       Chapter
     },
 
@@ -40,8 +49,44 @@
     },
 
     created() {
+    },
+
+    methods: {
+      updateObjectiveProgress(done, objectiveId) {
+        this.$apollo.mutate({
+          mutation: UPDATE_OBJECTIVE_PROGRESS_MUTATION,
+          variables: {
+            input: {
+              id: objectiveId,
+              done: done
             }
           }
+        }).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>
 
 <style scoped lang="scss">

client/src/components/modules/ObjectiveGroup.vue

@@ -26,23 +26,3 @@
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .objective-group {
-    background-color: $color-lightgrey;
-    padding: 17px;
-    margin-bottom: 35px;
-
-    &__objective-list {
-      padding-left: 20px;
-      list-style: disc;
-    }
-
-    &__objective {
-      margin-bottom: 28px;
-      line-height: 1.5;
-    }
-  }
-</style>

client/src/components/modules/ObjectiveGroupControl.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="objective-group objective-group--control objective-group-control">
+    <h4>{{group.title}}</h4>
+
+    <ul class="objective-group__objective-list objective-group__objective-list--no-list">
+      <template v-if="objectives">
+        <li class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
+            <checkbox :checked="objective.done"
+                  :item="objective"
+                  :label="objective.text"
+                  v-on:input="updateObjectiveProgress"
+        ></checkbox>
+        </li>
+      </template>
+    </ul>
+  </div>
+
+</template>
+
+<script>
+
+  import Checkbox from '@/components/Checkbox';
+
+  export default {
+    name: 'objective-group-control',
+    components: {Checkbox},
+
+    props: {
+      group: {
+        required: true,
+        type: Object
+      }
+    },
+
+    methods: {
+      updateObjectiveProgress(checked, objective) {
+        this.$emit('updateObjectiveProgress', checked, objective.id);
+      },
+      objectiveIsDone(objective) {
+        return objective.objectiveprogressstatusSet.length > 0 && objective.objectiveprogressstatusSet[0].done
+      }
+    },
+
+    computed: {
+      objectives() {
+        return this.group.objectiveSet.map(objective => {
+          return Object.assign({}, objective, { done: this.objectiveIsDone(objective) })
+        });
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+
+  .objective-group__objective-list /deep/ {
+    .base-input-container {
+
+      position: relative;
+
+      &__checkbox {
+        background-color: white;
+        position: absolute;
+        top: 5px;
+      }
+
+      &__label {
+        font-family: $serif-font-family;
+        margin-left: 30px;
+      }
+    }
+  }
+
+</style>

client/src/graphql/gql/moduleDetailsQuery.gql

@@ -25,6 +25,14 @@ query ModulesQuery($slug: String!) {
               node {
                 id
                 text
+                objectiveprogressstatusSet {
+                  edges {
+                    node {
+                      id
+                      done
+                    }
+                  }
+                }
               }
             }
           }

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

@@ -0,0 +1,5 @@
+mutation UpdateObjectiveProgressInput($input: UpdateObjectiveProgressInput!) {
+  updateObjectiveProgress(input: $input){
+    success
+  }
+}

client/src/styles/_objective-group.scss

@@ -0,0 +1,26 @@
+@import 'variables';
+
+.objective-group {
+  background-color: $color-lightgrey;
+  padding: 17px;
+  margin-bottom: 35px;
+
+  &--control {
+    background-color: $color-brand-light;
+  }
+
+  &__objective-list {
+    padding-left: 20px;
+    list-style: disc;
+
+    &--no-list {
+      list-style: none;
+      padding-left: 0;
+    }
+  }
+
+  &__objective {
+    margin-bottom: 28px;
+    line-height: 1.5;
+  }
+}

client/src/styles/main.scss

@@ -10,3 +10,4 @@
 @import "forms";
 @import "uploadcare_overwrite";
 @import "help-text";
+@import "objective-group";

server/api/schema.py

@@ -9,6 +9,7 @@ from assignments.schema.mutations import AssignmentMutations
 from assignments.schema.queries import AssignmentsQuery
 from books.schema.mutations.main import BookMutations
 from filteredbook.schema import BookQuery
+from objectives.mutations import ObjectiveMutations
 from objectives.schema import ObjectivesQuery
 from rooms.mutations import RoomMutations
 from rooms.schema import RoomsQuery
@@ -22,7 +23,7 @@ class Query(UsersQuery, RoomsQuery, ObjectivesQuery, BookQuery, AssignmentsQuery
         debug = graphene.Field(DjangoDebug, name='__debug')
 
 
-class Mutation(BookMutations, RoomMutations, AssignmentMutations, graphene.ObjectType):
+class Mutation(BookMutations, RoomMutations, AssignmentMutations, ObjectiveMutations, graphene.ObjectType):
     if settings.DEBUG:
         debug = graphene.Field(DjangoDebug, name='__debug')
 

server/objectives/models.py

@@ -1,6 +1,5 @@
 from django.contrib.auth import get_user_model
 from django.db import models
-from django_extensions.db.models import TitleDescriptionModel
 
 from books.models import Module
 

server/objectives/mutations.py

@@ -0,0 +1,32 @@
+import graphene
+from graphene import relay
+from api.utils import get_object
+from objectives.models import ObjectiveProgressStatus, Objective
+
+
+class UpdateObjectiveProgress(relay.ClientIDMutation):
+    class Input:
+        id = graphene.ID(required=True, description="The ID of the objective")
+        done = graphene.Boolean(required=True)
+
+    success = graphene.Boolean()
+    errors = graphene.List(graphene.String)
+
+    @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 = ObjectiveProgressStatus.objects.filter(objective=objective)[0]
+        except IndexError:
+            objective_progress = ObjectiveProgressStatus(objective=objective, user=info.context.user)
+
+        objective_progress.done = done
+        objective_progress.save()
+
+        return cls(success=True)
+
+
+class ObjectiveMutations:
+    update_objective_progress = UpdateObjectiveProgress.Field()