enhance(client): make possible to leave a group

CHANGELOG.md

@@ -15,6 +15,7 @@
 - フォローエクスポートで使われていないアカウントを含めないオプションを追加
 - カスタム絵文字エクスポート機能
 - チャートのパフォーマンスの改善
+- グループから抜けられるように
 
 ### Bugfixes
 - クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正

locales/ja-JP.yml

@@ -813,6 +813,8 @@ deleteAccountConfirm: "アカウントが削除されます。よろしいです
 incorrectPassword: "パスワードが間違っています。"
 voteConfirm: "「{choice}」に投票しますか？"
 hide: "隠す"
+leaveGroup: "グループから抜ける"
+leaveGroupConfirm: "「{name}」から抜けますか？"
 
 _emailUnavailable:
   used: "既に使用されています"

packages/client/src/pages/my-groups/index.vue

@@ -1,52 +1,45 @@
 <template>
-<div class="">
+<MkSpacer :content-max="700">
-	<div class="_section" style="padding: 0;">
+	<div v-if="tab === 'owned'" class="_content">
-		<MkTab v-model="tab">
+		<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
-			<option value="owned">{{ $ts.ownedGroups }}</option>
+
-			<option value="joined">{{ $ts.joinedGroups }}</option>
+		<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
-			<option value="invites"><i class="fas fa-envelope-open-text"></i> {{ $ts.invites }}</option>
+			<div v-for="group in items" :key="group.id" class="_card">
-		</MkTab>
+				<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
+				<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
+			</div>
+		</MkPagination>
 	</div>
 
-	<div class="_section">
+	<div v-else-if="tab === 'joined'" class="_content">
-		<div v-if="tab === 'owned'" class="_content">
+		<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
-			<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
+			<div v-for="group in items" :key="group.id" class="_card">
-
+				<div class="_title">{{ group.name }}</div>
-			<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
+				<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
-				<div v-for="group in items" :key="group.id" class="_card">
+				<div class="_footer">
-					<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
+					<MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton>
-					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
 				</div>
-			</MkPagination>
+			</div>
-		</div>
+		</MkPagination>
-
-		<div v-else-if="tab === 'joined'" class="_content">
-			<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
-				<div v-for="group in items" :key="group.id" class="_card">
-					<div class="_title">{{ group.name }}</div>
-					<div class="_content"><MkAvatars :user-ids="group.userIds"/></div>
-				</div>
-			</MkPagination>
-		</div>
-	
-		<div v-else-if="tab === 'invites'" class="_content">
-			<MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
-				<div v-for="invitation in items" :key="invitation.id" class="_card">
-					<div class="_title">{{ invitation.group.name }}</div>
-					<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
-					<div class="_footer">
-						<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
-						<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
-					</div>
-				</div>
-			</MkPagination>
-		</div>
 	</div>
-</div>
+
+	<div v-else-if="tab === 'invites'" class="_content">
+		<MkPagination v-slot="{items}" ref="invitations" :pagination="invitationPagination">
+			<div v-for="invitation in items" :key="invitation.id" class="_card">
+				<div class="_title">{{ invitation.group.name }}</div>
+				<div class="_content"><MkAvatars :user-ids="invitation.group.userIds"/></div>
+				<div class="_footer">
+					<MkButton primary inline @click="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ $ts.accept }}</MkButton>
+					<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
+				</div>
+			</div>
+		</MkPagination>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, computed } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkContainer from '@/components/ui/container.vue';
@@ -66,10 +59,32 @@ export default defineComponent({
 
 	data() {
 		return {
-			[symbols.PAGE_INFO]: {
+			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.groups,
-				icon: 'fas fa-users'
+				icon: 'fas fa-users',
-			},
+				bg: 'var(--bg)',
+				actions: [{
+					icon: 'fas fa-plus',
+					text: this.$ts.createGroup,
+					handler: this.create,
+				}],
+				tabs: [{
+					active: this.tab === 'owned',
+					title: this.$ts.ownedGroups,
+					icon: 'fas fa-user-tie',
+					onClick: () => { this.tab = 'owned'; },
+				}, {
+					active: this.tab === 'joined',
+					title: this.$ts.joinedGroups,
+					icon: 'fas fa-id-badge',
+					onClick: () => { this.tab = 'joined'; },
+				}, {
+					active: this.tab === 'invites',
+					title: this.$ts.invites,
+					icon: 'fas fa-envelope-open-text',
+					onClick: () => { this.tab = 'invites'; },
+				},]
+			})),
 			tab: 'owned',
 			ownedPagination: {
 				endpoint: 'users/groups/owned',
@@ -111,6 +126,18 @@ export default defineComponent({
 			}).then(() => {
 				this.$refs.invitations.reload();
 			});
+		},
+		async leave(group) {
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: this.$t('leaveGroupConfirm', { name: group.name }),
+			});
+			if (canceled) return;
+			os.apiWithDialog('users/groups/leave', {
+				groupId: group.id,
+			}).then(() => {
+				this.$refs.joined.reload();
+			});
 		}
 	}
 });