feat(vben5): add webhook groups page

apps/vben5/apps/app-antd/package.json

@@ -43,6 +43,7 @@
     "@abp/settings": "workspace:*",
     "@abp/tasks": "workspace:*",
     "@abp/ui": "workspace:*",
+    "@abp/webhooks": "workspace:*",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",

apps/vben5/apps/app-antd/src/locales/langs/en-US/abp.json

@@ -113,5 +113,9 @@
     "jobInfo": {
       "title": "Job Manage"
     }
+  },
+  "webhooks": {
+    "title": "Webhooks",
+    "groups": "Groups"
   }
 }

apps/vben5/apps/app-antd/src/locales/langs/zh-CN/abp.json

@@ -113,5 +113,9 @@
     "jobInfo": {
       "title": "作业管理"
     }
+  },
+  "webhooks": {
+    "title": "Webhook管理",
+    "groups": "Webhook分组"
   }
 }

apps/vben5/apps/app-antd/src/router/routes/modules/abp.ts

@@ -450,6 +450,25 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        meta: {
+          title: $t('abp.webhooks.title'),
+          icon: 'material-symbols:webhook',
+        },
+        name: 'WebhooksManagement',
+        path: '/webhooks',
+        children: [
+          {
+            meta: {
+              title: $t('abp.webhooks.groups'),
+              icon: 'lucide:group',
+            },
+            name: 'WebhookGroupDefinitions',
+            path: '/webhooks/groups',
+            component: () => import('#/views/webhooks/groups/index.vue'),
+          },
+        ],
+      },
       {
         name: 'AbpDemo',
         path: '/abp/demos',

apps/vben5/apps/app-antd/src/views/webhooks/groups/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { WebhookGroupDefinitionTable } from '@abp/webhooks';
+
+defineOptions({
+  name: 'WebhookGroupDefinitions',
+});
+</script>
+
+<template>
+  <Page>
+    <WebhookGroupDefinitionTable />
+  </Page>
+</template>

apps/vben5/packages/@abp/webhooks/src/api/useWebhookGroupDefinitionsApi.ts

@@ -0,0 +1,100 @@
+import type { ListResultDto } from '@abp/core';
+
+import type {
+  WebhookGroupDefinitionCreateDto,
+  WebhookGroupDefinitionDto,
+  WebhookGroupDefinitionGetListInput,
+  WebhookGroupDefinitionUpdateDto,
+} from '../types/groups';
+
+import { useRequest } from '@abp/request';
+
+export function useWebhookGroupDefinitionsApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 删除Webhook分组定义
+   * @param name Webhook分组名称
+   */
+  function deleteApi(name: string): Promise<void> {
+    return request(`/api/webhooks/definitions/groups/${name}`, {
+      method: 'DELETE',
+    });
+  }
+
+  /**
+   * 查询Webhook分组定义
+   * @param name Webhook分组名称
+   * @returns Webhook分组定义数据传输对象
+   */
+  function getApi(name: string): Promise<WebhookGroupDefinitionDto> {
+    return request<WebhookGroupDefinitionDto>(
+      `/api/webhooks/definitions/groups/${name}`,
+      {
+        method: 'GET',
+      },
+    );
+  }
+
+  /**
+   * 查询Webhook分组定义列表
+   * @param input Webhook分组过滤条件
+   * @returns Webhook分组定义数据传输对象列表
+   */
+  function getListApi(
+    input?: WebhookGroupDefinitionGetListInput,
+  ): Promise<ListResultDto<WebhookGroupDefinitionDto>> {
+    return request<ListResultDto<WebhookGroupDefinitionDto>>(
+      `/api/webhooks/definitions/groups`,
+      {
+        method: 'GET',
+        params: input,
+      },
+    );
+  }
+
+  /**
+   * 创建Webhook分组定义
+   * @param input Webhook分组定义参数
+   * @returns Webhook分组定义数据传输对象
+   */
+  function createApi(
+    input: WebhookGroupDefinitionCreateDto,
+  ): Promise<WebhookGroupDefinitionDto> {
+    return request<WebhookGroupDefinitionDto>(
+      '/api/webhooks/definitions/groups',
+      {
+        data: input,
+        method: 'POST',
+      },
+    );
+  }
+
+  /**
+   * 更新Webhook分组定义
+   * @param name Webhook分组名称
+   * @param input Webhook分组定义参数
+   * @returns Webhook分组定义数据传输对象
+   */
+  function updateApi(
+    name: string,
+    input: WebhookGroupDefinitionUpdateDto,
+  ): Promise<WebhookGroupDefinitionDto> {
+    return request<WebhookGroupDefinitionDto>(
+      `/api/webhooks/definitions/groups/${name}`,
+      {
+        data: input,
+        method: 'PUT',
+      },
+    );
+  }
+
+  return {
+    cancel,
+    createApi,
+    deleteApi,
+    getApi,
+    getListApi,
+    updateApi,
+  };
+}

