diff --git a/admin-frontend/src/features/cookieManager/CookieEditModal.tsx b/admin-frontend/src/features/cookieManager/CookieEditModal.tsx index f3e659a..49f1e37 100644 --- a/admin-frontend/src/features/cookieManager/CookieEditModal.tsx +++ b/admin-frontend/src/features/cookieManager/CookieEditModal.tsx @@ -1,7 +1,10 @@ import React, { useState } from 'react'; -import { Form, Input, Modal } from '@arco-design/web-react'; -import { useNewCookieMutation } from './cookieConfigSlice'; -import { Cookie } from '../../utils/type'; +import { + Button, Empty, Form, Input, Modal, Space, Table, +} from '@arco-design/web-react'; +import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from './cookieConfigSlice'; +import { Cookie, CookieTarget } from '../../utils/type'; +import CookieTargetModal from '../cookieTargetManager/CookieTargetModal'; interface CookieEditModalProps { visible: boolean; @@ -10,51 +13,109 @@ interface CookieEditModalProps { } function CookieEditModal({ visible, setVisible, cookie }: CookieEditModalProps) { + if (!cookie) { + return ; + } const FormItem = Form.Item; - const [confirmLoading, setConfirmLoading] = useState(false); + // const [confirmLoading, setConfirmLoading] = useState(false); + const [deleteCookieTarget] = useDeleteCookieTargetMutation(); + // 获取 Cookie Target + const { data: cookieTargets } = useGetCookieTargetsQuery({ cookieId: cookie.id }); + + // 添加 Cookie Target + const [showAddCookieTargetModal, setShowAddCookieTargetModal] = useState(false); + const handleAddCookieTarget = () => () => { + setShowAddCookieTargetModal(true); + }; + + // 删除 Cookie Target + const handleDelete = (record: CookieTarget) => () => { + deleteCookieTarget({ + cookieId: record.cookieId, + target: record.target.target, + platformName: record.target.platform_name, + }); + }; + const columns = [ + { + title: '平台名称', + dataIndex: 'target.platform_name', + }, + { + title: '订阅名称', + dataIndex: 'target.target_name', + + }, + { + title: 'Cookie ID', + dataIndex: 'cookie_id', + }, + { + title: '操作', + dataIndex: 'op', + render: (_: null, record: CookieTarget) => ( + + + + ), + }, + ]; return ( - setVisible(false)} - confirmLoading={confirmLoading} + <> + setVisible(false)} + // confirmLoading={confirmLoading} // onOk={onSubmit} - style={{ maxWidth: '90vw', minWidth: '50vw' }} - > - {cookie - && ( -
- - - - - - - - - + style={{ maxWidth: '90vw', minWidth: '50vw' }} + > + + + + + + + + + + - - - + + + - - - - - - - - - + + + + + + + + + -
- )} -
+ + + + `${record.target.platform_name}-${record.target.target}`} + scroll={{ x: true }} + /> + + + + ); } diff --git a/admin-frontend/src/features/cookieManager/CookieManager.tsx b/admin-frontend/src/features/cookieManager/CookieManager.tsx index 19fa397..5990881 100644 --- a/admin-frontend/src/features/cookieManager/CookieManager.tsx +++ b/admin-frontend/src/features/cookieManager/CookieManager.tsx @@ -4,20 +4,14 @@ import { Table, TableColumnProps, Typography, Space, Popconfirm, } from '@arco-design/web-react'; import { useParams } from 'react-router-dom'; -import { IconDelete, IconEdit } from '@arco-design/web-react/icon'; -import { useAppSelector } from '../../app/hooks'; import { useGetCookiesQuery, useDeleteCookieMutation } from './cookieConfigSlice'; import './CookieManager.css'; -import { selectPlatformConf, selectSiteConf } from '../globalConf/globalConfSlice'; -import { Cookie, PlatformConfig } from '../../utils/type'; -import CookieTargetModal from '../cookieTargetManager/CookieTargetModal'; +import { Cookie } from '../../utils/type'; import CookieAddModal from './CookieAddModal'; import CookieEditModal from './CookieEditModal'; export default function CookieManager() { const { siteName } = useParams(); - const siteConf = useAppSelector(selectSiteConf); - const platformConf = useAppSelector(selectPlatformConf); const { data: cookieDict } = useGetCookiesQuery(); const cookiesList = cookieDict ? Object.values(cookieDict) : []; @@ -59,10 +53,7 @@ export default function CookieManager() { if (siteName) { data = cookiesList.filter((tSite) => tSite.site_name === siteName); } - const platformThatSiteSupport: Record = Object.values(platformConf).reduce((p, c) => { - p[c.siteName] = c.platformName; - return p; - }, {} as Record); + const columns: TableColumnProps[] = [ { title: 'ID', diff --git a/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts b/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts index c4a8e85..683d7cc 100644 --- a/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts +++ b/admin-frontend/src/features/cookieManager/cookieConfigSlice.ts @@ -41,7 +41,7 @@ export const cookieTargetApi = createApi({ tagTypes: ['CookieTarget'], endpoints: (builder) => ({ getCookieTargets: builder.query({ - query: (cookieId) => `/cookie_target?cookie_id=${cookieId}`, + query: ({ cookieId }) => `/cookie_target?cookie_id=${cookieId}`, providesTags: ['CookieTarget'], }), newCookieTarget: builder.mutation({ diff --git a/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx b/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx index 64b804f..611c321 100644 --- a/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx +++ b/admin-frontend/src/features/cookieTargetManager/CookieTargetModal.tsx @@ -1,18 +1,40 @@ import React from 'react'; -import { Modal, Select } from '@arco-design/web-react'; -import { SubscribeConfig, SubscribeGroupDetail } from '../../utils/type'; +import { + Empty, Form, Modal, Select, +} from '@arco-design/web-react'; +import { Cookie, SubscribeConfig, SubscribeGroupDetail } from '../../utils/type'; import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice'; import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice'; +import { useAppSelector } from '../../app/hooks'; +import { selectPlatformConf } from '../globalConf/globalConfSlice'; interface SubscribeModalProp { - cookieId: number; + cookie:Cookie| null visible: boolean; setVisible: (arg0: boolean) => void; } -export default function CookieTargetModal({ cookieId, visible, setVisible }: SubscribeModalProp) { +export default function CookieTargetModal({ + cookie, visible, setVisible, +}: SubscribeModalProp) { + if (!cookie) { + return ; + } const [newCookieTarget] = useNewCookieTargetMutation(); + const FormItem = Form.Item; + + // 筛选出当前Cookie支持的平台 + const platformConf = useAppSelector(selectPlatformConf); + const platformThatSiteSupport = Object.values(platformConf).reduce((p, c) => { + if (c.siteName in p) { + p[c.siteName].push(c.platformName); + } else { + p[c.siteName] = [c.platformName]; + } + return p; + }, {} as Record); + const supportedPlatform = platformThatSiteSupport[cookie.site_name]; const { data: subs } = useGetSubsQuery(); const pureSubs:SubscribeConfig[] = subs ? Object.values(subs) @@ -20,18 +42,21 @@ export default function CookieTargetModal({ cookieId, visible, setVisible }: Sub pv:Array, cv:SubscribeGroupDetail, ) => pv.concat(cv.subscribes), []) : []; + const filteredSubs = pureSubs.filter((sub) => supportedPlatform.includes(sub.platformName)); const [index, setIndex] = React.useState(-1); + const handleSubmit = (idx:number) => { const postPromise: ReturnType = newCookieTarget({ - cookieId, - platformName: pureSubs[idx].platformName, - target: pureSubs[idx].target, + cookieId: cookie.id, + platformName: filteredSubs[idx].platformName, + target: filteredSubs[idx].target, }); postPromise.then(() => { setVisible(false); }); }; const { Option } = Select; + return ( setVisible(false)} onOk={() => handleSubmit(index)} > - + {supportedPlatform.length + && supportedPlatform.map((sub, idx) => ( ))} - + + + + + + + ); }