支持删除 CookieTarget

This commit is contained in:
suyiiyii 2024-09-22 17:59:01 +08:00
parent 6990f04a74
commit 0083f0311a
2 changed files with 35 additions and 39 deletions

View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { import {
Button, Empty, Space, Table, Typography, Button, Space, Table, Typography,
} from '@arco-design/web-react'; } from '@arco-design/web-react';
import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from '../cookieManager/cookieConfigSlice'; import { useDeleteCookieTargetMutation, useGetCookieTargetsQuery } from '../cookieManager/cookieConfigSlice';
import { CookieTarget } from '../../utils/type'; import { CookieTarget } from '../../utils/type';
@ -11,11 +11,12 @@ export default function () {
const { cookieId } = useParams(); const { cookieId } = useParams();
const { data: cookieTargets } = useGetCookieTargetsQuery(cookieId); const { data: cookieTargets } = useGetCookieTargetsQuery(cookieId);
console.log(cookieTargets);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [deleteCookieTarget] = useDeleteCookieTargetMutation(); const [deleteCookieTarget] = useDeleteCookieTargetMutation();
const handleAdd = () => { const handleAdd = () => {
console.log('before', showModal);
setShowModal(true); setShowModal(true);
console.log('after', showModal);
}; };
const handleDelete = (record: CookieTarget) => () => { const handleDelete = (record: CookieTarget) => () => {
deleteCookieTarget({ deleteCookieTarget({
@ -49,31 +50,25 @@ export default function () {
}, },
]; ];
if (cookieId) {
return ( return (
<> <>
<span> <span>
<Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title> <Typography.Title heading={3}>{`Cookie ${cookieId}`}</Typography.Title>
</span> </span>
<Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}></Button> <Button style={{ width: '90px', margin: '20px 10px' }} type="primary" onClick={handleAdd}></Button>
<Table <Table
columns={columns} columns={columns}
data={cookieTargets} data={cookieTargets}
rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`} rowKey={(record: CookieTarget) => `${record.target.platform_name}-${record.target.target}`}
scroll={{ x: true }} scroll={{ x: true }}
/> />
{ <CookieTargetModal
cookieTargets && cookieTargets.length > 0 key={cookieId}
&& ( visible={showModal}
<CookieTargetModal setVisible={setShowModal}
visible={showModal} cookieId={cookieId}
setVisible={setShowModal} />
cookieId={cookieId} </>
/> );
)
}
</>
);
}
return <Empty />;
} }

View File

@ -1,22 +1,25 @@
import React import React
from 'react'; from 'react';
import { Modal, Select } from '@arco-design/web-react'; import { Modal, Select } from '@arco-design/web-react';
import { SubscribeGroupDetail } from '../../utils/type'; import { SubscribeConfig, SubscribeGroupDetail } from '../../utils/type';
import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice'; import { useNewCookieTargetMutation } from '../cookieManager/cookieConfigSlice';
import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice'; import { useGetSubsQuery } from '../subsribeConfigManager/subscribeConfigSlice';
interface SubscribeModalProp { interface SubscribeModalProp {
cookieId: number;
visible: boolean; visible: boolean;
setVisible: (arg0: boolean) => void; setVisible: (arg0: boolean) => void;
cookieId: number;
} }
export default function ({ visible, setVisible, cookieId }: SubscribeModalProp) { export default function ({ cookieId, visible, setVisible }: SubscribeModalProp) {
const [newCookieTarget] = useNewCookieTargetMutation(); const [newCookieTarget] = useNewCookieTargetMutation();
const { data: subs } = useGetSubsQuery(); const { data: subs } = useGetSubsQuery();
const pureSubs = subs ? Object.values(subs) const pureSubs:SubscribeConfig[] = subs ? Object.values(subs)
.reduce((pv:Array, cv:SubscribeGroupDetail) => pv.concat(cv.subscribes), []) : []; .reduce((
pv:Array<SubscribeConfig>,
cv:SubscribeGroupDetail,
) => pv.concat(cv.subscribes), []) : [];
const [index, setIndex] = React.useState(-1); const [index, setIndex] = React.useState(-1);
const handleSubmit = (idx:number) => { const handleSubmit = (idx:number) => {
const postPromise: ReturnType<typeof newCookieTarget> = newCookieTarget({ const postPromise: ReturnType<typeof newCookieTarget> = newCookieTarget({
@ -40,18 +43,16 @@ export default function ({ visible, setVisible, cookieId }: SubscribeModalProp)
placeholder="选择要关联的 target" placeholder="选择要关联的 target"
style={{ width: '100%' }} style={{ width: '100%' }}
onChange={setIndex} onChange={setIndex}
> >
{ {pureSubs.length
pureSubs.map((sub, idx) => ( && pureSubs.map((sub, idx) => (
<Option <Option
key={JSON.stringify(sub)} key={JSON.stringify(sub)}
value={idx} value={idx}
> >
{JSON.stringify(sub)} {JSON.stringify(sub)}
</Option> </Option>
)) ))}
}
</Select> </Select>
</Modal> </Modal>