Fix a validation problem

frontend/components/containers/annotation/GuidelineButton.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 import BaseDialog from '@/components/molecules/BaseDialog'
 import GuidelineCard from '@/components/organisms/annotation/GuidelineCard'
 
@@ -45,14 +45,6 @@ export default {
 
   computed: {
     ...mapGetters('projects', ['currentProject'])
-  },
-
-  created() {
-    this.setCurrentProject(this.$route.params.id)
-  },
-
-  methods: {
-    ...mapActions('projects', ['setCurrentProject'])
   }
 }
 </script>

frontend/layouts/annotation.vue

@@ -79,7 +79,7 @@ import TheHeader from '~/components/organisms/layout/TheHeader'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
 
 export default {
-  middleware: ['check-auth', 'auth'],
+  middleware: ['check-auth', 'auth', 'set-project'],
 
   components: {
     TheSideBar,
@@ -92,6 +92,17 @@ export default {
     MetadataBox
   },
 
+  fetch() {
+    this.getDocumentList({
+      projectId: this.$route.params.id,
+      limit: this.limit,
+      offset: this.offset,
+      q: this.$route.query.q,
+      isChecked: this.filterOption,
+      filterName: this.getFilterOption
+    })
+  },
+
   data() {
     return {
       drawerLeft: null,
@@ -105,14 +116,13 @@ export default {
     ...mapGetters('documents', ['currentDoc', 'approved']),
     page: {
       get() {
-        return Math.min(parseInt(this.$route.query.page, 10), this.total)
+        return parseInt(this.$route.query.page, 10)
       },
-      set(newValue) {
-        const value = Math.min(parseInt(newValue, 10), this.total)
+      set(value) {
         this.$router.push({
           query: {
             isChecked: this.$route.query.isChecked,
-            page: value,
+            page: parseInt(value, 10),
             q: this.$route.query.q
           }
         })
@@ -122,10 +132,10 @@ export default {
       get() {
         return this.$route.query.isChecked
       },
-      set(newValue) {
+      set(value) {
         this.$router.push({
           query: {
-            isChecked: newValue,
+            isChecked: value,
             page: 1,
             q: this.$route.query.q
           }
@@ -150,15 +160,20 @@ export default {
   },
 
   watch: {
-    offset: {
-      handler() {
-        this.search()
-      },
-      immediate: true
+    total() {
+      // To validate the range of page variable on reloading the annotation page.
+      if (this.page > this.total) {
+        this.$router.push({
+          path: `/projects/${this.$route.params.id}/`
+        })
+      }
+    },
+    offset() {
+      this.$fetch()
     },
     filterOption() {
       this.page = 1
-      this.search()
+      this.$fetch()
     },
     current: {
       handler() {
@@ -171,25 +186,10 @@ export default {
     }
   },
 
-  created() {
-    this.setCurrentProject(this.$route.params.id)
-  },
-
   methods: {
     ...mapActions('documents', ['getDocumentList']),
-    ...mapActions('projects', ['setCurrentProject']),
     ...mapMutations('documents', ['setCurrent']),
-    ...mapMutations('projects', ['saveSearchOptions']),
-    search() {
-      this.getDocumentList({
-        projectId: this.$route.params.id,
-        limit: this.limit,
-        offset: this.offset,
-        q: this.$route.query.q,
-        isChecked: this.filterOption,
-        filterName: this.getFilterOption
-      })
-    }
+    ...mapMutations('projects', ['saveSearchOptions'])
   }
 }
 </script>

frontend/middleware/set-project.js

@@ -0,0 +1,7 @@
+export default async function({ store, route }) {
+  const project = store.getters['projects/currentProject']
+  const isEmpty = Object.keys(project).length === 0 && project.constructor === Object
+  if (isEmpty) {
+    await store.dispatch('projects/setCurrentProject', route.params.id)
+  }
+}