add prompt js page
This commit is contained in:
@@ -1,11 +1,13 @@
|
||||
import { Button, Input, message, Modal, Table } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Fragment, useEffect, useMemo, useState } from 'react';
|
||||
import { TextArea } from '../components/TextArea';
|
||||
import { useContainerStore } from '../store';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
import { Form } from 'antd';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons';
|
||||
import clsx from 'clsx';
|
||||
const FormModal = () => {
|
||||
const [form] = Form.useForm();
|
||||
const containerStore = useContainerStore(
|
||||
@@ -22,8 +24,6 @@ const FormModal = () => {
|
||||
const open = containerStore.showEdit;
|
||||
if (open) {
|
||||
form.setFieldsValue(containerStore.formData || {});
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
}, [containerStore.showEdit]);
|
||||
const onFinish = async (values: any) => {
|
||||
@@ -59,7 +59,12 @@ const FormModal = () => {
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name='code' label='code'>
|
||||
<TextArea value={containerStore.formData.code} />
|
||||
<TextArea
|
||||
value={containerStore.formData.code}
|
||||
style={{
|
||||
height: '200px',
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label=' ' colon={false}>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
@@ -85,111 +90,122 @@ export const ContainerList = () => {
|
||||
getList: state.getList,
|
||||
loading: state.loading,
|
||||
publishData: state.publishData,
|
||||
updateData: state.updateData,
|
||||
formData: state.formData,
|
||||
};
|
||||
}),
|
||||
);
|
||||
const [codeEdit, setCodeEdit] = useState(false);
|
||||
const [code, setCode] = useState('');
|
||||
useEffect(() => {
|
||||
containerStore.getList();
|
||||
}, []);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
render: (text: string) => {
|
||||
return (
|
||||
<div
|
||||
className='w-40 truncate cursor-pointer'
|
||||
title={text}
|
||||
onClick={() => {
|
||||
copy(text);
|
||||
message.success('copy success');
|
||||
}}>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Title',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: 'Code',
|
||||
dataIndex: 'code',
|
||||
width: '40%',
|
||||
render: (text: string, record: any) => {
|
||||
return <TextArea value={text} readonly />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Source',
|
||||
dataIndex: 'source',
|
||||
},
|
||||
{
|
||||
title: 'Operation',
|
||||
dataIndex: 'operation',
|
||||
render: (text: string, record: any) => {
|
||||
return (
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
containerStore.setFormData(record);
|
||||
containerStore.setShowEdit(true);
|
||||
}}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
navicate('/container/preview/' + record.id);
|
||||
}}>
|
||||
Preview
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
containerStore.publishData(record);
|
||||
}}>
|
||||
Publish
|
||||
</Button>
|
||||
<Button
|
||||
danger
|
||||
onClick={() => {
|
||||
containerStore.deleteData(record.id);
|
||||
}}>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
const onAdd = () => {
|
||||
containerStore.setFormData({});
|
||||
containerStore.setShowEdit(true);
|
||||
};
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col'>
|
||||
<div className='mb-2 w-full p-2 bg-white rounded-lg'>
|
||||
<Button
|
||||
className='w-20 '
|
||||
type='primary'
|
||||
onClick={() => {
|
||||
containerStore.setFormData({});
|
||||
containerStore.setShowEdit(true);
|
||||
}}>
|
||||
Add
|
||||
</Button>
|
||||
<div className='flex flex-grow overflow-hidden h-full'>
|
||||
<div className='flex-grow overflow-auto scrollbar bg-gray-100'>
|
||||
<div className='flex flex-wrap gap-x-10 gap-y-4 rounded pt-10 justify-center'>
|
||||
{containerStore.list.length > 0 &&
|
||||
containerStore.list.map((item) => {
|
||||
return (
|
||||
<Fragment key={item.id}>
|
||||
<div
|
||||
className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setCode(item.code);
|
||||
containerStore.setFormData(item);
|
||||
setCodeEdit(true);
|
||||
}}>
|
||||
<div className='px-4 cursor-pointer'>
|
||||
<div
|
||||
className='font-bold'
|
||||
onClick={(e) => {
|
||||
copy(item.code);
|
||||
e.stopPropagation();
|
||||
message.success('copy code success');
|
||||
}}>
|
||||
{item.title || '-'}
|
||||
</div>
|
||||
<div className='font-light'>{item.description ? item.description : '-'}</div>
|
||||
</div>
|
||||
<div className='w-full text-xs'>
|
||||
<TextArea className='max-h-[240px] scrollbar' value={item.code} readonly />
|
||||
</div>
|
||||
<div className='flex mt-2 '>
|
||||
<Button.Group>
|
||||
<Button onClick={() => containerStore.publishData(item)} icon={<SettingOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
containerStore.setFormData(item);
|
||||
containerStore.setShowEdit(true);
|
||||
setCodeEdit(false);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<EditOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
// navicate('/container/preview/' + item.id);
|
||||
window.open('/container/preview/' + item.id);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<LinkOutlined />}></Button>
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
containerStore.deleteData(item.id);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
icon={<DeleteOutlined />}></Button>
|
||||
</Button.Group>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
{new Array(4).fill(0).map((_, index) => {
|
||||
return <div key={index} className='w-[400px]'></div>;
|
||||
})}
|
||||
{containerStore.list.length == 0 && (
|
||||
<div className='text-center' key={'no-data'}>
|
||||
No Data
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx('bg-gray-100 border-l border-bg-slate-300 w-[600px] flex-shrink-0', !codeEdit && 'hidden')}>
|
||||
<div className='bg-white p-2'>
|
||||
<div className='mt-2 ml-2 flex gap-2'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setCodeEdit(false);
|
||||
containerStore.setFormData({});
|
||||
}}
|
||||
icon={<LeftOutlined />}></Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
console.log('save', containerStore.formData);
|
||||
containerStore.updateData({ ...containerStore.formData, code });
|
||||
}}
|
||||
icon={<SaveOutlined />}></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[94%] p-2 rounded-2 shadow-sm'>
|
||||
<TextArea
|
||||
value={code}
|
||||
onChange={(value) => {
|
||||
setCode(value);
|
||||
}}
|
||||
className='h-full max-h-full scrollbar'
|
||||
style={{ overflow: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex-grow overflow-scroll'>
|
||||
<Table
|
||||
pagination={false}
|
||||
scroll={{
|
||||
y: 600,
|
||||
}}
|
||||
loading={containerStore.loading}
|
||||
dataSource={containerStore.list}
|
||||
rowKey='id'
|
||||
columns={columns}
|
||||
/>
|
||||
</div>
|
||||
<div className='h-2'></div>
|
||||
<FormModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user