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

Improve federation view

Browse Source 
- Reload data when returning to the view
- Improve filtering (now local + more cases)
- Clarify "following" and "followed" wording
- Display total instance count

Fixes #1740
This commit is contained in:
Massedil
2025-12-15 17:12:14 +01:00
parent 71d1ed54f1
commit 3ffdd68b8c
4 changed files with 123 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/i18n/en_US.json
View File

@@ -177,9 +177,9 @@
"Back to profile list": "Back to profile list",
"Back to top": "Back to top",
"Back to user list": "Back to user list",
"Ban": "Ban",
"Ban the account": "Ban the account",
"Ban the account?": "Ban the account?",
"Ban": "Ban",
"Banner": "Banner",
"Become part of the community and start organizing events": "Become part of the community and start organizing events",
"Before you can login, you need to click on the link inside it to validate your account.": "Before you can login, you need to click on the link inside it to validate your account.",
@@ -713,9 +713,9 @@
"Maybe the content was removed by the author or a moderator": "Maybe the content was removed by the author or a moderator",
"Member invitation by username":"Member invitation by username",
"Member": "Member",
"Members": "Members",
"Members can see events' participants": "Members can see events' participants",
"Members will also access private sections like discussions, resources and restricted posts.": "Members will also access private sections like discussions, resources and restricted posts.",
"Members": "Members",
"Members-only post": "Members-only post",
"Membership requests will be approved by a group moderator": "Membership requests will be approved by a group moderator",
"Memberships": "Memberships",
@@ -895,6 +895,7 @@
"Other users with the same IP address": "Other users with the same IP address",
"Other users with the same email domain": "Other users with the same email domain",
"Other": "Other",
"Others":"Others",
"Otherwise this identity will just be removed from the group administrators.": "Otherwise this identity will just be removed from the group administrators.",
"Owncast": "Owncast",
"Page limited to my group (asks for auth)": "Page limited to my group (asks for auth)",
@@ -914,10 +915,10 @@
"Participation with account": "Participation with account",
"Participation without account": "Participation without account",
"Participations": "Participations",
"Password": "Password",
"Password (confirmation)": "Password (confirmation)",
"Password and confirmation password must be identical.": "Password and confirmation password must be identical.",
"Password reset": "Password reset",
"Password": "Password",
"Past activities": "Passed activities",
"Past events": "Passed events",
"PeerTube live": "PeerTube live",
@@ -926,10 +927,10 @@
"Permission": "Permission",
"Personal feeds": "Personal feeds",
"Photo by {author} on {source}": "Photo by {author} on {source}",
"Pick": "Pick",
"Pick a profile or a group": "Pick a profile or a group",
"Pick an identity": "Pick an identity",
"Pick an instance": "Pick an instance",
"Pick": "Pick",
"Pictures": "Pictures",
"Please add as many details as possible to help identify the problem.": "Please add as many details as possible to help identify the problem.",
"Please check your spam folder if you didn't receive the email.": "Please check your spam folder if you didn't receive the email.",
@@ -1140,10 +1141,10 @@
"Submit": "Submit",
"Subtitles": "Subtitles",
"Suggestions:": "Suggestions:",
"Suspend": "Suspend",
"Suspend group": "Suspend group",
"Suspend the profile": "Suspend the profile",
"Suspend the profile?": "Suspend the profile?",
"Suspend": "Suspend",
"Suspended": "Suspended",
"Tag search": "Tag search",
"Task lists": "Task lists",
@@ -1235,6 +1236,8 @@
"These events may interest you": "These events may interest you",
"These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page.": "These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page.",
"These feeds contain event data for the events for which this specific profile is a participant or creator. You should keep these private. You can find feeds for all of your profiles into your notification settings.": "These feeds contain event data for the events for which this specific profile is a participant or creator. You should keep these private. You can find feeds for all of your profiles into your notification settings.",
"They asked to follow us":"They asked to follow us",
"They follow us":"They follow us",
"This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.": "This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.",
"This URL doesn't seem to be valid": "This URL doesn't seem to be valid",
"This URL is not supported": "This URL is not supported",
@@ -1438,8 +1441,10 @@
"Visit {instance_domain}": "Visit {instance_domain}",
"Waiting for organization team approval.": "Waiting for organization team approval.",
"Warning": "Warning",
"We asked to follow them":"We asked to follow them",
"We collect your feedback and the error information in order to improve this service.": "We collect your feedback and the error information in order to improve this service.",
"We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue.": "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue.",
"We follow them":"",
"We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):": "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):",
"We just sent an email to {email}": "We just sent an email to {email}",
"We use your timezone to make sure you get notifications for an event at the correct time.": "We use your timezone to make sure you get notifications for an event at the correct time.",
@@ -1664,6 +1669,7 @@
"{approved} / {total} seats": "{approved} / {total} seats",
"{available}/{capacity} available places": "No places left|{available}/{capacity} available place left|{available}/{capacity} available places",
"{count} events": "{count} events",
"{count} instances found": "No instance found|One instance found|{count} instances found",
"{count} km": "{count} km",
"{count} members or followers": "No members or followers|One member or follower|{count} members or followers",
"{count} members": "No members|One member|{count} members",

