Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

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
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
35 changed files with 695 additions and 830 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
js/src/components/Utils/Breadcrumbs.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<nav class="flex mb-3" :aria-label="$t('Breadcrumbs')">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li
class="inline-flex items-center"
v-for="(element, index) in links"
:key="index"
:aria-current="index > 0 ? 'page' : undefined"
>
<router-link
v-if="index === 0"
:to="element"
class="inline-flex items-center text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
{{ element.text }}
</router-link>
<div class="flex items-center" v-else-if="index === links.length - 1">
<svg
class="w-6 h-6 text-gray-400 rtl:rotate-180"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
class="ltr:ml-1 rtl:mr-1 font-medium text-gray-400 md:ltr:ml-2 md:rtl:mr-2 dark:text-gray-500"
>{{ element.text }}</span
>
</div>
<div class="flex items-center" v-else>
<svg
class="w-6 h-6 text-gray-400 rtl:rotate-180"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
<router-link
:to="element"
class="ltr:ml-1 rtl:mr-1 font-medium text-gray-700 hover:text-gray-900 md:ltr:ml-2 md:rtl:mr-2 dark:text-gray-400 dark:hover:text-white"
>{{ element.text }}</router-link
>
</div>
</li>
<slot></slot>
</ol>
</nav>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Location } from "vue-router";
type LinkElement = Location & { text: string };
@Component
export default class Breadcrumbs extends Vue {
@Prop({ type: Array, required: true }) links!: LinkElement[];
}
</script>

2
js/src/main.ts
View File

