From db017f21979bd1640f93233f9dfe19a4c7710d99 Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Thu, 13 Jun 2024 17:40:00 +0300
Subject: [PATCH] History page: better navigation support for using browser
 back and forward, reload page on clicking the history main link in header.

---
 frontend/layouts/default.vue          |  6 ++-
 frontend/pages/history/[id]/index.vue | 12 +++---
 frontend/pages/history/index.vue      | 58 +++++++++++++++++++++++----
 frontend/utils/index.js               | 23 ++++++++---
 4 files changed, 78 insertions(+), 21 deletions(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index cf8964f3..e88f3dcc 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -25,7 +25,8 @@
             </span>
           </NuxtLink>
 
-          <NuxtLink class="navbar-item" to="/history" @click.native="showMenu=false">
+          <NuxtLink class="navbar-item" to="/history"
+                    @click.native="showMenu=false; dEvent('history_main_link_clicked',{'clear':true})">
             <span class="icon-text">
               <span class="icon"><i class="fas fa-history"></i></span>
               <span>History</span>
@@ -272,7 +273,8 @@ import 'assets/css/style.css'
 import 'assets/css/all.css'
 import {useStorage} from '@vueuse/core'
 import request from '~/utils/request.js'
-import Markdown from "~/components/Markdown.vue";
+import Markdown from '~/components/Markdown.vue'
+import {dEvent} from '~/utils/index.js'
 
 const selectedTheme = useStorage('theme', (() => window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')())
 const showConnection = ref(false)
diff --git a/frontend/pages/history/[id]/index.vue b/frontend/pages/history/[id]/index.vue
index 25a00ade..64201a73 100644
--- a/frontend/pages/history/[id]/index.vue
+++ b/frontend/pages/history/[id]/index.vue
@@ -205,8 +205,8 @@
             <div class="column is-12" v-if="data?.title">
               <div class="is-text-overflow">
                 <span class="icon"><i class="fas fa-heading"></i></span>
-                <span class="is-hidden-mobile">Title:</span>
-                {{ data.title }}
+                <span class="is-hidden-mobile">Title:&nbsp;</span>
+                <NuxtLink :to="makeSearchLink('subtitle', data.title)" v-text="data.title"/>
               </div>
             </div>
 
@@ -214,7 +214,7 @@
               <div class="is-text-overflow">
                 <span class="icon"><i class="fas fa-file"></i></span>
                 <span class="is-hidden-mobile">File:&nbsp;</span>
-                <NuxtLink :to="makeSearchLink('path',data.path)" v-text="data.path"/>
+                <NuxtLink :to="makeSearchLink('path', data.path)" v-text="data.path"/>
               </div>
             </div>
 
@@ -358,8 +358,8 @@
             <div class="column is-12" v-if="item?.extra?.title">
               <div class="is-text-overflow">
                 <span class="icon"><i class="fas fa-heading"></i></span>
-                <span class="is-hidden-mobile">Title:</span>
-                {{ item.extra.title }}
+                <span class="is-hidden-mobile">Title:&nbsp;</span>
+                <NuxtLink :to="makeSearchLink('subtitle', item.extra.title)" v-text="item.extra.title"/>
               </div>
             </div>
 
@@ -367,7 +367,7 @@
               <div class="is-text-overflow">
                 <span class="icon"><i class="fas fa-file"></i></span>
                 <span class="is-hidden-mobile">File:&nbsp;</span>
-                <NuxtLink :to="makeSearchLink('path',item.path)" v-text="item.path"/>
+                <NuxtLink :to="makeSearchLink('path', item.path)" v-text="item.path"/>
               </div>
             </div>
 
diff --git a/frontend/pages/history/index.vue b/frontend/pages/history/index.vue
index 7c0dc122..81a11c63 100644
--- a/frontend/pages/history/index.vue
+++ b/frontend/pages/history/index.vue
@@ -140,7 +140,8 @@
                        @click="(e) => e.target.classList.toggle('is-text-overflow')">
                     <span class="icon"><i class="fas fa-heading"></i></span>
                     <span class="is-hidden-mobile">Title:&nbsp;</span>
-                    {{ item.title }}
+                    <NuxtLink :to="makeSearchLink('subtitle', item.title)"
+                              @click="triggerSearch('subtitle', item.title)" v-text="item.title"/>
                   </div>
                 </div>
                 <div class="column is-12 is-clickable has-text-left" v-if="item?.path"
@@ -148,7 +149,8 @@
                   <div class="is-text-overflow">
                     <span class="icon"><i class="fas fa-file"></i></span>
                     <span class="is-hidden-mobile">Path:&nbsp;</span>
-                    <NuxtLink :to="makeSearchLink('path',item.path)" v-text="item.path"/>
+                    <NuxtLink :to="makeSearchLink('path', item.path)" @click="triggerSearch('path', item.path)"
+                              v-text="item.path"/>
                   </div>
                 </div>
                 <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
@@ -211,6 +213,7 @@ import Message from '~/components/Message.vue'
 import {formatDuration, makeSearchLink, notification} from '~/utils/index.js'
 
 const route = useRoute()
+const router = useRouter()
 
 useHead({title: 'History'})
 
@@ -273,17 +276,20 @@ const loadContent = async (pageNumber, fromPopState = false) => {
     isLoading.value = true
     items.value = []
 
-    const response = await request(`/history/?${search.toString()}`)
+    const response = await request(`/history?${search.toString()}`)
     const json = await response.json()
     const currentUrl = window.location.pathname + '?' + (new URLSearchParams(window.location.search)).toString()
 
     if (!fromPopState && currentUrl !== newUrl) {
-      console.log(currentUrl, newUrl)
-      window.history.pushState({
+      let history_query = {
+        perpage: perpage.value,
         page: pageNumber,
-        query: query.value,
-        key: searchField.value
-      }, '', newUrl)
+      }
+      if (searchField.value && query.value) {
+        history_query.q = query.value
+        history_query.key = searchField.value
+      }
+      await router.push({path: '/history', title: title, query: history_query})
     }
 
     if ('paging' in json) {
@@ -366,10 +372,46 @@ const getHelp = (key) => {
   return `<span class="icon-text"><span class="icon"><i class="fas fa-info"></i></span><span>${text}</span></span>`
 }
 
+const triggerSearch = async (search_type, search_query) => {
+  searchForm.value = true
+  perpage.value = 50
+  page.value = 1
+  searchField.value = search_type
+  query.value = search_query
+  await loadContent(1);
+}
+
+const stateCallBack = async e => {
+  if (!e.state && !e.detail) {
+    return
+  }
+  const state = e.detail ?? e.state
+
+
+  const route = useRoute()
+  page.value = route.query.page ?? 1
+  perpage.page = route.query.perpage ?? 50
+  if ('clear' in state) {
+    query.value = ''
+    searchField.value = 'title'
+  } else {
+    query.value = route.query.q ?? ''
+    searchField.value = route.query.key ?? 'title'
+  }
+  await loadContent(page.value, true)
+}
+
 onMounted(async () => {
   if (query.value) {
     searchForm.value = true
   }
+  window.addEventListener('popstate', stateCallBack)
+  window.addEventListener('history_main_link_clicked', stateCallBack);
   await loadContent(page.value ?? 1)
 })
+
+onUnmounted(() => {
+  window.removeEventListener('history_main_link_clicked', stateCallBack)
+  window.removeEventListener('popstate', stateCallBack)
+})
 </script>
diff --git a/frontend/utils/index.js b/frontend/utils/index.js
index a265d47a..5ff4f5dd 100644
--- a/frontend/utils/index.js
+++ b/frontend/utils/index.js
@@ -306,17 +306,29 @@ const stringToRegex = (str) => new RegExp(str.match(/\/(.+)\/.*/)[1], str.match(
  * Make history search link.
  *
  * @param {string} type
- * @param {string} guid
+ * @param {string} query
  *
  * @returns {string}
  */
-const makeSearchLink = (type, guid) => {
+const makeSearchLink = (type, query) => {
     const params = new URLSearchParams();
     params.append('perpage', 50);
     params.append('page', 1);
-    params.append('q', guid);
+    params.append('q', query);
     params.append('key', type);
-    return `/history/?${params.toString()}`
+    return `/history?${params.toString()}`
+}
+
+/**
+ * Dispatch event.
+ *
+ * @param eventName
+ * @param detail
+ * @returns {void}
+ */
+const dEvent = (eventName, detail = {}) => {
+    console.debug('Dispatching event', eventName, detail);
+    window.dispatchEvent(new CustomEvent(eventName, {detail}))
 }
 
 export {
@@ -331,5 +343,6 @@ export {
     copyText,
     stringToRegex,
     makeConsoleCommand,
-    makeSearchLink
+    makeSearchLink,
+    dEvent
 }