8
src/i18n/fr_FR.json
View File

@@ -713,9 +713,9 @@
"Maybe the content was removed by the author or a moderator": "Peut-\u00eatre que le contenu a \u00e9t\u00e9 supprim\u00e9 par l'auteur\u00b7ice ou un\u00b7e mod\u00e9rateur\u00b7ice",
"Member invitation by username":"Inviter un membre par identifiant",
"Member": "Membre",
"Members": "Membres",
"Members can see events' participants": "Les membres peuvent voir les participants des événements",
"Members will also access private sections like discussions, resources and restricted posts.": "Les membres auront \u00e9galement acc\u00e8s aux section priv\u00e9es comme les discussions, les ressources et les billets restreints.",
"Members": "Membres",
"Members-only post": "Billet reserv\u00e9 aux membres",
"Membership requests will be approved by a group moderator": "Les demandes d'adh\u00e9sion seront approuv\u00e9es par un\u00b7e mod\u00e9rateur\u00b7ice du groupe",
"Memberships": "Adh\u00e9sions",
@@ -894,6 +894,7 @@
"Other users with the same IP address": "Autres utilisateur\u00b7ices avec la m\u00eame adresse IP",
"Other users with the same email domain": "Autres utilisateur\u00b7ices avec le m\u00eame domaine de courriel",
"Other": "Autre",
"Others":"Autres",
"Otherwise this identity will just be removed from the group administrators.": "Sinon cette identit\u00e9 sera juste supprim\u00e9e des administrateur\u00b7rice\u00b7s du groupe.",
"Owncast": "Owncast",
"Page limited to my group (asks for auth)": "Acc\u00e8s limit\u00e9 \u00e0 mon groupe (demande authentification)",
@@ -1234,6 +1235,8 @@
"These events may interest you": "Ces \u00e9v\u00e9nements peuvent vous int\u00e9resser",
"These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page.": "Ces flux contiennent des informations sur les \u00e9v\u00e9nements pour lesquels n'importe lequel de vos profils est un\u00b7e participant\u00b7e ou un\u00b7e cr\u00e9ateur\u00b7ice. Vous devriez les garder priv\u00e9s. Vous pouvez trouver des flux sp\u00e9cifiques \u00e0 chaque profil sur la page d'\u00e9dition des profils.",
"These feeds contain event data for the events for which this specific profile is a participant or creator. You should keep these private. You can find feeds for all of your profiles into your notification settings.": "Ces flux contiennent des informations sur les \u00e9v\u00e9nements pour lesquels ce profil sp\u00e9cifique est un\u00b7e participant\u00b7e ou un\u00b7e cr\u00e9ateur\u00b7ice. Vous devriez les garder priv\u00e9s. Vous pouvez trouver des flux pour l'ensemble de vos profils dans vos param\u00e8tres de notification.",
"They asked to follow us":"Elles ont demandé à nous suivre",
"They follow us":"Elles nous suivent",
"This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.": "Cette instance Mobilizon et l'organisateur\u00b7ice de l'\u00e9v\u00e9nement autorise les participations anonymes, mais requiert une validation \u00e0 travers une confirmation par e-mail.",
"This URL doesn't seem to be valid": "Cette URL ne semble pas \u00eatre valide",
"This URL is not supported": "Cette URL n'est pas support\u00e9e",
@@ -1436,8 +1439,10 @@
"Visit {instance_domain}": "Visiter {instance_domain}",
"Waiting for organization team approval.": "En attente d'approbation par l'organisation.",
"Warning": "Attention",
"We asked to follow them":"Nous avons demandé à les suivre",
"We collect your feedback and the error information in order to improve this service.": "Nous recueillons vos r\u00e9actions et les informations sur les erreurs afin d'am\u00e9liorer ce service.",
"We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue.": "Nous n'avons pas pu sauvegarder votre participation dans ce navigateur. Aucune inqui\u00e9tude, vous avez bien confirm\u00e9 votre participation, nous n'avons juste pas pu enregistrer son statut dans ce navigateur \u00e0 cause d'un souci technique.",
"We follow them":"Nous les suivons",
"We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):": "Nous am\u00e9liorons ce logiciel gr\u00e2ce \u00e0 vos retours. Pour nous avertir de ce probl\u00e8me, vous avez deux possibilit\u00e9s (les deux requi\u00e8rent toutefois la cr\u00e9ation d'un compte) :",
"We just sent an email to {email}": "Nous venons d'envoyer un e-mail \u00e0 {email}",
"We use your timezone to make sure you get notifications for an event at the correct time.": "Nous utilisons votre fuseau horaire pour nous assurer que vous recevez les notifications pour un \u00e9v\u00e9nement au bon moment.",
@@ -1661,6 +1666,7 @@
"{approved} / {total} seats": "{approved} / {total} places",
"{available}/{capacity} available places": "Pas de places restantes|{available}/{capacity} place restante|{available}/{capacity} places restantes",
"{count} events": "{count} \u00e9v\u00e9nements",
"{count} instances found": "Aucune instance trouvée|Une instance trouvée|{count} instances trouvées",
"{count} km": "{count} km",
"{count} members or followers": "Aucun\u00b7e membre ou abonn\u00e9\u00b7e|Un\u00b7e membre ou abonn\u00e9\u00b7e|{count} membres ou abonn\u00e9\u00b7es",
"{count} members": "Aucun membre|Un\u00b7e membre|{count} membres",

