fix scrolling

client/src/components/content-blocks/assignment/Assignment.vue

@@ -196,10 +196,11 @@
             id: this.value.id
           }
         },
-        result({data}) {
+        result(response) {
+          const data = response.data;
           this.assignment = cloneDeep(data.assignment);
           this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
-          if (this.assignment.id === this.scrollToAssignmentId) {
+          if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
             this.$nextTick(() => this.scrollToAssignmentReady(true));
           }
         }
@@ -221,7 +222,7 @@
         unsaved: false,
         saving: 0
       }
-    },
+    }
   }
 </script>
 

client/src/pages/module.vue

@@ -15,11 +15,14 @@
     },
 
     methods: {
-      ...mapActions(['scrollToAssignmentReady']),
+      ...mapActions(['scrollToAssignmentReady', 'scrollingToAssignment']),
     },
 
     computed: {
-      ...mapGetters(['scrollToAssignmentId']),
+      ...mapGetters({
+          scrollToAssignmentId: 'scrollToAssignmentId',
+          isScrollingToAssignment: 'scrollingToAssignment'
+        }),
     },
 
     apollo: {
@@ -34,35 +37,32 @@
     data() {
       return {
         module: {},
-        assignments: [],
+        assignments: []
-        isScrolling: false
       }
     },
     mounted () {
       this.$store.subscribe((mutation, state) => {
-        if (mutation.type === 'setScrollToAssignmentReady' && state.scrollToAssignmentReady && !this.isScrolling) {
+        if (mutation.type === 'setScrollToAssignmentReady' && mutation.payload && !this.isScrollingToAssignment) {
-          this.isScrolling = true;
+          this.scrollingToAssignment(true);
-          // this.$nextTick(() => {
+          let options = {
-            let options = {
+            container: '#app',
-              container: '#app',
+            easing: 'ease',
-              easing: 'ease-in',
+            offset: -60,
-              offset: -60,
+            onStart: (element) => {
-              force: true,
+            },
-              cancelable: true,
+            onDone: (element) => {
-              onStart: (element) => {
+              this.scrollToAssignmentReady(false);
-              },
+              this.scrollingToAssignment(false);
-              onDone: (element) => {
+            },
-                this.scrollToAssignmentReady(false);
+            onCancel: function() {
-                this.isScrolling = false;
+              // scrolling has been interrupted
-              },
+            },
-              onCancel: function() {
+            x: false,
-                // scrolling has been interrupted
+            y: true
-              },
+          };
-              x: false,
+          setTimeout(() => {
-              y: true
-            };
             this.$scrollTo(`#${this.scrollToAssignmentId.replace(/=/g, '')}`, 1000, options);
-        // })
+            }, 250)
         }
       })
     },

client/src/store/index.js

@@ -27,7 +27,8 @@ export default new Vuex.Store({
     },
     vimeoId: null,
     scrollToAssignmentId: '',
-    scrollToAssignmentReady: false
+    scrollToAssignmentReady: false,
+    scrollingToAssignment: false
   },
 
   getters: {
@@ -39,6 +40,7 @@ export default new Vuex.Store({
     },
     scrollToAssignmentId: state => state.scrollToAssignmentId,
     scrollToAssignmentReady: state => state.scrollToAssignmentReady,
+    scrollingToAssignment: state => state.scrollingToAssignment,
   },
 
   actions: {
@@ -128,6 +130,16 @@ export default new Vuex.Store({
     },
     scrollToAssignmentReady({commit}, payload) {
       commit('setScrollToAssignmentReady', payload);
+    },
+    scrollingToAssignment({commit, state, dispatch}, payload) {
+      if (payload && !state.scrollingToAssignment) {
+        commit('setScrollingToAssignment', true);
+      };
+
+      if (!payload && state.scrollingToAssignment) {
+        commit('setScrollingToAssignment', false);
+        dispatch('scrollToAssignmentId', '');
+      }
     }
   },
 
@@ -188,6 +200,9 @@ export default new Vuex.Store({
     },
     setScrollToAssignmentReady(state, payload) {
       state.scrollToAssignmentReady = payload;
+    },
+    setScrollingToAssignment(state, payload) {
+      state.scrollingToAssignment = payload;
     }
   }
 })