From cfabc88485798d03be5c19467b25a6007f0d3aee Mon Sep 17 00:00:00 2001
From: Rohit Yadav <rohit.yadav@shapeblue.com>
Date: Sat, 12 Oct 2019 22:52:07 +0530
Subject: [PATCH] breadcrumb: de-duplicate and reuse component

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
---
 ui/src/components/page/GlobalHeader.vue  | 74 +++---------------------
 ui/src/components/widgets/Breadcrumb.vue | 37 ++++++------
 ui/src/utils/device.js                   |  4 +-
 ui/src/views/AutogenView.vue             |  6 +-
 4 files changed, 32 insertions(+), 89 deletions(-)

diff --git a/ui/src/components/page/GlobalHeader.vue b/ui/src/components/page/GlobalHeader.vue
index 47b779aaf3f..cf16eaf31cb 100644
--- a/ui/src/components/page/GlobalHeader.vue
+++ b/ui/src/components/page/GlobalHeader.vue
@@ -11,26 +11,7 @@
         class="trigger"
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
         @click="toggle"/>
-
-      <a-breadcrumb class="breadcrumb" v-if="device === 'desktop'">
-        <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-          <router-link
-            v-if="item.name"
-            :to="{ path: item.path === '' ? '/' : item.path }"
-          >
-            <a-icon v-if="index == 0" :type="item.meta.icon" />
-            {{ $t(item.meta.title) }}
-          </router-link>
-          <span v-else-if="$route.params.id">
-            {{ $route.params.id }}
-            <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
-              <a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/>
-            </a-button>
-          </span>
-          <span v-else>{{ $t(tem.meta.title) }}</span>
-        </a-breadcrumb-item>
-      </a-breadcrumb>
-
+      <breadcrumb v-if="device !== 'mobile'" />
       <user-menu></user-menu>
     </div>
     <div v-else :class="['top-nav-header-index', theme]">
@@ -49,19 +30,7 @@
             :type="collapsed ? 'menu-fold' : 'menu-unfold'"
             @click="toggle"></a-icon>
         </div>
-        <a-breadcrumb class="breadcrumb" v-if="device !== 'mobile'">
-          <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-            <router-link
-              v-if="item.name"
-              :to="{ path: item.path === '' ? '/' : item.path }"
-            >
-              <a-icon v-if="index == 0" :type="item.meta.icon" />
-              {{ item.meta.title }}
-            </router-link>
-            <span v-else-if="$route.params.id">{{ $route.params.id }}</span>
-            <span v-else>{{ item.meta.title }}</span>
-          </a-breadcrumb-item>
-        </a-breadcrumb>
+        <breadcrumb v-if="device !== 'mobile'" />
         <user-menu class="header-index-right"></user-menu>
       </div>
     </div>
@@ -70,17 +39,19 @@
 </template>
 
 <script>
-import UserMenu from '../tools/UserMenu'
-import SMenu from '../menu/'
+import Breadcrumb from '@/components/widgets/Breadcrumb'
 import Logo from '../tools/Logo'