7
src/types/enums.ts
View File

@@ -288,8 +288,11 @@ export enum EventMetadataCategories {
export enum InstanceFilterFollowStatus {
ALL = "ALL",
FOLLOWING = "FOLLOWING",
FOLLOWED = "FOLLOWED",
OTHERS = "OTHERS",
WE_FOLLOW_THEM = "WE_FOLLOW_THEM",
WE_FOLLOW_THEM_PENDING = "WE_FOLLOW_THEM_PENDING",
THEY_FOLLOW_US = "THEY_FOLLOW_US",
THEY_FOLLOW_US_PENDING = "THEY_FOLLOW_US_PENDING",
}
export enum InstanceFollowStatus {

134
src/views/Admin/InstancesView.vue
View File

@@ -1,4 +1,6 @@
<template>
filteredInstances.length: {{ filteredInstances.length }}
<div>
<breadcrumbs-nav
:links="[
@@ -44,13 +46,28 @@
>
<o-radio
v-model="followStatus"
:native-value="InstanceFilterFollowStatus.FOLLOWING"
>{{ t("Following") }}</o-radio
:native-value="InstanceFilterFollowStatus.WE_FOLLOW_THEM"
>{{ t("We follow them") }}</o-radio
>
<o-radio
v-model="followStatus"
:native-value="InstanceFilterFollowStatus.FOLLOWED"
>{{ t("Followed") }}</o-radio
:native-value="InstanceFilterFollowStatus.WE_FOLLOW_THEM_PENDING"
>{{ t("We asked to follow them") }}</o-radio
>
<o-radio
v-model="followStatus"
:native-value="InstanceFilterFollowStatus.THEY_FOLLOW_US"
>{{ t("They follow us") }}</o-radio
>
<o-radio
v-model="followStatus"
:native-value="InstanceFilterFollowStatus.THEY_FOLLOW_US_PENDING"
>{{ t("They asked to follow us") }}</o-radio
>
<o-radio
v-model="followStatus"
:native-value="InstanceFilterFollowStatus.OTHERS"
>{{ t("Others") }}</o-radio
>
</o-field>
<o-field
@@ -65,14 +82,22 @@
/>
</o-field>
</div>
<div v-if="instances && instances.elements.length > 0" class="my-3">
<div
v-if="filteredInstances && filteredInstances.length > 0"
class="my-3"
>
<p>
{{
t("{count} instances found", { count: filteredInstances.length })
}}
</p>
<router-link
:to="{
name: RouteName.INSTANCE,
params: { domain: instance.domain },
}"
class="min-w-0 flex items-center mb-2 rounded bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 dark:bg-mbz-purple-600 dark:hover:bg-mbz-purple-700 p-4 flex-wrap md:flex-nowrap justify-center gap-x-2 gap-y-3"
v-for="instance in instances.elements"
v-for="instance in paginatedInstances"
:key="instance.domain"
>
<div class="flex-1 overflow-hidden flex items-center gap-1">
@@ -139,7 +164,7 @@
"
>
<o-icon icon="inbox-arrow-down" />
{{ t("Followed") }}
{{ t("We follow them") }}
</p>
<p
class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
@@ -148,7 +173,7 @@
"
>
<o-icon icon="inbox-arrow-down" />
{{ t("Followed, pending response") }}
{{ t("We asked to follow them") }}
</p>
<p
class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
@@ -157,7 +182,7 @@
"
>
<o-icon icon="inbox-arrow-up" />
{{ t("Follows us") }}
{{ t("They follow us") }}
</p>
<p
class="inline-flex gap-1 text-slate-700 dark:text-slate-300"
@@ -166,7 +191,7 @@
"
>
<o-icon icon="inbox-arrow-up" />
{{ t("Follows us, pending approval") }}
{{ t("They asked to follow us") }}
</p>
</div>
</div>
@@ -184,8 +209,8 @@
</div>
</router-link>
<o-pagination
v-show="instances.total > INSTANCES_PAGE_LIMIT"
:total="instances.total"
v-show="filteredInstances.length > INSTANCES_PAGE_LIMIT"
:total="filteredInstances.length"
v-model:current="instancePage"
:per-page="INSTANCES_PAGE_LIMIT"
:aria-next-label="t('Next page')"
@@ -195,7 +220,7 @@
>
</o-pagination>
</div>
<div v-else-if="instances && instances.elements.length == 0">
<div v-else-if="filteredInstances && filteredInstances.length == 0">
<empty-content icon="lan-disconnect" :inline="true">
{{ t("No instance found.") }}
<template #desc>
@@ -233,7 +258,7 @@ import {
useRouteQuery,
} from "vue-use-route-query";
import { useMutation, useQuery } from "@vue/apollo-composable";
import { computed, inject, ref, watch } from "vue";
import { computed, inject, ref, watch, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useHead } from "@/utils/head";
import CloudQuestion from "../../../node_modules/vue-material-design-icons/CloudQuestion.vue";
@@ -246,43 +271,88 @@ const instancePage = useRouteQuery("page", 1, integerTransformer);
const filterDomain = useRouteQuery("filterDomain", "");
const followStatus = useRouteQuery(
"followStatus",
InstanceFilterFollowStatus.ALL,
InstanceFilterFollowStatus.WE_FOLLOW_THEM,
enumTransformer(InstanceFilterFollowStatus)
);
// Number of instances asked by default
const instancesTotalOnline = ref(100);
const { result: instancesResult } = useQuery<{
instances: Paginate<IInstance>;
}>(
INSTANCES,
() => ({
page: instancePage.value,
limit: INSTANCES_PAGE_LIMIT,
filterDomain: filterDomain.value,
filterFollowStatus: followStatus.value,
page: 1,
limit: instancesTotalOnline.value,
}),
{ debounce: 500 }
{
fetchPolicy: "cache-and-network",
}
);
// All instances are retreived when we have total available
watchEffect(() => {
const total = instancesResult.value?.instances.total;
if (total && total > instancesTotalOnline.value) {
instancesTotalOnline.value = total;
}
});
watch([filterDomain, followStatus], () => {
instancePage.value = 1;
});
const instances = computed(() => instancesResult.value?.instances);
const instancesTotal = computed(() => instancesResult.value?.instances.total);
const currentPageInstancesNumber = computed(
() => instancesResult.value?.instances.elements.length
);
// We do filtering locally
// Because it is nstantaneous + permit to filter on more thing than with online filter
const filteredInstances = computed(() => {
// Filter by domain or instance name
const filtered = instances.value?.elements.filter((i) =>
i.domain.toLowerCase().includes(filterDomain.value.toLowerCase())
);
// If we didn't found any instances on this page
watch(instancesTotal, (newInstancesTotal) => {
if (newInstancesTotal === 0) {
instancePage.value = 1;
} else if (currentPageInstancesNumber.value === 0) {
instancePage.value = instancePage.value - 1;
if (!filtered) return [];
// Filter by followStatus
switch (followStatus.value) {
case InstanceFilterFollowStatus.OTHERS:
return filtered.filter(
(i) =>
i.followedStatus !== InstanceFollowStatus.APPROVED &&
i.followedStatus !== InstanceFollowStatus.PENDING &&
i.followerStatus !== InstanceFollowStatus.APPROVED &&
i.followerStatus !== InstanceFollowStatus.PENDING
);
case InstanceFilterFollowStatus.WE_FOLLOW_THEM:
return filtered.filter(
(i) => i.followedStatus === InstanceFollowStatus.APPROVED
);
case InstanceFilterFollowStatus.WE_FOLLOW_THEM_PENDING:
return filtered.filter(
(i) => i.followedStatus === InstanceFollowStatus.PENDING
);
case InstanceFilterFollowStatus.THEY_FOLLOW_US:
return filtered.filter(
(i) => i.followerStatus === InstanceFollowStatus.APPROVED
);
case InstanceFilterFollowStatus.THEY_FOLLOW_US_PENDING:
return filtered.filter(
(i) => i.followerStatus === InstanceFollowStatus.PENDING
);
default:
return filtered;
}
});
// Pagination
const start = computed(() => (instancePage.value - 1) * INSTANCES_PAGE_LIMIT);
const end = computed(() => start.value + INSTANCES_PAGE_LIMIT);
const paginatedInstances = computed(() => {
return filteredInstances.value.slice(start.value, end.value);
});
const { t } = useI18n({ useScope: "global" });
useHead({
title: computed(() => t("Federation")),
@@ -292,10 +362,6 @@ const followInstanceLoading = ref(false);
const newRelayAddress = ref("");
// relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
// relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
const hasFilter = computed((): boolean => {
return (
followStatus.value !== InstanceFilterFollowStatus.ALL ||