fix: チャットの通知を既読にするボタン

nacika-ins · Mar 12, 2024 · 5ae1e2c · 5ae1e2c
1 parent d8a175b
commit 5ae1e2c
Showing 1 changed file with 69 additions and 49 deletions.
diff --git a/packages/frontend/src/pages/settings/notifications.vue b/packages/frontend/src/pages/settings/notifications.vue
@@ -1,28 +1,37 @@
 <template>
-<div class="_gaps_m">
-	<FormLink @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
-	<FormSection>
-		<div class="_gaps_m">
-			<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
-			<FormLink @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
-		</div>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.pushNotification }}</template>
+  <div class="_gaps_m">
+    <FormLink @click="configure">
+      <template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}
+    </FormLink>
+    <FormSection>
+      <div class="_gaps_m">
+        <FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
+        <FormLink @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
+        <FormLink @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
+      </div>
+    </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>
+      <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>
@@ -42,48 +51,59 @@ let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInSe
 let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
 
 async function readAllUnreadNotes() {
-	await os.api('i/read-all-unread-notes');
+  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');
+  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');
+  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;
+  if (!pushRegistrationInServer) return;
 
-	os.apiWithDialog('sw/update-registration', {
-		endpoint: pushRegistrationInServer.endpoint,
-		sendReadMessage: v,
-	}).then(res => {
-		if (!allowButton)	return;
-		allowButton.pushRegistrationInServer = res;
-	});
+  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: 'ti ti-bell',
+  title: i18n.ts.notifications,
+  icon: 'ti ti-bell',
 });
 </script>