+import SMenu from '../menu/'
+import UserMenu from '../tools/UserMenu'
 
 import { mixin } from '@/utils/mixin.js'
 
 export default {
   name: 'GlobalHeader',
   components: {
-    SMenu,
+    Breadcrumb,
     Logo,
+    SMenu,
     UserMenu
   },
   mixins: [mixin],
@@ -112,29 +83,13 @@ export default {
   },
   data () {
     return {
-      headerBarFixed: false,
-      breadList: []
-    }
-  },
-  created () {
-    this.getBreadcrumb()
-  },
-  watch: {
-    $route () {
-      this.getBreadcrumb()
+      headerBarFixed: false
     }
   },
   mounted () {
     window.addEventListener('scroll', this.handleScroll)
   },
   methods: {
-    getBreadcrumb () {
-      this.breadList = []
-      this.name = this.$route.name
-      this.$route.matched.forEach((item) => {
-        this.breadList.push(item)
-      })
-    },
     handleScroll () {
       if (this.autoHideHeader) {
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
@@ -163,19 +118,6 @@ export default {
 
   .ant-breadcrumb {
     display: inline;
-    vertical-align: text-bottom;
-  }
-
-  .ant-breadcrumb .anticon {
-    margin-top: -3px;
-    margin-left: 12px;
-  }
-
-  .anticon-home {
-    font-size: 14px;
-  }
-
-  .anticon {
     vertical-align: middle;
   }
 }
diff --git a/ui/src/components/widgets/Breadcrumb.vue b/ui/src/components/widgets/Breadcrumb.vue
index efbdf117a13..86addbd5338 100644
--- a/ui/src/components/widgets/Breadcrumb.vue
+++ b/ui/src/components/widgets/Breadcrumb.vue
@@ -1,23 +1,21 @@
 <template>
   <a-breadcrumb class="breadcrumb">
-    <a-card :bordered="true">
-      <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-        <router-link
-          v-if="item.name"
-          :to="{ path: item.path === '' ? '/' : item.path }"
-        >
-          <a-icon v-if="index == 0" :type="item.meta.icon" />
-          {{ $t(item.meta.title) }}
-        </router-link>
-        <span v-else-if="$route.params.id">
-          {{ $route.params.id }}
-          <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
-            <a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/>
-          </a-button>
-        </span>
-        <span v-else>{{ $t(item.meta.title) }}</span>
-      </a-breadcrumb-item>
-    </a-card>
+    <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
+      <router-link
+        v-if="item && item.name"
+        :to="{ path: item.path === '' ? '/' : item.path }"
+      >
+        <a-icon v-if="index == 0" :type="item.meta.icon" />
+        {{ $t(item.meta.title) }}
+      </router-link>
+      <span v-else-if="$route.params.id">
+        {{ $route.params.id }}
+        <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
+          <a-icon type="copy" style="margin-left: -1px; margin-top: 1px"/>
+        </a-button>
+      </span>
+      <span v-else>{{ $t(item.meta.title) }}</span>
+    </a-breadcrumb-item>
   </a-breadcrumb>
 </template>
 
@@ -43,8 +41,8 @@ export default {
   },
   methods: {
     getBreadcrumb () {
-      this.breadList = []
       this.name = this.$route.name
+      this.breadList = []
       this.$route.matched.forEach((item) => {
         this.breadList.push(item)
       })
@@ -61,5 +59,6 @@ export default {
 
 .ant-breadcrumb .anticon {
   margin-left: 8px;
+  vertical-align: text-bottom;
 }
 </style>
diff --git a/ui/src/utils/device.js b/ui/src/utils/device.js
index 2bdfca8c047..93def972ef7 100644
--- a/ui/src/utils/device.js
+++ b/ui/src/utils/device.js
@@ -28,6 +28,6 @@ export const deviceEnquire = function (callback) {
   // screen and (max-width: 1087.99px)
   enquireJs
     .register('screen and (max-width: 576px)', matchMobile)
-    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchTablet)
-    .register('screen and (min-width: 1200px)', matchDesktop)
+    .register('screen and (min-width: 576px) and (max-width: 1366px)', matchTablet)
+    .register('screen and (min-width: 1367px)', matchDesktop)
 }
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 80060d15580..64378489a04 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <breadcrumb v-if="device !== 'desktop'" class="mobile-breadcrumb" />
+    <a-card class="mobile-breadcrumb" v-if="device === 'mobile'">
+      <breadcrumb />
+    </a-card>
     <a-row>
       <a-col :span="18">
         <a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="action.api in $store.getters.apis && ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView))">
@@ -576,7 +578,7 @@ export default {
   margin-left: -16px;
   margin-right: -16px;
   margin-top: -16px;
-  padding-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .row-element {