From 038c367fd73bbed6c30f170196b7c3d2a7dd3299 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 9 Sep 2022 15:26:33 -0700
Subject: [PATCH] Add swiper for admin file

---
 packages/client/src/pages/admin-file.vue | 152 ++++++++++++++---------
 1 file changed, 96 insertions(+), 56 deletions(-)

diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index a62e0f630f..40a868c1b0 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,68 +1,88 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="file" :content-max="600" :margin-min="16" :margin-max="32">
-		<div v-if="tab === 'overview'" class="cxqhhsmd _formRoot">
-			<a class="_formBlock thumbnail" :href="file.url" target="_blank">
-				<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-			</a>
-			<div class="_formBlock">
-				<MkKeyValue :copy="file.type" oneline style="margin: 1em 0;">
-					<template #key>MIME Type</template>
-					<template #value><span class="_monospace">{{ file.type }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Size</template>
-					<template #value><span class="_monospace">{{ bytes(file.size) }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue :copy="file.id" oneline style="margin: 1em 0;">
-					<template #key>ID</template>
-					<template #value><span class="_monospace">{{ file.id }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue :copy="file.md5" oneline style="margin: 1em 0;">
-					<template #key>MD5</template>
-					<template #value><span class="_monospace">{{ file.md5 }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.createdAt }}</template>
-					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
-				</MkKeyValue>
-			</div>
-			<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
-				<MkUserCardMini :user="file.user"/>
-			</MkA>
-			<div class="_formBlock">
-				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
-			</div>
+	<swiper
+		:modules="[Virtual]"
+		:space-between="20"
+		:virtual="true"
+		@swiper="setSwiperRef"
+		@slide-change="onSlideChange"
+	>
+		<swiper-slide>
+			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+				<div class="cxqhhsmd _formRoot">
+					<a class="_formBlock thumbnail" :href="file.url" target="_blank">
+						<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+					</a>
+					<div class="_formBlock">
+						<MkKeyValue :copy="file.type" oneline style="margin: 1em 0;">
+							<template #key>MIME Type</template>
+							<template #value><span class="_monospace">{{ file.type }}</span></template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>Size</template>
+							<template #value><span class="_monospace">{{ bytes(file.size) }}</span></template>
+						</MkKeyValue>
+						<MkKeyValue :copy="file.id" oneline style="margin: 1em 0;">
+							<template #key>ID</template>
+							<template #value><span class="_monospace">{{ file.id }}</span></template>
+						</MkKeyValue>
+						<MkKeyValue :copy="file.md5" oneline style="margin: 1em 0;">
+							<template #key>MD5</template>
+							<template #value><span class="_monospace">{{ file.md5 }}</span></template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.createdAt }}</template>
+							<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
+						</MkKeyValue>
+					</div>
+					<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
+						<MkUserCardMini :user="file.user"/>
+					</MkA>
+					<div class="_formBlock">
+						<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
+					</div>
 
-			<div class="_formBlock">
-				<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
-			</div>
-		</div>
-		<div v-else-if="tab === 'ip' && info" class="_formRoot">
-			<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-			<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
-				<template #key>IP</template>
-				<template #value>{{ info.requestIp }}</template>
-			</MkKeyValue>
-			<FormSection v-if="info.requestHeaders">
-				<template #label>Headers</template>
-				<MkKeyValue v-for="(v, k) in info.requestHeaders" :key="k" class="_formBlock _monospace">
-					<template #key>{{ k }}</template>
-					<template #value>{{ v }}</template>
-				</MkKeyValue>
-			</FormSection>
-		</div>
-		<div v-else-if="tab === 'raw'" class="_formRoot">
-			<MkObjectView v-if="info" tall :value="info">
-			</MkObjectView>
-		</div>
-	</MkSpacer>
+					<div class="_formBlock">
+						<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
+					</div>
+				</div>
+			</MkSpacer>
+		</swiper-slide>
+		<swiper-slide>
+			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+				<div v-if="info" class="_formRoot">
+					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
+					<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
+						<template #key>IP</template>
+						<template #value>{{ info.requestIp }}</template>
+					</MkKeyValue>
+					<FormSection v-if="info.requestHeaders">
+						<template #label>Headers</template>
+						<MkKeyValue v-for="(v, k) in info.requestHeaders" :key="k" class="_formBlock _monospace">
+							<template #key>{{ k }}</template>
+							<template #value>{{ v }}</template>
+						</MkKeyValue>
+					</FormSection>
+				</div>
+			</MkSpacer>
+		</swiper-slide>
+		<swiper-slide>
+			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+				<div class="_formRoot">
+					<MkObjectView v-if="info" tall :value="info">
+					</MkObjectView>
+				</div>
+			</MkSpacer>
+		</swiper-slide>
+	</swiper>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
@@ -77,8 +97,13 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { acct } from '@/filters/user';
 import { iAmAdmin, iAmModerator } from '@/account';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 let tab = $ref('overview');
+let tabs = ['overview'];
+if (iAmModerator) tabs.push('ip');
+tabs.push('raw');
 let file: any = $ref(null);
 let info: any = $ref(null);
 let isSensitive: boolean = $ref(false);
@@ -138,6 +163,21 @@ definePageMetadata(computed(() => ({
 	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
 	icon: 'fas fa-file',
 })));
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>
 
 <style lang="scss" scoped>