Unset edit mode when leaving route subtree

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;
+        setModuleEditMode(this.slug, newChecked);
-        const id = cache.identify({
-          __typename: 'ModuleNode',
-          slug: this.slug
-        });
-        cache.modify({
-          id,
-          fields: {
-            inEditMode() {
-              return newChecked;
-            },
-          }
-        });
       }
     },
   };

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;
+      }
+    }
+  });
+};

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 {