sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: お知らせの確認待機時間・優先順位機能

Browse Source 
b7fd6bf33a835fd73c2a86eb007074d3680f6efd によるリワーク

This reverts commit eeef3965b7
This reverts commit 04fefb2056
This reverts commit 576251200f
This commit is contained in:
まっちゃとーにゅ
2023-08-19 04:48:28 +09:00
parent 3c2b83c3ae
commit 6893e5d60b
27 changed files with 832 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
packages/frontend/src/pages/admin/announcements.vue
View File

@@ -8,7 +8,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="900">
<div class="_gaps">
<MkInfo v-if="announcements.length > 5" warn>{{ i18n.ts._announcement.tooManyActiveAnnouncementDescription }}</MkInfo>
<MkFolder>
<template #label>{{ i18n.ts.options }}</template>
<MkFolder>
<template #label>{{ i18n.ts.specifyUser }}</template>
<template v-if="user" #suffix>@{{ user.username }}</template>
<div style="text-align: center;" class="_gaps">
<div v-if="user">@{{ user.username }}</div>
<div>
<MkButton v-if="user == null" primary rounded inline @click="selectUserFilter">{{ i18n.ts.selectUser }}</MkButton>
<MkButton v-else danger rounded inline @click="user = null">{{ i18n.ts.remove }}</MkButton>
</div>
</div>
</MkFolder>
</MkFolder>
<MkFolder v-for="announcement in announcements" :key="announcement.id ?? announcement._id" :defaultOpen="announcement.id == null">
<template #label>{{ announcement.title }}</template>
@@ -21,8 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #caption>{{ announcement.text }}</template>
<div class="_gaps_m">
<MkInput v-model="announcement.title">
<template #label>{{ i18n.ts.title }}</template>
<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>
</MkInput>
<MkTextarea v-model="announcement.text">
<template #label>{{ i18n.ts.text }}</template>
@@ -49,40 +64,69 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="announcement.needConfirmationToRead" :helpText="i18n.ts._announcement.needConfirmationToReadDescription">
{{ i18n.ts._announcement.needConfirmationToRead }}
</MkSwitch>
<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
<MkInput v-model="announcement.closeDuration" type="number">
<template #label>{{ i18n.ts.dialogCloseDuration }}</template>
<template #suffix>{{ i18n.ts._time.second }}</template>
</MkInput>
<MkInput v-model="announcement.displayOrder" type="number">
<template #label>{{ i18n.ts.displayOrder }}</template>
</MkInput>
<p v-if="announcement.readCount">{{ i18n.t('nUsersRead', { n: announcement.readCount }) }}</p>
<MkUserCardMini v-if="announcement.userId" :user="announcement.user" @click="editUser(announcement)"></MkUserCardMini>
<MkButton v-else class="button" inline primary @click="editUser(announcement)">{{ i18n.ts.specifyUser }}</MkButton>
<div class="buttons _buttons">
<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="announcement.id != null" class="button" inline @click="archive(announcement)"><i class="ti ti-check"></i> {{ i18n.ts._announcement.end }} ({{ i18n.ts.archive }})</MkButton>
<MkButton v-if="announcement.id == null || announcement.isActive" class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="announcement.id != null && announcement.isActive" class="button" inline @click="archive(announcement)"><i class="ti ti-check"></i> {{ i18n.ts._announcement.end }} ({{ i18n.ts.archive }})</MkButton>
<MkButton v-if="announcement.id != null" class="button" inline danger @click="del(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
</div>
</MkFolder>
<MkButton v-if="hasMore" :class="$style.more" :disabled="!hasMore" primary rounded @click="fetch()">{{ i18n.ts.loadMore }}</MkButton>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { } from 'vue';
import { ref, watch } from 'vue';
import * as misskey from 'misskey-js';
import XHeader from './_header_.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkInput from '@/components/MkInput.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkUserCardMini from '@/components/MkUserCardMini.vue';
const announceTitleEl = $shallowRef<HTMLInputElement | null>(null);
const user = ref<misskey.entities.UserLite | null>(null);
const offset = ref(0);
const hasMore = ref(false);
let announcements: any[] = $ref([]);
os.api('admin/announcements/list').then(announcementResponse => {
announcements = announcementResponse;
});
function selectUserFilter(): void {
os.selectUser().then(_user => {
user.value = _user;
});
}
function add() {
function editUser(announcement): void {
os.selectUser().then(_user => {
announcement.userId = _user.id;
announcement.user = _user;
});
}
function insertEmoji(ev: MouseEvent): void {
os.openEmojiPicker((ev.currentTarget ?? ev.target) as HTMLElement, {}, announceTitleEl);
}
function add(): void {
announcements.unshift({
_id: Math.random().toString(36),
id: null,
@@ -93,10 +137,12 @@ function add() {
display: 'normal',
forExistingUsers: false,
needConfirmationToRead: false,
closeDuration: 0,
displayOrder: 0,
});
}
function del(announcement) {
function del(announcement): void {
os.confirm({
type: 'warning',
text: i18n.t('deleteAreYouSure', { x: announcement.title }),
@@ -107,30 +153,43 @@ function del(announcement) {
});
}
async function archive(announcement) {
async function archive(announcement): Promise<void> {
await os.apiWithDialog('admin/announcements/update', {
...announcement,
isActive: false,
});
refresh();
fetch(true);
}
async function save(announcement) {
async function save(announcement): Promise<void> {
if (announcement.id == null) {
await os.apiWithDialog('admin/announcements/create', announcement);
refresh();
} else {
os.apiWithDialog('admin/announcements/update', announcement);
await os.apiWithDialog('admin/announcements/update', announcement);
}
fetch(true);
}
function refresh() {
os.api('admin/announcements/list').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;
});
}
refresh();
watch(user, () => fetch(true));
fetch(true);
const headerActions = $computed(() => [{
asFullButton: true,
@@ -146,3 +205,10 @@ definePageMetadata({
icon: 'ti ti-speakerphone',
});
</script>
<style lang="scss" module>
.more {
margin-left: auto;
margin-right: auto;
}
</style>

34
packages/frontend/src/pages/announcements.vue
View File

@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
</span>
<span>{{ announcement.title }}</span>
<Mfm :text="announcement.title"/>
</div>
<div :class="$style.content">
<Mfm :text="announcement.text"/>
@@ -40,17 +40,18 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { } from 'vue';
import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';
import { ref, watch } from 'vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { $i, updateAccount } from '@/account';
import MkPagination from '@/components/MkPagination.vue';
import MkButton from '@/components/MkButton.vue';
import MkInfo from '@/components/MkInfo.vue';
const paginationCurrent = {
endpoint: 'announcements' as const,
offsetMode: true,
limit: 10,
params: {
isActive: true,
@@ -59,6 +60,7 @@ const paginationCurrent = {
const paginationPast = {
endpoint: 'announcements' as const,
offsetMode: true,
limit: 10,
params: {
isActive: false,
@@ -66,10 +68,9 @@ const paginationPast = {
};
const paginationEl = ref<InstanceType<typeof MkPagination>>();
const tab = ref('current');
async function read(announcement) {
async function read(announcement): Promise<void> {
if (announcement.needConfirmationToRead) {
const confirm = await os.confirm({
type: 'question',
@@ -84,10 +85,12 @@ async function read(announcement) {
a.isRead = true;
return a;
});
os.api('i/read-announcement', { announcementId: announcement.id });
updateAccount({
unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== announcement.id),
});
await os.api('i/read-announcement', { announcementId: announcement.id });
if ($i) {
updateAccount({
unreadAnnouncements: $i.unreadAnnouncements.filter((a: { id: string; }) => a.id !== announcement.id),
});
}
}
const headerActions = $computed(() => []);
@@ -106,6 +109,15 @@ definePageMetadata({
title: i18n.ts.announcements,
icon: 'ti ti-speakerphone',
});
const unreadCount = ref($i?.unreadAnnouncements.length ?? 0);
watch(() => $i?.unreadAnnouncements.length ?? 0, () => {
// 未読が増えた場合はリロード
if (($i?.unreadAnnouncements.length ?? 0) > unreadCount.value) {
paginationEl.value?.reload();
}
unreadCount.value = $i?.unreadAnnouncements.length ?? 0;
});
</script>
<style lang="scss" module>

51
packages/frontend/src/pages/user-info.vue
View File

@@ -139,7 +139,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps">
<MkButton primary rounded @click="createAnnouncement"><i class="ti ti-plus"></i> {{ i18n.ts.new }}</MkButton>
<MkPagination :pagination="announcementsPagination">
<MkPagination ref="announcementsPaginationEl" :pagination="announcementsPagination">
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="announcement in items" :key="announcement.id" v-panel :class="$style.announcementItem" @click="editAnnouncement(announcement)">
@@ -211,29 +211,30 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, watch } from 'vue';
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import * as misskey from 'misskey-js';
import MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkSelect from '@/components/MkSelect.vue';
import FormSuspense from '@/components/form/suspense.vue';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
import MkInfo from '@/components/MkInfo.vue';
import * as os from '@/os';
import { url } from '@/config';
import { userPage, acct } from '@/filters/user';
import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n';
import { iAmAdmin, iAmModerator, $i } from '@/account';
import FormLink from '@/components/form/link.vue';
import FormSection from '@/components/form/section.vue';
import FormSuspense from '@/components/form/suspense.vue';
import MkButton from '@/components/MkButton.vue';
import MkChart from '@/components/MkChart.vue';
import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkInfo from '@/components/MkInfo.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import MkObjectView from '@/components/MkObjectView.vue';
import MkPagination from '@/components/MkPagination.vue';
import MkRolePreview from '@/components/MkRolePreview.vue';
import MkPagination, { Paging } from '@/components/MkPagination.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import { updateColumn } from '@/ui/deck/deck-store';
const props = withDefaults(defineProps<{
userId: string;
@@ -261,8 +262,10 @@ const filesPagination = {
userId: props.userId,
})),
};
const announcementsPaginationEl = ref<InstanceType<typeof MkPagination>>();
const announcementsPagination = {
endpoint: 'admin/announcements/list' as const,
offsetMode: true,
limit: 10,
params: computed(() => ({
userId: props.userId,
@@ -442,17 +445,25 @@ function toggleRoleItem(role) {
}
}
function createAnnouncement() {
function createAnnouncement(): void {
os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
user,
}, {}, 'closed');
}, {
done: async () => {
announcementsPaginationEl.value?.reload();
},
}, 'closed');
}
function editAnnouncement(announcement) {
function editAnnouncement(announcement): void {
os.popup(defineAsyncComponent(() => import('@/components/MkUserAnnouncementEditDialog.vue')), {
user,
announcement,
}, {}, 'closed');
}, {
done: async () => {
announcementsPaginationEl.value?.reload();
},
}, 'closed');
}
watch(() => props.userId, () => {