@ -12,6 +12,7 @@ import { NotifierPlugin } from "./plugins/notifier";
import filters from "./filters"; import filters from "./filters";
import { i18n } from "./utils/i18n"; import { i18n } from "./utils/i18n";
import apolloProvider from "./vue-apollo"; import apolloProvider from "./vue-apollo";
import Breadcrumbs from "@/components/Utils/Breadcrumbs.vue";
import "./registerServiceWorker"; import "./registerServiceWorker";
import "./assets/tailwind.css"; import "./assets/tailwind.css";
@ -25,6 +26,7 @@ Vue.use(VueScrollTo);
Vue.use(VTooltip); Vue.use(VTooltip);
Vue.use(VueAnnouncer); Vue.use(VueAnnouncer);
Vue.use(VueSkipTo); Vue.use(VueSkipTo);
Vue.component("breadcrumbs-nav", Breadcrumbs);
// Register the router hooks with their names // Register the router hooks with their names
Component.registerHooks([ Component.registerHooks([

49
js/src/views/Account/children/EditIdentity.vue
View File

@ -1,28 +1,6 @@
<template> <template>
<div> <div>
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav :links="breadcrumbsLinks" />
<ul>
<li>
<router-link :to="{ name: RouteName.IDENTITIES }">{{
$t("Profiles")
}}</router-link>
</li>
<li class="is-active" v-if="isUpdate && identity">
<router-link
:to="{
name: RouteName.UPDATE_IDENTITY,
params: { identityName: identity.preferredUsername },
}"
>{{ identity.name }}</router-link
>
</li>
<li class="is-active" v-else>
<router-link :to="{ name: RouteName.CREATE_IDENTITY }">{{
$t("New profile")
}}</router-link>
</li>
</ul>
</nav>
<div class="root" v-if="identity"> <div class="root" v-if="identity">
<h1 class="title"> <h1 class="title">
<span v-if="isUpdate">{{ identity.displayName() }}</span> <span v-if="isUpdate">{{ identity.displayName() }}</span>
@ -253,6 +231,7 @@ import { ServerParseError } from "@apollo/client/link/http";
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core"; import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
import pick from "lodash/pick"; import pick from "lodash/pick";
import { ActorType } from "@/types/enums"; import { ActorType } from "@/types/enums";
import { Location } from "vue-router";
@Component({ @Component({
components: { components: {
@ -670,5 +649,29 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
this.oldDisplayName = null; this.oldDisplayName = null;
this.avatarFile = null; this.avatarFile = null;
} }
get breadcrumbsLinks(): (Location & { text: string })[] {
const links = [
{
name: RouteName.IDENTITIES,
params: {},
text: this.$t("Profiles") as string,
},
];
if (this.isUpdate && this.identity) {
links.push({
name: RouteName.UPDATE_IDENTITY,
params: { identityName: this.identity.preferredUsername },
text: this.identity.name,
});
} else {
links.push({
name: RouteName.CREATE_IDENTITY,
params: {},
text: this.$t("New profile") as string,
});
}
return links;
}
} }
</script> </script>

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

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

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

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

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

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

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

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

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

@ -1,28 +1,12 @@
<template> <template>
<div v-if="instance"> <div v-if="instance">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> { name: RouteName.ADMIN, text: $t('Admin') },
<router-link :to="{ name: RouteName.ADMIN }">{{ { name: RouteName.INSTANCES, text: $t('Instances') },
$t("Admin") { text: instance.domain },
}}</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>
<h1 class="text-2xl">{{ instance.domain }}</h1> <h1 class="text-2xl">{{ instance.domain }}</h1>
<div class="grid md:grid-cols-4 gap-2 content-center text-center mt-2"> <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"> <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> <template>
<div> <div>
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> { name: RouteName.ADMIN, text: $t('Admin') },
<router-link :to="{ name: RouteName.ADMIN }">{{ { text: $t('Instances') },
$t("Admin") ]"
}}</router-link> />
</li>
<li class="is-active">
<router-link :to="{ name: RouteName.INSTANCES }">{{
$t("Instances")
}}</router-link>
</li>
</ul>
</nav>
<section> <section>
<h1 class="title">{{ $t("Instances") }}</h1> <h1 class="title">{{ $t("Instances") }}</h1>
<form @submit="followInstance" class="my-4"> <form @submit="followInstance" class="my-4">
<b-field <b-field :label="$t('Follow a new instance')" horizontal>
:label="$t('Follow a new instance')" <b-field grouped group-multiline expanded size="is-large">
custom-class="add-relay"
horizontal
>
<b-field grouped expanded size="is-large">
<p class="control"> <p class="control">
<b-input <b-input
v-model="newRelayAddress" v-model="newRelayAddress"

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

@ -1,19 +1,14 @@
<template> <template>
<div> <div>
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> { name: RouteName.MODERATION, text: $t('Moderation') },
<router-link :to="{ name: RouteName.MODERATION }">{{ {
$t("Moderation") name: RouteName.PROFILES,
}}</router-link> text: $t('Profiles'),
</li> },
<li class="is-active"> ]"
<router-link :to="{ name: RouteName.PROFILES }">{{ />
$t("Profiles")
}}</router-link>
</li>
</ul>
</nav>
<div v-if="persons"> <div v-if="persons">
<b-switch v-model="local">{{ $t("Local") }}</b-switch> <b-switch v-model="local">{{ $t("Local") }}</b-switch>
<b-switch v-model="suspended">{{ $t("Suspended") }}</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> <template>
<div> <div>
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> { name: RouteName.ADMIN, text: $t('Admin') },
<router-link :to="{ name: RouteName.ADMIN }">{{ { text: $t('Instance settings') },
$t("Admin") ]"
}}</router-link> />
</li>
<li class="is-active">
<router-link :to="{ name: RouteName.ADMIN_SETTINGS }">{{
$t("Instance settings")
}}</router-link>
</li>
</ul>
</nav>
<section v-if="settingsToWrite"> <section v-if="settingsToWrite">
<form @submit.prevent="updateSettings"> <form @submit.prevent="updateSettings">
<b-field :label="$t('Instance Name')" label-for="instance-name"> <b-field :label="$t('Instance Name')" label-for="instance-name">

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

@ -1,19 +1,14 @@
<template> <template>
<div> <div>
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> { name: RouteName.MODERATION, text: $t('Moderation') },
<router-link :to="{ name: RouteName.MODERATION }">{{ {
$t("Moderation") name: RouteName.USERS,
}}</router-link> text: $t('Users'),
</li> },
<li class="is-active"> ]"
<router-link :to="{ name: RouteName.USERS }">{{ />
$t("Users")
}}</router-link>
</li>
</ul>
</nav>
<div v-if="users"> <div v-if="users">
<b-table <b-table
:data="users.elements" :data="users.elements"

70
js/src/views/Discussions/Create.vue
View File

@ -1,42 +1,29 @@
<template> <template>
<section class="section container"> <section class="section container">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul v-if="group"> v-if="group"
<li> :links="[
<router-link :to="{ name: RouteName.MY_GROUPS }">{{ {
$t("My groups") name: RouteName.MY_GROUPS,
}}</router-link> text: $t('My groups'),
</li> },
<li> {
<router-link name: RouteName.GROUP,
:to="{ params: { preferredUsername: usernameWithDomain(group) },
name: RouteName.GROUP, text: displayName(group),
params: { preferredUsername: usernameWithDomain(group) }, },
}" {
>{{ group.name }}</router-link name: RouteName.DISCUSSION_LIST,
> params: { preferredUsername: usernameWithDomain(group) },
</li> text: $t('Discussions'),
<li> },
<router-link {
:to="{ name: RouteName.CREATE_DISCUSSION,
name: RouteName.DISCUSSION_LIST, params: { preferredUsername: usernameWithDomain(group) },
params: { preferredUsername: usernameWithDomain(group) }, text: $t('Create'),
}" },
>{{ $t("Discussions") }}</router-link ]"
> />
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.CREATE_DISCUSSION,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Create") }}</router-link
>
</li>
</ul>
<b-skeleton v-else-if="$apollo.loading" :animated="animated"></b-skeleton>
</nav>
<h1 class="title">{{ $t("Create a discussion") }}</h1> <h1 class="title">{{ $t("Create a discussion") }}</h1>
<form @submit.prevent="createDiscussion"> <form @submit.prevent="createDiscussion">
@ -67,7 +54,12 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, IPerson, usernameWithDomain } from "@/types/actor"; import {
displayName,
IGroup,
IPerson,
usernameWithDomain,
} from "@/types/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group"; import { FETCH_GROUP } from "@/graphql/group";
import { CREATE_DISCUSSION } from "@/graphql/discussion"; import { CREATE_DISCUSSION } from "@/graphql/discussion";
@ -113,6 +105,8 @@ export default class CreateDiscussion extends Vue {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
async createDiscussion(): Promise<void> { async createDiscussion(): Promise<void> {
this.errors = { title: "" }; this.errors = { title: "" };
try { try {

68
js/src/views/Discussions/Discussion.vue
View File

@ -1,46 +1,29 @@
<template> <template>
<div class="container section" v-if="discussion"> <div class="container section" v-if="discussion">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> v-if="group"
<li> :links="[
<router-link :to="{ name: RouteName.MY_GROUPS }">{{ {
$t("My groups") name: RouteName.MY_GROUPS,
}}</router-link> text: $t('My groups'),
</li> },
<li> {
<router-link name: RouteName.GROUP,
v-if="discussion.actor" params: { preferredUsername: usernameWithDomain(group) },
:to="{ text: displayName(group),
name: RouteName.GROUP, },
params: { {
preferredUsername: usernameWithDomain(discussion.actor), name: RouteName.DISCUSSION_LIST,
}, params: { preferredUsername: usernameWithDomain(group) },
}" text: $t('Discussions'),
>{{ discussion.actor.name }}</router-link },
> {
<b-skeleton v-else-if="$apollo.loading" animated /> name: RouteName.DISCUSSION,
</li> params: { id: discussion.id },
<li> text: discussion.title,
<router-link },
v-if="discussion.actor" ]"
:to="{ />
name: RouteName.DISCUSSION_LIST,
params: {
preferredUsername: usernameWithDomain(discussion.actor),
},
}"
>{{ $t("Discussions") }}</router-link
>
<b-skeleton animated v-else-if="$apollo.loading" />
</li>
<li class="is-active">
<router-link
:to="{ name: RouteName.DISCUSSION, params: { id: discussion.id } }"
>{{ discussion.title }}</router-link
>
</li>
</ul>
</nav>
<b-message v-if="error" type="is-danger"> <b-message v-if="error" type="is-danger">
{{ error }} {{ error }}
</b-message> </b-message>
@ -148,7 +131,7 @@ import {
} from "@/graphql/discussion"; } from "@/graphql/discussion";
import { IDiscussion } from "@/types/discussions"; import { IDiscussion } from "@/types/discussions";
import { Discussion as DiscussionModel } from "@/types/discussions"; import { Discussion as DiscussionModel } from "@/types/discussions";
import { usernameWithDomain } from "@/types/actor"; import { displayName, usernameWithDomain } from "@/types/actor";
import DiscussionComment from "@/components/Discussion/DiscussionComment.vue"; import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
import { GraphQLError } from "graphql"; import { GraphQLError } from "graphql";
import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment"; import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
@ -250,6 +233,7 @@ export default class Discussion extends mixins(GroupMixin) {
RouteName = RouteName; RouteName = RouteName;
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
error: string | null = null; error: string | null = null;
async reply(): Promise<void> { async reply(): Promise<void> {

54
js/src/views/Discussions/DiscussionsList.vue
View File

@ -1,32 +1,23 @@
<template> <template>
<div class="container section" v-if="group"> <div class="container section" v-if="group">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link :to="{ name: RouteName.MY_GROUPS }">{{ name: RouteName.MY_GROUPS,
$t("My groups") text: $t('My groups'),
}}</router-link> },
</li> {
<li> name: RouteName.GROUP,
<router-link params: { preferredUsername: usernameWithDomain(group) },
:to="{ text: displayName(group),
name: RouteName.GROUP, },
params: { preferredUsername: usernameWithDomain(group) }, {
}" name: RouteName.DISCUSSION_LIST,
>{{ group.name }}</router-link params: { preferredUsername: usernameWithDomain(group) },
> text: $t('Discussions'),
</li> },
<li class="is-active"> ]"
<router-link />
:to="{
name: RouteName.DISCUSSION_LIST,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Discussions") }}</router-link
>
</li>
</ul>
</nav>
<section v-if="isCurrentActorAGroupMember"> <section v-if="isCurrentActorAGroupMember">
<p> <p>
{{ {{
@ -82,7 +73,13 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { FETCH_GROUP } from "@/graphql/group"; import { FETCH_GROUP } from "@/graphql/group";
import { IActor, IGroup, IPerson, usernameWithDomain } from "@/types/actor"; import {
displayName,
IActor,
IGroup,
IPerson,
usernameWithDomain,
} from "@/types/actor";
import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue"; import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { MemberRole } from "@/types/enums"; import { MemberRole } from "@/types/enums";
@ -166,6 +163,7 @@ export default class DiscussionsList extends Vue {
RouteName = RouteName; RouteName = RouteName;
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
DISCUSSIONS_PER_PAGE = DISCUSSIONS_PER_PAGE; DISCUSSIONS_PER_PAGE = DISCUSSIONS_PER_PAGE;

40
js/src/views/Event/GroupEvents.vue
View File

@ -1,27 +1,19 @@
<template> <template>
<div class="container section" v-if="group"> <div class="container section" v-if="group">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link name: RouteName.GROUP,
:to="{ params: { preferredUsername: usernameWithDomain(group) },
name: RouteName.GROUP, text: displayName(group),
params: { preferredUsername: usernameWithDomain(group) }, },
}" {
>{{ group.name }}</router-link name: RouteName.EVENTS,
> params: { preferredUsername: usernameWithDomain(group) },
</li> text: $t('Events'),
<li class="is-active"> },
<router-link ]"
:to="{ />
name: RouteName.TODO_LISTS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Events") }}</router-link
>
</li>
</ul>
</nav>
<section> <section>
<h1 class="title" v-if="group"> <h1 class="title" v-if="group">
{{ {{
@ -89,7 +81,7 @@ import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import GroupMixin from "@/mixins/group"; import GroupMixin from "@/mixins/group";
import { IMember } from "@/types/actor/member.model"; import { IMember } from "@/types/actor/member.model";
import { FETCH_GROUP_EVENTS } from "@/graphql/event"; import { FETCH_GROUP_EVENTS } from "@/graphql/event";
import { usernameWithDomain } from "../../types/actor"; import { displayName, usernameWithDomain } from "../../types/actor";
const EVENTS_PAGE_LIMIT = 10; const EVENTS_PAGE_LIMIT = 10;
@ -143,6 +135,8 @@ export default class GroupEvents extends mixins(GroupMixin) {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
RouteName = RouteName; RouteName = RouteName;
EVENTS_PAGE_LIMIT = EVENTS_PAGE_LIMIT; EVENTS_PAGE_LIMIT = EVENTS_PAGE_LIMIT;

42
js/src/views/Event/Participants.vue
View File

@ -1,32 +1,20 @@
<template> <template>
<section class="section container" v-if="event"> <section class="section container" v-if="event">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> { name: RouteName.MY_EVENTS, text: $t('My events') },
<router-link :to="{ name: RouteName.MY_EVENTS }">{{ {
$t("My events") name: RouteName.EVENT,
}}</router-link> params: { uuid: event.uuid },
</li> text: event.title,
<li> },
<router-link {
:to="{ name: RouteName.PARTICIPANTS,
name: RouteName.EVENT, params: { uuid: event.uuid },
params: { uuid: event.uuid }, text: $t('Participants'),
}" },
>{{ event.title }}</router-link ]"
> />
</li>
<li class="is-active">
<router-link
:to="{
name: RouteName.PARTICIPANTS,
params: { uuid: event.uuid },
}"
>{{ $t("Participants") }}</router-link
>
</li>
</ul>
</nav>
<h1 class="title">{{ $t("Participants") }}</h1> <h1 class="title">{{ $t("Participants") }}</h1>
<div class="level"> <div class="level">
<div class="level-left"> <div class="level-left">

34
js/src/views/Group/Group.vue
View File

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

55
js/src/views/Group/GroupFollowers.vue
View File

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

53
js/src/views/Group/GroupMembers.vue
View File

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

61
js/src/views/Group/GroupSettings.vue
View File

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

42
js/src/views/Group/Timeline.vue
View File

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

26
js/src/views/Moderation/Logs.vue
View File

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

40
js/src/views/Moderation/Report.vue
View File

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

28
js/src/views/Moderation/ReportList.vue
View File

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

73
js/src/views/Posts/Edit.vue
View File

@ -2,43 +2,7 @@
<div> <div>
<form @submit.prevent="publish(false)" v-if="isCurrentActorAGroupModerator"> <form @submit.prevent="publish(false)" v-if="isCurrentActorAGroupModerator">
<div class="container section"> <div class="container section">
<nav class="breadcrumb" aria-label="breadcrumbs" v-if="actualGroup"> <breadcrumbs-nav v-if="actualGroup" :links="breadcrumbLinks" />
<ul>
<li>
<router-link
v-if="actualGroup"
:to="{
name: RouteName.GROUP,
params: {
preferredUsername: usernameWithDomain(actualGroup),
},
}"
>{{
actualGroup.name || actualGroup.preferredUsername
}}</router-link
>
<b-skeleton v-else :animated="true"></b-skeleton>
</li>
<li>
<router-link
v-if="actualGroup"
:to="{
name: RouteName.POSTS,
params: {
preferredUsername: usernameWithDomain(actualGroup),
},
}"
>{{ $t("Posts") }}</router-link
>
<b-skeleton v-else :animated="true"></b-skeleton>
</li>
<li class="is-active">
<span v-if="preferredUsername">{{ $t("New post") }}</span>
<span v-else-if="slug">{{ $t("Edit post") }}</span>
<b-skeleton v-else :animated="true"></b-skeleton>
</li>
</ul>
</nav>
<h1 class="title" v-if="isUpdate === true"> <h1 class="title" v-if="isUpdate === true">
{{ $t("Edit post") }} {{ $t("Edit post") }}
</h1> </h1>
@ -174,7 +138,7 @@ import { CREATE_POST, UPDATE_POST } from "../../graphql/post";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import Editor from "../../components/Editor.vue"; import Editor from "../../components/Editor.vue";
import { IActor, usernameWithDomain } from "../../types/actor"; import { displayName, IActor, usernameWithDomain } from "../../types/actor";
import TagInput from "../../components/Event/TagInput.vue"; import TagInput from "../../components/Event/TagInput.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import Subtitle from "../../components/Utils/Subtitle.vue"; import Subtitle from "../../components/Utils/Subtitle.vue";
@ -366,6 +330,39 @@ export default class EditPost extends mixins(GroupMixin, PostMixin) {
} }
return this.group; return this.group;
} }
get breadcrumbLinks() {
const links = [
{
name: RouteName.GROUP,
params: {
preferredUsername: usernameWithDomain(this.actualGroup),
},
text: displayName(this.actualGroup),
},
{
name: RouteName.POSTS,
params: {
preferredUsername: usernameWithDomain(this.actualGroup),
},
text: this.$t("Posts"),
},
];
if (this.preferredUsername) {
links.push({
text: this.$t("New post") as string,
name: RouteName.POST_EDIT,
params: { preferredUsername: usernameWithDomain(this.actualGroup) },
});
} else {
links.push({
text: this.$t("Edit post") as string,
name: RouteName.POST_EDIT,
params: { preferredUsername: usernameWithDomain(this.actualGroup) },
});
}
return links;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

44
js/src/views/Posts/List.vue
View File

@ -1,31 +1,19 @@
<template> <template>
<div class="container section" v-if="group"> <div class="container section" v-if="group">
<nav class="breadcrumb" aria-label="breadcrumbs" v-if="group"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link name: RouteName.GROUP,
v-if="group" params: { preferredUsername: usernameWithDomain(group) },
:to="{ text: displayName(group),
name: RouteName.GROUP, },
params: { preferredUsername: usernameWithDomain(group) }, {
}" name: RouteName.POSTS,
>{{ group.name || group.preferredUsername }}</router-link params: { preferredUsername: usernameWithDomain(group) },
> text: $t('Posts'),
<b-skeleton v-else :animated="true"></b-skeleton> },
</li> ]"
<li class="is-active"> />
<router-link
v-if="group"
:to="{
name: RouteName.POSTS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Posts") }}</router-link
>
<b-skeleton v-else :animated="true"></b-skeleton>
</li>
</ul>
</nav>
<section> <section>
<div class="intro"> <div class="intro">
<p v-if="isCurrentActorMember"> <p v-if="isCurrentActorMember">
@ -84,7 +72,7 @@ import { IMember } from "@/types/actor/member.model";
import { FETCH_GROUP_POSTS } from "../../graphql/post"; import { FETCH_GROUP_POSTS } from "../../graphql/post";
import { Paginate } from "../../types/paginate"; import { Paginate } from "../../types/paginate";
import { IPost } from "../../types/post.model"; import { IPost } from "../../types/post.model";
import { usernameWithDomain } from "../../types/actor"; import { usernameWithDomain, displayName } from "../../types/actor";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import MultiPostListItem from "../../components/Post/MultiPostListItem.vue"; import MultiPostListItem from "../../components/Post/MultiPostListItem.vue";
@ -148,6 +136,8 @@ export default class PostList extends mixins(GroupMixin) {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
POSTS_PAGE_LIMIT = POSTS_PAGE_LIMIT; POSTS_PAGE_LIMIT = POSTS_PAGE_LIMIT;
get isCurrentActorMember(): boolean { get isCurrentActorMember(): boolean {

142
js/src/views/Resources/ResourceFolder.vue
View File

@ -1,80 +1,38 @@
<template> <template>
<div class="container section" v-if="resource"> <div class="container section" v-if="resource">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav :links="breadcrumbLinks">
<ul> <li>
<li> <b-dropdown aria-role="list">
<router-link <b-button class="button is-primary" slot="trigger">+</b-button>
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(resource.actor) },
}"
>{{ resource.actor.name }}</router-link
>
</li>
<li>
<router-link
:to="{
name: RouteName.RESOURCE_FOLDER_ROOT,
params: { preferredUsername: usernameWithDomain(resource.actor) },
}"
>{{ $t("Resources") }}</router-link
>
</li>
<li
:class="{
'is-active':
index + 1 === ResourceMixin.resourcePathArray(resource).length,
}"
v-for="(pathFragment, index) in filteredPath"
:key="pathFragment"
>
<router-link
:to="{
name: RouteName.RESOURCE_FOLDER,
params: {
path: ResourceMixin.resourcePathArray(resource).slice(
0,
index + 1
),
preferredUsername: usernameWithDomain(resource.actor),
},
}"
>{{ pathFragment }}</router-link
>
</li>
<li>
<b-dropdown aria-role="list">
<b-button class="button is-primary" slot="trigger">+</b-button>
<b-dropdown-item aria-role="listitem" @click="createFolderModal"> <b-dropdown-item aria-role="listitem" @click="createFolderModal">
<b-icon icon="folder" /> <b-icon icon="folder" />
{{ $t("New folder") }} {{ $t("New folder") }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
aria-role="listitem" aria-role="listitem"
@click="createLinkResourceModal = true" @click="createLinkResourceModal = true"
> >
<b-icon icon="link" /> <b-icon icon="link" />
{{ $t("New link") }} {{ $t("New link") }}
</b-dropdown-item> </b-dropdown-item>
<hr <hr
role="presentation" role="presentation"
class="dropdown-divider" class="dropdown-divider"
v-if="resourceProviders.length" v-if="resourceProviders.length"
/> />
<b-dropdown-item <b-dropdown-item
aria-role="listitem" aria-role="listitem"
v-for="resourceProvider in resourceProviders" v-for="resourceProvider in resourceProviders"
:key="resourceProvider.software" :key="resourceProvider.software"
@click="createResourceFromProvider(resourceProvider)" @click="createResourceFromProvider(resourceProvider)"
> >
<b-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" /> <b-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" />
{{ createSentenceForType(resourceProvider.software) }} {{ createSentenceForType(resourceProvider.software) }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
</li> </li>
</ul> </breadcrumbs-nav>
</nav>
<section> <section>
<p v-if="resource.path === '/'" class="module-description"> <p v-if="resource.path === '/'" class="module-description">
{{ {{
@ -276,7 +234,7 @@ import ResourceItem from "@/components/Resource/ResourceItem.vue";
import FolderItem from "@/components/Resource/FolderItem.vue"; import FolderItem from "@/components/Resource/FolderItem.vue";
import Draggable from "vuedraggable"; import Draggable from "vuedraggable";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { IActor, usernameWithDomain } from "../../types/actor"; import { displayName, IActor, usernameWithDomain } from "../../types/actor";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { import {
IResource, IResource,
@ -764,6 +722,40 @@ export default class Resources extends Mixins(ResourceMixin) {
} }
} }
} }
get breadcrumbLinks() {
if (!this.resource?.actor) return [];
const resourceActor = this.resource.actor;
const links = [
{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(this.resource.actor) },
text: displayName(this.resource.actor),
},
{
name: RouteName.RESOURCE_FOLDER_ROOT,
params: { preferredUsername: usernameWithDomain(this.resource.actor) },
text: this.$t("Resources") as string,
},
];
links.push(
...this.filteredPath.map((pathFragment, index) => {
return {
name: RouteName.RESOURCE_FOLDER,
params: {
path: ResourceMixin.resourcePathArray(this.resource).slice(
0,
index + 1
) as unknown as string,
preferredUsername: usernameWithDomain(resourceActor),
},
text: pathFragment,
};
})
);
return links;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

26
js/src/views/Settings/AccountSettings.vue
View File

@ -1,19 +1,17 @@
<template> <template>
<div v-if="loggedUser"> <div v-if="loggedUser">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ name: RouteName.ACCOUNT_SETTINGS,
$t("Account") text: $t('Account'),
}}</router-link> },
</li> {
<li class="is-active"> name: RouteName.ACCOUNT_SETTINGS_GENERAL,
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }">{{ text: $t('General'),
$t("General") },
}}</router-link> ]"
</li> />
</ul>
</nav>
<section> <section>
<div class="setting-title"> <div class="setting-title">
<h2>{{ $t("Email") }}</h2> <h2>{{ $t("Email") }}</h2>

