From b1505e38683bda628864ad158775d2d8b5d68824 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 1 Feb 2022 15:45:54 +0100
Subject: [PATCH] Unset edit mode when leaving route subtree

---
 .../src/components/toggle-menu/ToggleEditing.vue  | 15 ++-------------
 client/src/graphql/cache-operations.js            | 15 +++++++++++++++
 client/src/pages/module/module.vue                |  9 +++++++++
 3 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 client/src/graphql/cache-operations.js

diff --git a/client/src/components/toggle-menu/ToggleEditing.vue b/client/src/components/toggle-menu/ToggleEditing.vue
index 9f3e0945..70afefed 100644
--- a/client/src/components/toggle-menu/ToggleEditing.vue
+++ b/client/src/components/toggle-menu/ToggleEditing.vue
@@ -11,6 +11,7 @@
   import Toggle from '@/components/ui/Toggle';
   // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
   import {gql} from '@apollo/client/core';
+  import {setModuleEditMode} from '@/graphql/cache-operations';
 
   const QUERY = gql`
           query ModuleEditModeQuery ($slug: String) {
@@ -56,19 +57,7 @@
 
     methods: {
       toggle(newChecked){
-        const cache = this.$apollo.provider.defaultClient.cache;
-        const id = cache.identify({
-          __typename: 'ModuleNode',
-          slug: this.slug
-        });
-        cache.modify({
-          id,
-          fields: {
-            inEditMode() {
-              return newChecked;
-            },
-          }
-        });
+        setModuleEditMode(this.slug, newChecked);
       }
     },
   };
diff --git a/client/src/graphql/cache-operations.js b/client/src/graphql/cache-operations.js
new file mode 100644
index 00000000..557f5924
--- /dev/null
+++ b/client/src/graphql/cache-operations.js
@@ -0,0 +1,15 @@
+import cache from '@/graphql/cache';
+export const setModuleEditMode = (slug, newEditMode) => {
+  const id = cache.identify({
+    __typename: 'ModuleNode',
+    slug
+  });
+  cache.modify({
+    id,
+    fields: {
+      inEditMode() {
+        return newEditMode;
+      }
+    }
+  });
+};
diff --git a/client/src/pages/module/module.vue b/client/src/pages/module/module.vue
index 4a792a05..b80ff150 100644
--- a/client/src/pages/module/module.vue
+++ b/client/src/pages/module/module.vue
@@ -20,6 +20,7 @@
   import meMixin from '@/mixins/me';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import {setModuleEditMode} from '@/graphql/cache-operations';
 
   export default {
     mixins: [meMixin],
@@ -35,6 +36,14 @@
       };
     },
 
+    beforeRouteLeave(to, from, next) {
+      // toggle edit mode if leavind the module subtree
+      if(this.module.inEditMode && to.path.indexOf('/module/') === -1) {
+        setModuleEditMode(this.module.slug, false);
+      }
+      next();
+    },
+
     apollo: {
       module() {
         return {