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

@@ -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="invite()">{{ i18n.ts.invite }}</MkButton>
-				<MkButton inline @click="renameGroup()">{{ $ts.rename }}</MkButton>
+				<MkButton inline @click="renameGroup()">{{ i18n.ts.rename }}</MkButton>
-				<MkButton inline @click="transfer()">{{ $ts.transfer }}</MkButton>
+				<MkButton inline @click="transfer()">{{ i18n.ts.transfer }}</MkButton>
-				<MkButton inline @click="deleteGroup()">{{ $ts.delete }}</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">
+<script lang="ts" setup>
-import { computed, defineComponent } from 'vue';
+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({
+const props = defineProps<{
-	components: {
+	groupId: string;
-		MkButton
+}>();
-	},
 
-	props: {
+let group = $ref(null);
-		groupId: {
+let users = $ref([]);
-			type: String,
-			required: true,
-		},
-	},
 
-	data() {
+watch(props.groupId, fetch, { immediate: true });
-		return {
+
-			[symbols.PAGE_INFO]: computed(() => this.group ? {
+definePageMetadata(computed(() => group ? {
-				title: this.group.name,
+	title: group.name,
 	icon: 'fas fa-users',
-			} : null),
+} : null));
-			group: null,
-			users: [],
-		};
-	},
 
-	watch: {
+function fetch(): void {
-		groupId: 'fetch',
+	os.api('users/groups/show', { groupId: props.groupId })
-	},
+	.then(fetchedGroup => {
-
+		group = fetchedGroup;
-	created() {
+		os.api('users/show', { userIds: group.userIds })
-		this.fetch();
+		.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;
 	});
-			});
+}
-		},
 
-		invite() {
+function invite(): void {
 	os.selectUser().then(user => {
 		os.apiWithDialog('users/groups/invite', {
-					groupId: this.group.id,
+			groupId: group.id,
-					userId: user.id
+			userId: user.id,
 		});
 	});
-		},
+}
 
-		removeUser(user) {
+function removeUser(user): void {
 	os.api('users/groups/pull', {
-				groupId: this.group.id,
+		groupId: group.id,
-				userId: user.id
+		userId: user.id,
 	}).then(() => {
-				this.users = this.users.filter(x => x.id !== user.id);
+		users = users.filter(x => x.id !== user.id);
 	});
-		},
+}
 
-		async renameGroup() {
+async function renameGroup(): void {
 	const { canceled, result: name } = await os.inputText({
-				title: this.$ts.groupName,
+		title: i18n.ts.groupName,
-				default: this.group.name
+		default: group.name,
 	});
 	if (canceled) return;
 
 	await os.api('users/groups/update', {
-				groupId: this.group.id,
+		groupId: group.id,
-				name: name
+		name,
 	});
 
-			this.group.name = name;
+	group.name = name;
-		},
+}
 
-		transfer() {
+function transfer(): void {
 	os.selectUser().then(user => {
 		os.apiWithDialog('users/groups/transfer', {
-					groupId: this.group.id,
+			groupId: group.id,
-					userId: user.id
+			userId: user.id,
 		});
 	});
-		},
+}
 
-		async deleteGroup() {
+async function deleteGroup() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-				text: this.$t('removeAreYouSure', { x: this.group.name }),
+		text: i18n.t('removeAreYouSure', { x: group.name }),
 	});
 	if (canceled) return;
 
 	await os.apiWithDialog('users/groups/delete', {
-				groupId: this.group.id
+		groupId: group.id,
 	});
-			this.$router.push('/my/groups');
+	mainRouter.push('/my/groups');
-		}
+}
-	}
-});
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,8 +1,8 @@
 <template>
-<MkSpacer :content-max="700">
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></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>
@@ -17,7 +17,7 @@
 					<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>
+						<MkButton danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
 					</div>
 				</div>
 			</MkPagination>
@@ -29,118 +29,111 @@
 					<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="acceptInvite(invitation)"><i class="fas fa-check"></i> {{ i18n.ts.accept }}</MkButton>