26
js/src/views/Settings/Notifications.vue
View File

@ -1,19 +1,17 @@
<template> <template>
<div v-if="loggedUser"> <div v-if="loggedUser">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ name: RouteName.ACCOUNT_SETTINGS,
$t("Account") text: $t('Account'),
}}</router-link> },
</li> {
<li class="is-active"> name: RouteName.NOTIFICATIONS,
<router-link :to="{ name: RouteName.NOTIFICATIONS }">{{ text: $t('Notifications'),
$t("Notifications") },
}}</router-link> ]"
</li> />
</ul>
</nav>
<section> <section>
<div class="setting-title"> <div class="setting-title">
<h2>{{ $t("Browser notifications") }}</h2> <h2>{{ $t("Browser notifications") }}</h2>

26
js/src/views/Settings/Preferences.vue
View File

@ -1,19 +1,17 @@
<template> <template>
<div> <div>
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ name: RouteName.ACCOUNT_SETTINGS,
$t("Account") text: $t('Account'),
}}</router-link> },
</li> {
<li class="is-active"> name: RouteName.PREFERENCES,
<router-link :to="{ name: RouteName.PREFERENCES }">{{ text: $t('Preferences'),
$t("Preferences") },
}}</router-link> ]"
</li> />
</ul>
</nav>
<div> <div>
<b-field :label="$t('Language')" label-for="setting-language"> <b-field :label="$t('Language')" label-for="setting-language">
<b-select <b-select

