From d6fb9619f6357613cd58928e57c44757e5b40262 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 10 Aug 2022 16:58:18 +0200
Subject: [PATCH] refactor group pages to composition API

This solves some errors from just reinstating the pages since the new
routing and tab implementation have a different API.
---
 packages/client/src/pages/my-groups/group.vue | 172 ++++++------
 packages/client/src/pages/my-groups/index.vue | 249 +++++++++---------
 2 files changed, 196 insertions(+), 225 deletions(-)

diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 92c0483af..ba0dfa48a 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -3,17 +3,17 @@
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<div v-if="group" class="_section">
 			<div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton inline @click="invite()">{{ $ts.invite }}</MkButton>
-				<MkButton inline @click="renameGroup()">{{ $ts.rename }}</MkButton>
-				<MkButton inline @click="transfer()">{{ $ts.transfer }}</MkButton>
-				<MkButton inline @click="deleteGroup()">{{ $ts.delete }}</MkButton>
+				<MkButton inline @click="invite()">{{ i18n.ts.invite }}</MkButton>
+				<MkButton inline @click="renameGroup()">{{ i18n.ts.rename }}</MkButton>
+				<MkButton inline @click="transfer()">{{ i18n.ts.transfer }}</MkButton>
+				<MkButton inline @click="deleteGroup()">{{ i18n.ts.delete }}</MkButton>
 			</div>
 		</div>
 	</transition>
 
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<div v-if="group" class="_section members _gap">
-			<div class="_title">{{ $ts.members }}</div>
+			<div class="_title">{{ i18n.ts.members }}</div>
 			<div class="_content">
 				<div class="users">
 					<div v-for="user in users" :key="user.id" class="user _panel">
@@ -33,113 +33,91 @@
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
 
-export default defineComponent({
-	components: {
-		MkButton
-	},
+const props = defineProps<{
+	groupId: string;
+}>();
 
-	props: {
-		groupId: {
-			type: String,
-			required: true,
-		},
-	},
+let group = $ref(null);
+let users = $ref([]);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => this.group ? {
-				title: this.group.name,
-				icon: 'fas fa-users',
-			} : null),
-			group: null,
-			users: [],
-		};
-	},
+watch(props.groupId, fetch, { immediate: true });
 
-	watch: {
-		groupId: 'fetch',
-	},
+definePageMetadata(computed(() => group ? {
+	title: group.name,
+	icon: 'fas fa-users',
+} : null));
 
-	created() {
-		this.fetch();
-	},
+function fetch(): void {
+	os.api('users/groups/show', { groupId: props.groupId })
+	.then(fetchedGroup => {
+		group = fetchedGroup;
+		os.api('users/show', { userIds: group.userIds })
+		.then(fetchedUsers => users = fetchedUsers);
+	});
+}
 
-	methods: {
-		fetch() {
-			os.api('users/groups/show', {
-				groupId: this.groupId
-			}).then(group => {
-				this.group = group;
-				os.api('users/show', {
-					userIds: this.group.userIds
-				}).then(users => {
-					this.users = users;
-				});
-			});
-		},
+function invite(): void {
+	os.selectUser().then(user => {
+		os.apiWithDialog('users/groups/invite', {
+			groupId: group.id,
+			userId: user.id,
+		});
+	});
+}
 
-		invite() {
-			os.selectUser().then(user => {
-				os.apiWithDialog('users/groups/invite', {
-					groupId: this.group.id,
-					userId: user.id
-				});
-			});
-		},
+function removeUser(user): void {
+	os.api('users/groups/pull', {
+		groupId: group.id,
+		userId: user.id,
+	}).then(() => {
+		users = users.filter(x => x.id !== user.id);
+	});
+}
 
-		removeUser(user) {
-			os.api('users/groups/pull', {
-				groupId: this.group.id,
-				userId: user.id
-			}).then(() => {
-				this.users = this.users.filter(x => x.id !== user.id);
-			});
-		},
+async function renameGroup(): void {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts.groupName,
+		default: group.name,
+	});
+	if (canceled) return;
 
-		async renameGroup() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.groupName,
-				default: this.group.name
-			});
-			if (canceled) return;
+	await os.api('users/groups/update', {
+		groupId: group.id,
+		name,
+	});
 
-			await os.api('users/groups/update', {
-				groupId: this.group.id,
-				name: name
-			});
+	group.name = name;
+}
 
-			this.group.name = name;
-		},
+function transfer(): void {
+	os.selectUser().then(user => {
+		os.apiWithDialog('users/groups/transfer', {
+			groupId: group.id,
+			userId: user.id,
+		});
+	});
+}
 
-		transfer() {
-			os.selectUser().then(user => {
-				os.apiWithDialog('users/groups/transfer', {
-					groupId: this.group.id,
-					userId: user.id
-				});
-			});
-		},
+async function deleteGroup() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: group.name }),
+	});
+	if (canceled) return;
 
