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

Add group admin profiles

Browse Source 
And other fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-08-27 11:53:24 +02:00
parent 8afda73214
commit 1984f71cbf
107 changed files with 3514 additions and 1146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/views/Account/Register.vue
View File

@@ -50,11 +50,11 @@
</form>
<div v-if="validationSent && !userAlreadyActivated">
<b-message title="Success" type="is-success" closable="false">
<b-message type="is-success" closable="false">
<h2 class="title">
{{
$t("Your account is nearly ready, {username}", {
username: identity.preferredUsername,
username: identity.name || identity.preferredUsername,
})
}}
</h2>

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

@@ -150,6 +150,7 @@ import identityEditionMixin from "../../../mixins/identityEdition";
},
identity: {
query: FETCH_PERSON,
fetchPolicy: "cache-and-network",
variables() {
return {
username: this.identityName,

436
js/src/views/Admin/AdminGroupProfile.vue Normal file
View File

@@ -0,0 +1,436 @@
<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 || group.preferredUsername }}</router-link
>
</li>
</ul>
</nav>
<div class="actor-card">
<router-link
:to="{ name: RouteName.GROUP, params: { preferredUsername: usernameWithDomain(group) } }"
>
<actor-card :actor="group" :full="true" :popover="false" :limit="false" />
</router-link>
</div>
<table v-if="metadata.length > 0" class="table is-fullwidth">
<tbody>
<tr v-for="{ key, value, link } in metadata" :key="key">
<td>{{ key }}</td>
<td v-if="link">
<router-link :to="link">
{{ value }}
</router-link>
</td>
<td v-else>{{ value }}</td>
</tr>
</tbody>
</table>
<div class="buttons">
<b-button @click="confirmSuspendProfile" v-if="!group.suspended" type="is-primary">{{
$t("Suspend")
}}</b-button>
<b-button @click="unsuspendProfile" v-if="group.suspended" type="is-primary">{{
$t("Unsuspend")
}}</b-button>
<b-button @click="refreshProfile" v-if="group.domain" type="is-primary" outlined>{{
$t("Refresh profile")
}}</b-button>
</div>
<section>
<h2 class="subtitle">
{{
$tc("{number} members", group.members.total, {
number: group.members.total,
})
}}
</h2>
<b-table
:data="group.members.elements"
:loading="$apollo.queries.group.loading"
paginated
backend-pagination
:total="group.members.total"
:per-page="EVENTS_PER_PAGE"
@page-change="onMembersPageChange"
>
<b-table-column field="actor.preferredUsername" :label="$t('Member')" 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="role" :label="$t('Role')" v-slot="props">
<b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
{{ $t("Administrator") }}
</b-tag>
<b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
{{ $t("Moderator") }}
</b-tag>
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
{{ $t("Member") }}
</b-tag>
<b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
{{ $t("Not approved") }}
</b-tag>
<b-tag type="is-danger" v-else-if="props.row.role === MemberRole.REJECTED">
{{ $t("Rejected") }}
</b-tag>
<b-tag type="is-danger" v-else-if="props.row.role === MemberRole.INVITED">
{{ $t("Invited") }}
</b-tag>
</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>
<template slot="empty">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>{{ $t("Nothing to see here") }}</p>
</div>
</section>
</template>
</b-table>
</section>
<section>
<h2 class="subtitle">
{{
$tc("{number} organized events", group.organizedEvents.total, {
number: group.organizedEvents.total,
})
}}
</h2>
<b-table
:data="group.organizedEvents.elements"
:loading="$apollo.queries.group.loading"
paginated
backend-pagination
:total="group.organizedEvents.total"
:per-page="EVENTS_PER_PAGE"
@page-change="onOrganizedEventsPageChange"
>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
{{ props.row.title }}
</router-link>
</b-table-column>
<b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
{{ props.row.beginsOn | formatDateTimeString }}
</b-table-column>
<template slot="empty">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>{{ $t("Nothing to see here") }}</p>
</div>
</section>
</template>
</b-table>
</section>
<section>
<h2 class="subtitle">
{{
$tc("{number} posts", group.posts.total, {
number: group.posts.total,
})
}}
</h2>
<b-table
:data="group.posts.elements"
:loading="$apollo.queries.group.loading"
paginated
backend-pagination
:total="group.posts.total"
:per-page="EVENTS_PER_PAGE"
@page-change="onPostsPageChange"
>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link :to="{ name: RouteName.POST, params: { slug: props.row.slug } }">
{{ props.row.title }}
</router-link>
</b-table-column>
<b-table-column field="publishAt" :label="$t('Publication date')" v-slot="props">
{{ props.row.publishAt | formatDateTimeString }}
</b-table-column>
<template slot="empty">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>{{ $t("Nothing to see here") }}</p>
</div>
</section>
</template>
</b-table>
</section>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { SUSPEND_PROFILE, UNSUSPEND_PROFILE } from "../../graphql/actor";
import { IGroup, MemberRole } from "../../types/actor";
import { usernameWithDomain, IActor } from "../../types/actor/actor.model";
import RouteName from "../../router/name";
import { IEvent } from "../../types/event.model";
import ActorCard from "../../components/Account/ActorCard.vue";
import { GET_GROUP, REFRESH_PROFILE } from "@/graphql/group";
const EVENTS_PER_PAGE = 10;
@Component({
apollo: {
group: {
query: GET_GROUP,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.id,
organizedEventsPage: 1,
organizedEventsLimit: EVENTS_PER_PAGE,
};
},
skip() {
return !this.id;
},
update: (data) => data.getGroup,
},
},
components: {
ActorCard,
},
})
export default class AdminGroupProfile extends Vue {
@Prop({ required: true }) id!: string;
group!: IGroup;
usernameWithDomain = usernameWithDomain;
RouteName = RouteName;
EVENTS_PER_PAGE = EVENTS_PER_PAGE;
organizedEventsPage = 1;
membersPage = 1;
postsPage = 1;
MemberRole = MemberRole;
get metadata(): Array<object> {
if (!this.group) return [];
const res: object[] = [
{
key: this.$t("Status") as string,
value: this.group.suspended ? this.$t("Suspended") : this.$t("Active"),
},
{
key: this.$t("Domain") as string,
value: this.group.domain ? this.group.domain : this.$t("Local"),
},
];
return res;
}
confirmSuspendProfile() {
const message = (this.group.domain
? this.$t(
"Are you sure you want to <b>suspend</b> this group? As this group originates from instance {instance}, this will only remove local members and delete the local data, as well as rejecting all the future data.",
{ instance: this.group.domain }
)
: this.$t(
"Are you sure you want to <b>suspend</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
)) as string;
this.$buefy.dialog.confirm({
title: this.$t("Suspend group") as string,
message,
confirmText: this.$t("Suspend group") as string,
cancelText: this.$t("Cancel") as string,
type: "is-danger",
hasIcon: true,
onConfirm: () => this.suspendProfile(),
});
}
async suspendProfile() {
this.$apollo.mutate<{ suspendProfile: { id: string } }>({
mutation: SUSPEND_PROFILE,
variables: {
id: this.id,
},
update: (store, { data }) => {
if (data == null) return;
const profileId = this.id;
const profileData = store.readQuery<{ getGroup: IGroup }>({
query: GET_GROUP,
variables: {
id: profileId,
},
});
if (!profileData) return;
const { getGroup: group } = profileData;
group.suspended = true;
group.avatar = null;
group.name = "";
group.summary = "";
store.writeQuery({
query: GET_GROUP,
variables: {
id: profileId,
},
data: { getGroup: group },
});
},
});
}
async unsuspendProfile() {
const profileID = this.id;
this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
mutation: UNSUSPEND_PROFILE,
variables: {
id: this.id,
},
refetchQueries: [
{
query: GET_GROUP,
variables: {
id: profileID,
},
},
],
});
}
async refreshProfile() {
this.$apollo.mutate<{ refreshProfile: IActor }>({
mutation: REFRESH_PROFILE,
variables: {
actorId: this.id,
},
});
}
async onOrganizedEventsPageChange(page: number) {
this.organizedEventsPage = page;
await this.$apollo.queries.group.fetchMore({
variables: {
actorId: this.id,
organizedEventsPage: this.organizedEventsPage,
organizedEventsLimit: EVENTS_PER_PAGE,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const newOrganizedEvents = fetchMoreResult.group.organizedEvents.elements;
return {
group: {
...previousResult.group,
organizedEvents: {
__typename: previousResult.group.organizedEvents.__typename,
total: previousResult.group.organizedEvents.total,
elements: [...previousResult.group.organizedEvents.elements, ...newOrganizedEvents],
},
},
};
},
});
}
async onMembersPageChange(page: number) {
this.membersPage = page;
await this.$apollo.queries.group.fetchMore({
variables: {
actorId: this.id,
memberPage: this.membersPage,
memberLimit: EVENTS_PER_PAGE,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const newMembers = fetchMoreResult.group.members.elements;
return {
group: {
...previousResult.group,
members: {
__typename: previousResult.group.members.__typename,
total: previousResult.group.members.total,
elements: [...previousResult.group.members.elements, ...newMembers],
},
},
};
},
});
}
async onPostsPageChange(page: number) {
this.postsPage = page;
await this.$apollo.queries.group.fetchMore({
variables: {
actorId: this.id,
postsPage: this.postsPage,
postLimit: EVENTS_PER_PAGE,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const newPosts = fetchMoreResult.group.posts.elements;
return {
group: {
...previousResult.group,
posts: {
__typename: previousResult.group.posts.__typename,
total: previousResult.group.posts.total,
elements: [...previousResult.group.posts.elements, ...newPosts],
},
},
};
},
});
}
}
</script>
<style lang="scss" scoped>
table,
section {
margin: 2rem 0;
}
.actor-card {
background: #fff;
padding: 1.5rem;
border-radius: 10px;
}
</style>

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

