feat: added "<-back" button in header

magner/lib/controllers/i18n/en.ts

@@ -2,6 +2,7 @@ export const enLocale = {
   core: {
     header: {
       logout: 'Log out',
+      back: 'Back',
     },
 
     sidebar: {

magner/lib/controllers/i18n/ru.ts

@@ -12,6 +12,7 @@ export const ruLocale: TranslationSchema = {
   core: {
     header: {
       logout: 'Выйти',
+      back: 'Назад',
     },
 
     sidebar: {

magner/lib/controllers/i18n/uz.ts

@@ -4,6 +4,7 @@ export const uzLocale: TranslationSchema = {
   core: {
     header: {
       logout: 'Чиқиш',
+      back: 'Ортга',
     },
 
     sidebar: {

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>,
 

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,
     };
   },
 });