-		async deleteGroup() {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.group.name }),
-			});
-			if (canceled) return;
-
-			await os.apiWithDialog('users/groups/delete', {
-				groupId: this.group.id
-			});
-			this.$router.push('/my/groups');
-		}
-	}
-});
+	await os.apiWithDialog('users/groups/delete', {
+		groupId: group.id,
+	});
+	mainRouter.push('/my/groups');
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index 4b2b2963a..9b4410e5a 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -1,146 +1,139 @@
 <template>
-<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>
-
-		<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
-			<div v-for="group in items" :key="group.id" class="_card">
-				<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 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 class="_footer">
-					<MkButton danger @click="leave(group)">{{ $ts.leaveGroup }}</MkButton>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div v-if="tab === 'owned'" class="_content">
+			<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
+				<div v-for="group in items" :key="group.id" class="_card">
+					<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>
-			</div>
-		</MkPagination>
-	</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 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 class="_footer">
+						<MkButton danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
+					</div>
 				</div>
-			</div>
-		</MkPagination>
-	</div>
-</MkSpacer>
+			</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> {{ i18n.ts.accept }}</MkButton>
+						<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ i18n.ts.reject }}</MkButton>
+					</div>
+				</div>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkAvatars from '@/components/avatars.vue';
 import MkTab from '@/components/tab.vue';
 import * as os from '@/os';
-import * as symbols from '@/symbols';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		MkPagination,
-		MkButton,
-		MkContainer,
-		MkTab,
-		MkAvatars,
-	},
+const headerActions = [{
+	icon: 'fas fa-plus',
+	text: i18n.ts.createGroup,
+	handler: create,
+}];
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => ({
-				title: this.$ts.groups,
-				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' as const,
-				limit: 10,
-			},
-			joinedPagination: {
-				endpoint: 'users/groups/joined' as const,
-				limit: 10,
-			},
-			invitationPagination: {
-				endpoint: 'i/user-group-invites' as const,
-				limit: 10,
-			},
-		};
-	},
+const headerTabs = [{
+	key: 'owned',
+	title: i18n.ts.ownedGroups,
+	icon: 'fas fa-user-tie',
+}, {
+	key: 'joined',
+	title: i18n.ts.joinedGroups,
+	icon: 'fas fa-id-badge',
+}, {
+	key: 'invites',
+	title: i18n.ts.invites,
+	icon: 'fas fa-envelope-open-text',
+}];
 
-	methods: {
-		async create() {
-			const { canceled, result: name } = await os.inputText({
-				title: this.$ts.groupName,
-			});
-			if (canceled) return;
-			await os.api('users/groups/create', { name: name });
-			this.$refs.owned.reload();
-			os.success();
-		},
-		acceptInvite(invitation) {
-			os.api('users/groups/invitations/accept', {
-				invitationId: invitation.id
-			}).then(() => {
-				os.success();
-				this.$refs.invitations.reload();
-				this.$refs.joined.reload();
-			});
-		},
-		rejectInvite(invitation) {
-			os.api('users/groups/invitations/reject', {
-				invitationId: invitation.id
-			}).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();
-			});
-		}
-	}
-});
+let tab: 'owned' | 'joined' | 'invites' = $ref('owned');
+let owned = $ref<MkPagination>();
+let joined = $ref<MkPagination>();
+let invitations = $ref<MkPagination>();
+
+const ownedPagination = {
+	endpoint: 'users/groups/owned' as const,
+	limit: 10,
+};
+const joinedPagination = {
+	endpoint: 'users/groups/joined' as const,
+	limit: 10,
+};
+const invitationPagination = {
+	endpoint: 'i/user-group-invites' as const,
+	limit: 10,
+};
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.groups,
+	icon: 'fas fa-users',
+	bg: 'var(--bg)',
+})));
+
+async function create(): void {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts.groupName,
+	});
+	if (canceled) return;
+	await os.api('users/groups/create', { name });
+	owned.reload();
+	os.success();
+}
+
+function acceptInvite(invitation): void {
+	os.api('users/groups/invitations/accept', {
+		invitationId: invitation.id,
+	}).then(() => {
+		invitations.reload();
+		joined.reload();
+		os.success();
+	});
+}
+
+function rejectInvite(invitation): void {
+	os.api('users/groups/invitations/reject', {
+		invitationId: invitation.id
+	}).then(() => {
+		invitations.reload();
+	});
+}
+
+async function leave(group): void {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('leaveGroupConfirm', { name: group.name }),
+	});
+	if (canceled) return;
+	os.apiWithDialog('users/groups/leave', {
+		groupId: group.id,
+	}).then(() => {
+		joined.reload();
+	});
+}
 </script>
 
 <style lang="scss" scoped>