Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(client): Refine routing (#8846)

Browse source
This commit is contained in:
syuilo 2022-06-20 17:38:49 +09:00 • committed by GitHub
parent 30a39a296d
commit 699f24f3dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
149 changed files with 6312 additions and 6670 deletions
Download patch file Download diff file Expand all files Collapse all files

86
packages/client/src/pages/announcements.vue
View file

@ -1,57 +1,53 @@
<template>
<MkSpacer :content-max="800">
<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
<div class="_title"><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="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
</MkSpacer>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
<div class="_title"><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="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
</div>
</section>
</MkPagination>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import MkPagination from '@/components/ui/pagination.vue';
import MkButton from '@/components/ui/button.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
export default defineComponent({
components: {
MkPagination,
MkButton
},
const pagination = {
endpoint: 'announcements' as const,
limit: 10,
};
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.announcements,
icon: 'fas fa-broadcast-tower',
bg: 'var(--bg)',
},
pagination: {
endpoint: 'announcements' as const,
limit: 10,
},
};
},
// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
function read(items, announcement, i) {
items[i] = {
...announcement,
isRead: true,
};
os.api('i/read-announcement', { announcementId: announcement.id });
}
methods: {
// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
read(items, announcement, i) {
items[i] = {
...announcement,
isRead: true,
};
os.api('i/read-announcement', { announcementId: announcement.id });
},
}
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.announcements,
icon: 'fas fa-broadcast-tower',
bg: 'var(--bg)',
});
</script>