From 5f32c457360cd8f30e3dadd22e61bdaf46dc39ef Mon Sep 17 00:00:00 2001
From: 18alantom <2.alan.tom@gmail.com>
Date: Tue, 9 May 2023 09:55:11 +0530
Subject: [PATCH] fix(ui/ux): move back button to the left - add forward button

---
 src/components/BackLink.vue           | 42 ----------------
 src/components/FormContainer.vue      |  2 +-
 src/components/PageHeader.vue         | 36 ++++++++------
 src/components/PageHeaderNavGroup.vue | 70 +++++++++++++++++++++++++++
 src/components/SearchBar.vue          | 16 +-----
 src/router.ts                         |  8 +++
 src/utils/refs.ts                     |  6 ++-
 7 files changed, 107 insertions(+), 73 deletions(-)
 delete mode 100644 src/components/BackLink.vue
 create mode 100644 src/components/PageHeaderNavGroup.vue

diff --git a/src/components/BackLink.vue b/src/components/BackLink.vue
deleted file mode 100644
index 8ed0d3b4..00000000
--- a/src/components/BackLink.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <a
-    ref="backlink"
-    class="
-      cursor-pointer
-      font-semibold
-      flex
-      items-center
-      bg-gray-200
-      text-gray-700
-      px-3
-      rounded-md
-    "
-    @click="$router.back()"
-  >
-    <feather-icon name="chevron-left" class="w-4 h-4" />
-  </a>
-</template>
-<script lang="ts">
-import { shortcutsKey } from 'src/utils/injectionKeys';
-import { ref, inject } from 'vue';
-import { defineComponent } from 'vue';
-
-const COMPONENT_NAME = 'BackLink';
-
-export default defineComponent({
-  setup() {
-    return {
-      backlink: ref<HTMLAnchorElement | null>(null),
-      shortcuts: inject(shortcutsKey),
-    };
-  },
-  activated() {
-    this.shortcuts?.shift.set(COMPONENT_NAME, ['Backspace'], () => {
-      this.backlink?.click();
-    });
-  },
-  deactivated() {
-    this.shortcuts?.delete(COMPONENT_NAME);
-  },
-});
-</script>
diff --git a/src/components/FormContainer.vue b/src/components/FormContainer.vue
index 0bcf5981..d9ea48df 100644
--- a/src/components/FormContainer.vue
+++ b/src/components/FormContainer.vue
@@ -14,7 +14,7 @@
         <slot name="header" />
       </PageHeader>
 
-      <!-- Invoice Form -->
+      <!-- Common Form -->
       <div
         class="
           border
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index f6c030ed..a5e880dd 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -13,23 +13,32 @@
         :class="spacerClass"
       />
     </Transition>
-    <h1
-      class="text-xl font-semibold select-none whitespace-nowrap"
-      v-if="title"
+
+    <div
+      class="flex items-center window-no-drag gap-4 me-auto"
+      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
     >
-      {{ title }}
-    </h1>
-    <div class="flex items-stretch window-no-drag gap-2">
-      <slot name="left" />
+      <!-- Nav Group -->
+      <PageHeaderNavGroup />
+      <h1
+        class="text-xl font-semibold select-none whitespace-nowrap"
+        v-if="title"
+      >
+        {{ title }}
+      </h1>
+
+      <!-- Left Slot -->
+      <div class="flex items-stretch window-no-drag gap-4">
+        <slot name="left" />
+      </div>
     </div>
+
+    <!-- Right (regular) Slot -->
     <div
       class="flex items-stretch window-no-drag gap-2 ms-auto"
       :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
     >
       <slot />
-      <div class="border-e" v-if="showBorder" />
-      <BackLink v-if="backLink" class="window-no-drag rtl-rotate-180" />
-      <SearchBar v-if="!hideSearch" />
     </div>
   </div>
 </template>
@@ -37,18 +46,15 @@
 import { languageDirectionKey } from 'src/utils/injectionKeys';
 import { showSidebar } from 'src/utils/refs';
 import { defineComponent, inject, Transition } from 'vue';
