From 8006e7a34d4894e7ae91e5301f9d4f8fe50473de Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 9 Oct 2021 13:12:41 +0900
Subject: feat(client): 通知ページで通知の種類によるフィルタ
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/pages/notifications.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

(limited to 'src/client/pages')

diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 9728b87bf1..c6d7ea9b31 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -2,7 +2,7 @@
 <div>
 	<MkHeader :info="header"/>
 	<div class="clupoqwt" v-size="{ min: [800] }">
-		<XNotifications class="notifications" @before="before" @after="after" :unread-only="tab === 'unread'"/>
+		<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
 	</div>
 </div>
 </template>
@@ -13,6 +13,7 @@ import Progress from '@client/scripts/loading';
 import XNotifications from '@client/components/notifications.vue';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
+import { notificationTypes } from '@/types';
 
 export default defineComponent({
 	components: {
@@ -27,11 +28,17 @@ export default defineComponent({
 				bg: 'var(--bg)',
 			},
 			tab: 'all',
+			includeTypes: null,
 			header: computed(() => ({
 				title: this.$ts.notifications,
 				icon: 'fas fa-bell',
 				bg: 'var(--bg)',
 				actions: [{
+					text: this.$ts.filter,
+					icon: 'fas fa-filter',
+					highlighted: this.includeTypes != null,
+					handler: this.setFilter,
+				}, {
 					text: this.$ts.markAllAsRead,
 					icon: 'fas fa-check',
 					handler: () => {
@@ -58,6 +65,24 @@ export default defineComponent({
 
 		after() {
 			Progress.done();
+		},
+
+		setFilter(ev) {
+			const typeItems = notificationTypes.map(t => ({
+				text: this.$t(`_notification._types.${t}`),
+				active: this.includeTypes && this.includeTypes.includes(t),
+				action: () => {
+					this.includeTypes = [t];
+				}
+			}));
+			const items = this.includeTypes != null ? [{
+				icon: 'fas fa-times',
+				text: this.$ts.clear,
+				action: () => {
+					this.includeTypes = null;
+				}
+			}, null, ...typeItems] : typeItems;
+			os.popupMenu(items, ev.currentTarget || ev.target);
 		}
 	}
 });
-- 
cgit v1.2.3-freya