summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/repository/components/breadcrumbs.vue
blob: 67963dc1923b9d3ae37db38e27bbe328e760bfd6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<script>
import getRefMixin from '../mixins/get_ref';
import getProjectShortPath from '../queries/getProjectShortPath.query.graphql';

export default {
  apollo: {
    projectShortPath: {
      query: getProjectShortPath,
    },
  },
  mixins: [getRefMixin],
  props: {
    currentPath: {
      type: String,
      required: false,
      default: '/',
    },
  },
  data() {
    return {
      projectShortPath: '',
    };
  },
  computed: {
    pathLinks() {
      return this.currentPath
        .split('/')
        .filter(p => p !== '')
        .reduce(
          (acc, name, i) => {
            const path = `${i > 0 ? acc[i].path : ''}/${name}`;

            return acc.concat({
              name,
              path,
              to: `/tree/${this.ref}${path}`,
            });
          },
          [{ name: this.projectShortPath, path: '/', to: `/tree/${this.ref}/` }],
        );
    },
  },
  methods: {
    isLast(i) {
      return i === this.pathLinks.length - 1;
    },
  },
};
</script>

<template>
  <nav :aria-label="__('Files breadcrumb')">
    <ol class="breadcrumb repo-breadcrumb">
      <li v-for="(link, i) in pathLinks" :key="i" class="breadcrumb-item">
        <router-link :to="link.to" :aria-current="isLast(i) ? 'page' : null">
          {{ link.name }}
        </router-link>
      </li>
    </ol>
  </nav>
</template>