diff --git a/js/src/views/Group/GroupMembers.vue b/js/src/views/Group/GroupMembers.vue index c51c02b4..f7c2e431 100644 --- a/js/src/views/Group/GroupMembers.vue +++ b/js/src/views/Group/GroupMembers.vue @@ -34,7 +34,13 @@
- +

@@ -122,7 +128,7 @@ {{ $t("Rejected") }} - + {{ $t("Invited") }} @@ -134,7 +140,7 @@ -
+
import { Component, Vue, Watch } from "vue-property-decorator"; +import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor"; import RouteName from "../../router/name"; import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member"; -import { IGroup, usernameWithDomain } from "../../types/actor"; +import { IGroup, IPerson, usernameWithDomain } from "../../types/actor"; import { IMember, MemberRole } from "../../types/actor/group.model"; @Component({ apollo: { + currentActor: CURRENT_ACTOR_CLIENT, group: { query: GROUP_MEMBERS, fetchPolicy: "network-only", @@ -194,16 +202,20 @@ import { IMember, MemberRole } from "../../types/actor/group.model"; export default class GroupMembers extends Vue { group!: IGroup; + currentActor!: IPerson; + loading = true; - RouteName = RouteName; - newMemberUsername = ""; + inviteError = ""; + MemberRole = MemberRole; roles: MemberRole | "" = ""; + RouteName = RouteName; + page = 1; MEMBERS_PER_PAGE = 10; @@ -218,38 +230,45 @@ export default class GroupMembers extends Vue { } async inviteMember(): Promise { - await this.$apollo.mutate<{ inviteMember: IMember }>({ - mutation: INVITE_MEMBER, - variables: { - 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 = ""; + try { + await this.$apollo.mutate<{ inviteMember: IMember }>({ + mutation: INVITE_MEMBER, + variables: { + 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 = ""; + } catch (error) { + console.error(error); + if (error.graphQLErrors && error.graphQLErrors.length > 0) { + this.inviteError = error.graphQLErrors[0].message; + } + } } @Watch("page") @@ -319,13 +338,20 @@ export default class GroupMembers extends Vue { } async updateMember(memberId: string, role: MemberRole): Promise { - await this.$apollo.mutate<{ updateMember: IMember }>({ - mutation: UPDATE_MEMBER, - variables: { - memberId, - role, - }, - }); + try { + await this.$apollo.mutate<{ updateMember: IMember }>({ + mutation: UPDATE_MEMBER, + variables: { + memberId, + role, + }, + }); + } catch (error) { + console.error(error); + if (error.graphQLErrors && error.graphQLErrors.length > 0) { + this.$notifier.error(error.graphQLErrors[0].message); + } + } } }