From 2cf27e00999ab0ca1e0dea2f906d4da8fbe81845 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 14 Jul 2020 23:04:20 +0900
Subject: [PATCH] Enable to load search options

---
 .../components/organisms/layout/TheSideBar.vue     | 14 ++++++++++----
 frontend/layouts/annotation.vue                    | 13 +++++++++++++
 frontend/store/projects.js                         |  9 +++++++++
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/frontend/components/organisms/layout/TheSideBar.vue b/frontend/components/organisms/layout/TheSideBar.vue
index f9f36921..e5506540 100644
--- a/frontend/components/organisms/layout/TheSideBar.vue
+++ b/frontend/components/organisms/layout/TheSideBar.vue
@@ -1,9 +1,9 @@
 <template>
   <v-list dense>
     <v-btn
-      :to="to"
       color="ms-4 my-1 mb-2 primary text-capitalize"
       nuxt
+      @click="toLabeling"
     >
       <v-icon left>
         mdi-play-circle-outline
@@ -32,6 +32,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   props: {
     link: {
@@ -60,14 +62,18 @@ export default {
   },
 
   computed: {
-    to() {
-      return `/projects/${this.$route.params.id}/${this.link}`
-    }
+    ...mapGetters('projects', ['loadSearchOptions'])
   },
 
   methods: {
     isVisible(item) {
       return !item.adminOnly || this.role.is_project_admin
+    },
+    toLabeling() {
+      this.$router.push({
+        path: `/projects/${this.$route.params.id}/${this.link}`,
+        query: this.loadSearchOptions
+      })
     }
   }
 }
diff --git a/frontend/layouts/annotation.vue b/frontend/layouts/annotation.vue
index 660c852d..2736c184 100644
--- a/frontend/layouts/annotation.vue
+++ b/frontend/layouts/annotation.vue
@@ -121,6 +121,15 @@ export default {
     },
     current() {
       return (this.page - 1) % this.limit
+    },
+    searchOptions() {
+      // a bit tricky.
+      // see https://github.com/vuejs/vue/issues/844#issuecomment-265315349
+      return JSON.stringify({
+        page: this.page,
+        q: this.q,
+        isChecked: this.filterOption
+      })
     }
   },
 
@@ -140,6 +149,9 @@ export default {
         this.setCurrent(this.current)
       },
       immediate: true
+    },
+    searchOptions() {
+      this.saveSearchOptions(JSON.parse(this.searchOptions))
     }
   },
 
@@ -151,6 +163,7 @@ export default {
     ...mapActions('projects', ['setCurrentProject']),
     ...mapActions('documents', ['getDocumentList']),
     ...mapMutations('documents', ['setCurrent']),
+    ...mapMutations('projects', ['saveSearchOptions']),
     search() {
       this.getDocumentList({
         projectId: this.$route.params.id,
diff --git a/frontend/store/projects.js b/frontend/store/projects.js
index 4a3b5502..874fa473 100644
--- a/frontend/store/projects.js
+++ b/frontend/store/projects.js
@@ -209,6 +209,10 @@ export const getters = {
     } else {
       return []
     }
+  },
+  loadSearchOptions(state) {
+    const checkpoint = JSON.parse(localStorage.getItem('checkpoint')) || {}
+    return checkpoint[state.current.id] ? checkpoint[state.current.id] : { page: 1 }
   }
 }
 
@@ -237,6 +241,11 @@ export const mutations = {
   },
   setCurrent(state, payload) {
     state.current = payload
+  },
+  saveSearchOptions(state, options) {
+    const checkpoint = {}
+    checkpoint[state.current.id] = options
+    localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
   }
 }