mobilizon.chapril.org-mobilizon/js/src/views/Admin/Follows.vue

<template>
  <section>
    <h1 class="title">{{ $t("Instances") }}</h1>
    <div class="tabs is-boxed">
      <ul>
        <router-link
          tag="li"
          active-class="is-active"
          :to="{ name: RouteName.RELAY_FOLLOWINGS }"
          exact
        >
          <a>
            <b-icon icon="inbox-arrow-down"></b-icon>
            <span>
              {{ $t("Followings") }}
              <b-tag rounded>{{ relayFollowings.total }}</b-tag>
            </span>
          </a>
        </router-link>
        <router-link
          tag="li"
          active-class="is-active"
          :to="{ name: RouteName.RELAY_FOLLOWERS }"
          exact
        >
          <a>
            <b-icon icon="inbox-arrow-up"></b-icon>
            <span>
              {{ $t("Followers") }}
              <b-tag rounded>{{ relayFollowers.total }}</b-tag>
            </span>
          </a>
        </router-link>
      </ul>
    </div>
    <router-view></router-view>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from "@/graphql/admin";
import { Paginate } from "@/types/paginate";
import { IFollower } from "@/types/actor/follower.model";
import RouteName from "../../router/name";

@Component({
  apollo: {
    relayFollowings: {
      query: RELAY_FOLLOWINGS,
      fetchPolicy: "cache-and-network",
    },
    relayFollowers: {
      query: RELAY_FOLLOWERS,
      fetchPolicy: "cache-and-network",
    },
  },
})
export default class Follows extends Vue {
  RouteName = RouteName;

  activeTab = 0;

  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };

  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
}
</script>
<style lang="scss" scoped>
.tab-item {
  form {
    margin-bottom: 1.5rem;
  }
}

a {
  text-decoration: none !important;
}
</style>