From b6ef5b2e34c19c14fc2bba1e9a098302ffdb13d2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 2 Feb 2022 16:23:55 +0100
Subject: [PATCH] Fix button below chapter title

---
 client/src/components/AddContentButton.vue    | 32 ++++++++++++++++---
 client/src/components/Chapter.vue             |  2 +-
 client/src/components/ContentBlock.vue        |  2 +-
 .../components/content-forms/DocumentForm.vue |  2 +-
 .../objective-groups/ObjectiveGroup.vue       |  1 +
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/client/src/components/AddContentButton.vue b/client/src/components/AddContentButton.vue
index 4bf49ce7..6ba7b44d 100644
--- a/client/src/components/AddContentButton.vue
+++ b/client/src/components/AddContentButton.vue
@@ -18,26 +18,48 @@
   const AddPointer = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer');
 
   export default {
-    props: ['after', 'parent'],
+    props: {
+      where: {
+        type: Object,
+        validator(prop) {
+          return Object.prototype.hasOwnProperty.call(prop, 'after' )
+            || Object.prototype.hasOwnProperty.call(prop, 'parent');
+        }
+      },
+    },
 
     components: {
       AddPointer
     },
 
+    computed: {
+      parent() {
+        return this.where.parent;
+      },
+      after() {
+        return this.where.after;
+      },
+      isObjectiveGroup() {
+        return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
+      },
+      slug() {
+        return this.$route.params.slug;
+      }
+    },
+
 
     methods: {
       addContent() {
-        if (this.parent && this.parent.__typename === 'ObjectiveGroupNode') {
+        if (this.isObjectiveGroup) {
           this.$store.dispatch('addObjective', this.parent.id);
         } else {
           let route;
-          const slug = this.$route.params.slug;
-          if (this.after.id) {
+          if (this.after && this.after.id) {
              route = {
               name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
               params: {
                 after: this.after.id,
-                slug
+                slug: this.slug
               }
             };
           } else {
diff --git a/client/src/components/Chapter.vue b/client/src/components/Chapter.vue
index ebb91eb6..7bdd683c 100644
--- a/client/src/components/Chapter.vue
+++ b/client/src/components/Chapter.vue
@@ -51,7 +51,7 @@
     </div>
 
     <add-content-button
-      :parent="chapter"
+      :where="{parent: chapter}"
       v-if="editMode"
     />
 
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 417abe1d..0c08ac42 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -65,7 +65,7 @@
     </div>
 
     <add-content-button
-      :after="contentBlock"
+      :where="{after: contentBlock}"
       v-if="canEditModule"
     />
   </div>
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 6e4621dc..154bc735 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -58,7 +58,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/variables";
 
   .document-form {
     &__uploaded {
diff --git a/client/src/components/objective-groups/ObjectiveGroup.vue b/client/src/components/objective-groups/ObjectiveGroup.vue
index f2606060..48eea452 100644
--- a/client/src/components/objective-groups/ObjectiveGroup.vue
+++ b/client/src/components/objective-groups/ObjectiveGroup.vue
@@ -23,6 +23,7 @@
     </ul>
     <add-content-button
       :parent="group"
+      :where="{parent: group}"
       v-if="editMode"
     />
   </div>