From 64a96b8f67a654c746227d8ffeecfa8c794175ec Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 13 Sep 2022 17:56:19 -0700
Subject: [PATCH] formatting

---
 packages/client/src/pages/my-groups/group.vue | 163 ++++++++++--------
 1 file changed, 90 insertions(+), 73 deletions(-)

diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index ecf4eaea36..e51e6fc7e6 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -1,26 +1,36 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader/></template>
+	<template #header><MkPageHeader /></template>
 	<div class="mk-group-page">
 		<div class="_section">
-			<div class="_content" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<div
+				class="_content"
+				style="display: flex; gap: var(--margin); flex-wrap: wrap"
+			>
 				<MkButton inline @click="invite()">{{ i18n.ts.invite }}</MkButton>
-				<MkButton inline @click="renameGroup()">{{ i18n.ts.rename }}</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>
+				<MkButton inline @click="deleteGroup()">{{
+					i18n.ts.delete
+				}}
+				</MkButton>
 			</div>
 		</div>
 		<div class="_section members _gap">
 			<div class="_content">
 				<div class="users">
 					<div v-for="user in users" :key="user.id" class="user _panel">
-						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+						<MkAvatar :user="user" class="avatar" :show-indicator="true" />
 						<div class="body">
-							<MkUserName :user="user" class="name"/>
-							<MkAcct :user="user" class="acct"/>
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
 						</div>
 						<div class="action">
-							<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+							<button class="_button" @click="removeUser(user)">
+								<i class="fas fa-times"></i>
+							</button>
 						</div>
 					</div>
 				</div>
@@ -31,18 +41,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-import * as os from '@/os';
+import { computed, ref, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
+import * as os from "@/os";
 
 const props = defineProps<{
 	groupId: {
-			type: string,
-			required: true,
-		}
+		type: string;
+		required: true;
+	};
 }>();
 
 const users = ref<any[]>([]);
@@ -50,18 +60,21 @@ const group = ref<any>();
 
 const router = useRouter();
 
-watch(() => props.groupId, () => {
-	fetch();
-});
+watch(
+	() => props.groupId,
+	() => {
+		fetch();
+	}
+);
 
 async function fetch() {
-	os.api('users/groups/show', {
+	os.api("users/groups/show", {
 		groupId: props.groupId,
-	}).then(gp => {
+	}).then((gp) => {
 		group.value = gp;
-		os.api('users/show', {
-			userIds: group.value.userIds
-		}).then(us => {
+		os.api("users/show", {
+			userIds: group.value.userIds,
+		}).then((us) => {
 			users.value = us;
 		});
 	});
@@ -70,8 +83,8 @@ async function fetch() {
 fetch();
 
 function invite() {
-	os.selectUser().then(user => {
-		os.apiWithDialog('users/groups/invite', {
+	os.selectUser().then((user) => {
+		os.apiWithDialog("users/groups/invite", {
 			groupId: group.value.id,
 			userId: user.id,
 		});
@@ -79,32 +92,32 @@ function invite() {
 }
 
 function removeUser(user) {
-	os.api('users/groups/pull', {
+	os.api("users/groups/pull", {
 		groupId: group.value.id,
-		userId: user.id
+		userId: user.id,
 	}).then(() => {
-		users.value = users.value.filter(x => x.id !== user.id);
+		users.value = users.value.filter((x) => x.id !== user.id);
 	});
 }
 
 async function renameGroup() {
 	const { canceled, result: name } = await os.inputText({
 		title: i18n.ts.groupName,
-		default: group.value.name
+		default: group.value.name,
 	});
 	if (canceled) return;
 
-	await os.api('users/groups/update', {
+	await os.api("users/groups/update", {
 		groupId: group.value.id,
-		name: name
+		name: name,
 	});
 
 	group.value.name = name;
 }
 
 function transfer() {
-	os.selectUser().then(user => {
-		os.apiWithDialog('users/groups/transfer', {
+	os.selectUser().then((user) => {
+		os.apiWithDialog("users/groups/transfer", {
 			groupId: group.value.id,
 			userId: user.id,
 		});
@@ -113,61 +126,65 @@ function transfer() {
 
 async function deleteGroup() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: group.value.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: group.value.name }),
 	});
 	if (canceled) return;
 
-	await os.apiWithDialog('users/groups/delete', {
+	await os.apiWithDialog("users/groups/delete", {
 		groupId: group.value.id,
 	});
-	router.push('/my/groups');
+	router.push("/my/groups");
 }
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.members,
-	icon: 'fas fa-users',
-})));
-
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.members,
+		icon: "fas fa-users",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
-	.mk-group-page {
-		> ._section {
-			> ._content {
-				padding-top: 1rem;
-				justify-content: center;
-			}
+.mk-group-page {
+	> ._section {
+		> ._content {
+			padding-top: 1rem;
+			justify-content: center;
 		}
-		> .members {
-			> ._content {
-				> .users {
-					> .user {
-						display: flex;
-						align-items: center;
-						padding: 16px;
+	}
+	> .members {
+		> ._content {
+			> .users {
+				> ._panel {
+					margin: 1rem 2rem;
+				}
+				> .user {
+					display: flex;
+					align-items: center;
+					padding: 16px;
 
-						> .avatar {
-							width: 50px;
-							height: 50px;
+					> .avatar {
+						width: 50px;
+						height: 50px;
+					}
+
+					> .body {
+						flex: 1;
+						padding: 8px;
+
+						> .name {
+							display: block;
+							font-weight: bold;
 						}
 
-						> .body {
-							flex: 1;
-							padding: 8px;
-
-							> .name {
-								display: block;
-								font-weight: bold;
-							}
-
-							> .acct {
-								opacity: 0.5;
-							}
+						> .acct {
+							opacity: 0.5;
 						}
 					}
 				}
 			}
 		}
 	}
-	</style>
+}
+</style>