@@ -139,6 +139,7 @@ const EVENTS_PER_PAGE = 10;
apollo: {
person: {
query: GET_PERSON,
fetchPolicy: "cache-and-network",
variables() {
return {
actorId: this.id,

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

@@ -69,6 +69,7 @@ import { IPerson } from "../../types/actor";
apollo: {
user: {
query: GET_USER,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.id,

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

@@ -71,6 +71,7 @@ import RouteName from "../../router/name";
apollo: {
dashboard: {
query: DASHBOARD,
fetchPolicy: "cache-and-network",
},
},
metaInfo() {

168
js/src/views/Admin/GroupProfiles.vue Normal file
View File

@@ -0,0 +1,168 @@
<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>
<div v-if="groups">
<b-switch v-model="local">{{ $t("Local") }}</b-switch>
<b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
<b-table
:data="groups.elements"
:loading="$apollo.queries.groups.loading"
paginated
backend-pagination
backend-filtering
:total="groups.total"
:per-page="PROFILES_PER_PAGE"
@page-change="onPageChange"
@filters-change="onFiltersChange"
>
<b-table-column field="preferredUsername" :label="$t('Username')" searchable>
<template slot="searchable" slot-scope="props">
<b-input
v-model="props.filters.preferredUsername"
placeholder="Search..."
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">
<router-link
class="profile"
:to="{ name: RouteName.ADMIN_GROUP_PROFILE, params: { id: props.row.id } }"
>
<article class="media">
<figure class="media-left" v-if="props.row.avatar">
<p class="image is-48x48">
<img :src="props.row.avatar.url" />
</p>
</figure>
<div class="media-content">
<div class="content">
<strong v-if="props.row.name">{{ props.row.name }}</strong
><br v-if="props.row.name" />
<small>@{{ props.row.preferredUsername }}</small>
</div>
</div>
</article>
</router-link>
</template>
</b-table-column>
<b-table-column field="domain" :label="$t('Domain')" searchable>
<template slot="searchable" slot-scope="props">
<b-input
v-model="props.filters.domain"
placeholder="Search..."
icon="magnify"
size="is-small"
/>
</template>
<template v-slot:default="props">
{{ props.row.domain }}
</template>
</b-table-column>
<template slot="empty">
<section class="section">
<div class="content has-text-grey has-text-centered">
<p>{{ $t("No profile matches the filters") }}</p>
</div>
</section>
</template>
</b-table>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { LIST_PROFILES } from "../../graphql/actor";
import RouteName from "../../router/name";
import { LIST_GROUPS } from "@/graphql/group";
const PROFILES_PER_PAGE = 10;
@Component({
apollo: {
groups: {
query: LIST_GROUPS,
fetchPolicy: "cache-and-network",
variables() {
return {
preferredUsername: this.preferredUsername,
name: this.name,
domain: this.domain,
local: this.local,
suspended: this.suspended,
page: 1,
limit: PROFILES_PER_PAGE,
};
},
},
},
})
export default class GroupProfiles extends Vue {
page = 1;
preferredUsername = "";
name = "";
domain = "";
local = true;
suspended = false;
PROFILES_PER_PAGE = PROFILES_PER_PAGE;
RouteName = RouteName;
async onPageChange(page: number) {
this.page = page;
await this.$apollo.queries.groups.fetchMore({
variables: {
preferredUsername: this.preferredUsername,
name: this.name,
domain: this.domain,
local: this.local,
suspended: this.suspended,
page: this.page,
limit: PROFILES_PER_PAGE,
},
updateQuery: (previousResult, { fetchMoreResult }) => {
if (!fetchMoreResult) return previousResult;
const newProfiles = fetchMoreResult.groups.elements;
return {
groups: {
__typename: previousResult.groups.__typename,
total: previousResult.groups.total,
elements: [...previousResult.groups.elements, ...newProfiles],
},
};
},
});
}
onFiltersChange({ preferredUsername, domain }: { preferredUsername: string; domain: string }) {
this.preferredUsername = preferredUsername;
this.domain = domain;
}
@Watch("domain")
domainNotLocal() {
this.local = this.domain === "";
}
}
</script>
<style lang="scss" scoped>
a.profile {
text-decoration: none;
}
</style>

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

@@ -91,6 +91,7 @@ const PROFILES_PER_PAGE = 10;
apollo: {
persons: {
query: LIST_PROFILES,
fetchPolicy: "cache-and-network",
variables() {
return {
preferredUsername: this.preferredUsername,

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

@@ -103,6 +103,7 @@ const USERS_PER_PAGE = 10;
apollo: {
users: {
query: LIST_USERS,
fetchPolicy: "cache-and-network",
variables() {
return {
email: this.email,

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

@@ -120,6 +120,7 @@ import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
apollo: {
discussion: {
query: GET_DISCUSSION,
fetchPolicy: "cache-and-network",
variables() {
return {
slug: this.slug,

2
js/src/views/Event/Event.vue
View File

@@ -578,6 +578,7 @@ import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
apollo: {
event: {
query: FETCH_EVENT,
fetchPolicy: "cache-and-network",
variables() {
return {
uuid: this.uuid,
@@ -592,6 +593,7 @@ import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
},
participations: {
query: EVENT_PERSON_PARTICIPATION,
fetchPolicy: "cache-and-network",
variables() {
return {
eventId: this.event.id,

101
js/src/views/Group/Create.vue
View File

@@ -2,41 +2,64 @@
<section class="section container">
<h1>{{ $t("Create a new group") }}</h1>
<div>
<b-field :label="$t('Group name')">
<b-input aria-required="true" required v-model="group.preferredUsername" />
</b-field>
<b-message type="is-danger" v-for="(value, index) in errors" :key="index">
{{ value }}
</b-message>
<b-field :label="$t('Group full name')">
<form @submit.prevent="createGroup">
<b-field :label="$t('Group display name')">
<b-input aria-required="true" required v-model="group.name" />
</b-field>
<div class="field">
<label class="label">{{ $t("Federated Group Name") }}</label>
<div class="field-body">
<b-field>
<b-input aria-required="true" required expanded v-model="group.preferredUsername" />
<p class="control">
<span class="button is-static">@{{ host }}</span>
</p>
</b-field>
</div>
<p
v-html="
$t(
'This is like your federated username (<code>{username}</code>) for groups. It will allow you to be found on the federation, and is guaranteed to be unique.',
{ username: usernameWithDomain(currentActor, true) }
)
"
/>
</div>
<b-field :label="$t('Description')">
<b-input aria-required="true" required v-model="group.summary" type="textarea" />
<b-input v-model="group.summary" type="textarea" />
</b-field>
<div>
Avatar
<picture-upload v-model="avatarFile" />
{{ $t("Avatar") }}
<picture-upload :textFallback="$t('Avatar')" v-model="avatarFile" />
</div>
<div>
Banner
<picture-upload v-model="avatarFile" />
{{ $t("Banner") }}
<picture-upload :textFallback="$t('Banner')" v-model="bannerFile" />
</div>
<button class="button is-primary" @click="createGroup()">{{ $t("Create my group") }}</button>
</div>
<button class="button is-primary" native-type="submit">{{ $t("Create my group") }}</button>
</form>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Group, IPerson } from "@/types/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { Component, Vue, Watch } from "vue-property-decorator";
import { Group, IPerson, usernameWithDomain, MemberRole } from "@/types/actor";
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { CREATE_GROUP } from "@/graphql/group";
import PictureUpload from "@/components/PictureUpload.vue";
import RouteName from "../../router/name";
import { mixins } from "vue-class-component";
import IdentityEditionMixin from "@/mixins/identityEdition";
import { convertToUsername } from "../../utils/username";
@Component({
components: {
@@ -48,7 +71,7 @@ import RouteName from "../../router/name";
},
},
})
export default class CreateGroup extends Vue {
export default class CreateGroup extends mixins(IdentityEditionMixin) {
currentActor!: IPerson;
group = new Group();
@@ -57,19 +80,39 @@ export default class CreateGroup extends Vue {
bannerFile: File | null = null;
errors: string[] = [];
usernameWithDomain = usernameWithDomain;
async createGroup() {
try {
await this.$apollo.mutate({
mutation: CREATE_GROUP,
variables: this.buildVariables(),
update: (store, { data: { createGroup } }) => {
// TODO: update group list cache
const query = {
query: PERSON_MEMBERSHIPS,
variables: {
id: this.currentActor.id,
},
};
const membershipData = store.readQuery<{ person: IPerson }>(query);
if (!membershipData) return;
const person: IPerson = membershipData.person;
person.memberships.elements.push({
parent: createGroup,
role: MemberRole.ADMINISTRATOR,
actor: this.currentActor,
insertedAt: new Date().toString(),
updatedAt: new Date().toString(),
});
store.writeQuery({ ...query, data: { person } });
},
});
await this.$router.push({
name: RouteName.GROUP,
params: { identityName: this.group.preferredUsername },
params: { preferredUsername: usernameWithDomain(this.group) },
});
this.$notifier.success(
@@ -82,6 +125,15 @@ export default class CreateGroup extends Vue {
}
}
get host(): string {
return window.location.hostname;
}
@Watch("group.name")
updateUsername(groupName: string): void {
this.group.preferredUsername = convertToUsername(groupName);
}
private buildVariables() {
let avatarObj = {};
let bannerObj = {};
@@ -121,7 +173,18 @@ export default class CreateGroup extends Vue {
}
private handleError(err: any) {
console.error(err);
this.errors.push(
...err.graphQLErrors.map(({ message }: { message: string }) => this.convertMessage(message))
);
}
private convertMessage(message: string): string {
switch (message) {
case "A group with this name already exists":
return this.$t("A group with this name already exists") as string;
default:
return message;
}
}
}
</script>

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

@@ -304,6 +304,7 @@ import addMinutes from "date-fns/addMinutes";
apollo: {
group: {
query: FETCH_GROUP,
fetchPolicy: "cache-and-network",
variables() {
return {
name: this.preferredUsername,
@@ -312,6 +313,7 @@ import addMinutes from "date-fns/addMinutes";
},
person: {
query: PERSON_MEMBERSHIPS,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.currentActor.id,

8
js/src/views/Group/GroupList.vue
View File

@@ -22,11 +22,15 @@ import { LIST_GROUPS } from "@/graphql/group";
import { Group, IGroup } from "@/types/actor";
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
import RouteName from "../../router/name";
import { Paginate } from "@/types/paginate";
@Component({
apollo: {
groups: {
query: LIST_GROUPS,
query: {
query: LIST_GROUPS,
fetchPolicy: "network-only",
},
},
},
components: {
@@ -34,7 +38,7 @@ import RouteName from "../../router/name";
},
})
export default class GroupList extends Vue {
groups: { elements: IGroup[]; total: number } = { elements: [], total: 0 };
groups!: Paginate<IGroup>;
loading = true;

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

@@ -176,7 +176,7 @@ import { IMember, MemberRole } from "../../types/actor/group.model";
apollo: {
group: {
query: GROUP_MEMBERS,
// fetchPolicy: "network-only",
fetchPolicy: "network-only",
variables() {
return {
name: this.$route.params.preferredUsername,

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

@@ -91,7 +91,10 @@
:value="currentAddress"
/>
<b-button native-type="submit" type="is-primary">{{ $t("Update group") }}</b-button>
<div class="buttons">
<b-button native-type="submit" type="is-primary">{{ $t("Update group") }}</b-button>
<b-button @click="confirmDeleteGroup" type="is-danger">{{ $t("Delete group") }}</b-button>
</div>
</form>
</section>
</div>
@@ -100,7 +103,7 @@
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RouteName from "../../router/name";
import { FETCH_GROUP, UPDATE_GROUP } from "../../graphql/group";
import { FETCH_GROUP, UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
import { IGroup, usernameWithDomain } from "../../types/actor";
import { Address, IAddress } from "../../types/address.model";
import { IMember, Group } from "../../types/actor/group.model";
@@ -111,6 +114,7 @@ import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.
apollo: {
group: {
query: FETCH_GROUP,
fetchPolicy: "cache-and-network",
variables() {
return {
name: this.$route.params.preferredUsername,
@@ -148,15 +152,41 @@ export default class GroupSettings extends Vue {
// eslint-disable-next-line
// @ts-ignore
delete variables.__typename;
// eslint-disable-next-line
// @ts-ignore
delete variables.physicalAddress.__typename;
if (variables.physicalAddress) {
// eslint-disable-next-line
// @ts-ignore
delete variables.physicalAddress.__typename;
}
await this.$apollo.mutate<{ updateGroup: IGroup }>({
mutation: UPDATE_GROUP,
variables,
});
}
confirmDeleteGroup() {
this.$buefy.dialog.confirm({
title: this.$t("Delete group") as string,
message: this.$t(
"Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
) as string,
confirmText: this.$t("Delete group") as string,
cancelText: this.$t("Cancel") as string,
type: "is-danger",
hasIcon: true,
onConfirm: () => this.deleteGroup(),
});
}
async deleteGroup() {
await this.$apollo.mutate<{ deleteGroup: IGroup }>({
mutation: DELETE_GROUP,
variables: {
groupId: this.group.id,
},
});
return this.$router.push({ name: RouteName.MY_GROUPS });
}
async copyURL() {
await window.navigator.clipboard.writeText(this.group.url);
this.showCopiedTooltip = true;

2
js/src/views/Group/MyGroups.vue
View File

@@ -85,7 +85,7 @@ export default class MyEvents extends Vue {
get memberships() {
if (!this.membershipsPages) return [];
return this.membershipsPages.elements.filter(
(member: IMember) => member.role !== MemberRole.INVITED
(member: IMember) => ![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
);
}
}

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

@@ -170,6 +170,7 @@ import { displayNameAndUsername } from "../../types/actor";
},
apollo: {
actionLogs: {
fetchPolicy: "cache-and-network",
query: LOGS,
},
},

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

@@ -232,6 +232,7 @@ import RouteName from "../../router/name";
apollo: {
report: {
query: REPORT,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.reportId,

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

@@ -57,7 +57,7 @@ import RouteName from "../../router/name";
apollo: {
reports: {
query: REPORTS,
fetchPolicy: "no-cache",
fetchPolicy: "cache-and-network",
variables() {
return {
status: this.filterReports,

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

@@ -98,6 +98,7 @@ import RouteName from "../../router/name";
config: CONFIG,
post: {
query: FETCH_POST,
fetchPolicy: "cache-and-network",
variables() {
return {
slug: this.slug,

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

@@ -57,6 +57,7 @@ import RouteName from "../../router/name";
apollo: {
group: {
query: FETCH_GROUP_POSTS,
fetchPolicy: "cache-and-network",
variables() {
return {
preferredUsername: this.preferredUsername,

2
js/src/views/Posts/Post.vue
View File

@@ -58,6 +58,7 @@ import Tag from "../../components/Tag.vue";
currentActor: CURRENT_ACTOR_CLIENT,
memberships: {
query: PERSON_MEMBERSHIPS,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.currentActor.id,
@@ -70,6 +71,7 @@ import Tag from "../../components/Tag.vue";
},
post: {
query: FETCH_POST,
fetchPolicy: "cache-and-network",
variables() {
return {
slug: this.slug,

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

@@ -218,6 +218,7 @@ import ResourceSelector from "../../components/Resource/ResourceSelector.vue";
apollo: {
resource: {
query: GET_RESOURCE,
fetchPolicy: "cache-and-network",
variables() {
let path = Array.isArray(this.$route.params.path)
? this.$route.params.path.join("/")

13
js/src/views/Search.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="section container">
<h1 class="title">{{ $t("Explore") }}</h1>
<section v-if="actualTag">
<section v-if="tag">
<i18n path="Events tagged with {tag}">
<b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag: actualTag }) }}</b-tag>
<b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
</i18n>
</section>
<section class="hero is-light" v-else>
@@ -49,7 +49,7 @@
</form>
</div>
</section>
<section class="events-featured" v-if="!actualTag && searchEvents.initial">
<section class="events-featured" v-if="!tag && searchEvents.initial">
<b-loading :active.sync="$apollo.loading"></b-loading>
<h2 class="title">{{ $t("Featured events") }}</h2>
<div v-if="events.length > 0" class="columns is-multiline">
@@ -163,10 +163,11 @@ const tabsName: { events: number; groups: number } = {
events: FETCH_EVENTS,
searchEvents: {
query: SEARCH_EVENTS,
fetchPolicy: "cache-and-network",
variables() {
return {
term: this.search,
tags: this.actualTag,
tags: this.tag,
location: this.geohash,
beginsOn: this.start,
endsOn: this.end,
@@ -175,11 +176,12 @@ const tabsName: { events: number; groups: number } = {
},
debounce: 300,
skip() {
return !this.search && !this.actualTag && !this.geohash && this.end === null;
return !this.search && !this.tag && !this.geohash && this.end === null;
},
},
searchGroups: {
query: SEARCH_GROUPS,
fetchPolicy: "cache-and-network",
variables() {
return {
term: this.search,
@@ -213,7 +215,6 @@ export default class Search extends Vue {
activeTab: SearchTabs = tabsName[this.$route.query.searchType as "events" | "groups"] || 0;
location: IAddress = new Address();
actualTag: string = this.tag;
options: ISearchTimeOption[] = [
{

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

@@ -40,6 +40,7 @@ import RouteName from "../../router/name";
apollo: {
todo: {
query: GET_TODO,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.$route.params.todoId,

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

@@ -56,6 +56,7 @@ import RouteName from "../../router/name";
apollo: {
todoList: {
query: FETCH_TODO_LIST,
fetchPolicy: "cache-and-network",
variables() {
return {
id: this.$route.params.id,

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

@@ -55,6 +55,7 @@ import RouteName from "../../router/name";
apollo: {
group: {
query: FETCH_GROUP,
fetchPolicy: "cache-and-network",
variables() {
return {
name: this.$route.params.preferredUsername,