feat: お知らせの優先順位機能 (#118)

ついでにお知らせのページング処理、わかったのボタン押したとき更新されるように

packages/frontend/src/pages/admin/announcements.vue

@@ -19,7 +19,7 @@
 					</div>
 				</MkFolder>
 			</MkFolder>
-			<section v-for="announcement in announcements" class="">
+			<section v-for="announcement in announcements" :key="announcement.id">
 				<div class="_panel _gaps_m" style="padding: 24px;">
 					<MkInput ref="announceTitleEl" v-model="announcement.title" :large="false">
 						<template #label>{{ i18n.ts.title }}&nbsp;<button v-tooltip="i18n.ts.emoji" :class="['_button']" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button></template>
@@ -30,6 +30,9 @@
 					<MkInput v-model="announcement.imageUrl">
 						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
+					<MkInput v-model="announcement.displayOrder" type="number">
+						<template #label>{{ i18n.ts.displayOrder }}</template>
+					</MkInput>
 					<MkInput v-model="announcement.closeDuration" type="number">
 						<template #label>{{ i18n.ts.dialogCloseDuration }}</template>
 						<template #suffix>{{ i18n.ts._time.second }}</template>
@@ -43,6 +46,7 @@
 					</div>
 				</div>
 			</section>
+			<MkButton v-if="hasMore" :class="$style.more" :disabled="!hasMore" primary rounded @click="fetch()">{{ i18n.ts.loadMore }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -61,33 +65,31 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
+const announceTitleEl = $shallowRef<HTMLInputElement | null>(null);
+const user = ref<UserLite | null>(null);
+const offset = ref(0);
+const hasMore = ref(false);
+
 let announcements: any[] = $ref([]);
 
-const user = ref<UserLite>(null);
-const announceTitleEl = $shallowRef<HTMLInputElement | null>(null);
+function insertEmoji(ev: MouseEvent): void {
+	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, announceTitleEl);
+}
 
-function selectUserFilter() {
+function selectUserFilter(): void {
 	os.selectUser().then(_user => {
 		user.value = _user;
 	});
 }
 
-function editUser(an) {
+function editUser(announcement): void {
 	os.selectUser().then(_user => {
-		an.userId = _user.id;
-		an.user = _user;
+		announcement.userId = _user.id;
+		announcement.user = _user;
 	});
 }
 
-async function insertEmoji(ev: MouseEvent) {
-	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, announceTitleEl);
-}
-
-os.api('admin/announcements/list').then(announcementResponse => {
-	announcements = announcementResponse;
-});
-
-function add() {
+function add(): void {
 	announcements.unshift({
 		id: null,
 		title: '',
@@ -95,11 +97,12 @@ function add() {
 		imageUrl: null,
 		userId: null,
 		user: null,
+		displayOrder: 0,
 		closeDuration: 10,
 	});
 }
 
-function remove(announcement) {
+function remove(announcement): void {
 	os.confirm({
 		type: 'warning',
 		text: i18n.t('removeAreYouSure', { x: announcement.title }),
@@ -110,14 +113,14 @@ function remove(announcement) {
 	});
 }
 
-function save(announcement) {
+function save(announcement): void {
 	if (announcement.id == null) {
 		os.api('admin/announcements/create', announcement).then(() => {
 			os.alert({
 				type: 'success',
 				text: i18n.ts.saved,
 			});
-			refresh();
+			fetch(true);
 		}).catch(err => {
 			os.alert({
 				type: 'error',
@@ -139,15 +142,26 @@ function save(announcement) {
 	}
 }
 
-function refresh() {
-	os.api('admin/announcements/list', { userId: user.value?.id }).then(announcementResponse => {
-		announcements = announcementResponse;
+function fetch(resetOffset = false): void {
+	if (resetOffset) {
+		announcements = [];
+		offset.value = 0;
+	}
+
+	os.api('admin/announcements/list', {
+		offsetMode: true,
+		offset: offset.value,
+		limit: 10,
+		userId: user.value?.id,
+	}).then(announcementResponse => {
+		announcements = announcements.concat(announcementResponse);
+		hasMore.value = announcementResponse?.length === 10;
+		offset.value += announcements.length;
 	});
 }
 
-watch(user, refresh);
-
-refresh();
+watch(user, () => fetch(true));
+fetch();
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
@@ -163,3 +177,10 @@ definePageMetadata({
 	icon: 'ti ti-speakerphone',
 });
 </script>
+
+<style lang="scss" module>
+.more {
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

packages/frontend/src/pages/announcements.vue

@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
+		<MkPagination v-slot="{items, reload}" :pagination="pagination" class="ruryvtyk _gaps_m">
 			<section v-for="(announcement, i) in items" :key="announcement.id" :class="{ announcement: true, _panel: true, private: announcement.isPrivate }">
 				<div class="header"><span v-if="$i && !announcement.isRead"><span class="ti ti-speakerphone"></span></span><Mfm :text="announcement.title"/></div>
 				<div class="content">
@@ -10,7 +10,7 @@
 					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 				</div>
 				<div v-if="$i && !announcement.isRead" class="footer">
-					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+					<MkButton primary @click="read(items, reload, announcement, i)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
 				</div>
 			</section>
 		</MkPagination>
@@ -19,7 +19,6 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
@@ -29,16 +28,15 @@ import { $i } from '@/account';
 
 const pagination = {
 	endpoint: 'announcements' as const,
+	offsetMode: true,
 	limit: 10,
 };
 
-// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
-function read(items, announcement, i) {
-	items[i] = {
-		...announcement,
-		isRead: true,
-	};
-	os.api('i/read-announcement', { announcementId: announcement.id });
+function read(items, reload, announcement, i) {
+	items[i].isRead = true;
+	os.api('i/read-announcement', {
+		announcementId: announcement.id,
+	}).then(reload);
 }
 
 const headerActions = $computed(() => []);

packages/frontend/src/ui/visitor.vue

@@ -91,6 +91,7 @@ provideMetadataReceiver((info) => {
 
 const announcements = {
 	endpoint: 'announcements',
+	offsetMode: true,
 	limit: 10,
 };