From c8a81364ef7aac3210723afba66723dacc5a221e Mon Sep 17 00:00:00 2001
From: nenohi <kimutipartylove@gmail.com>
Date: Fri, 17 Feb 2023 12:22:27 +0900
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E4=BB=98=E3=81=AE=E3=83=95=E3=82=A9?=
 =?UTF-8?q?=E3=83=BC=E3=83=9E=E3=83=83=E3=83=88=E6=8C=87=E5=AE=9A=E3=81=A8?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=81=8C=E3=81=86=E3=81=BE=E3=81=8F=E3=81=84?=
 =?UTF-8?q?=E3=81=8B=E3=81=AA=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/admin/ads.vue | 135 ++++++++++++----------
 1 file changed, 73 insertions(+), 62 deletions(-)

diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
index e5431b177c..7744ad1831 100644
--- a/packages/frontend/src/pages/admin/ads.vue
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -1,52 +1,58 @@
 <template>
-<MkStickyContainer>
-	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="900">
-		<div class="uqshojas">
-			<div v-for="ad in ads" class="_panel _gaps_m ad">
-				<MkAd v-if="ad.url" :specify="ad"/>
-				<MkInput v-model="ad.url" type="url">
-					<template #label>URL</template>
-				</MkInput>
-				<MkInput v-model="ad.imageUrl">
-					<template #label>{{ i18n.ts.imageUrl }}</template>
-				</MkInput>
-				<MkRadios v-model="ad.place">
-					<template #label>Form</template>
-					<option value="square">square</option>
-					<option value="horizontal">horizontal</option>
-					<option value="horizontal-big">horizontal-big</option>
-				</MkRadios>
-				<!--
-			<div style="margin: 32px 0;">
-				{{ i18n.ts.priority }}
-				<MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
-				<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
-				<MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
-			</div>
-			-->
-				<FormSplit>
-					<MkInput v-model="ad.ratio" type="number">
-						<template #label>{{ i18n.ts.ratio }}</template>
-					</MkInput>
-					<MkInput v-model="ad.startsAt" type="datetime-local">
-						<template #label>{{ i18n.ts.startingperiod }}</template>
-					</MkInput>
-					<MkInput v-model="ad.expiresAt" type="datetime-local">
-						<template #label>{{ i18n.ts.expiration }}</template>
-					</MkInput>
-				</FormSplit>
-				<MkTextarea v-model="ad.memo">
-					<template #label>{{ i18n.ts.memo }}</template>
-				</MkTextarea>
-				<div class="buttons">
-					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+	<MkStickyContainer>
+		<template #header>
+			<XHeader :actions="headerActions" :tabs="headerTabs" />
+		</template>
+		<MkSpacer :content-max="900">
+			<div class="uqshojas">
+				<MkPagination v-slot="{ items }" :pagination="pagination" :on-vnode-updated="update()">
+					<div v-for="ad in items" class="_panel _gaps_m ad">
+						<MkAd v-if="ad.url" :specify="ad" />
+						<MkInput v-model="ad.url" type="url">
+							<template #label>URL</template>
+						</MkInput>
+						<MkInput v-model="ad.imageUrl">
+							<template #label>{{ i18n.ts.imageUrl }}</template>
+						</MkInput>
+						<MkRadios v-model="ad.place">
+							<template #label>Form</template>
+							<option value="square">square</option>
+							<option value="horizontal">horizontal</option>
+							<option value="horizontal-big">horizontal-big</option>
+						</MkRadios>
+						<!--
+				<div style="margin: 32px 0;">
+					{{ i18n.ts.priority }}
+					<MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
+					<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
+					<MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
 				</div>
+				-->
+						<FormSplit>
+							<MkInput v-model="ad.ratio" type="number">
+								<template #label>{{ i18n.ts.ratio }}</template>
+							</MkInput>
+							<MkInput v-model="ad.startsAt" type="datetime-local">
+								<template #label>{{ i18n.ts.startingperiod }}</template>
+							</MkInput>
+							<MkInput v-model="ad.expiresAt" type="datetime-local">
+								<template #label>{{ i18n.ts.expiration }}</template>
+							</MkInput>
+						</FormSplit>
+						<MkTextarea v-model="ad.memo">
+							<template #label>{{ i18n.ts.memo }}</template>
+						</MkTextarea>
+						<div class="buttons">
+							<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i
+									class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+							<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}
+							</MkButton>
+						</div>
+					</div>
+				</MkPagination>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -56,6 +62,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkRadios from '@/components/MkRadios.vue';
+import MkPagination from '@/components/MkPagination.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -67,19 +74,24 @@ let ads: any[] = $ref([]);
 const localTime = new Date();
 const localTimeDiff = localTime.getTimezoneOffset() * 60 * 1000;
 
-os.api('admin/ad/list').then(adsResponse => {
-	ads = adsResponse.map(r => {
-		const exdate = new Date(r.expiresAt);
-		const stdate = new Date(r.startsAt);
-		exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
-		stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
-		return {
-			...r,
-			expiresAt: exdate.toISOString().slice(0, 16),
-			startsAt: stdate.toISOString().slice(0, 16),
-		};
-	});
-});
+// os.api('admin/ad/list').then(adsResponse => {
+// 	ads = adsResponse.map(r => {
+// 		const exdate = new Date(r.expiresAt);
+// 		const stdate = new Date(r.startsAt);
+// 		exdate.setMilliseconds(exdate.getMilliseconds() - localTimeDiff);
+// 		stdate.setMilliseconds(stdate.getMilliseconds() - localTimeDiff);
+// 		return {
+// 			...r,
+// 			expiresAt: exdate.toISOString().slice(0, 16),
+// 			startsAt: stdate.toISOString().slice(0, 16),
+// 		};
+// 	});
+// });
+
+const pagination = {
+	endpoint: 'admin/ad/list' as const,
+	limit: 10,
+};
 
 function add() {
 	ads.unshift({
@@ -141,12 +153,11 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .uqshojas {
-	> .ad {
+	>.ad {
 		padding: 32px;
 
 		&:not(:last-child) {
 			margin-bottom: var(--margin);
 		}
 	}
-}
-</style>
+}</style>