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,14 +1,5 @@
 <template>
-<div class="">
-	<div class="_section" style="padding: 0;">
-		<MkTab v-model="tab">
-			<option value="owned">{{ $ts.ownedGroups }}</option>
-			<option value="joined">{{ $ts.joinedGroups }}</option>
-			<option value="invites"><i class="fas fa-envelope-open-text"></i> {{ $ts.invites }}</option>
-		</MkTab>
-	</div>
-
-	<div class="_section">
+<MkSpacer :content-max="700">
 	<div v-if="tab === 'owned'" class="_content">
 		<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="fas fa-plus"></i> {{ $ts.createGroup }}</MkButton>
 
@@ -25,6 +16,9 @@
 			<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 class="_footer">
+					<MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton>
+				</div>
 			</div>
 		</MkPagination>
 	</div>
@@ -41,12 +35,11 @@
 			</div>
 		</MkPagination>
 	</div>
-	</div>
-</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();
+			});
 		}
 	}
 });