From 5ca9bbb0175f4b3870928a69cd3b22523a02c619 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 1 Nov 2018 10:58:08 +0100
Subject: [PATCH] Split objective groups by type

---
 client/src/components/modules/Module.vue      | 22 ++++++++++++++++---
 .../components/modules/ObjectiveGroups.vue    | 17 ++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/modules/ObjectiveGroups.vue

diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 303edd64..5805ec59 100644
--- a/client/src/components/modules/Module.vue
+++ b/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({
diff --git a/client/src/components/modules/ObjectiveGroups.vue b/client/src/components/modules/ObjectiveGroups.vue
new file mode 100644
index 00000000..fb3b30bf
--- /dev/null
+++ b/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>