グループ招待の通知とか

Resolve #5880
Resolve #5927

2 files changed, 31 insertions, 16 deletions

diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index e2a220a074..50aff29dd7 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -6,6 +6,7 @@
 			<fa :icon="faPlus" v-if="notification.type === 'follow'"/>
 			<fa :icon="faClock" v-if="notification.type === 'receiveFollowRequest'"/>
 			<fa :icon="faCheck" v-if="notification.type === 'followRequestAccepted'"/>
+			<fa :icon="faIdCardAlt" v-if="notification.type === 'groupInvited'"/>
 			<fa :icon="faRetweet" v-if="notification.type === 'renote'"/>
 			<fa :icon="faReply" v-if="notification.type === 'reply'"/>
 			<fa :icon="faAt" v-if="notification.type === 'mention'"/>
@@ -40,13 +41,14 @@
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
 		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
+		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faClock } from '@fortawesome/free-regular-svg-icons';
 import getNoteSummary from '../../misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
@@ -78,7 +80,8 @@ export default Vue.extend({
 		return {
 			getNoteSummary,
 			followRequestDone: false,
-			faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck
+			groupInviteDone: false,
+			faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck
 		};
 	},
 	methods: {
@@ -90,6 +93,18 @@ export default Vue.extend({
 			this.followRequestDone = true;
 			this.$root.api('following/requests/reject', { userId: this.notification.user.id });
 		},
+		acceptGroupInvitation() {
+			this.groupInviteDone = true;
+			this.$root.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
+			this.$root.dialog({
+				type: 'success',
+				iconOnly: true, autoClose: true
+			});
+		},
+		rejectGroupInvitation() {
+			this.groupInviteDone = true;
+			this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
+		},
 	}
 });
 </script>
@@ -149,7 +164,7 @@ export default Vue.extend({
 				height: 100%;
 			}
 
-			&.follow, &.followRequestAccepted, &.receiveFollowRequest {
+			&.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited {
 				padding: 3px;
 				background: #36aed2;
 			}
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index c41139164f..9b3acbb3eb 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -17,13 +17,13 @@
 
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</template>
-		<mk-pagination :pagination="invitePagination" #default="{items}" ref="invites">
-			<div class="_frame" v-for="invite in items" :key="invite.id">
-				<div class="_title">{{ invite.group.name }}</div>
-				<div class="_content"><mk-avatars :user-ids="invite.group.userIds"/></div>
+		<mk-pagination :pagination="invitationPagination" #default="{items}" ref="invitations">
+			<div class="_frame" v-for="invitation in items" :key="invitation.id">
+				<div class="_title">{{ invitation.group.name }}</div>
+				<div class="_content"><mk-avatars :user-ids="invitation.group.userIds"/></div>
 				<div class="_footer">
-					<mk-button @click="acceptInvite(invite)" primary inline><fa :icon="faCheck"/> {{ $t('accept') }}</mk-button>
-					<mk-button @click="rejectInvite(invite)" primary inline><fa :icon="faBan"/> {{ $t('reject') }}</mk-button>
+					<mk-button @click="acceptInvite(invitation)" primary inline><fa :icon="faCheck"/> {{ $t('accept') }}</mk-button>
+					<mk-button @click="rejectInvite(invitation)" primary inline><fa :icon="faBan"/> {{ $t('reject') }}</mk-button>
 				</div>
 			</div>
 		</mk-pagination>
@@ -73,7 +73,7 @@ export default Vue.extend({
 				endpoint: 'users/groups/joined',
 				limit: 10,
 			},
-			invitePagination: {
+			invitationPagination: {
 				endpoint: 'i/user-group-invites',
 				limit: 10,
 			},
@@ -95,23 +95,23 @@ export default Vue.extend({
 				iconOnly: true, autoClose: true
 			});
 		},
-		acceptInvite(invite) {
+		acceptInvite(invitation) {
 			this.$root.api('users/groups/invitations/accept', {
-				inviteId: invite.id
+				invitationId: invitation.id
 			}).then(() => {
 				this.$root.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
-				this.$refs.invites.reload();
+				this.$refs.invitations.reload();
 				this.$refs.joined.reload();
 			});
 		},
-		rejectInvite(invite) {
+		rejectInvite(invitation) {
 			this.$root.api('users/groups/invitations/reject', {
-				inviteId: invite.id
+				invitationId: invitation.id
 			}).then(() => {
-				this.$refs.invites.reload();
+				this.$refs.invitations.reload();
 			});
 		}
 	}