fix(frontend): 通知の範囲指定が必要ない通知設定でも範囲指定がでている問題を修正 (#14798)
* fix(frontend): 通知の範囲指定が必要ない通知設定でも範囲指定がでている問題を修正 * Update Changelog --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
@@ -6,13 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template>
|
||||
<div class="_gaps_m">
|
||||
<MkSelect v-model="type">
|
||||
<option value="all">{{ i18n.ts.all }}</option>
|
||||
<option value="following">{{ i18n.ts.following }}</option>
|
||||
<option value="follower">{{ i18n.ts.followers }}</option>
|
||||
<option value="mutualFollow">{{ i18n.ts.mutualFollow }}</option>
|
||||
<option value="followingOrFollower">{{ i18n.ts.followingOrFollower }}</option>
|
||||
<option value="list">{{ i18n.ts.userList }}</option>
|
||||
<option value="never">{{ i18n.ts.none }}</option>
|
||||
<option v-for="type in props.configurableTypes ?? notificationConfigTypes" :key="type" :value="type">{{ notificationConfigTypesI18nMap[type] }}</option>
|
||||
</MkSelect>
|
||||
|
||||
<MkSelect v-if="type === 'list'" v-model="userListId">
|
||||
@@ -21,31 +15,61 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</MkSelect>
|
||||
|
||||
<div class="_buttons">
|
||||
<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
<MkButton inline primary :disabled="type === 'list' && userListId === null" @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
const notificationConfigTypes = [
|
||||
'all',
|
||||
'following',
|
||||
'follower',
|
||||
'mutualFollow',
|
||||
'followingOrFollower',
|
||||
'list',
|
||||
'never'
|
||||
] as const;
|
||||
|
||||
export type NotificationConfig = {
|
||||
type: Exclude<typeof notificationConfigTypes[number], 'list'>;
|
||||
} | {
|
||||
type: 'list';
|
||||
userListId: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import { ref } from 'vue';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
|
||||
const props = defineProps<{
|
||||
value: any;
|
||||
value: NotificationConfig;
|
||||
userLists: Misskey.entities.UserList[];
|
||||
configurableTypes?: NotificationConfig['type'][]; // If not specified, all types are configurable
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update', result: any): void;
|
||||
(ev: 'update', result: NotificationConfig): void;
|
||||
}>();
|
||||
|
||||
const notificationConfigTypesI18nMap: Record<typeof notificationConfigTypes[number], string> = {
|
||||
all: i18n.ts.all,
|
||||
following: i18n.ts.following,
|
||||
follower: i18n.ts.followers,
|
||||
mutualFollow: i18n.ts.mutualFollow,
|
||||
followingOrFollower: i18n.ts.followingOrFollower,
|
||||
list: i18n.ts.userList,
|
||||
never: i18n.ts.none,
|
||||
};
|
||||
|
||||
const type = ref(props.value.type);
|
||||
const userListId = ref(props.value.userListId);
|
||||
const userListId = ref(props.value.type === 'list' ? props.value.userListId : null);
|
||||
|
||||
function save() {
|
||||
emit('update', { type: type.value, userListId: userListId.value });
|
||||
emit('update', type.value === 'list' ? { type: type.value, userListId: userListId.value! } : { type: type.value });
|
||||
}
|
||||
</script>
|
||||
|
@@ -22,7 +22,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
}}
|
||||
</template>
|
||||
|
||||
<XNotificationConfig :userLists="userLists" :value="$i.notificationRecieveConfig[type] ?? { type: 'all' }" @update="(res) => updateReceiveConfig(type, res)"/>
|
||||
<XNotificationConfig
|
||||
:userLists="userLists"
|
||||
:value="$i.notificationRecieveConfig[type] ?? { type: 'all' }"
|
||||
:configurableTypes="onlyOnOrOffNotificationTypes.includes(type) ? ['all', 'never'] : undefined"
|
||||
@update="(res) => updateReceiveConfig(type, res)"
|
||||
/>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</FormSection>
|
||||
@@ -58,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { shallowRef, computed } from 'vue';
|
||||
import XNotificationConfig from './notifications.notification-config.vue';
|
||||
import XNotificationConfig, { type NotificationConfig } from './notifications.notification-config.vue';
|
||||
import FormLink from '@/components/form/link.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
@@ -73,7 +78,9 @@ import { notificationTypes } from '@@/js/const.js';
|
||||
|
||||
const $i = signinRequired();
|
||||
|
||||
const nonConfigurableNotificationTypes = ['note', 'roleAssigned', 'followRequestAccepted', 'achievementEarned', 'test', 'exportCompleted'] as const satisfies (typeof notificationTypes[number])[];
|
||||
const nonConfigurableNotificationTypes = ['note', 'roleAssigned', 'followRequestAccepted', 'test', 'exportCompleted'] satisfies (typeof notificationTypes[number])[] as string[];
|
||||
|
||||
const onlyOnOrOffNotificationTypes = ['app', 'achievementEarned', 'login'] satisfies (typeof notificationTypes[number])[] as string[];
|
||||
|
||||
const allowButton = shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
|
||||
const pushRegistrationInServer = computed(() => allowButton.value?.pushRegistrationInServer);
|
||||
@@ -88,7 +95,7 @@ async function readAllNotifications() {
|
||||
await os.apiWithDialog('notifications/mark-all-as-read');
|
||||
}
|
||||
|
||||
async function updateReceiveConfig(type, value) {
|
||||
async function updateReceiveConfig(type: typeof notificationTypes[number], value: NotificationConfig) {
|
||||
await os.apiWithDialog('i/update', {
|
||||
notificationRecieveConfig: {
|
||||
...$i.notificationRecieveConfig,
|
||||
|
Reference in New Issue
Block a user