rudeshark.net/packages/client/src/pages/settings/notifications.vue
2023-04-07 17:01:42 -07:00

135 lines
3.5 KiB
Vue

<template>
<div class="_formRoot">
<FormButton class="_formBlock" @click="configure"
><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
>{{ i18n.ts.notificationSetting }}</FormButton
>
<FormSection>
<ForFormButtonmLink
class="_formBlock"
@click="readAllNotifications"
>{{ i18n.ts.markAsReadAllNotifications }}</ForFormButtonmLink
>
<FormButton class="_formBlock" @click="readAllUnreadNotes">{{
i18n.ts.markAsReadAllUnreadNotes
}}</FormButton>
<FormButton class="_formBlock" @click="readAllMessagingMessages">{{
i18n.ts.markAsReadAllTalkMessages
}}</FormButton>
</FormSection>
<FormSection>
<template #label>{{ i18n.ts.pushNotification }}</template>
<div class="_gaps_m">
<MkPushNotificationAllowButton ref="allowButton" />
<MkSwitch
:disabled="!pushRegistrationInServer"
:model-value="sendReadMessage"
@update:model-value="onChangeSendReadMessage"
>
<template #label>{{
i18n.ts.sendPushNotificationReadMessage
}}</template>
<template #caption>
<I18n
:src="
i18n.ts.sendPushNotificationReadMessageCaption
"
>
<template #emptyPushNotificationMessage>{{
i18n.ts._notification
.emptyPushNotificationMessage
}}</template>
</I18n>
</template>
</MkSwitch>
</div>
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from "vue";
import { notificationTypes } from "calckey-js";
import FormButton from "@/components/MkButton.vue";
import FormLink from "@/components/form/link.vue";
import FormSection from "@/components/form/section.vue";
import * as os from "@/os";
import { $i } from "@/account";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
let allowButton =
$shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
let pushRegistrationInServer = $computed(
() => allowButton?.pushRegistrationInServer
);
let sendReadMessage = $computed(
() => pushRegistrationInServer?.sendReadMessage || false
);
async function readAllUnreadNotes() {
await os.api("i/read-all-unread-notes");
}
async function readAllMessagingMessages() {
await os.api("i/read-all-messaging-messages");
}
async function readAllNotifications() {
await os.api("notifications/mark-all-as-read");
}
function configure() {
const includingTypes = notificationTypes.filter(
(x) => !$i!.mutingNotificationTypes.includes(x)
);
os.popup(
defineAsyncComponent(
() => import("@/components/MkNotificationSettingWindow.vue")
),
{
includingTypes,
showGlobalToggle: false,
},
{
done: async (res) => {
const { includingTypes: value } = res;
await os
.apiWithDialog("i/update", {
mutingNotificationTypes: notificationTypes.filter(
(x) => !value.includes(x)
),
})
.then((i) => {
$i!.mutingNotificationTypes = i.mutingNotificationTypes;
});
},
},
"closed"
);
}
function onChangeSendReadMessage(v: boolean) {
if (!pushRegistrationInServer) return;
os.apiWithDialog("sw/update-registration", {
endpoint: pushRegistrationInServer.endpoint,
sendReadMessage: v,
}).then((res) => {
if (!allowButton) return;
allowButton.pushRegistrationInServer = res;
});
}
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.notifications,
icon: "ph-bell ph-bold ph-lg",
});
</script>