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

Fix following groups + Add interface to manage followers

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-01-20 18:16:44 +01:00
parent 58fe7b74a5
commit 4fbdc94e7c
25 changed files with 929 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
js/src/graphql/followers.ts Normal file
View File

@@ -0,0 +1,49 @@
import gql from "graphql-tag";
export const GROUP_FOLLOWERS = gql`
query(
$name: String!
$followersPage: Int
$followersLimit: Int
$approved: Boolean
) {
group(preferredUsername: $name) {
id
preferredUsername
name
domain
followers(
page: $followersPage
limit: $followersLimit
approved: $approved
) {
total
elements {
id
actor {
id
preferredUsername
name
domain
avatar {
id
url
}
}
approved
insertedAt
updatedAt
}
}
}
}
`;
export const UPDATE_FOLLOWER = gql`
mutation UpdateFollower($id: ID!, $approved: Boolean) {
updateFollower(id: $id, approved: $approved) {
id
approved
}
}
`;

4
js/src/graphql/group.ts
View File

@@ -64,6 +64,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
suspended
visibility
openness
manuallyApprovesFollowers
physicalAddress {
description
street
@@ -265,6 +266,7 @@ export const UPDATE_GROUP = gql`
$visibility: GroupVisibility
$openness: Openness
$physicalAddress: AddressInput
$manuallyApprovesFollowers: Boolean
) {
updateGroup(
id: $id
@@ -275,6 +277,7 @@ export const UPDATE_GROUP = gql`
visibility: $visibility
openness: $openness
physicalAddress: $physicalAddress
manuallyApprovesFollowers: $manuallyApprovesFollowers
) {
id
preferredUsername
@@ -282,6 +285,7 @@ export const UPDATE_GROUP = gql`
summary
visibility
openness
manuallyApprovesFollowers
avatar {
id
url

9
js/src/i18n/en_US.json
View File

@@ -829,5 +829,12 @@
"It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content.": "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content.",
"Atom feed for events and posts": "Atom feed for events and posts",
"ICS feed for events": "ICS feed for events",
"ICS/WebCal Feed": "ICS/WebCal Feed"
"ICS/WebCal Feed": "ICS/WebCal Feed",
"Group Followers": "Group Followers",
"Follower": "Follower",
"Reject": "Reject",
"No follower matches the filters": "No follower matches the filters",
"@{username}'s follow request was rejected": "@{username}'s follow request was rejected",
"Followers will receive new public events and posts.": "Followers will receive new public events and posts.",
"Manually approve new followers": "Manually approve new followers"
}

10
js/src/i18n/fr_FR.json
View File

@@ -274,7 +274,7 @@
"Find an address": "Trouver une adresse",
"Find an instance": "Trouver une instance",
"Find another instance": "Trouver une autre instance",
"Followers": "Abonnés",
"Followers": "Abonné⋅es",
"Followings": "Abonnements",
"For instance: London": "Par exemple : Lyon",
"For instance: London, Taekwondo, Architecture…": "Par exemple : Lyon, Taekwondo, Architecture…",
@@ -925,5 +925,11 @@
"© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
"Atom feed for events and posts": "Flux Atom pour les événements et les billets",
"ICS feed for events": "Flux ICS pour les événements",
"ICS/WebCal Feed": "Flux ICS/WebCal"
"ICS/WebCal Feed": "Flux ICS/WebCal",
"Group Followers": "Abonné⋅es au groupe",
"Follower": "Abonné⋅es",
"No follower matches the filters": "Aucun⋅e abonné⋅e ne correspond aux filtres",
"@{username}'s follow request was rejected": "La demande de suivi de @{username} a été rejettée",
"Followers will receive new public events and posts.": "Les abonnée⋅s recevront les nouveaux événements et billets publics.",
"Manually approve new followers": "Approuver les nouvelles demandes de suivi manuellement"
}

8
js/src/router/groups.ts
View File

@@ -8,6 +8,7 @@ export enum GroupsRouteName {
GROUP_SETTINGS = "GROUP_SETTINGS",
GROUP_PUBLIC_SETTINGS = "GROUP_PUBLIC_SETTINGS",
GROUP_MEMBERS_SETTINGS = "GROUP_MEMBERS_SETTINGS",
GROUP_FOLLOWERS_SETTINGS = "GROUP_FOLLOWERS_SETTINGS",
RESOURCES = "RESOURCES",
RESOURCE_FOLDER_ROOT = "RESOURCE_FOLDER_ROOT",
RESOURCE_FOLDER = "RESOURCE_FOLDER",
@@ -85,6 +86,13 @@ export const groupsRoutes: RouteConfig[] = [
import("../views/Group/GroupMembers.vue"),
props: true,
},
{
path: "followers",
name: GroupsRouteName.GROUP_FOLLOWERS_SETTINGS,
component: (): Promise<EsModuleComponent> =>
import("../views/Group/GroupFollowers.vue"),
props: true,
},
],
},
{

3
js/src/types/actor/group.model.ts
View File

@@ -19,6 +19,7 @@ export interface IGroup extends IActor {
organizedEvents: Paginate<IEvent>;
physicalAddress: IAddress;
openness: Openness;
manuallyApprovesFollowers: boolean;
}
export class Group extends Actor implements IGroup {
@@ -45,6 +46,8 @@ export class Group extends Actor implements IGroup {
physicalAddress: IAddress = new Address();
manuallyApprovesFollowers = true;
patch(hash: IGroup | Record<string, unknown>): void {
Object.assign(this, hash);
}

261
js/src/views/Group/GroupFollowers.vue Normal file
View File

@@ -0,0 +1,261 @@
<template>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul v-if="group">
<li>
<router-link
:to="{
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ group.name }}</router-link
>
</li>
<li>
<router-link
:to="{
name: RouteName.GROUP_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $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>
<section
class="container section"
v-if="group && isCurrentActorAGroupAdmin"
>
<h1>{{ $t("Group Followers") }} ({{ followers.total }})</h1>
<b-field :label="$t('Status')" horizontal>
<b-switch v-model="pending">{{ $t("Pending") }}</b-switch>
</b-field>
<b-table
v-if="followers"
:data="followers.elements"
ref="queueTable"
:loading="this.$apollo.loading"
paginated
backend-pagination
:current-page.sync="page"
:pagination-simple="true"
:aria-next-label="$t('Next page')"
:aria-previous-label="$t('Previous page')"
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
:total="followers.total"
:per-page="FOLLOWERS_PER_PAGE"
backend-sorting
:default-sort-direction="'desc'"
:default-sort="['insertedAt', 'desc']"
@page-change="triggerLoadMoreFollowersPageChange"
@sort="(field, order) => $emit('sort', field, order)"
>
<b-table-column
field="actor.preferredUsername"
:label="$t('Follower')"
v-slot="props"
>
<article class="media">
<figure
class="media-left image is-48x48"
v-if="props.row.actor.avatar"
>
<img
class="is-rounded"
:src="props.row.actor.avatar.url"
alt=""
/>
</figure>
<b-icon
class="media-left"
v-else
size="is-large"
icon="account-circle"
/>
<div class="media-content">
<div class="content">
<span v-if="props.row.actor.name">{{
props.row.actor.name
}}</span
><br />
<span class="is-size-7 has-text-grey"
>@{{ usernameWithDomain(props.row.actor) }}</span
>
</div>
</div>
</article>
</b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered">
{{ props.row.insertedAt | formatDateString }}<br />{{
props.row.insertedAt | formatTimeString
}}
</span>
</b-table-column>
<b-table-column field="actions" :label="$t('Actions')" v-slot="props">
<div class="buttons">
<b-button
v-if="!props.row.approved"
@click="updateFollower(props.row, true)"
icon-left="check"
type="is-success"
>{{ $t("Accept") }}</b-button
>
<b-button
@click="updateFollower(props.row, false)"
icon-left="close"
type="is-danger"
>{{ $t("Reject") }}</b-button
>
</div>
</b-table-column>
<template slot="empty">
<empty-content icon="account" inline>
{{ $t("No follower matches the filters") }}
</empty-content>
</template>
</b-table>
</section>
<b-message v-else-if="group">
{{ $t("You are not an administrator for this group.") }}
</b-message>
</div>
</template>
<script lang="ts">
import { Component, Watch } from "vue-property-decorator";
import GroupMixin from "@/mixins/group";
import { mixins } from "vue-class-component";
import { GROUP_FOLLOWERS, UPDATE_FOLLOWER } from "@/graphql/followers";
import RouteName from "../../router/name";
import { usernameWithDomain } from "../../types/actor";
import EmptyContent from "@/components/Utils/EmptyContent.vue";
import { IFollower } from "@/types/actor/follower.model";
import { Paginate } from "@/types/paginate";
@Component({
apollo: {
followers: {
query: GROUP_FOLLOWERS,
variables() {
return {
name: this.$route.params.preferredUsername,
followersPage: this.page,
followersLimit: this.FOLLOWERS_PER_PAGE,
approved: this.pending === null ? null : !this.pending,
};
},
update: (data) => data.group.followers,
},
},
components: {
EmptyContent,
},
})
export default class GroupFollowers extends mixins(GroupMixin) {
loading = true;
RouteName = RouteName;
page = parseInt((this.$route.query.page as string) || "1", 10);
pending: boolean | null =
(this.$route.query.pending as string) == "1" || null;
FOLLOWERS_PER_PAGE = 1;
usernameWithDomain = usernameWithDomain;
followers!: Paginate<IFollower>;
mounted(): void {
this.page = parseInt((this.$route.query.page as string) || "1", 10);
}
@Watch("page")
triggerLoadMoreFollowersPageChange(page: string): void {
this.$router.replace({
name: RouteName.GROUP_FOLLOWERS_SETTINGS,
query: { ...this.$route.query, page },
});
}
@Watch("pending")
triggerPendingStatusPageChange(pending: boolean): void {
this.$router.replace({
name: RouteName.GROUP_FOLLOWERS_SETTINGS,
query: { ...this.$route.query, ...{ pending: pending ? "1" : "0" } },
});
}
async loadMoreFollowers(): Promise<void> {
const { FOLLOWERS_PER_PAGE, group, page, pending } = this;
await this.$apollo.queries.followers.fetchMore({
// New variables
variables() {
return {
name: usernameWithDomain(group),
followersPage: page,
followersLimit: FOLLOWERS_PER_PAGE,
approved: !pending,
};
},
// Transform the previous result with new data
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const oldFollowers = previousResult.group.followers;
const newFollowers = fetchMoreResult.group.followers;
return {
elements: [...oldFollowers.elements, ...newFollowers.elements],
total: newFollowers.total,
__typename: oldFollowers.__typename,
};
},
});
}
async updateFollower(follower: IFollower, approved: boolean): Promise<void> {
const { FOLLOWERS_PER_PAGE, group, page, pending } = this;
try {
await this.$apollo.mutate<{ rejectFollower: IFollower }>({
mutation: UPDATE_FOLLOWER,
variables: {
id: follower.id,
approved,
},
refetchQueries: [
{
query: GROUP_FOLLOWERS,
variables: {
name: usernameWithDomain(group),
followersPage: page,
followersLimit: FOLLOWERS_PER_PAGE,
approved: !pending,
},
},
],
});
this.$notifier.success(
this.$t("@{username}'s follow request was rejected", {
username: follower.actor.preferredUsername,
}) as string
);
} catch (error) {
console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message);
}
}
}
}
</script>

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

@@ -134,6 +134,15 @@
</b-radio>
</div>
<b-field
:label="$t('Followers')"
:message="$t('Followers will receive new public events and posts.')"
>
<b-checkbox v-model="group.manuallyApprovesFollowers">
{{ $t("Manually approve new followers") }}
</b-checkbox>
</b-field>
<full-address-auto-complete
:label="$t('Group address')"
v-model="group.physicalAddress"

4
js/src/views/Group/Settings.vue
View File

@@ -16,6 +16,10 @@
:title="this.$t('Members')"
:to="{ name: RouteName.GROUP_MEMBERS_SETTINGS }"
/>
<SettingMenuItem
:title="this.$t('Followers')"
:to="{ name: RouteName.GROUP_FOLLOWERS_SETTINGS }"
/>
</SettingMenuSection>
</ul>
</aside>