Resolve #4941

3 files changed, 85 insertions, 24 deletions

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 01d7a5a798..c7c70a4ce5 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -217,12 +217,13 @@ export default Vue.extend({
 			this.navigate(user);
 		},
 		async startGroup() {
-			const groups = await this.$root.api('users/groups/joined');
+			const groups1 = await this.$root.api('users/groups/owned');
+			const groups2 = await this.$root.api('users/groups/joined');
 			const { canceled, result: group } = await this.$root.dialog({
 				type: null,
 				title: this.$t('select-group'),
 				select: {
-					items: groups.map(group => ({
+					items: groups1.concat(groups2).map(group => ({
 						value: group, text: group.name
 					}))
 				},
diff --git a/src/client/app/common/views/pages/user-group-editor.vue b/src/client/app/common/views/pages/user-group-editor.vue
index fb9f1a6772..ef79689ae8 100644
--- a/src/client/app/common/views/pages/user-group-editor.vue
+++ b/src/client/app/common/views/pages/user-group-editor.vue
@@ -16,7 +16,7 @@
 
 		<section>
 			<ui-margin>
-				<ui-button @click="add"><fa :icon="faPlus"/> {{ $t('add-user') }}</ui-button>
+				<ui-button @click="invite()"><fa :icon="faPlus"/> {{ $t('invite') }}</ui-button>
 			</ui-margin>
 			<sequential-entrance animation="entranceFromTop" delay="25">
 				<div class="kjlrfbes" v-for="user in users">
@@ -134,18 +134,22 @@ export default Vue.extend({
 			});
 		},
 
-		async add() {
+		async invite() {
+			const t = this.$t('invited');
 			const { result: user } = await this.$root.dialog({
 				user: {
 					local: true
 				}
 			});
 			if (user == null) return;
-			this.$root.api('users/groups/push', {
+			this.$root.api('users/groups/invite', {
 				groupId: this.group.id,
 				userId: user.id
 			}).then(() => {
-				this.fetchUsers();
+				this.$root.dialog({
+					type: 'success',
+					text: t
+				});
 			});
 		}
 	}
diff --git a/src/client/app/common/views/pages/user-groups.vue b/src/client/app/common/views/pages/user-groups.vue
index 336772799b..2a89196e55 100644
--- a/src/client/app/common/views/pages/user-groups.vue
+++ b/src/client/app/common/views/pages/user-groups.vue
@@ -1,36 +1,70 @@
 <template>
-<ui-container>
-	<template #header><fa :icon="faUsers"/> {{ $t('user-groups') }}</template>
-	<ui-margin>
-		<ui-button @click="add"><fa :icon="faPlus"/> {{ $t('create-group') }}</ui-button>
-	</ui-margin>
-	<div class="hwgkdrbl" v-for="group in groups" :key="group.id">
-		<ui-hr/>
+<div>
+	<ui-container>
+		<template #header><fa :icon="faUsers"/> {{ $t('owned-groups') }}</template>
 		<ui-margin>
-			<router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link>
+			<ui-button @click="add"><fa :icon="faPlus"/> {{ $t('create-group') }}</ui-button>
 		</ui-margin>
-	</div>
-</ui-container>
+		<div class="hwgkdrbl" v-for="group in ownedGroups" :key="group.id">
+			<ui-hr/>
+			<ui-margin>
+				<router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link>
+			</ui-margin>
+		</div>
+	</ui-container>
+
+	<ui-container>
+		<template #header><fa :icon="faUsers"/> {{ $t('joined-groups') }}</template>
+		<div class="hwgkdrbl" v-for="(group, i) in joinedGroups" :key="group.id">
+			<ui-hr v-if="i != 0"/>
+			<ui-margin>
+				<router-link :to="`/i/groups/${group.id}`">{{ group.name }}</router-link>
+			</ui-margin>
+		</div>
+	</ui-container>
+
+	<ui-container>
+		<template #header><fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</template>
+		<div class="fvlojuur" v-for="(invite, i) in invites" :key="invite.id">
+			<ui-hr v-if="i != 0"/>
+			<ui-margin>
+				<div class="name">{{ invite.group.name }}</div>
+				<ui-horizon-group>
+					<ui-button @click="acceptInvite(invite)"><fa :icon="faCheck"/> {{ $t('accept-invite') }}</ui-button>
+					<ui-button @click="rejectInvite(invite)"><fa :icon="faBan"/> {{ $t('reject-invite') }}</ui-button>
+				</ui-horizon-group>
+			</ui-margin>
+		</div>
+	</ui-container>
+</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { faUsers, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faUsers, faPlus, faCheck, faBan, faEnvelopeOpenText } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/user-groups.vue'),
 	data() {
 		return {
-			fetching: true,
-			groups: [],
-			faUsers, faPlus
+			ownedGroups: [],
+			joinedGroups: [],
+			invites: [],
+			faUsers, faPlus, faCheck, faBan, faEnvelopeOpenText
 		};
 	},
 	mounted() {
 		this.$root.api('users/groups/owned').then(groups => {
-			this.fetching = false;
-			this.groups = groups;
+			this.ownedGroups = groups;
+		});
+
+		this.$root.api('users/groups/joined').then(groups => {
+			this.joinedGroups = groups;
+		});
+
+		this.$root.api('i/user-group-invites').then(invites => {
+			this.invites = invites;
 		});
 
 		this.$emit('init', {
@@ -45,13 +79,35 @@ export default Vue.extend({
 				input: true
 			}).then(async ({ canceled, result: name }) => {
 				if (canceled) return;
-				const list = await this.$root.api('users/groups/create', {
+				const group = await this.$root.api('users/groups/create', {
 					name
 				});
 
-				this.groups.push(list)
+				this.ownedGroups.push(group)
 			});
 		},
+		acceptInvite(invite) {
+			this.$root.api('users/groups/invitations/accept', {
+				inviteId: invite.id
+			}).then(() => {
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+				this.$root.api('i/user-group-invites').then(invites => {
+					this.invites = invites;
+				});
+			});
+		},
+		rejectInvite(invite) {
+			this.$root.api('users/groups/invitations/reject', {
+				inviteId: invite.id
+			}).then(() => {
+				this.$root.api('i/user-group-invites').then(invites => {
+					this.invites = invites;
+				});
+			});
+		}
 	}
 });
 </script>