hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add a breadcrumbs component

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

48
js/src/views/Admin/AdminGroupProfile.vue
View File

@@ -1,31 +1,19 @@
<template>
<div v-if="group" class="section">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.ADMIN }">{{
$t("Admin")
}}</router-link>
</li>
<li>
<router-link
:to="{
name: RouteName.ADMIN_GROUPS,
}"
>{{ $t("Groups") }}</router-link
>
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.PROFILES,
params: { id: group.id },
}"
>{{ group.name || usernameWithDomain(group) }}</router-link
>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{
name: RouteName.ADMIN_GROUPS,
text: $t('Groups'),
},
{
name: RouteName.PROFILES,
params: { id: group.id },
text: displayName(group),
},
]"
/>
<div class="actor-card">
<p v-if="group.suspended">
<actor-card
@@ -305,7 +293,11 @@ import { formatBytes } from "@/utils/datetime";
import { MemberRole } from "@/types/enums";
import { SUSPEND_PROFILE, UNSUSPEND_PROFILE } from "../../graphql/actor";
import { IGroup } from "../../types/actor";
import { usernameWithDomain, IActor } from "../../types/actor/actor.model";
import {
usernameWithDomain,
displayName,
IActor,
} from "../../types/actor/actor.model";
import RouteName from "../../router/name";
import ActorCard from "../../components/Account/ActorCard.vue";
import EmptyContent from "../../components/Utils/EmptyContent.vue";
@@ -359,6 +351,8 @@ export default class AdminGroupProfile extends Vue {
usernameWithDomain = usernameWithDomain;
displayName = displayName;
RouteName = RouteName;
EVENTS_PER_PAGE = EVENTS_PER_PAGE;

45
js/src/views/Admin/AdminProfile.vue
View File

@@ -1,31 +1,20 @@
<template>
<div v-if="person" class="section">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.ADMIN }">{{
$t("Admin")
}}</router-link>
</li>
<li>
<router-link
:to="{
name: RouteName.PROFILES,
}"
>{{ $t("Profiles") }}</router-link
>
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.PROFILES,
params: { id: person.id },
}"
>{{ person.name || person.preferredUsername }}</router-link
>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{
name: RouteName.PROFILES,
text: $t('Profiles'),
},
{
name: RouteName.PROFILES,
params: { id: person.id },
text: displayName(person),
},
]"
/>
<div class="actor-card">
<actor-card
:actor="person"
@@ -279,7 +268,7 @@ import {
UNSUSPEND_PROFILE,
} from "../../graphql/actor";
import { IPerson } from "../../types/actor";
import { usernameWithDomain } from "../../types/actor/actor.model";
import { displayName, usernameWithDomain } from "../../types/actor/actor.model";
import RouteName from "../../router/name";
import ActorCard from "../../components/Account/ActorCard.vue";
import EmptyContent from "../../components/Utils/EmptyContent.vue";
@@ -334,6 +323,8 @@ export default class AdminProfile extends Vue {
usernameWithDomain = usernameWithDomain;
displayName = displayName;
RouteName = RouteName;
EVENTS_PER_PAGE = EVENTS_PER_PAGE;

41
js/src/views/Admin/AdminUserProfile.vue
View File

@@ -1,31 +1,20 @@
<template>
<div v-if="user" class="section">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.ADMIN }">{{
$t("Admin")
}}</router-link>
</li>
<li>
<router-link
:to="{
name: RouteName.USERS,
}"
>{{ $t("Users") }}</router-link
>
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.ADMIN_USER_PROFILE,
params: { id: user.id },
}"
>{{ user.email }}</router-link
>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{
name: RouteName.USERS,
text: $t('Users'),
},
{
name: RouteName.ADMIN_USER_PROFILE,
params: { id: user.id },
text: user.email,
},
]"
/>
<table v-if="metadata.length > 0" class="table is-fullwidth">
<tbody>
<tr v-for="{ key, value, link, elements, type } in metadata" :key="key">

20
js/src/views/Admin/Dashboard.vue
View File

@@ -1,19 +1,11 @@
<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>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{ text: $t('Dashboard') },
]"
/>
<section>
<h1 class="title">{{ $t("Administration") }}</h1>
<div class="tile is-ancestor" v-if="dashboard">

23
js/src/views/Admin/GroupProfiles.vue
View File

@@ -1,19 +1,14 @@
<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.PROFILES }">{{
$t("Groups")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.MODERATION, text: $t('Moderation') },
{
name: RouteName.ADMIN_GROUPS,
text: $t('Groups'),
},
]"
/>
<div class="buttons" v-if="showCreateGroupsButton">
<router-link
class="button is-primary"

30
js/src/views/Admin/Instance.vue
View File

@@ -1,28 +1,12 @@
<template>
<div v-if="instance">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: RouteName.ADMIN }">{{
$t("Admin")
}}</router-link>
</li>
<li>
<router-link :to="{ name: RouteName.INSTANCES }">{{
$t("Instances")
}}</router-link>
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.INSTANCE,
params: { domain: instance.domain },
}"
>{{ instance.domain }}</router-link
>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{ name: RouteName.INSTANCES, text: $t('Instances') },
{ text: instance.domain },
]"
/>
<h1 class="text-2xl">{{ instance.domain }}</h1>
<div class="grid md:grid-cols-4 gap-2 content-center text-center mt-2">
<div class="bg-gray-50 rounded-xl p-8 dark:bg-gray-800">

28
js/src/views/Admin/Instances.vue
View File

@@ -1,28 +1,16 @@
<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.INSTANCES }">{{
$t("Instances")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{ text: $t('Instances') },
]"
/>
<section>
<h1 class="title">{{ $t("Instances") }}</h1>
<form @submit="followInstance" class="my-4">
<b-field
:label="$t('Follow a new instance')"
custom-class="add-relay"
horizontal
>
<b-field grouped expanded size="is-large">
<b-field :label="$t('Follow a new instance')" horizontal>
<b-field grouped group-multiline expanded size="is-large">
<p class="control">
<b-input
v-model="newRelayAddress"

23
js/src/views/Admin/Profiles.vue
View File

@@ -1,19 +1,14 @@
<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.PROFILES }">{{
$t("Profiles")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.MODERATION, text: $t('Moderation') },
{
name: RouteName.PROFILES,
text: $t('Profiles'),
},
]"
/>
<div v-if="persons">
<b-switch v-model="local">{{ $t("Local") }}</b-switch>
<b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>

21
js/src/views/Admin/Settings.vue
View File

@@ -1,19 +1,12 @@
<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_SETTINGS }">{{
$t("Instance settings")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.ADMIN, text: $t('Admin') },
{ text: $t('Instance settings') },
]"
/>
<section v-if="settingsToWrite">
<form @submit.prevent="updateSettings">
<b-field :label="$t('Instance Name')" label-for="instance-name">

23
js/src/views/Admin/Users.vue
View File

@@ -1,19 +1,14 @@
<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.USERS }">{{
$t("Users")
}}</router-link>
</li>
</ul>
</nav>
<breadcrumbs-nav
:links="[
{ name: RouteName.MODERATION, text: $t('Moderation') },
{
name: RouteName.USERS,
text: $t('Users'),
},
]"
/>
<div v-if="users">
<b-table
:data="users.elements"