From 8174ec895d53bd8435f9f33f7a25b6c4002ee1af Mon Sep 17 00:00:00 2001
From: suyiiyii <suyiiyii@gmail.com>
Date: Fri, 11 Oct 2024 13:41:00 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20(admin)=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8Bcookie=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/cookieManager/CookieAddModal.tsx |  4 +-
 .../cookieManager/CookieEditModal.tsx         | 55 +++++++++++--------
 .../features/cookieManager/CookieManager.tsx  | 18 ++++--
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/admin-frontend/src/features/cookieManager/CookieAddModal.tsx b/admin-frontend/src/features/cookieManager/CookieAddModal.tsx
index 0d6f9b9..1460d31 100644
--- a/admin-frontend/src/features/cookieManager/CookieAddModal.tsx
+++ b/admin-frontend/src/features/cookieManager/CookieAddModal.tsx
@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
 import { useNewCookieMutation } from './cookieConfigSlice';
 
-interface CookieModalProps {
+interface CookieAddModalProps {
   visible: boolean;
   setVisible: (arg0: boolean) => void;
   siteName: string;
 }
 
-function CookieAddModal({ visible, setVisible, siteName }: CookieModalProps) {
+function CookieAddModal({ visible, setVisible, siteName }: CookieAddModalProps) {
   const FormItem = Form.Item;
   const [content, setContent] = useState<string>('');
   const [confirmLoading, setConfirmLoading] = useState(false);
diff --git a/admin-frontend/src/features/cookieManager/CookieEditModal.tsx b/admin-frontend/src/features/cookieManager/CookieEditModal.tsx
index 955569f..f3e659a 100644
--- a/admin-frontend/src/features/cookieManager/CookieEditModal.tsx
+++ b/admin-frontend/src/features/cookieManager/CookieEditModal.tsx
@@ -1,28 +1,17 @@
 import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
 import { useNewCookieMutation } from './cookieConfigSlice';
+import { Cookie } from '../../utils/type';
 
-interface CookieModalProps {
+interface CookieEditModalProps {
   visible: boolean;
   setVisible: (arg0: boolean) => void;
-  siteName: string;
+  cookie: Cookie | null
 }
 
-function CookieEditModal({ visible, setVisible, siteName }: CookieModalProps) {
+function CookieEditModal({ visible, setVisible, cookie }: CookieEditModalProps) {
   const FormItem = Form.Item;
-  const [content, setContent] = useState<string>('');
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [newCoookie] = useNewCookieMutation();
-
-  const onSubmit = () => {
-    const postPromise: ReturnType<typeof newCoookie> = newCoookie({ siteName, content });
-    setConfirmLoading(true);
-    postPromise.then(() => {
-      setConfirmLoading(false);
-      setVisible(false);
-      setContent('');
-    });
-  };
 
   return (
     <Modal
@@ -30,23 +19,41 @@ function CookieEditModal({ visible, setVisible, siteName }: CookieModalProps) {
       visible={visible}
       onCancel={() => setVisible(false)}
       confirmLoading={confirmLoading}
-      onOk={onSubmit}
-      style={{ maxWidth: '90vw' }}
+      // onOk={onSubmit}
+      style={{ maxWidth: '90vw', minWidth: '50vw' }}
     >
-
+      {cookie
+      && (
       <Form autoComplete="off">
-        <FormItem label="Site Name" required>
-          <Input placeholder="Please enter site name" value={siteName} disabled />
+        <FormItem label="Cookie ID">
+          <Input disabled value={cookie.id.toString()} />
         </FormItem>
-        <FormItem label="Content" required>
+        <FormItem label="Cookie 名称">
+          <Input value={cookie.friendly_name} disabled />
+        </FormItem>
+        <FormItem label="所属站点">
+          <Input value={cookie.site_name} disabled />
+        </FormItem>
+
+        <FormItem label="标签">
           <Input.TextArea
-            placeholder="Please enter content"
-            value={content}
-            onChange={setContent}
+            value={JSON.stringify(cookie.tags)}
+            disabled
           />
         </FormItem>
 
+        <FormItem label="最后使用时间">
+          <Input value={cookie.last_usage.toString()} disabled />
+        </FormItem>
+        <FormItem label="状态">
+          <Input value={cookie.status} disabled />
+        </FormItem>
+        <FormItem label="冷却时间（毫秒）">
+          <Input value={cookie.cd_milliseconds.toString()} disabled />
+        </FormItem>
+
       </Form>
+      )}
     </Modal>
   );
 }
diff --git a/admin-frontend/src/features/cookieManager/CookieManager.tsx b/admin-frontend/src/features/cookieManager/CookieManager.tsx
index 8686b6e..19fa397 100644
--- a/admin-frontend/src/features/cookieManager/CookieManager.tsx
+++ b/admin-frontend/src/features/cookieManager/CookieManager.tsx
@@ -12,6 +12,7 @@ import { selectPlatformConf, selectSiteConf } from '../globalConf/globalConfSlic
 import { Cookie, PlatformConfig } from '../../utils/type';
 import CookieTargetModal from '../cookieTargetManager/CookieTargetModal';
 import CookieAddModal from './CookieAddModal';
+import CookieEditModal from './CookieEditModal';
 
 export default function CookieManager() {
   const { siteName } = useParams();
@@ -21,9 +22,9 @@ export default function CookieManager() {
   const cookiesList = cookieDict ? Object.values(cookieDict) : [];
 
   // 添加cookie
-  const [showModal, setShowModal] = React.useState(false);
+  const [showAddModal, setShowAddModal] = React.useState(false);
   const handleAddCookie = () => () => {
-    setShowModal(true);
+    setShowAddModal(true);
   };
 
   // 删除cookie
@@ -34,6 +35,14 @@ export default function CookieManager() {
     });
   };
 
+  // 编辑cookie
+  const [showEditModal, setShowEditModal] = React.useState(false);
+  const [editCookie, setEditCookie] = React.useState<Cookie | null>(null);
+  const handleEditCookie = (cookie: Cookie) => () => {
+    setEditCookie(cookie);
+    setShowEditModal(true);
+  };
+
   let data = [
     {
       id: 3,
@@ -50,7 +59,6 @@ export default function CookieManager() {
   if (siteName) {
     data = cookiesList.filter((tSite) => tSite.site_name === siteName);
   }
-  console.log(Object.values(platformConf));
   const platformThatSiteSupport: Record<string, string> = Object.values(platformConf).reduce((p, c) => {
     p[c.siteName] = c.platformName;
     return p;
@@ -93,6 +101,7 @@ export default function CookieManager() {
               <Button type="text" status="danger">删除</Button>
             </span>
           </Popconfirm>
+          <Button type="text" onClick={handleEditCookie(record)}>编辑</Button>
         </Space>
       ),
 
@@ -116,7 +125,8 @@ export default function CookieManager() {
       </div>
 
       <Table columns={columns} data={data} />
-      <CookieAddModal visible={showModal} setVisible={setShowModal} siteName={siteName || ''} />
+      <CookieAddModal visible={showAddModal} setVisible={setShowAddModal} siteName={siteName || ''} />
+      <CookieEditModal visible={showEditModal} setVisible={setShowEditModal} cookie={editCookie} />
     </>
   );
 }