mobilizon/js/src/views/Admin/Dashboard.vue

<template>
  <div>
    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>
          <router-link :to="{ name: RouteName.ADMIN }">{{
            $t("Admin")
          }}</router-link>
        </li>
        <li class="is-active">
          <router-link :to="{ name: RouteName.ADMIN_DASHBOARD }">{{
            $t("Dashboard")
          }}</router-link>
        </li>
      </ul>
    </nav>
    <section>
      <h1 class="title">{{ $t("Administration") }}</h1>
      <div class="tile is-ancestor" v-if="dashboard">
        <div class="tile is-vertical">
          <div class="tile">
            <div class="tile is-parent is-vertical is-6">
              <article class="tile is-child box">
                <p class="dashboard-number">{{ dashboard.numberOfEvents }}</p>
                <p
                  v-html="
                    $t(
                      'Published events with <b>{comments}</b> comments and <b>{participations}</b> confirmed participations',
                      {
                        comments: dashboard.numberOfComments,
                        participations:
                          dashboard.numberOfConfirmedParticipationsToLocalEvents,
                      }
                    )
                  "
                />
              </article>
              <article class="tile is-child box">
                <router-link :to="{ name: RouteName.ADMIN_GROUPS }">
                  <p class="dashboard-number">{{ dashboard.numberOfGroups }}</p>
                  <p>{{ $t("Groups") }}</p>
                </router-link>
              </article>
            </div>
            <div class="tile is-parent is-vertical">
              <article class="tile is-child box">
                <router-link :to="{ name: RouteName.USERS }">
                  <p class="dashboard-number">{{ dashboard.numberOfUsers }}</p>
                  <p>{{ $t("Users") }}</p>
                </router-link>
              </article>
              <article class="tile is-child box">
                <router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">
                  <p class="dashboard-number">
                    {{ dashboard.numberOfFollowers }}
                  </p>
                  <p>{{ $t("Instances following you") }}</p>
                </router-link>
              </article>
            </div>
            <div class="tile is-parent is-vertical">
              <article class="tile is-child box">
                <router-link :to="{ name: RouteName.REPORTS }">
                  <p class="dashboard-number">
                    {{ dashboard.numberOfReports }}
                  </p>
                  <p>{{ $t("Opened reports") }}</p>
                </router-link>
              </article>
              <article class="tile is-child box">
                <router-link :to="{ name: RouteName.RELAY_FOLLOWINGS }">
                  <p class="dashboard-number">
                    {{ dashboard.numberOfFollowings }}
                  </p>
                  <p>{{ $t("Instances you follow") }}</p>
                </router-link>
              </article>
            </div>
          </div>
          <div class="tile">
            <div
              class="tile is-parent is-vertical is-6"
              v-if="dashboard.lastPublicEventPublished"
            >
              <article class="tile is-child box">
                <router-link
                  :to="{
                    name: RouteName.EVENT,
                    params: { uuid: dashboard.lastPublicEventPublished.uuid },
                  }"
                >
                  <p>{{ $t("Last published event") }}</p>
                  <p class="subtitle">
                    {{ dashboard.lastPublicEventPublished.title }}
                  </p>
                  <figure
                    class="image is-4by3"
                    v-if="dashboard.lastPublicEventPublished.picture"
                  >
                    <img
                      :src="dashboard.lastPublicEventPublished.picture.url"
                    />
                  </figure>
                </router-link>
              </article>
            </div>
            <div
              class="tile is-parent is-vertical"
              v-if="dashboard.lastGroupCreated"
            >
              <article class="tile is-child box">
                <router-link
                  :to="{
                    name: RouteName.GROUP,
                    params: {
                      preferredUsername: usernameWithDomain(
                        dashboard.lastGroupCreated
                      ),
                    },
                  }"
                >
                  <p>{{ $t("Last group created") }}</p>
                  <p class="subtitle">
                    {{
                      dashboard.lastGroupCreated.name ||
                      dashboard.lastGroupCreated.preferredUsername
                    }}
                  </p>
                  <figure
                    class="image is-4by3"
                    v-if="dashboard.lastGroupCreated.avatar"
                  >
                    <img :src="dashboard.lastGroupCreated.avatar.url" />
                  </figure>
                </router-link>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { DASHBOARD } from "@/graphql/admin";
import { IDashboard } from "@/types/admin.model";
import { usernameWithDomain } from "@/types/actor";
import RouteName from "../../router/name";

@Component({
  apollo: {
    dashboard: {
      query: DASHBOARD,
      fetchPolicy: "cache-and-network",
    },
  },
  metaInfo() {
    return {
      title: this.$t("Administration") as string,
      titleTemplate: "%s | Mobilizon",
    };
  },
})
export default class Dashboard extends Vue {
  dashboard!: IDashboard;

  RouteName = RouteName;

  usernameWithDomain = usernameWithDomain;
}
</script>

<style lang="scss" scoped>
.dashboard-number {
  color: #3c376e;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.125;
}

.tile a,
article.tile a {
  color: #4a4a4a;
  text-decoration: none;
}
</style>