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

Improve member adding and excluding flow

Browse Source 
Allow to exclude a member

Send emails to the member when it's excluded

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-08-14 11:32:23 +02:00
parent ad13a57afc
commit 156eba0551
94 changed files with 2650 additions and 1862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,8 @@
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { IGroup, IPerson } from "@/types/actor";
import { CURRENT_ACTOR_CLIENT, FETCH_GROUP } from "@/graphql/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
import { CREATE_DISCUSSION } from "@/graphql/discussion";
import RouteName from "../../router/name";

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

@@ -77,6 +77,8 @@
v-for="comment in discussion.comments.elements"
:key="comment.id"
:comment="comment"
@update-comment="updateComment"
@delete-comment="deleteComment"
/>
<b-button
v-if="discussion.comments.elements.length < discussion.comments.total"
@@ -87,7 +89,12 @@
<b-field :label="$t('Text')">
<editor v-model="newComment" />
</b-field>
<b-button native-type="submit" type="is-primary">{{ $t("Reply") }}</b-button>
<b-button
native-type="submit"
:disabled="['<p></p>', ''].includes(newComment)"
type="is-primary"
>{{ $t("Reply") }}</b-button
>
</form>
</section>
</div>
@@ -107,6 +114,7 @@ import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
import { GraphQLError } from "graphql";
import RouteName from "../../router/name";
import { IComment } from "../../types/comment.model";
import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
@Component({
apollo: {
@@ -191,6 +199,8 @@ export default class discussion extends Vue {
usernameWithDomain = usernameWithDomain;
async reply() {
if (this.newComment === "") return;
await this.$apollo.mutate({
mutation: REPLY_TO_DISCUSSION,
variables: {
@@ -223,6 +233,80 @@ export default class discussion extends Vue {
this.newComment = "";
}
async updateComment(comment: IComment) {
const { data } = await this.$apollo.mutate<{ deleteComment: IComment }>({
mutation: UPDATE_COMMENT,
variables: {
commentId: comment.id,
text: comment.text,
},
update: (store, { data }) => {
if (!data || !data.deleteComment) return;
const discussionData = store.readQuery<{
discussion: IDiscussion;
}>({
query: GET_DISCUSSION,
variables: {
slug: this.slug,
page: this.page,
},
});
if (!discussionData) return;
const { discussion } = discussionData;
const index = discussion.comments.elements.findIndex(
({ id }) => id === data.deleteComment.id
);
if (index > -1) {
discussion.comments.elements.splice(index, 1);
discussion.comments.total -= 1;
}
store.writeQuery({
query: GET_DISCUSSION,
variables: { slug: this.slug, page: this.page },
data: { discussion },
});
},
});
}
async deleteComment(comment: IComment) {
const { data } = await this.$apollo.mutate<{ deleteComment: IComment }>({
mutation: DELETE_COMMENT,
variables: {
commentId: comment.id,
},
update: (store, { data }) => {
if (!data || !data.deleteComment) return;
const discussionData = store.readQuery<{
discussion: IDiscussion;
}>({
query: GET_DISCUSSION,
variables: {
slug: this.slug,
page: this.page,
},
});
if (!discussionData) return;
const { discussion } = discussionData;
const index = discussion.comments.elements.findIndex(
({ id }) => id === data.deleteComment.id
);
if (index > -1) {
const updatedComment = discussion.comments.elements[index];
updatedComment.deletedAt = new Date();
updatedComment.actor = null;
updatedComment.text = "";
discussion.comments.elements.splice(index, 1, updatedComment);
}
store.writeQuery({
query: GET_DISCUSSION,
variables: { slug: this.slug, page: this.page },
data: { discussion },
});
},
});
}
async loadMoreComments() {
if (!this.hasMoreComments) return;
this.page += 1;

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

@@ -46,7 +46,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { FETCH_GROUP } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
import { IGroup, usernameWithDomain } from "@/types/actor";
import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
import RouteName from "../../router/name";
@@ -56,6 +56,7 @@ import RouteName from "../../router/name";
apollo: {
group: {
query: FETCH_GROUP,
fetchPolicy: "cache-and-network",
variables() {
return {
name: this.preferredUsername,

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

@@ -33,7 +33,8 @@
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Group, IPerson } from "@/types/actor";
import { CREATE_GROUP, CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { CREATE_GROUP } from "@/graphql/group";
import PictureUpload from "@/components/PictureUpload.vue";
import RouteName from "../../router/name";

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

@@ -19,6 +19,17 @@
</li>
</ul>
</nav>
<invitations
v-if="isCurrentActorAnInvitedGroupMember"
:invitations="[groupMember]"
@acceptInvitation="acceptInvitation"
/>
<b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
{{ $t("You have been removed from this group's members.") }}
</b-message>
<b-message v-if="isCurrentActorAGroupMember && isCurrentActorARecentMember" type="is-info">
{{ $t("Since you are a new member, private content can take a few minutes to appear.") }}
</b-message>
<header class="block-container presentation">
<div class="block-column media">
<div class="media-left">
@@ -35,15 +46,24 @@
>
<b-skeleton v-else :animated="true" />
<br />
<router-link
v-if="isCurrentActorAGroupAdmin"
:to="{
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="button is-outlined"
>{{ $t("Group settings") }}</router-link
>
<div class="buttons">
<router-link
v-if="isCurrentActorAGroupAdmin"
:to="{
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
class="button is-outlined"
>{{ $t("Group settings") }}</router-link
>
<b-button
type="is-danger"
v-if="isCurrentActorAGroupMember"
outlined
@click="leaveGroup"
>{{ $t("Leave group") }}</b-button
>
</div>
</div>
</div>
<div class="block-column members" v-if="isCurrentActorAGroupMember">
@@ -56,7 +76,7 @@
role: member.role,
})
"
v-for="member in group.members.elements"
v-for="member in members"
:key="member.actor.id"
>
<img
@@ -71,6 +91,7 @@
<p>
{{ $t("{count} team members", { count: group.members.total }) }}
<router-link
v-if="isCurrentActorAGroupAdmin"
:to="{
name: RouteName.GROUP_MEMBERS_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
@@ -255,7 +276,8 @@
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import EventCard from "@/components/Event/EventCard.vue";
import { FETCH_GROUP, CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { FETCH_GROUP, LEAVE_GROUP } from "@/graphql/group";
import {
IActor,
IGroup,
@@ -263,6 +285,7 @@ import {
usernameWithDomain,
Group as GroupModel,
MemberRole,
IMember,
} from "@/types/actor";
import Subtitle from "@/components/Utils/Subtitle.vue";
import CompactTodo from "@/components/Todo/CompactTodo.vue";
@@ -274,6 +297,8 @@ import FolderItem from "@/components/Resource/FolderItem.vue";
import RouteName from "../../router/name";
import { Address } from "@/types/address.model";
import GroupSection from "../../components/Group/GroupSection.vue";
import Invitations from "@/components/Group/Invitations.vue";
import addMinutes from "date-fns/addMinutes";
@Component({
apollo: {
@@ -308,6 +333,7 @@ import GroupSection from "../../components/Group/GroupSection.vue";
FolderItem,
ResourceItem,
GroupSection,
Invitations,
"map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
},
metaInfo() {
@@ -348,6 +374,29 @@ export default class Group extends Vue {
}
}
async leaveGroup() {
const { data } = await this.$apollo.mutate({
mutation: LEAVE_GROUP,
variables: {
groupId: this.group.id,
},
});
return this.$router.push({ name: RouteName.MY_GROUPS });
}
acceptInvitation() {
if (this.groupMember) {
const index = this.person.memberships.elements.findIndex(
// @ts-ignore
({ id }: IMember) => id === this.groupMember.id
);
const member = this.groupMember;
member.role = MemberRole.MEMBER;
this.person.memberships.elements.splice(index, 1, member);
this.$apollo.queries.group.refetch();
}
}
get groupTitle() {
if (!this.group) return undefined;
return this.group.preferredUsername;
@@ -358,15 +407,47 @@ export default class Group extends Vue {
return this.group.summary;
}
get groupMember(): IMember | undefined {
if (!this.person || !this.person.id) return undefined;
return this.person.memberships.elements.find(({ parent: { id } }) => id === this.group.id);
}
get groupMemberships() {
if (!this.person || !this.person.id) return undefined;
return this.person.memberships.elements.map(({ parent: { id } }) => id);
return this.person.memberships.elements
.filter(
(membership: IMember) =>
![MemberRole.REJECTED, MemberRole.NOT_APPROVED, MemberRole.INVITED].includes(
membership.role
)
)
.map(({ parent: { id } }) => id);
}
get isCurrentActorAGroupMember(): boolean {
return this.groupMemberships != undefined && this.groupMemberships.includes(this.group.id);
}
get isCurrentActorARejectedGroupMember(): boolean {
return (
this.person &&
this.person.memberships.elements
.filter((membership) => membership.role === MemberRole.REJECTED)
.map(({ parent: { id } }) => id)
.includes(this.group.id)
);
}
get isCurrentActorAnInvitedGroupMember(): boolean {
return (
this.person &&
this.person.memberships.elements
.filter((membership) => membership.role === MemberRole.INVITED)
.map(({ parent: { id } }) => id)
.includes(this.group.id)
);
}
get isCurrentActorAGroupAdmin(): boolean {
return (
this.person &&
@@ -376,6 +457,24 @@ export default class Group extends Vue {
);
}
/**
* New members, if on a different server, can take a while to refresh the group and fetch all private data
*/
get isCurrentActorARecentMember(): boolean {
return (
this.groupMember !== undefined &&
this.groupMember.role === MemberRole.MEMBER &&
addMinutes(new Date(`${this.groupMember.updatedAt}Z`), 10) > new Date()
);
}
get members(): IMember[] {
return this.group.members.elements.filter(
(member) =>
![MemberRole.INVITED, MemberRole.REJECTED, MemberRole.NOT_APPROVED].includes(member.role)
);
}
get physicalAddress(): Address | null {
if (!this.group.physicalAddress) return null;
return new Address(this.group.physicalAddress);

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

@@ -18,7 +18,7 @@
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { LIST_GROUPS } from "@/graphql/actor";
import { LIST_GROUPS } from "@/graphql/group";
import { Group, IGroup } from "@/types/actor";
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
import RouteName from "../../router/name";

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

@@ -1,7 +1,7 @@
<template>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<ul v-if="group">
<li>
<router-link
:to="{
@@ -134,6 +134,14 @@
}}
</span>
</b-table-column>
<b-table-column field="actions" :label="$t('Actions')">
<b-button
v-if="props.row.role === MemberRole.MEMBER"
@click="removeMember(props.row.id)"
type="is-danger"
>{{ $t("Remove") }}</b-button
>
</b-table-column>
</template>
<template slot="empty">
<section class="section">
@@ -150,7 +158,7 @@
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import RouteName from "../../router/name";
import { INVITE_MEMBER, GROUP_MEMBERS } from "../../graphql/member";
import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER } from "../../graphql/member";
import { IGroup, usernameWithDomain } from "../../types/actor";
import { IMember, MemberRole } from "../../types/actor/group.model";
@@ -206,7 +214,32 @@ export default class GroupMembers extends Vue {
groupId: this.group.id,
targetActorUsername: this.newMemberUsername,
},
update: (store, { data }) => {
if (data == null) return;
const query = {
query: GROUP_MEMBERS,
variables: {
name: this.$route.params.preferredUsername,
page: 1,
limit: this.MEMBERS_PER_PAGE,
roles: this.roles,
},
};
const memberData: IMember = data.inviteMember;
const groupData = store.readQuery<{ group: IGroup }>(query);
if (!groupData) return;
const { group } = groupData;
const index = group.members.elements.findIndex((m) => m.actor.id === memberData.actor.id);
if (index === -1) {
group.members.elements.push(memberData);
group.members.total += 1;
} else {
group.members.elements.splice(index, 1, memberData);
}
store.writeQuery({ ...query, data: { group } });
},
});
this.newMemberUsername = "";
}
@Watch("page")
@@ -235,5 +268,36 @@ export default class GroupMembers extends Vue {
},
});
}
async removeMember(memberId: string) {
await this.$apollo.mutate<{ removeMember: IMember }>({
mutation: REMOVE_MEMBER,
variables: {
groupId: this.group.id,
memberId,
},
update: (store, { data }) => {
if (data == null) return;
const query = {
query: GROUP_MEMBERS,
variables: {
name: this.$route.params.preferredUsername,
page: 1,
limit: this.MEMBERS_PER_PAGE,
roles: this.roles,
},
};
const groupData = store.readQuery<{ group: IGroup }>(query);
if (!groupData) return;
const { group } = groupData;
const index = group.members.elements.findIndex((m) => m.id === memberId);
if (index !== -1) {
group.members.elements.splice(index, 1);
group.members.total -= 1;
store.writeQuery({ ...query, data: { group } });
}
},
});
}
}
</script>

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

@@ -100,7 +100,7 @@
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import RouteName from "../../router/name";
import { FETCH_GROUP, UPDATE_GROUP } from "../../graphql/actor";
import { FETCH_GROUP, UPDATE_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";

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

@@ -3,14 +3,11 @@
<h1 class="title">{{ $t("My groups") }}</h1>
<router-link :to="{ name: RouteName.CREATE_GROUP }">{{ $t("Create group") }}</router-link>
<b-loading :active.sync="$apollo.loading"></b-loading>
<section v-if="invitations && invitations.length > 0">
<InvitationCard
v-for="member in invitations"
:key="member.id"
:member="member"
@accept="acceptInvitation"
/>
</section>
<invitations
:invitations="invitations"
@acceptInvitation="acceptInvitation"
@rejectInvitation="rejectInvitation"
/>
<section v-if="memberships && memberships.length > 0">
<GroupMemberCard v-for="member in memberships" :key="member.id" :member="member" />
</section>
@@ -24,16 +21,16 @@
import { Component, Vue } from "vue-property-decorator";
import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
import InvitationCard from "@/components/Group/InvitationCard.vue";
import Invitations from "@/components/Group/Invitations.vue";
import { Paginate } from "@/types/paginate";
import { IGroup, IMember, MemberRole } from "@/types/actor";
import { IGroup, IMember, MemberRole, usernameWithDomain } from "@/types/actor";
import RouteName from "../../router/name";
import { ACCEPT_INVITATION } from "../../graphql/member";
@Component({
components: {
GroupMemberCard,
InvitationCard,
Invitations,
},
apollo: {
membershipsPages: {
@@ -61,6 +58,23 @@ export default class MyEvents extends Vue {
RouteName = RouteName;
acceptInvitation(member: IMember) {
return this.$router.push({
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(member.parent) },
});
}
rejectInvitation({ id: memberId }: { id: string }) {
const index = this.membershipsPages.elements.findIndex(
(membership) => membership.role === MemberRole.INVITED && membership.id === memberId
);
if (index > -1) {
this.membershipsPages.elements.splice(index, 1);
this.membershipsPages.total -= 1;
}
}
get invitations() {
if (!this.membershipsPages) return [];
return this.membershipsPages.elements.filter(
@@ -74,15 +88,6 @@ export default class MyEvents extends Vue {
(member: IMember) => member.role !== MemberRole.INVITED
);
}
async acceptInvitation(id: string) {
await this.$apollo.mutate<{ acceptInvitation: IMember }>({
mutation: ACCEPT_INVITATION,
variables: {
id,
},
});
}
}
</script>

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

@@ -26,7 +26,7 @@
import { Component, Vue, Watch } from "vue-property-decorator";
import { Route } from "vue-router";
import { IGroup, IPerson } from "@/types/actor";
import { FETCH_GROUP } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
import RouteName from "../../router/name";
import SettingMenuSection from "../../components/Settings/SettingMenuSection.vue";
import SettingMenuItem from "../../components/Settings/SettingMenuItem.vue";

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

@@ -79,7 +79,8 @@
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { CURRENT_ACTOR_CLIENT, FETCH_GROUP } from "../../graphql/actor";
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
import { TAGS } from "../../graphql/tags";
import { CONFIG } from "../../graphql/config";
import { FETCH_POST, CREATE_POST, UPDATE_POST, DELETE_POST } from "../../graphql/post";

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

@@ -42,7 +42,8 @@
import { Component, Vue, Prop } from "vue-property-decorator";
import Editor from "@/components/Editor.vue";
import { GraphQLError } from "graphql";
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS, FETCH_GROUP } from "../../graphql/actor";
import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "../../graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
import { TAGS } from "../../graphql/tags";
import { CONFIG } from "../../graphql/config";
import { FETCH_POST, CREATE_POST } from "../../graphql/post";

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

@@ -31,7 +31,7 @@
name: RouteName.RESOURCE_FOLDER,
params: {
path: ResourceMixin.resourcePathArray(resource).slice(0, index + 1),
preferredUsername: resource.actor.preferredUsername,
preferredUsername: usernameWithDomain(resource.actor),
},
}"
>{{ pathFragment }}</router-link

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

@@ -44,7 +44,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { FETCH_GROUP } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
import { IGroup } from "@/types/actor";
import { ITodoList } from "@/types/todos";
import { CREATE_TODO_LIST } from "@/graphql/todos";