feat: finish the modal of add knowledge space

This commit is contained in:
shiweisong.ssw 2023-06-25 18:22:59 +08:00
parent 5db89e623c
commit cfd237935d
3 changed files with 2605 additions and 0 deletions

View File

@ -0,0 +1,201 @@
'use client'
import type { ProFormInstance } from '@ant-design/pro-components';
import React, { useState, useRef } from 'react'
import {
ProCard,
ProForm,
ProFormCheckbox,
ProFormDatePicker,
ProFormDateRangePicker,
ProFormSelect,
ProFormText,
ProFormTextArea,
StepsForm
} from '@ant-design/pro-components'
import { Button, Modal, message } from 'antd'
const Index = () => {
const formRef = useRef<ProFormInstance>();
const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] =
useState<boolean>(false);
const [knowledgeSpaceName, setKnowledgeSpaceName] = useState<string>('');
const [webUrlName, setWebUrlName] = useState<string>('');
const [webPageUrl, setWebPageUrl] = useState<string>('');
return (
<>
<div className="header">
<div>Knowledge Spaces</div>
<Button onClick={() => setIsAddKnowledgeSpaceModalShow(true)} type='primary'>
+ New Knowledge Space
</Button>
</div>
<Modal
title="Add Knowledge Space"
footer={null}
width={900}
open={isAddKnowledgeSpaceModalShow}
onOk={() => console.log('ok')}
onCancel={() => setIsAddKnowledgeSpaceModalShow(false)}
>
<ProCard>
<StepsForm<{
name: string
}>
formRef={formRef}
onFinish={async () => {
message.success('success')
}}
formProps={{
validateMessages: {
required: 'This is required'
}
}}
submitter={{
render: (props) => {
if (props.step === 0) {
return (
<Button type="primary" onClick={async () => {
if (knowledgeSpaceName === '') {
props.onSubmit?.()
} else {
props.onSubmit?.();
const res = await fetch('/knowledge/space/add', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: knowledgeSpaceName,
vector_type: "Chroma",
owner: "keting",
desc: "test1"
}),
});
const data = await res.json();
if (data.success) {
props.onSubmit?.();
message.success('success');
} else {
message.error(data.err_msg || 'failed');
}
}
}}>
Next {'>'}
</Button>
);
} else if (props.step === 1) {
return (
<Button type="primary" onClick={() => props.onSubmit?.()}>
Web Page {'>'}
</Button>
);
}
return [
<Button key="gotoTwo" onClick={() => props.onPre?.()}>
Previous {'<'}
</Button>,
<Button
type="primary"
key="goToTree"
onClick={async () => {
props.onSubmit?.();
const res = await fetch(`/knowledge/${knowledgeSpaceName}/document/add`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
doc_name: webUrlName,
doc_type: webPageUrl
}),
});
const data = await res.json();
if (data.success) {
props.onSubmit?.();
message.success('success');
} else {
message.error(data.err_msg || 'failed');
}
}}
>
Finish
</Button>,
];
},
}}
>
<StepsForm.StepForm<{
name: string
}>
name="base"
title="Knowledge Space Configuration"
onFinish={async () => {
console.log(formRef.current?.getFieldsValue())
return true
}}
>
<ProFormText
name="name"
label="Knowledge Space Name"
width="lg"
placeholder="Please input the name"
rules={[{ required: true }]}
onChange={(e: any) => setKnowledgeSpaceName(e.target.value)}
/>
</StepsForm.StepForm>
<StepsForm.StepForm<{
checkbox: string
}>
name="checkbox"
title="Choose a Datasource type"
onFinish={async () => {
console.log(formRef.current?.getFieldsValue())
return true
}}
>
</StepsForm.StepForm>
<StepsForm.StepForm
name="time"
title="Setup the Datasource"
>
<ProFormText
name="webUrlName"
label="Name"
width="lg"
placeholder="Please input the name"
rules={[{ required: true }]}
onChange={(e: any) => setWebUrlName(e.target.value)}
/>
<ProFormText
name="webPageUrl"
label="Web Page URL"
width="lg"
placeholder="Please input the name"
rules={[{ required: true }]}
onChange={(e: any) => setWebPageUrl(e.target.value)}
/>
</StepsForm.StepForm>
</StepsForm>
</ProCard>
</Modal>
<style jsx>{`
.header {
display: flex;
justify-content: space-between;
}
.datasource-type-wrap {
height: 100px;
line-height: 100px;
border: 1px solid black;
border-radius: 20px;
margin-bottom: 20px;
cursor: pointer;
}
`}</style>
</>
)
}
export default Index

File diff suppressed because it is too large Load Diff

View File

@ -9,9 +9,11 @@
"lint": "next lint"
},
"dependencies": {
"@ant-design/pro-components": "^2.6.2",
"@types/node": "20.3.1",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"antd": "^5.6.2",
"autoprefixer": "10.4.14",
"eslint": "8.43.0",
"eslint-config-next": "13.4.7",