-					<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ $ts.reject }}</MkButton>
+						<MkButton primary inline @click="rejectInvite(invitation)"><i class="fas fa-ban"></i> {{ i18n.ts.reject }}</MkButton>
 					</div>
 				</div>
 			</MkPagination>
 		</div>
-</MkSpacer>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, computed } from 'vue';
+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({
+const headerActions = [{
-	components: {
-		MkPagination,
-		MkButton,
-		MkContainer,
-		MkTab,
-		MkAvatars,
-	},
-
-	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,
+	text: i18n.ts.createGroup,
-					handler: this.create,
+	handler: create,
-				}],
+}];
-				tabs: [{
+
-					active: this.tab === 'owned',
+const headerTabs = [{
-					title: this.$ts.ownedGroups,
+	key: 'owned',
+	title: i18n.ts.ownedGroups,
 	icon: 'fas fa-user-tie',
-					onClick: () => { this.tab = 'owned'; },
+}, {
-				}, {
+	key: 'joined',
-					active: this.tab === 'joined',
+	title: i18n.ts.joinedGroups,
-					title: this.$ts.joinedGroups,
 	icon: 'fas fa-id-badge',
-					onClick: () => { this.tab = 'joined'; },
+}, {
-				}, {
+	key: 'invites',
-					active: this.tab === 'invites',
+	title: i18n.ts.invites,
-					title: this.$ts.invites,
 	icon: 'fas fa-envelope-open-text',
-					onClick: () => { this.tab = 'invites'; },
+}];
-				},]
+
-			})),
+let tab: 'owned' | 'joined' | 'invites' = $ref('owned');
-			tab: 'owned',
+let owned = $ref<MkPagination>();
-			ownedPagination: {
+let joined = $ref<MkPagination>();
+let invitations = $ref<MkPagination>();
+
+const ownedPagination = {
 	endpoint: 'users/groups/owned' as const,
 	limit: 10,
-			},
+};
-			joinedPagination: {
+const joinedPagination = {
 	endpoint: 'users/groups/joined' as const,
 	limit: 10,
-			},
+};
-			invitationPagination: {
+const invitationPagination = {
 	endpoint: 'i/user-group-invites' as const,
 	limit: 10,
-			},
+};
-		};
-	},
 
-	methods: {
+definePageMetadata(computed(() => ({
-		async create() {
+	title: i18n.ts.groups,
+	icon: 'fas fa-users',
+	bg: 'var(--bg)',
+})));
+
+async function create(): void {
 	const { canceled, result: name } = await os.inputText({
-				title: this.$ts.groupName,
+		title: i18n.ts.groupName,
 	});
 	if (canceled) return;
-			await os.api('users/groups/create', { name: name });
+	await os.api('users/groups/create', { name });
-			this.$refs.owned.reload();
+	owned.reload();
 	os.success();
-		},
+}
-		acceptInvite(invitation) {
+
+function acceptInvite(invitation): void {
 	os.api('users/groups/invitations/accept', {
-				invitationId: invitation.id
+		invitationId: invitation.id,
 	}).then(() => {
+		invitations.reload();
+		joined.reload();
 		os.success();
-				this.$refs.invitations.reload();
-				this.$refs.joined.reload();
 	});
-		},
+}
-		rejectInvite(invitation) {
+
+function rejectInvite(invitation): void {
 	os.api('users/groups/invitations/reject', {
 		invitationId: invitation.id
 	}).then(() => {
-				this.$refs.invitations.reload();
+		invitations.reload();
 	});
-		},
+}
-		async leave(group) {
+
+async function leave(group): void {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-				text: this.$t('leaveGroupConfirm', { name: group.name }),
+		text: i18n.t('leaveGroupConfirm', { name: group.name }),
 	});
 	if (canceled) return;
 	os.apiWithDialog('users/groups/leave', {
 		groupId: group.id,
 	}).then(() => {
-				this.$refs.joined.reload();
+		joined.reload();
 	});
-		}
+}
-	}
-});
 </script>
 
 <style lang="scss" scoped>