-import BackLink from './BackLink.vue';
-import SearchBar from './SearchBar.vue';
+import PageHeaderNavGroup from './PageHeaderNavGroup.vue';
 
 export default defineComponent({
   props: {
     title: { type: String, default: '' },
-    backLink: { type: Boolean, default: true },
-    hideSearch: { type: Boolean, default: false },
     border: { type: Boolean, default: true },
     searchborder: { type: Boolean, default: true },
   },
-  components: { BackLink, SearchBar, Transition },
+  components: { Transition, PageHeaderNavGroup },
   setup() {
     return { showSidebar, languageDirection: inject(languageDirectionKey) };
   },
diff --git a/src/components/PageHeaderNavGroup.vue b/src/components/PageHeaderNavGroup.vue
new file mode 100644
index 00000000..6a1311e8
--- /dev/null
+++ b/src/components/PageHeaderNavGroup.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="flex">
+    <SearchBar />
+    <!-- Back Button -->
+    <a
+      ref="backlink"
+      class="nav-link border-l border-r border-white"
+      :class="
+        historyState.back ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
+      "
+      @click="$router.back()"
+    >
+      <feather-icon name="chevron-left" class="w-4 h-4" />
+    </a>
+    <!-- Forward Button -->
+    <a
+      class="nav-link rounded-md rounded-l-none"
+      :class="
+        historyState.forward ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
+      "
+      @click="$router.forward()"
+    >
+      <feather-icon name="chevron-right" class="w-4 h-4" />
+    </a>
+  </div>
+</template>
+<script lang="ts">
+import { shortcutsKey } from 'src/utils/injectionKeys';
+import { ref, inject } from 'vue';
+import { defineComponent } from 'vue';
+import SearchBar from './SearchBar.vue';
+import { historyState } from 'src/utils/refs';
+
+const COMPONENT_NAME = 'PageHeaderNavGroup';
+
+export default defineComponent({
+  setup() {
+    return {
+      historyState,
+      backlink: ref<HTMLAnchorElement | null>(null),
+      shortcuts: inject(shortcutsKey),
+    };
+  },
+  activated() {
+    this.shortcuts?.shift.set(COMPONENT_NAME, ['Backspace'], () => {
+      this.backlink?.click();
+    });
+    // @ts-ignore
+    window.ng = this;
+  },
+  deactivated() {
+    this.shortcuts?.delete(COMPONENT_NAME);
+  },
+  components: { SearchBar },
+  computed: {
+    hasBack() {
+      return !!history.back;
+    },
+    hasForward() {
+      return !!history.forward;
+    },
+  },
+});
+</script>
+
+<style scoped>
+.nav-link {
+  @apply flex items-center bg-gray-200 px-3;
+}
+</style>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 58cbb494..9e53d0a5 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,12 +1,8 @@
 <template>
   <div>
     <!-- Search Bar Button -->
-    <Button @click="open" class="px-2" :padding="false">
-      <feather-icon name="search" class="w-4 h-4 me-1 text-gray-800" />
-      <p>{{ t`Search` }}</p>
-      <div class="text-gray-500 px-1 ms-4 text-sm whitespace-nowrap">
-        {{ modKeyText('k') }}
-      </div>
+    <Button @click="open" class="px-3 py-2 rounded-r-none" :padding="false">
+      <feather-icon name="search" class="w-4 h-4 text-gray-700" />
     </Button>
   </div>
 
@@ -292,14 +288,6 @@ export default defineComponent({
         this.shortcuts!.pmod.set(COMPONENT_NAME, [shortcut], callback);
       }
     },
-    modKeyText(key: string): string {
-      key = key.toUpperCase();
-      if (this.platform === 'Mac') {
-        return `⌘ ${key}`;
-      }
-
-      return `Ctrl ${key}`;
-    },
     open(): void {
       this.openModal = true;
       this.searcher?.updateKeywords();
diff --git a/src/router.ts b/src/router.ts
index 9fbd7baf..76de7a75 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -9,7 +9,9 @@ import QuickEditForm from 'src/pages/QuickEditForm.vue';
 import Report from 'src/pages/Report.vue';
 import Settings from 'src/pages/Settings/Settings.vue';
 import TemplateBuilder from 'src/pages/TemplateBuilder/TemplateBuilder.vue';
+import { reactive } from 'vue';
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { historyState } from './utils/refs';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -112,4 +114,10 @@ const routes: RouteRecordRaw[] = [
 ];
 
 const router = createRouter({ routes, history: createWebHistory() });
+
+router.afterEach(() => {
+  historyState.forward = !!history.state.forward;
+  historyState.back = !!history.state.back;
+});
+
 export default router;
diff --git a/src/utils/refs.ts b/src/utils/refs.ts
index 7f577f81..613ddad7 100644
--- a/src/utils/refs.ts
+++ b/src/utils/refs.ts
@@ -1,5 +1,9 @@
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
 
 export const showSidebar = ref(true);
 export const docsPathRef = ref<string>('');
 export const systemLanguageRef = ref<string>('');
+export const historyState = reactive({
+  forward: !!history.state.forward,
+  back: !!history.state.back,
+});