69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<script>
|
|
// Since app/assets/javascripts/packages_and_registries/shared/components/registry_breadcrumb.vue
|
|
// can only handle two levels of breadcrumbs, but we have three levels here.
|
|
// So we extended the registry_breadcrumb.vue component with harbor_registry_breadcrumb.vue to support multiple levels of breadcrumbs
|
|
import { GlBreadcrumb, GlIcon } from '@gitlab/ui';
|
|
import { isArray, last } from 'lodash';
|
|
|
|
export default {
|
|
components: {
|
|
GlBreadcrumb,
|
|
GlIcon,
|
|
},
|
|
computed: {
|
|
rootRoute() {
|
|
return this.$router.options.routes.find((r) => r.meta.root);
|
|
},
|
|
isRootRoute() {
|
|
return this.$route.name === this.rootRoute.name;
|
|
},
|
|
currentRoute() {
|
|
const currentName = this.$route.meta.nameGenerator();
|
|
const currentHref = this.$route.meta.hrefGenerator();
|
|
let routeInfoList = [
|
|
{
|
|
text: currentName,
|
|
to: currentHref,
|
|
},
|
|
];
|
|
|
|
if (isArray(currentName) && isArray(currentHref)) {
|
|
routeInfoList = currentName.map((name, index) => {
|
|
return {
|
|
text: name,
|
|
to: currentHref[index],
|
|
};
|
|
});
|
|
}
|
|
|
|
return routeInfoList;
|
|
},
|
|
isLoaded() {
|
|
return this.isRootRoute || last(this.currentRoute).text;
|
|
},
|
|
allCrumbs() {
|
|
let crumbs = [
|
|
{
|
|
text: this.rootRoute.meta.nameGenerator(),
|
|
to: this.rootRoute.path,
|
|
},
|
|
];
|
|
if (!this.isRootRoute) {
|
|
crumbs = crumbs.concat(this.currentRoute);
|
|
}
|
|
return crumbs;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<gl-breadcrumb :key="isLoaded" :items="allCrumbs">
|
|
<template #separator>
|
|
<span class="gl-mx-n5">
|
|
<gl-icon name="chevron-lg-right" :size="8" />
|
|
</span>
|
|
</template>
|
|
</gl-breadcrumb>
|
|
</template>
|