Unify objectives under one objective group for students

client/src/components/modules/Module.vue

@@ -14,11 +14,9 @@
 
     <chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
     <h3 id="objectives-confirm">Alles klar?</h3>
-    <objective-group-control
-      v-for="(group, index) in module.objectiveGroups"
-      :key="`${group.id}${index}`"
-      :group="group"
-      @updateObjectiveProgress="updateObjectiveProgress"></objective-group-control>
+
+    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="languageCommunicationObjectiveGroups" :control="true"></objective-groups>
+    <objective-groups @updateObjectiveProgress="updateObjectiveProgress" :groups="societyObjectiveGroups" :control="true"></objective-groups>
   </div>
 </template>
 
@@ -45,14 +43,6 @@
       }
     },
 
-    data() {
-      return {
-        chapter: {
-          title: '1.1 Lehrbeginn'
-        }
-      }
-    },
-
     created() {
     },
 

client/src/components/modules/ObjectiveGroups.vue

@@ -1,17 +1,73 @@
 <template>
   <div>
-    <objective-group v-for="group in groups" :key="group.id" :group="group"></objective-group>
+    <template v-if="control">
+      <objective-group-control
+        v-for="(group, index) in objectiveGroups"
+        :key="`${group.id}${index}`"
+        :group="group"
+        @updateObjectiveProgress="updateObjectiveProgress"></objective-group-control>
+    </template>
+    <template v-if="!control">
+      <objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
+    </template>
+
   </div>
 </template>
 
 <script>
   import ObjectiveGroup from '@/components/modules/ObjectiveGroup';
+  import ObjectiveGroupControl from '@/components/modules/ObjectiveGroupControl';
+  import {meQuery} from '@/graphql/queries';
 
   export default {
-    props: ['groups'],
+    props: {
+      groups: Array,
+      control: {
+        type: Boolean,
+        default: false
+      }
+    },
 
     components: {
-      ObjectiveGroup
+      ObjectiveGroup,
+      ObjectiveGroupControl
+    },
+
+    apollo: {
+      me: meQuery
+    },
+
+    data() {
+      return {
+        me: {
+          permissions: []
+        }
+      }
+    },
+
+    computed: {
+      objectiveGroups() {
+        /*
+         a teacher should get multiple blocks, so he can manage the visibility for his students.
+         students don't care about the blocks, so they should get just one block that contains all the objectives
+         */
+        if (this.me.permissions.includes('users.can_manage_school_class_content') || !this.groups.length) {
+          return this.groups;
+        } else {
+          // todo: maybe this can be done a bit more elegantly
+          const groups = [...this.groups];
+          const objectives = groups.map(g => g.objectives).flat(); // get all objectives in one array
+          const firstGroup = Object.assign({}, groups.shift(), {objectives});
+
+          return [firstGroup];
+        }
+      }
+    },
+
+    methods: {
+      updateObjectiveProgress(checked, id) {
+        this.$emit('updateObjectiveProgress', checked, id);
+      }
     }
   }
 </script>

client/src/graphql/queries.js

@@ -1,4 +1,5 @@
 import MODULE_DETAILS_QUERY from './gql/moduleDetailsQuery.gql';
+import ME_QUERY from './gql/meQuery.gql';
 
 export function moduleQuery() {
   return {
@@ -11,3 +12,9 @@ export function moduleQuery() {
     }
   }
 }
+
+export function meQuery() {
+  return {
+    query: ME_QUERY
+  }
+}