From 6e9ae340006c5ffcb2dcbb969266c43333b1dc6f Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Tue, 22 Apr 2025 08:47:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(vben5):=20=E5=A2=9E=E5=8A=A0=E5=8F=91?=
 =?UTF-8?q?=E9=80=81=E8=AE=B0=E5=BD=95drawer=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WebhookSendAttemptDrawer.vue              | 239 ++++++++++++++++++
 .../send-attempts/WebhookSendAttemptTable.vue |  27 +-
 .../@abp/webhooks/src/types/sendAttempts.ts   |   6 +-
 3 files changed, 263 insertions(+), 9 deletions(-)
 create mode 100644 apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptDrawer.vue

diff --git a/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptDrawer.vue b/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptDrawer.vue
new file mode 100644
index 000000000..36f0245a5
--- /dev/null
+++ b/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptDrawer.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { TenantDto } from '@abp/saas';
+
+import type { WebhookSendRecordDto, WebhookSubscriptionDto } from '../../types';
+
+import { ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { CodeEditor } from '@abp/components/codeeditor';
+import { Tinymce } from '@abp/components/tinymce';
+import { formatToDateTime, isNullOrWhiteSpace } from '@abp/core';
+import { useHttpStatusCodeMap } from '@abp/request';
+import { useTenantsApi } from '@abp/saas';
+import {
+  Checkbox,
+  DatePicker,
+  Form,
+  Input,
+  InputPassword,
+  Tabs,
+  Tag,
+  Textarea,
+} from 'ant-design-vue';
+
+import { useSendAttemptsApi, useSubscriptionsApi } from '../../api';
+import { WebhookSubscriptionPermissions } from '../../constants/permissions';
+
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKey = 'basic' | 'event' | 'subscriber';
+
+const activeTabKey = ref<TabKey>('basic');
+const formModel = ref<WebhookSendRecordDto>();
+const webhookSubscription = ref<WebhookSubscriptionDto>();
+const webhookTenant = ref<TenantDto>();
+
+const { hasAccessByCodes } = useAccess();
+const { getApi } = useSendAttemptsApi();
+const { getApi: getTenantApi } = useTenantsApi();
+const { getApi: getSubscriptionApi } = useSubscriptionsApi();
+const { getHttpStatusColor, httpStatusCodeMap } = useHttpStatusCodeMap();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  class: 'w-1/2',
+  async onOpenChange(isOpen) {
+    formModel.value = undefined;
+    webhookTenant.value = undefined;
+    webhookSubscription.value = undefined;
+    if (isOpen) {
+      await onInit();
+    }
+  },
+});
+
+async function onInit() {
+  const dto = drawerApi.getData<WebhookSendRecordDto>();
+  if (isNullOrWhiteSpace(dto.id)) {
+    return;
+  }
+  const [sendRecordDto, subscriptionDto, tenantDto] = await Promise.all([
+    getApi(dto.id),
+    onInitSubscription(dto.webhookSubscriptionId),
+    onInitTenant(dto.tenantId),
+  ]);
+  formModel.value = sendRecordDto;
+  webhookSubscription.value = subscriptionDto;
+  webhookTenant.value = tenantDto;
+}
+
+async function onInitSubscription(subscriptionId: string) {
+  if (!hasAccessByCodes([WebhookSubscriptionPermissions.Default])) {
+    return undefined;
+  }
+  return await getSubscriptionApi(subscriptionId);
+}
+
+async function onInitTenant(tenantId?: string) {
+  // TODO: 公开saas模块常量?
+  if (isNullOrWhiteSpace(tenantId) || !hasAccessByCodes(['AbpSaas.Tenants'])) {
+    return undefined;
+  }
+  return await getTenantApi(tenantId);
+}
+</script>
+
+<template>
+  <Drawer :title="$t('WebhooksManagement.SendAttempts')">
+    <Form :model="formModel" layout="vertical">
+      <Tabs v-if="formModel" v-model:active-key="activeTabKey">
+        <TabPane key="basic" :tab="$t('WebhooksManagement.BasicInfo')">
+          <FormItem
+            v-if="webhookTenant"
+            name="tenantId"
+            :label="$t('WebhooksManagement.DisplayName:TenantId')"
+          >
+            <Input :value="webhookTenant.name" disabled />
+          </FormItem>
+          <FormItem name="sendExactSameData">
+            <Checkbox :checked="formModel.sendExactSameData" disabled>
+              {{ $t('WebhooksManagement.DisplayName:SendExactSameData') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            name="creationTime"
+            :label="$t('WebhooksManagement.DisplayName:CreationTime')"
+          >
+            <DatePicker
+              class="w-full"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :value="formModel.creationTime"
+              disabled
+              show-time
+            />
+          </FormItem>
+          <FormItem
+            name="requestHeaders"
+            :label="$t('WebhooksManagement.DisplayName:RequestHeaders')"
+          >
+            <CodeEditor :value="formModel.requestHeaders" readonly />
+          </FormItem>
+          <FormItem
+            v-if="formModel.responseStatusCode"
+            name="responseStatusCode"
+            :label="$t('WebhooksManagement.DisplayName:ResponseStatusCode')"
+          >
+            <Tag :color="getHttpStatusColor(formModel.responseStatusCode)">
+              {{ httpStatusCodeMap[formModel.responseStatusCode] }}
+            </Tag>
+          </FormItem>
+          <FormItem
+            name="responseHeaders"
+            :label="$t('WebhooksManagement.DisplayName:ResponseHeaders')"
+          >
+            <CodeEditor :value="formModel.responseHeaders" readonly />
+          </FormItem>
+          <FormItem
+            name="response"
+            :label="$t('WebhooksManagement.DisplayName:Response')"
+          >
+            <Tinymce
+              :value="formModel.response"
+              :toolbar="[]"
+              :plugins="[]"
+              readonly
+            />
+          </FormItem>
+        </TabPane>
+        <TabPane key="event" :tab="$t('WebhooksManagement.WebhookEvent')">
+          <FormItem
+            name="webhookEventId"
+            :label="$t('WebhooksManagement.DisplayName:WebhookEventId')"
+          >
+            <Input :value="formModel.webhookEventId" disabled />
+          </FormItem>
+          <FormItem
+            :name="['webhookEvent', 'webhookName']"
+            :label="$t('WebhooksManagement.DisplayName:WebhookName')"
+          >
+            <Input :value="formModel.webhookEvent.webhookName" disabled />
+          </FormItem>
+          <FormItem
+            :name="['webhookEvent', 'creationTime']"
+            :label="$t('WebhooksManagement.DisplayName:CreationTime')"
+          >
+            <DatePicker
+              class="w-full"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :value="formModel.webhookEvent.creationTime"
+              disabled
+              show-time
+            />
+          </FormItem>
+          <FormItem
+            :name="['webhookEvent', 'data']"
+            :label="$t('WebhooksManagement.DisplayName:Data')"
+          >
+            <CodeEditor :value="formModel.webhookEvent.data" readonly />
+          </FormItem>
+        </TabPane>
+        <TabPane
+          v-if="webhookSubscription"
+          key="subscriber"
+          :tab="$t('WebhooksManagement.Subscriptions')"
+        >
+          <FormItem>
+            <Checkbox :checked="webhookSubscription.isActive" disabled>
+              {{ $t('WebhooksManagement.DisplayName:IsActive') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:WebhookSubscriptionId')"
+          >
+            <Input :value="webhookSubscription.id" disabled />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:WebhookUri')">
+            <Input :value="webhookSubscription.webhookUri" disabled />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Description')">
+            <Textarea
+              :auto-size="{ minRows: 3 }"
+              :value="webhookSubscription.description"
+              disabled
+            />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Secret')">
+            <InputPassword :value="webhookSubscription.secret" disabled />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:CreationTime')">
+            <DatePicker
+              class="w-full"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :value="formatToDateTime(webhookSubscription.creationTime)"
+              disabled
+              show-time
+            />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Webhooks')">
+            <template
+              v-for="webhook in webhookSubscription.webhooks"
+              :key="webhook"
+            >
+              <Tag color="blue">
+                {{ webhook }}
+              </Tag>
+            </template>
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Headers')">
+            <CodeEditor :value="webhookSubscription.headers" readonly />
+          </FormItem>
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Drawer>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue b/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue
index 6fb0c3986..277bdb5b4 100644
--- a/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue
+++ b/apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue
@@ -6,9 +6,10 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { WebhookSendRecordDto } from '../../types/sendAttempts';
 
-import { h, ref } from 'vue';
+import { defineAsyncComponent, h, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
+import { useVbenDrawer } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
@@ -106,11 +107,11 @@ const formOptions: VbenFormProps = {
         options: [
           {
             label: $t('WebhooksManagement.ResponseState:Successed'),
-            value: true,
+            value: 'true',
           },
           {
             label: $t('WebhooksManagement.ResponseState:Failed'),
-            value: false,
+            value: 'false',
           },
         ],
       },
@@ -225,12 +226,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-function onUpdate(_row: WebhookSendRecordDto) {}
+const [WebhookSendAttemptDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: defineAsyncComponent(
+    () => import('./WebhookSendAttemptDrawer.vue'),
+  ),
+});
+
+function onUpdate(row: WebhookSendRecordDto) {
+  drawerApi.setData(row);
+  drawerApi.open();
+}
 
 function onDelete(row: WebhookSendRecordDto) {
   Modal.confirm({
     centered: true,
-    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.title]),
+    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [
+      $t('WebhooksManagement.SelectedItems'),
+    ]),
     onCancel: () => {
       cancel();
     },
@@ -253,7 +265,9 @@ async function onMenuClick(row: WebhookSendRecordDto, info: MenuInfo) {
 async function onSend(row: WebhookSendRecordDto) {
   Modal.confirm({
     centered: true,
-    content: `${$t('WebhooksManagement.ItemWillBeResendMessageWithFormat', [$t('WebhooksManagement.SelectedItems')])}`,
+    content: $t('WebhooksManagement.ItemWillBeResendMessageWithFormat', [
+      $t('WebhooksManagement.SelectedItems'),
+    ]),
     onOk: async () => {
       try {
         gridApi.setLoading(true);
@@ -377,6 +391,7 @@ async function onDeleteMany(keys: string[]) {
       </div>
     </template>
   </Grid>
+  <WebhookSendAttemptDrawer />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts b/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts
index 582e0e3c2..6f68e36c3 100644
--- a/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts
+++ b/apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts
@@ -3,15 +3,15 @@ import type { EntityDto, PagedAndSortedResultRequestDto } from '@abp/core';
 import { HttpStatusCode } from '@abp/request';
 
 interface WebhookEventRecordDto extends EntityDto<string> {
-  creationTime: Date;
+  creationTime: string;
   data?: string;
   tenantId?: string;
   webhookName: string;
 }
 
 interface WebhookSendRecordDto extends EntityDto<string> {
-  creationTime: Date;
-  lastModificationTime?: Date;
+  creationTime: string;
+  lastModificationTime?: string;
   requestHeaders?: Record<string, string>;
   response?: string;
   responseHeaders?: Record<string, string>;