oak-frontend-base/src/components/relation/path/list/web.pc.tsx

100 lines
3.2 KiB
TypeScript

import React, { useState } from 'react';
import {
Button,
Input,
Radio,
Modal,
Space,
Flex,
Typography,
Divider
} from 'antd';
import { WebComponentProps, RowWithActions } from '../../../../types/Page';
import { EntityDict } from 'oak-domain/lib/base-app-domain';
import PathUpsert from '../upsert';
import PathDetail from '../detail';
const { Title } = Typography;
export default function render(
props: WebComponentProps<
EntityDict,
'path',
true,
{
paths: RowWithActions<EntityDict, 'path'>[];
allowCreate: boolean;
actions: string[];
// relations: string[];
entity: string;
},
{
onConfirmed: () => Promise<void>;
}
>
) {
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;
}