Add a breadcrumbs component

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-01-10 15:19:16 +01:00
parent 40758a83d5
commit 1daa8c5f5a
35 changed files with 695 additions and 830 deletions

View File

@@ -1,19 +1,17 @@
<template>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.MODERATION }">{{
$t("Moderation")
}}</router-link>
</li>
<li class="is-active">
<router-link :to="{ name: RouteName.REPORT_LOGS }">{{
$t("Moderation log")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{
name: RouteName.MODERATION,
text: $t('Moderation'),
},
{
name: RouteName.REPORT_LOGS,
text: $t('Moderation log'),
},
]"
/>
<section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
<ul>
<li v-for="log in actionLogs.elements" :key="log.id">

View File

@@ -1,27 +1,23 @@
<template>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs" v-if="report">
<ul>
<li>
<router-link :to="{ name: RouteName.MODERATION }">{{
$t("Moderation")
}}</router-link>
</li>
<li>
<router-link :to="{ name: RouteName.REPORTS }">{{
$t("Reports")
}}</router-link>
</li>
<li class="is-active">
<router-link
:to="{ name: RouteName.REPORT, params: { id: report.id } }"
>{{
$t("Report #{reportNumber}", { reportNumber: report.id })
}}</router-link
>
</li>
</ul>
</nav>
<breadcrumbs-nav
v-if="report"
:links="[
{
name: RouteName.MODERATION,
text: $t('Moderation'),
},
{
name: RouteName.REPORTS,
text: $t('Reports'),
},
{
name: RouteName.REPORT,
params: { id: report.id },
text: $t('Report #{reportNumber}', { reportNumber: report.id }),
},
]"
/>
<section>
<b-message
title="Error"

View File

@@ -1,19 +1,17 @@
<template>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.MODERATION }">{{
$t("Moderation")
}}</router-link>
</li>
<li class="is-active">
<router-link :to="{ name: RouteName.REPORTS }">{{
$t("Reports")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{
name: RouteName.MODERATION,
text: $t('Moderation'),
},
{
name: RouteName.REPORTS,
text: $t('Reports'),
},
]"
/>
<section>
<div class="flex flex-wrap gap-2">
<b-field :label="$t('Report status')">
@@ -93,7 +91,7 @@
</div>
</template>
<script lang="ts">
import { Component, Ref, Vue } from "vue-property-decorator";
import { Component, Vue } from "vue-property-decorator";
import { IReport } from "@/types/report.model";
import { REPORTS } from "@/graphql/report";
import ReportCard from "@/components/Report/ReportCard.vue";