59
js/src/views/Todos/Todo.vue
View File

@ -1,35 +1,29 @@
<template> <template>
<section class="section container" v-if="todo"> <section class="section container" v-if="todo">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link name: RouteName.GROUP,
:to="{ params: {
name: RouteName.GROUP, preferredUsername: usernameWithDomain(todo.todoList.actor),
params: { },
preferredUsername: todo.todoList.actor.preferredUsername, text: displayName(todo.todoList.actor),
}, },
}" {
>{{ todo.todoList.actor.name }}</router-link name: RouteName.TODO_LISTS,
> params: {
</li> preferredUsername: usernameWithDomain(todo.todoList.actor),
<li> },
<router-link text: $t('Task lists'),
:to="{ },
name: RouteName.TODO_LIST, {
params: { id: todo.todoList.id }, name: RouteName.TODO_LIST,
}" params: { id: todo.todoList.id },
> text: todo.todoList.title,
{{ todo.todoList.title }} },
</router-link> { name: RouteName.TODO, text: todo.title },
</li> ]"
<li class="is-active"> />
<router-link :to="{ name: RouteName.TODO }" aria-current="page">
{{ todo.title }}
</router-link>
</li>
</ul>
</nav>
<full-todo :todo="todo" /> <full-todo :todo="todo" />
</section> </section>
</template> </template>
@ -39,6 +33,7 @@ import { GET_TODO } from "@/graphql/todos";
import { ITodo } from "@/types/todos"; import { ITodo } from "@/types/todos";
import FullTodo from "@/components/Todo/FullTodo.vue"; import FullTodo from "@/components/Todo/FullTodo.vue";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { displayName, usernameWithDomain } from "@/types/actor";
@Component({ @Component({
components: { components: {
@ -70,5 +65,9 @@ export default class Todo extends Vue {
todo!: ITodo; todo!: ITodo;
RouteName = RouteName; RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
displayName = displayName;
} }
</script> </script>

54
js/src/views/Todos/TodoList.vue
View File

@ -1,34 +1,24 @@
<template> <template>
<section class="container section" v-if="todoList"> <section class="container section" v-if="todoList">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link name: RouteName.GROUP,
:to="{ params: { preferredUsername: usernameWithDomain(todoList.actor) },
name: RouteName.GROUP, text: displayName(group),
params: { preferredUsername: todoList.actor.preferredUsername }, },
}" {
>{{ todoList.actor.name }}</router-link name: RouteName.TODO_LISTS,
> params: { preferredUsername: usernameWithDomain(todoList.actor) },
</li> text: $t('Task lists'),
<li> },
<router-link {
:to="{ name: RouteName.TODO_LIST,
name: RouteName.TODO_LISTS, params: { id: todoList.id },
params: { preferredUsername: todoList.actor.preferredUsername }, text: todoList.title,
}" },
>{{ $t("Task lists") }}</router-link ]"
> />
</li>
<li class="is-active">
<router-link
:to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }"
>
{{ todoList.title }}
</router-link>
</li>
</ul>
</nav>
<h2 class="title">{{ todoList.title }}</h2> <h2 class="title">{{ todoList.title }}</h2>
<div v-for="todo in todoList.todos.elements" :key="todo.id"> <div v-for="todo in todoList.todos.elements" :key="todo.id">
<compact-todo :todo="todo" /> <compact-todo :todo="todo" />
@ -48,7 +38,7 @@ import { ITodo } from "@/types/todos";
import { CREATE_TODO, FETCH_TODO_LIST } from "@/graphql/todos"; import { CREATE_TODO, FETCH_TODO_LIST } from "@/graphql/todos";
import CompactTodo from "@/components/Todo/CompactTodo.vue"; import CompactTodo from "@/components/Todo/CompactTodo.vue";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor"; import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { IActor } from "@/types/actor"; import { displayName, IActor, usernameWithDomain } from "@/types/actor";
import { ITodoList } from "@/types/todolist"; import { ITodoList } from "@/types/todolist";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core"; import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
@ -89,6 +79,10 @@ export default class TodoList extends Vue {
RouteName = RouteName; RouteName = RouteName;
displayName = displayName;
usernameWithDomain = usernameWithDomain;
async createNewTodo(): Promise<void> { async createNewTodo(): Promise<void> {
await this.$apollo.mutate({ await this.$apollo.mutate({
mutation: CREATE_TODO, mutation: CREATE_TODO,

40
js/src/views/Todos/TodoLists.vue
View File

@ -1,27 +1,19 @@
<template> <template>
<div class="container section" v-if="group"> <div class="container section" v-if="group">
<nav class="breadcrumb" aria-label="breadcrumbs"> <breadcrumbs-nav
<ul> :links="[
<li> {
<router-link name: RouteName.GROUP,
:to="{ params: { preferredUsername: usernameWithDomain(group) },
name: RouteName.GROUP, text: displayName(group),
params: { preferredUsername: usernameWithDomain(group) }, },
}" {
>{{ group.name }}</router-link name: RouteName.TODO_LISTS,
> params: { preferredUsername: usernameWithDomain(group) },
</li> text: $t('Task lists'),
<li class="is-active"> },
<router-link ]"
:to="{ />
name: RouteName.TODO_LISTS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Task lists") }}</router-link
>
</li>
</ul>
</nav>
<section> <section>
<p> <p>
{{ {{
@ -61,7 +53,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
import { FETCH_GROUP } from "@/graphql/group"; import { FETCH_GROUP } from "@/graphql/group";
import { IGroup, usernameWithDomain } from "@/types/actor"; import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
import { CREATE_TODO_LIST } from "@/graphql/todos"; import { CREATE_TODO_LIST } from "@/graphql/todos";
import CompactTodo from "@/components/Todo/CompactTodo.vue"; import CompactTodo from "@/components/Todo/CompactTodo.vue";
import { ITodoList } from "@/types/todolist"; import { ITodoList } from "@/types/todolist";
@ -108,6 +100,8 @@ export default class TodoLists extends Vue {
usernameWithDomain = usernameWithDomain; usernameWithDomain = usernameWithDomain;
displayName = displayName;
get todoLists(): ITodoList[] { get todoLists(): ITodoList[] {
return this.group.todoLists.elements; return this.group.todoLists.elements;
} }