fix: 🐛 tapping Okay on reaction will make it update immediately
This commit is contained in:
parent
2bd9db9ea5
commit
2818b5b634
1 changed files with 14 additions and 12 deletions
|
@ -5,14 +5,15 @@
|
||||||
/></template>
|
/></template>
|
||||||
<MkSpacer :content-max="800">
|
<MkSpacer :content-max="800">
|
||||||
<MkPagination
|
<MkPagination
|
||||||
|
ref="paginationEl"
|
||||||
v-slot="{ items }"
|
v-slot="{ items }"
|
||||||
:pagination="pagination"
|
:pagination="pagination"
|
||||||
class="ruryvtyk _content"
|
class="ruryvtyk _gaps_m"
|
||||||
>
|
>
|
||||||
<section
|
<section
|
||||||
v-for="(announcement, i) in items"
|
v-for="announcement in items"
|
||||||
:key="announcement.id"
|
:key="announcement.id"
|
||||||
class="_card announcement"
|
class="announcement _panel"
|
||||||
>
|
>
|
||||||
<div class="_title">
|
<div class="_title">
|
||||||
<span v-if="$i && !announcement.isRead">🆕 </span>
|
<span v-if="$i && !announcement.isRead">🆕 </span>
|
||||||
|
@ -31,7 +32,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="$i && !announcement.isRead" class="_footer">
|
<div v-if="$i && !announcement.isRead" class="_footer">
|
||||||
<MkButton primary @click="read(items, announcement, i)"
|
<MkButton primary @click="read(announcement.id)"
|
||||||
><i class="ph-check ph-bold ph-lg"></i>
|
><i class="ph-check ph-bold ph-lg"></i>
|
||||||
{{ i18n.ts.gotIt }}</MkButton
|
{{ i18n.ts.gotIt }}</MkButton
|
||||||
>
|
>
|
||||||
|
@ -43,7 +44,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {} from "vue";
|
import { ref } from "vue";
|
||||||
import MkPagination from "@/components/MkPagination.vue";
|
import MkPagination from "@/components/MkPagination.vue";
|
||||||
import MkButton from "@/components/MkButton.vue";
|
import MkButton from "@/components/MkButton.vue";
|
||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
|
@ -55,13 +56,14 @@ const pagination = {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
|
const paginationEl = ref<InstanceType<typeof MkPagination>>();
|
||||||
function read(items, announcement, i) {
|
function read(id: string) {
|
||||||
items[i] = {
|
if (!paginationEl.value) return;
|
||||||
...announcement,
|
paginationEl.value.updateItem(id, (announcement) => {
|
||||||
isRead: true,
|
announcement.isRead = true;
|
||||||
};
|
return announcement;
|
||||||
os.api("i/read-announcement", { announcementId: announcement.id });
|
});
|
||||||
|
os.api("i/read-announcement", { announcementId: id });
|
||||||
}
|
}
|
||||||
|
|
||||||
const headerActions = $computed(() => []);
|
const headerActions = $computed(() => []);
|
||||||
|
|
Loading…
Reference in a new issue