From bdf390eb7e5b1c17b80eef951419feebbedc03d7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 31 Jul 2023 14:13:34 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E6=9C=AA=E8=AA=AD=E3=81=AE?=
=?UTF-8?q?=E3=81=8A=E7=9F=A5=E3=82=89=E3=81=9B=E3=81=AE=E3=80=8C=E3=82=8F?=
=?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=9F=E3=80=8D=E3=82=92=E3=82=AF=E3=83=AA?=
=?UTF-8?q?=E3=83=83=E3=82=AF=E3=83=BB=E3=82=BF=E3=83=83=E3=83=97=E3=81=97?=
=?UTF-8?q?=E3=81=A6=E3=82=82=E3=81=9D=E3=81=AE=E5=A0=B4=E3=81=A7=E3=80=8C?=
=?UTF-8?q?=E3=82=8F=E3=81=8B=E3=81=A3=E3=81=9F=E3=80=8D=E3=81=8C=E6=B6=88?=
=?UTF-8?q?=E3=81=88=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE?=
=?UTF-8?q?=E6=AD=A3=20(#11433)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* fix(frontend): 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
* remove comment
* clean up
* :v:
* add CHANGELOG
---
CHANGELOG.md | 1 +
packages/frontend/src/pages/announcements.vue | 24 ++++++++++---------
2 files changed, 14 insertions(+), 11 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3029a93b70..9aa5bf2fa2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
### Client
- Fix: サーバー情報画面(`/instance-info/{domain}`)でブロックができないのを修正
+- Fix: 未読のお知らせの「わかった」をクリック・タップしてもその場で「わかった」が消えない問題を修正
### Server
-
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index c04db7c4b5..dd166d3c51 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -7,15 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800">
- <MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
- <section v-for="(announcement, i) in items" :key="announcement.id" class="announcement _panel">
+ <MkPagination ref="paginationEl" v-slot="{items}" :pagination="pagination" class="ruryvtyk _gaps_m">
+ <section v-for="announcement in items" :key="announcement.id" class="announcement _panel">
<div class="header"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="content">
<Mfm :text="announcement.text"/>
<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(announcement.id)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
-import { } from 'vue';
+import { ref } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
@@ -37,13 +37,15 @@ const pagination = {
limit: 10,
};
-// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
-function read(items, announcement, i) {
- items[i] = {
- ...announcement,
- isRead: true,
- };
- os.api('i/read-announcement', { announcementId: announcement.id });
+const paginationEl = ref<InstanceType<typeof MkPagination>>();
+
+function read(id: string) {
+ if (!paginationEl.value) return;
+ paginationEl.value.updateItem(id, announcement => {
+ announcement.isRead = true;
+ return announcement;
+ });
+ os.api('i/read-announcement', { announcementId: id });
}
const headerActions = $computed(() => []);