apps/vben5/packages/@abp/webhooks/src/components/definitions/groups/WebhookGroupDefinitionTable.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { WebhookGroupDefinitionDto } from '../../../types/groups';
+
+import { h, onMounted, reactive, ref } from 'vue';
+
+import { createIconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { useLocalization, useLocalizationSerializer } from '@abp/core';
+import { useVbenVxeGrid } from '@abp/ui';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
+
+import { useWebhookGroupDefinitionsApi } from '../../../api/useWebhookGroupDefinitionsApi';
+import { GroupDefinitionsPermissions } from '../../../constants/permissions';
+
+defineOptions({
+  name: 'WebhookGroupDefinitionTable',
+});
+
+const MenuItem = Menu.Item;
+
+const WebhookIcon = createIconifyIcon('material-symbols:webhook');
+
+const permissionGroups = ref<WebhookGroupDefinitionDto[]>([]);
+const pageState = reactive({
+  current: 1,
+  size: 10,
+  total: 0,
+});
+
+const { Lr } = useLocalization();
+const { deserialize } = useLocalizationSerializer();
+const { deleteApi, getListApi } = useWebhookGroupDefinitionsApi();
+
+const formOptions: VbenFormProps = {
+  collapsed: false,
+  handleReset: onReset,
+  async handleSubmit(params) {
+    pageState.current = 1;
+    await onGet(params);
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'filter',
+      formItemClass: 'col-span-2 items-baseline',
+      label: $t('AbpUi.Search'),
+    },
+  ],
+  showCollapseButton: true,
+  submitOnEnter: true,
+};
+
+const gridOptions: VxeGridProps<WebhookGroupDefinitionDto> = {
+  columns: [
+    {
+      align: 'left',
+      field: 'name',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:Name'),
+    },
+    {
+      align: 'left',
+      field: 'displayName',
+      minWidth: 150,
+      title: $t('WebhooksManagement.DisplayName:DisplayName'),
+    },
+    {
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      title: $t('AbpUi.Actions'),
+      width: 220,
+    },
+  ],
+  exportConfig: {},
+  keepSource: true,
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: false,
+    zoom: true,
+  },
+};
+
+const gridEvents: VxeGridListeners<WebhookGroupDefinitionDto> = {
+  pageChange(params) {
+    pageState.current = params.currentPage;
+    pageState.size = params.pageSize;
+    onPageChange();
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridEvents,
+  gridOptions,
+});
+
+async function onGet(input?: Record<string, string>) {
+  try {
+    gridApi.setLoading(true);
+    const { items } = await getListApi(input);
+    pageState.total = items.length;
+    permissionGroups.value = items.map((item) => {
+      const localizableString = deserialize(item.displayName);
+      return {
+        ...item,
+        displayName: Lr(localizableString.resourceName, localizableString.name),
+      };
+    });
+    onPageChange();
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+async function onReset() {
+  await gridApi.formApi.resetForm();
+  const input = await gridApi.formApi.getValues();
+  await onGet(input);
+}
+
+function onPageChange() {
+  const items = permissionGroups.value.slice(
+    (pageState.current - 1) * pageState.size,
+    pageState.current * pageState.size,
+  );
+  gridApi.setGridOptions({
+    data: items,
+    pagerConfig: {
+      currentPage: pageState.current,
+      pageSize: pageState.size,
+      total: pageState.total,
+    },
+  });
+}
+
+function onCreate() {}
+
+function onUpdate(_row: WebhookGroupDefinitionDto) {}
+
+function onMenuClick(_row: WebhookGroupDefinitionDto, info: MenuInfo) {
+  switch (info.key) {
+    case 'permissions': {
+      break;
+    }
+  }
+}
+
+function onDelete(row: WebhookGroupDefinitionDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.name])}`,
+    onOk: async () => {
+      await deleteApi(row.name);
+      message.success($t('AbpUi.DeletedSuccessfully'));
+      onGet();
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+
+onMounted(onGet);
+</script>
+
+<template>
+  <Grid :table-title="$t('WebhooksManagement.GroupDefinitions')">
+    <template #toolbar-tools>
+      <Button
+        :icon="h(PlusOutlined)"
+        type="primary"
+        v-access:code="[GroupDefinitionsPermissions.Create]"
+        @click="onCreate"
+      >
+        {{ $t('WebhooksManagement.GroupDefinitions:AddNew') }}
+      </Button>
+    </template>
+    <template #action="{ row }">
+      <div class="flex flex-row">
+        <div :class="`${row.isStatic ? 'w-full' : 'basis-1/3'}`">
+          <Button
+            :icon="h(EditOutlined)"
+            block
+            type="link"
+            v-access:code="[GroupDefinitionsPermissions.Update]"
+            @click="onUpdate(row)"
+          >
+            {{ $t('AbpUi.Edit') }}
+          </Button>
+        </div>
+        <template v-if="!row.isStatic">
+          <div class="basis-1/3">
+            <Button
+              :icon="h(DeleteOutlined)"
+              block
+              danger
+              type="link"
+              v-access:code="[GroupDefinitionsPermissions.Delete]"
+              @click="onDelete(row)"
+            >
+              {{ $t('AbpUi.Delete') }}
+            </Button>
+          </div>
+          <div class="basis-1/3">
+            <Dropdown>
+              <template #overlay>
+                <Menu @click="(info) => onMenuClick(row, info)">
+                  <MenuItem key="webhooks" :icon="h(WebhookIcon)">
+                    {{ $t('WebhooksManagement.Webhooks:AddNew') }}
+                  </MenuItem>
+                </Menu>
+              </template>
+              <Button :icon="h(EllipsisOutlined)" type="link" />
+            </Dropdown>
+          </div>
+        </template>
+      </div>
+    </template>
+  </Grid>
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/webhooks/src/components/index.ts

@@ -0,0 +1 @@
+export { default as WebhookGroupDefinitionTable } from './definitions/groups/WebhookGroupDefinitionTable.vue';

apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts

@@ -0,0 +1,10 @@
+/** 分组权限 */
+export const GroupDefinitionsPermissions = {
+  /** 新增 */
+  Create: 'AbpWebhooks.GroupDefinitions.Create',
+  Default: 'AbpWebhooks.GroupDefinitions',
+  /** 删除 */
+  Delete: 'AbpWebhooks.GroupDefinitions.Delete',
+  /** 更新 */
+  Update: 'AbpWebhooks.GroupDefinitions.Update',
+};

apps/vben5/packages/@abp/webhooks/src/types/groups.ts

@@ -0,0 +1,31 @@
+import type { IHasConcurrencyStamp, IHasExtraProperties } from '@abp/core';
+
+interface WebhookGroupDefinitionDto extends IHasExtraProperties {
+  displayName: string;
+  isStatic: boolean;
+  name: string;
+}
+
+interface WebhookGroupDefinitionCreateOrUpdateDto extends IHasExtraProperties {
+  displayName: string;
+}
+
+interface WebhookGroupDefinitionCreateDto
+  extends WebhookGroupDefinitionCreateOrUpdateDto {
+  name: string;
+}
+
+interface WebhookGroupDefinitionUpdateDto
+  extends IHasConcurrencyStamp,
+    WebhookGroupDefinitionCreateOrUpdateDto {}
+
+interface WebhookGroupDefinitionGetListInput {
+  filter?: string;
+}
+
+export type {
+  WebhookGroupDefinitionCreateDto,
+  WebhookGroupDefinitionDto,
+  WebhookGroupDefinitionGetListInput,
+  WebhookGroupDefinitionUpdateDto,
+};

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

@@ -0,0 +1 @@
+export * from './groups';