Add a breadcrumbs component

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Group/Group.vue

@@ -1,27 +1,17 @@
 <template>
   <div class="container is-widescreen">
     <div class="header">
-      <nav class="breadcrumb" :aria-label="$t('Breadcrumbs')">
-        <ul>
-          <li>
-            <router-link :to="{ name: RouteName.MY_GROUPS }">{{
-              $t("My groups")
-            }}</router-link>
-          </li>
-          <li class="is-active">
-            <router-link
-              aria-current-value="location"
-              v-if="group && group.preferredUsername"
-              :to="{
-                name: RouteName.GROUP,
-                params: { preferredUsername: usernameWithDomain(group) },
-              }"
-              >{{ group.name }}</router-link
-            >
-            <b-skeleton v-else :animated="true"></b-skeleton>
-          </li>
-        </ul>
-      </nav>
+      <breadcrumbs-nav
+        v-if="group"
+        :links="[
+          { name: RouteName.MY_GROUPS, text: $t('My groups') },
+          {
+            name: RouteName.GROUP,
+            params: { preferredUsername: usernameWithDomain(group) },
+            text: displayName(group),
+          },
+        ]"
+      />
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <header class="block-container presentation" v-if="group">
         <div class="banner-container">
@@ -776,6 +766,8 @@ export default class Group extends mixins(GroupMixin) {
 
   usernameWithDomain = usernameWithDomain;
 
+  displayName = displayName;
+
   PostVisibility = PostVisibility;
 
   Openness = Openness;

js/src/views/Group/GroupFollowers.vue

@@ -1,36 +1,25 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul v-if="group">
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ group.name }}</router-link
-          >
-        </li>
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.GROUP_SETTINGS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Settings") }}</router-link
-          >
-        </li>
-        <li class="is-active">
-          <router-link
-            :to="{
-              name: RouteName.GROUP_FOLLOWERS_SETTINGS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Followers") }}</router-link
-          >
-        </li>
-      </ul>
-    </nav>
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.GROUP_SETTINGS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Settings'),
+        },
+        {
+          name: RouteName.GROUP_FOLLOWERS_SETTINGS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Followers'),
+        },
+      ]"
+    />
     <b-loading :active="$apollo.loading" />
     <section
       class="container section"
@@ -138,7 +127,7 @@ import GroupMixin from "@/mixins/group";
 import { mixins } from "vue-class-component";
 import { GROUP_FOLLOWERS, UPDATE_FOLLOWER } from "@/graphql/followers";
 import RouteName from "../../router/name";
-import { usernameWithDomain } from "../../types/actor";
+import { displayName, usernameWithDomain } from "../../types/actor";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { IFollower } from "@/types/actor/follower.model";
 import { Paginate } from "@/types/paginate";
@@ -181,6 +170,8 @@ export default class GroupFollowers extends mixins(GroupMixin) {
 
   usernameWithDomain = usernameWithDomain;
 
+  displayName = displayName;
+
   followers!: Paginate<IFollower>;
 
   mounted(): void {

js/src/views/Group/GroupMembers.vue

@@ -1,36 +1,25 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul v-if="group">
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ group.name }}</router-link
-          >
-        </li>
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.GROUP_SETTINGS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Settings") }}</router-link
-          >
-        </li>
-        <li class="is-active">
-          <router-link
-            :to="{
-              name: RouteName.GROUP_MEMBERS_SETTINGS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Members") }}</router-link
-          >
-        </li>
-      </ul>
-    </nav>
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.GROUP_SETTINGS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Settings'),
+        },
+        {
+          name: RouteName.GROUP_MEMBERS_SETTINGS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Members'),
+        },
+      ]"
+    />
     <b-loading :active="$apollo.loading" />
     <section
       class="container section"
@@ -312,6 +301,8 @@ export default class GroupMembers extends mixins(GroupMixin) {
 
   usernameWithDomain = usernameWithDomain;
 
+  displayName = displayName;
+
   mounted(): void {
     const roleQuery = this.$route.query.role as string;
     if (Object.values(MemberRole).includes(roleQuery as MemberRole)) {

js/src/views/Group/GroupSettings.vue

@@ -1,37 +1,25 @@
 <template>
   <div>
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul>
-        <li>
-          <router-link
-            v-if="group"
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ group.name || usernameWithDomain(group) }}</router-link
-          >
-        </li>
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.GROUP_SETTINGS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Settings") }}</router-link
-          >
-        </li>
-        <li class="is-active">
-          <router-link
-            :to="{
-              name: RouteName.GROUP_PUBLIC_SETTINGS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Group settings") }}</router-link
-          >
-        </li>
-      </ul>
-    </nav>
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.GROUP_SETTINGS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Settings'),
+        },
+        {
+          name: RouteName.GROUP_PUBLIC_SETTINGS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Group settings'),
+        },
+      ]"
+    />
     <b-loading :active="$apollo.loading" />
     <section
       class="container section"
@@ -197,7 +185,12 @@ import { mixins } from "vue-class-component";
 import GroupMixin from "@/mixins/group";
 import { GroupVisibility, Openness } from "@/types/enums";
 import { UPDATE_GROUP } from "../../graphql/group";
-import { Group, IGroup, usernameWithDomain } from "../../types/actor";
+import {
+  Group,
+  IGroup,
+  usernameWithDomain,
+  displayName,
+} from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";
 import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
@@ -234,6 +227,8 @@ export default class GroupSettings extends mixins(GroupMixin) {
 
   usernameWithDomain = usernameWithDomain;
 
+  displayName = displayName;
+
   GroupVisibility = GroupVisibility;
 
   Openness = Openness;

js/src/views/Group/Timeline.vue

@@ -1,27 +1,21 @@
 <template>
   <div class="container section">
-    <nav class="breadcrumb" aria-label="breadcrumbs">
-      <ul v-if="group">
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ group.name }}</router-link
-          >
-        </li>
-        <li>
-          <router-link
-            :to="{
-              name: RouteName.TIMELINE,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("Activity") }}</router-link
-          >
-        </li>
-      </ul>
-    </nav>
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.TIMELINE,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Activity'),
+        },
+      ]"
+    />
+
     <section class="timeline">
       <b-field>
         <b-radio-button v-model="activityType" :native-value="undefined">
@@ -160,7 +154,7 @@
 </template>
 <script lang="ts">
 import { GROUP_TIMELINE } from "@/graphql/group";
-import { IGroup, usernameWithDomain } from "@/types/actor";
+import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
 import { ActivityType } from "@/types/enums";
 import { Paginate } from "@/types/paginate";
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -234,6 +228,8 @@ export default class Timeline extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
+  displayName = displayName;
+
   ActivityType = ActivityType;
 
   ActivityAuthorFilter = ActivityAuthorFilter;