oak-frontend-base/es/components/relation/path/list/web.pc.js

47 lines
1.9 KiB
JavaScript

import React, { useState } from 'react';
import { Button, Modal, Flex, Typography, Divider } from 'antd';
import PathUpsert from '../upsert';
import PathDetail from '../detail';
const { Title } = Typography;
export default function render(props) {
const { paths, oakPagination, oakFullpath, allowCreate, actions, entity } = props.data;
const { t, execute, addItem, clean, onConfirmed } = props.methods;
if (oakFullpath) {
const [upsertId, setUpsertId] = useState('');
const isCreate = upsertId && paths.find(ele => ele.id === upsertId)?.$$createAt$$ === 1;
return (<>
<Flex vertical align="stretch">
<Flex justify="space-between" align="center">
<Title>{entity}</Title>
<Flex align="center">
<Button type="primary" onClick={() => {
const id = addItem({});
setUpsertId(id);
}}>
{t('common::action.add')}
</Button>
</Flex>
</Flex>
{paths?.map((ele) => {
return <div key={`path${ele?.id}`}>
<Divider />
<PathDetail oakPath={`${oakFullpath}.${ele?.id}`}
// relations={relations}
actions={actions}/>
</div>;
})}
</Flex>
<Modal destroyOnClose={true} open={!!upsertId} title={t('addPath')} onCancel={() => {
clean();
setUpsertId('');
}} closeIcon={null} footer={null}>
<PathUpsert oakPath={`${oakFullpath}.${upsertId}`} entity={entity} onConfirmed={async () => {
await onConfirmed();
setUpsertId('');
}}/>
</Modal>
</>);
}
return null;
}