From d8740ef547726f5b2a1a7e7bc2ad420ff6a71c07 Mon Sep 17 00:00:00 2001
From: Aleksey <74327665+alekseymeta@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:07:31 +0300
Subject: [PATCH] feat: added "<-back" button in header

---
 magner/lib/assets/icons/arrow-left.svg        |  3 ++
 magner/lib/controllers/i18n/en.ts             |  1 +
 magner/lib/controllers/i18n/ru.ts             |  1 +
 magner/lib/controllers/i18n/uz.ts             |  1 +
 magner/lib/types/configs/development.ts       |  5 ++++
 .../views/components/main-layout/header.vue   | 28 ++++++++++++++++++-
 6 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 magner/lib/assets/icons/arrow-left.svg

diff --git a/magner/lib/assets/icons/arrow-left.svg b/magner/lib/assets/icons/arrow-left.svg
new file mode 100644
index 00000000..c3063d33
--- /dev/null
+++ b/magner/lib/assets/icons/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+</svg>
diff --git a/magner/lib/controllers/i18n/en.ts b/magner/lib/controllers/i18n/en.ts
index 1e83a398..3e1919a2 100644
--- a/magner/lib/controllers/i18n/en.ts
+++ b/magner/lib/controllers/i18n/en.ts
@@ -2,6 +2,7 @@ export const enLocale = {
   core: {
     header: {
       logout: 'Log out',
+      back: 'Back',
     },
 
     sidebar: {
diff --git a/magner/lib/controllers/i18n/ru.ts b/magner/lib/controllers/i18n/ru.ts
index 4dcef31c..f6df2499 100644
--- a/magner/lib/controllers/i18n/ru.ts
+++ b/magner/lib/controllers/i18n/ru.ts
@@ -12,6 +12,7 @@ export const ruLocale: TranslationSchema = {
   core: {
     header: {
       logout: 'Выйти',
+      back: 'Назад',
     },
 
     sidebar: {
diff --git a/magner/lib/controllers/i18n/uz.ts b/magner/lib/controllers/i18n/uz.ts
index b0434daa..c085d031 100644
--- a/magner/lib/controllers/i18n/uz.ts
+++ b/magner/lib/controllers/i18n/uz.ts
@@ -4,6 +4,7 @@ export const uzLocale: TranslationSchema = {
   core: {
     header: {
       logout: 'Чиқиш',
+      back: 'Ортга',
     },
 
     sidebar: {
diff --git a/magner/lib/types/configs/development.ts b/magner/lib/types/configs/development.ts
index 0a39a6c0..2b9452b0 100644
--- a/magner/lib/types/configs/development.ts
+++ b/magner/lib/types/configs/development.ts
@@ -76,6 +76,11 @@ export interface DevelopmentConfig {
    */
   toggleBtnPositionTop?: boolean,
 
+  /**
+   * Back button in header. Only on card pages
+   * */
+  backButtonOnTop: boolean;
+
   /** Request to be used each time user enters the app to check for token validity and quickly authorize them */
   profileRequest: RequestWrap<ProfileRequestResponse>,
 
diff --git a/magner/lib/views/components/main-layout/header.vue b/magner/lib/views/components/main-layout/header.vue
index 96c6c4d6..932a63a7 100644
--- a/magner/lib/views/components/main-layout/header.vue
+++ b/magner/lib/views/components/main-layout/header.vue
@@ -19,6 +19,15 @@
           <svg-icon :rotate="isCollapsed ? 'right' : 'left'" core="chevrons" size="full" />
         </el-button>
 
+        <el-button
+          v-if="backButtonOnTop && isPageIsACard"
+          :icon="ArrowLeftIcon"
+          link
+          @click="toBack"
+        >
+          {{ t('core.header.back') }}
+        </el-button>
+
         <!-- TODO: Implement search -->
         <div v-if="false" class="header_left_search">
           <el-input placeholder="Поиск" type="text" />
@@ -79,7 +88,7 @@ import {
   defineComponent,
   PropType,
   shallowRef,
-  computed,
+  computed, watch,
 } from 'vue';
 import { useRouter } from 'vue-router';
 import useStore from 'lib/controllers/store/store';
@@ -90,6 +99,7 @@ import { useClickOutside } from 'lib/utils/composables/clickOutside';
 import { FinalNoLayoutRoute } from 'lib/types';
 
 import UserIcon from 'lib/assets/icons/user.svg';
+import ArrowLeftIcon from 'lib/assets/icons/arrow-left.svg';
 import LangSwitcher from 'lib/views/components/lang-switcher.vue';
 
 export default defineComponent({
@@ -120,6 +130,7 @@ export default defineComponent({
 
     const isMultipleLanguages = computed(() => store.getters.isMultipleLanguages);
     const togglePositionTop = computed<boolean>(() => store.state.project.development.toggleBtnPositionTop || false);
+    const backButtonOnTop = computed<boolean>(() => store.state.project.development.backButtonOnTop || false);
     const userName = store.state.user?.name;
     const isCollapsed = computed<boolean>(() => store.state.sidebarCollapsed);
     const appVersion = store.state.project.development?.appVersion || null;
@@ -128,6 +139,13 @@ export default defineComponent({
       return routeLayout?.layout.routes.find((r) => r.route.name === 'change-log') || null;
     });
 
+    const isPageIsACard = computed(() => {
+      const matched = router.currentRoute.value.matched[1];
+      const configProps = matched?.props?.default.config;
+
+      return !('table' in configProps) || false;
+    });
+
     const toggleOpen = () => {
       store.dispatch('toggleMobileSidebarOpened');
     };
@@ -142,6 +160,10 @@ export default defineComponent({
       router.push({ name: changeLogRoute.value?.route.name });
     };
 
+    const toBack = () => {
+      router.go(-1);
+    };
+
     useClickOutside('id-sidebar', '.header_right_burger', () => {
       if (props.sidebar) {
         toggleOpen();
@@ -154,19 +176,23 @@ export default defineComponent({
 
     return {
       userIcon,
+      ArrowLeftIcon,
       t,
+      isPageIsACard,
       customT,
       isMobile,
       isMultipleLanguages,
       userName,
       isCollapsed,
       togglePositionTop,
+      backButtonOnTop,
       appVersion,
       changeLogRoute,
       toChangeLog,
       toggleOpen,
       toggleCollapse,
       logout,
+      toBack,
     };
   },
 });