Split objective groups by type

client/src/components/modules/Module.vue

@@ -8,8 +8,9 @@
     <div class="module__intro" v-html="module.intro"></div>
 
     <h3 id="objectives">Lernziele</h3>
-    <objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
 
+    <objective-groups :groups="languageCommunicationObjectiveGroups"></objective-groups>
+    <objective-groups :groups="societyObjectiveGroups"></objective-groups>
 
     <chapter :chapter="chapter" :index="index" v-for="(chapter, index) in module.chapters" :key="chapter.id"></chapter>
     <h3 id="objectives-confirm">Alles klar?</h3>
@@ -22,15 +23,17 @@
 </template>
 
 <script>
-  import ObjectiveGroup from '@/components/modules/ObjectiveGroup.vue';
+  import ObjectiveGroups from '@/components/modules/ObjectiveGroups.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';
   import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
 
+  const withoutOwnerFirst = (a, b) => a.owner ? 1 : 0;
+
   export default {
     components: {
-      ObjectiveGroup,
+      ObjectiveGroups,
       ObjectiveGroupControl,
       Chapter
     },
@@ -53,6 +56,19 @@
     created() {
     },
 
+    computed: {
+      languageCommunicationObjectiveGroups() {
+        return this.module.objectiveGroups ? this.module.objectiveGroups
+          .filter(group => group.title === 'LANGUAGE_COMMUNICATION')
+          .sort(withoutOwnerFirst) : [];
+      },
+      societyObjectiveGroups() {
+        return this.module.objectiveGroups ? this.module.objectiveGroups
+          .filter(group => group.title === 'SOCIETY')
+          .sort(withoutOwnerFirst) : [];
+      }
+    },
+
     methods: {
       updateObjectiveProgress(done, objectiveId) {
         this.$apollo.mutate({

client/src/components/modules/ObjectiveGroups.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <objective-group v-for="group in groups" :key="group.id" :group="group"></objective-group>
+  </div>
+</template>
+
+<script>
+  import ObjectiveGroup from '@/components/modules/ObjectiveGroup';
+
+  export default {
+    props: ['groups'],
+
+    components: {
+      ObjectiveGroup
+    }
+  }
+</script>