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

Improve member management

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-10-15 14:23:55 +02:00
parent 3be91d7e6c
commit 8c9546ff2a
10 changed files with 126 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/src/components/Group/Invitations.vue
View File

@@ -14,6 +14,7 @@ import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
import { IMember } from "@/types/actor";
import { Component, Prop, Vue } from "vue-property-decorator";
import InvitationCard from "@/components/Group/InvitationCard.vue";
import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
@Component({
components: {
@@ -30,6 +31,7 @@ export default class Invitations extends Vue {
variables: {
id,
},
refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
});
if (data) {
this.$emit("accept-invitation", data.acceptInvitation);
@@ -49,6 +51,7 @@ export default class Invitations extends Vue {
variables: {
id,
},
refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
});
if (data) {
this.$emit("reject-invitation", data.rejectInvitation);

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

@@ -125,6 +125,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
}
members {
elements {
id
role
actor {
id

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

@@ -803,5 +803,7 @@
"Please read the {fullRules} published by {instance}'s administrators.": "Please read the {fullRules} published by {instance}'s administrators.",
"Instances following you": "Instances following you",
"Instances you follow": "Instances you follow",
"Last group created": "Last group created"
"Last group created": "Last group created",
"{username} was invited to {group}": "{username} was invited to {group}",
"The member was removed from the group {group}": "The member was removed from the group {group}"
}

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

@@ -853,5 +853,7 @@
"Please read the {fullRules} published by {instance}'s administrators.": "Merci de lire les {fullRules} publiées par les administrateur·ices de {instance}.",
"Instances following you": "Instances vous suivant",
"Instances you follow": "Instances que vous suivez",
"Last group created": "Dernier groupe créé"
"Last group created": "Dernier groupe créé",
"{username} was invited to {group}": "{username} a été invité à {group}",
"The member was removed from the group {group}": "Le ou la membre a été supprimé·e du groupe {group}"
}

3
js/src/mixins/group.ts
View File

@@ -38,6 +38,7 @@ import { Component, Vue } from "vue-property-decorator";
})
export default class GroupMixin extends Vue {
group: IGroup = new Group();
currentActor!: IActor;
person!: IPerson;
@@ -51,7 +52,7 @@ export default class GroupMixin extends Vue {
);
}
handleErrors(errors: any[]) {
handleErrors(errors: any[]): void {
if (
errors.some((error) => error.status_code === 404) ||
errors.some(({ message }) => message.includes("has invalid value $uuid"))

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

@@ -23,6 +23,7 @@
v-if="isCurrentActorAnInvitedGroupMember"
:invitations="[groupMember]"
@acceptInvitation="acceptInvitation"
@reject-invitation="rejectInvitation"
/>
<b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
{{ $t("You have been removed from this group's members.") }}
@@ -431,6 +432,16 @@ export default class Group extends mixins(GroupMixin) {
}
}
rejectInvitation({ id: memberId }: { id: string }): void {
const index = this.person.memberships.elements.findIndex(
(membership) => membership.role === MemberRole.INVITED && membership.id === memberId
);
if (index > -1) {
this.person.memberships.elements.splice(index, 1);
this.person.memberships.total -= 1;
}
}
async reportGroup(content: string, forward: boolean): Promise<void> {
this.isReportModalActive = false;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -611,6 +622,8 @@ div.container {
div.address {
flex: 1;
text-align: right;
justify-content: flex-end;
display: flex;
.map-show-button {
cursor: pointer;

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

@@ -181,12 +181,28 @@
import { Component, Watch } from "vue-property-decorator";
import GroupMixin from "@/mixins/group";
import { mixins } from "vue-class-component";
import { FETCH_GROUP } from "@/graphql/group";
import RouteName from "../../router/name";
import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member";
import { IGroup, usernameWithDomain } from "../../types/actor";
import { IMember, MemberRole } from "../../types/actor/group.model";
@Component
@Component({
apollo: {
members: {
query: GROUP_MEMBERS,
variables() {
return {
name: this.$route.params.preferredUsername,
page: 1,
limit: this.MEMBERS_PER_PAGE,
roles: this.roles,
};
},
update: (data) => data.group.members,
},
},
})
export default class GroupMembers extends mixins(GroupMixin) {
loading = true;
@@ -221,31 +237,16 @@ export default class GroupMembers extends mixins(GroupMixin) {
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 } });
},
refetchQueries: [
{ query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
],
});
this.$notifier.success(
this.$t("{username} was invited to {group}", {
username: this.newMemberUsername,
group: this.group.name || usernameWithDomain(this.group),
}) as string
);
this.newMemberUsername = "";
} catch (error) {
console.error(error);
@@ -283,34 +284,30 @@ export default class GroupMembers extends mixins(GroupMixin) {
}
async removeMember(memberId: string): Promise<void> {
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 } });
}
},
});
console.log("removeMember", memberId);
try {
await this.$apollo.mutate<{ removeMember: IMember }>({
mutation: REMOVE_MEMBER,
variables: {
groupId: this.group.id,
memberId,
},
refetchQueries: [
{ query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
],
});
this.$notifier.success(
this.$t("The member was removed from the group {group}", {
username: this.newMemberUsername,
group: this.group.name || usernameWithDomain(this.group),
}) as string
);
} catch (error) {
console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
this.$notifier.error(error.graphQLErrors[0].message);
}
}
}
promoteMember(member: IMember): void {
@@ -341,7 +338,23 @@ export default class GroupMembers extends mixins(GroupMixin) {
memberId,
role,
},
refetchQueries: [
{ query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
],
});
let successMessage;
switch (role) {
case MemberRole.MODERATOR:
successMessage = "The member role was updated to moderator";
break;
case MemberRole.ADMINISTRATOR:
successMessage = "The member role was updated to administrator";
break;
case MemberRole.MEMBER:
default:
successMessage = "The member role was updated to simple member";
}
this.$notifier.success(this.$t(successMessage) as string);
} catch (error) {
console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) {

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

@@ -71,7 +71,7 @@ import RouteName from "../../router/name";
};
},
})
export default class MyEvents extends Vue {
export default class MyGroups extends Vue {
membershipsPages!: Paginate<IMember>;
RouteName = RouteName;