Merge pull request #1137 from colinin/vben5-subscribe

feat(vben5): Personal page added notification subscription

apps/vben5/packages/@abp/account/package.json

@@ -23,6 +23,7 @@
     "@abp/core": "workspace:*",
     "@abp/gdpr": "workspace:*",
     "@abp/identity": "workspace:*",
+    "@abp/notifications": "workspace:*",
     "@abp/request": "workspace:*",
     "@abp/ui": "workspace:*",
     "@ant-design/icons-vue": "catalog:",

apps/vben5/packages/@abp/account/src/components/components/NoticeSettings.vue

@@ -1,10 +1,118 @@
 <script setup lang="ts">
-import { Card, Empty } from 'ant-design-vue';
+import { onMounted, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useMySubscribesApi, useNotificationsApi } from '@abp/notifications';
+import {
+  Card,
+  Collapse,
+  CollapsePanel,
+  List,
+  ListItem,
+  ListItemMeta,
+  message,
+  Switch,
+} from 'ant-design-vue';
+
+interface NotificationItem {
+  description?: string;
+  displayName: string;
+  isSubscribe: boolean;
+  loading: boolean;
+  name: string;
+}
+
+interface NotificationGroup {
+  displayName: string;
+  name: string;
+  notifications: NotificationItem[];
+}
+
+const notificationGroups = ref<NotificationGroup[]>([]);
+
+const { getMySubscribesApi, subscribeApi, unSubscribeApi } =
+  useMySubscribesApi();
+const { getAssignableNotifiersApi } = useNotificationsApi();
+
+async function onInit() {
+  const subRes = await getMySubscribesApi();
+  const notifierRes = await getAssignableNotifiersApi();
+
+  const groups: NotificationGroup[] = [];
+  notifierRes.items.forEach((group) => {
+    const notifications: NotificationItem[] = [];
+    group.notifications.forEach((notification) => {
+      notifications.push({
+        description: notification.description,
+        displayName: notification.displayName,
+        isSubscribe: subRes.items.some((x) => x.name === notification.name),
+        loading: false,
+        name: notification.name,
+      });
+    });
+    groups.push({
+      displayName: group.displayName,
+      name: group.name,
+      notifications,
+    });
+  });
+  notificationGroups.value = groups;
+}
+
+async function onSubscribed(notification: NotificationItem, checked: boolean) {
+  try {
+    notification.loading = true;
+    const api = checked
+      ? subscribeApi(notification.name)
+      : unSubscribeApi(notification.name);
+    await api;
+    message.success($t('AbpUi.SavedSuccessfully'));
+  } catch {
+    notification.isSubscribe = !checked;
+  } finally {
+    notification.loading = false;
+  }
+}
+
+onMounted(() => {
+  onInit();
+});
 </script>
 
 <template>
   <Card :bordered="false" :title="$t('abp.account.settings.noticeSettings')">
-    <Empty />
+    <Collapse>
+      <template v-for="group in notificationGroups" :key="group.name">
+        <CollapsePanel :header="group.displayName">
+          <List>
+            <template
+              v-for="notification in group.notifications"
+              :key="notification.name"
+            >
+              <ListItem>
+                <template #actions>
+                  <Switch
+                    v-model:checked="notification.isSubscribe"
+                    @change="
+                      (checked) => onSubscribed(notification, Boolean(checked))
+                    "
+                  />
+                </template>
+                <ListItemMeta>
+                  <template #title>
+                    {{ notification.displayName }}
+                  </template>
+                  <template #description>
+                    <div>{{ notification.description }}</div>
+                  </template>
+                </ListItemMeta>
+              </ListItem>
+            </template>
+          </List>
+        </CollapsePanel>
+      </template>
+    </Collapse>
   </Card>
 </template>
 

apps/vben5/packages/@abp/notifications/src/api/index.ts

@@ -1,2 +1,3 @@
 export { useMyNotifilersApi } from './useMyNotifilersApi';
+export { useMySubscribesApi } from './useMySubscribesApi';
 export { useNotificationsApi } from './useNotificationsApi';

apps/vben5/packages/@abp/notifications/src/api/useMySubscribesApi.ts

@@ -0,0 +1,54 @@
+import type { ListResultDto } from '@abp/core';
+
+import type { UserSubscreNotification } from '../types/subscribes';
+
+import { useRequest } from '@abp/request';
+
+export function useMySubscribesApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取我的所有订阅通知
+   * @returns 订阅通知列表
+   */
+  function getMySubscribesApi(): Promise<
+    ListResultDto<UserSubscreNotification>
+  > {
+    return request<ListResultDto<UserSubscreNotification>>(
+      '/api/notifications/my-subscribes/all',
+      {
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 订阅通知
+   * @param name 通知名称
+   */
+  function subscribeApi(name: string): Promise<void> {
+    return request('/api/notifications/my-subscribes', {
+      data: {
+        name,
+      },
+      method: 'POST',
+    });
+  }
+
+  /**
+   * 取消订阅通知
+   * @param name 通知名称
+   */
+  function unSubscribeApi(name: string): Promise<void> {
+    return request(`/api/notifications/my-subscribes?name=${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  return {
+    cancel,
+    getMySubscribesApi,
+    subscribeApi,
+    unSubscribeApi,
+  };
+}

apps/vben5/packages/@abp/notifications/src/types/index.ts

@@ -1,2 +1,4 @@
+export * from './definitions';
 export * from './my-notifilers';
 export * from './notifications';
+export * from './subscribes';

apps/vben5/packages/@abp/notifications/src/types/subscribes.ts

@@ -0,0 +1,17 @@
+import type { PagedAndSortedResultRequestDto } from '@abp/core';
+
+interface UserSubscreNotification {
+  name: string;
+}
+
+interface UserSubscriptionsResult {
+  isSubscribed: boolean;
+}
+
+type GetSubscriptionsPagedListInput = PagedAndSortedResultRequestDto;
+
+export type {
+  GetSubscriptionsPagedListInput,
+  UserSubscreNotification,
+  UserSubscriptionsResult,
+};