titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add input validators

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:51:17 +03:00
parent 1016c3536e
commit 953af7e0d7
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/table.jsx
View File

@ -288,6 +288,7 @@ export default function Table(props) {
<div className="text-md font-semibold">Name: </div> <div className="text-md font-semibold">Name: </div>
<Input <Input
value={props.tableData.name} value={props.tableData.name}
validateStatus={props.tableData.name === "" ? "error" : "default"}
placeholder="Name" placeholder="Name"
className="mx-2 mb-1" className="mx-2 mb-1"
onChange={(value) => onChange={(value) =>
@ -345,7 +346,7 @@ export default function Table(props) {
<Col span={8}> <Col span={8}>
<Select <Select
className="w-full" className="w-full"
optionList={sqlDataTypes.map((value, index) => { optionList={sqlDataTypes.map((value) => {
return { return {
label: value, label: value,
value: value, value: value,
@ -353,6 +354,7 @@ export default function Table(props) {
})} })}
filter filter
value={f.type} value={f.type}
validateStatus={f.type === "" ? "error" : "default"}
placeholder="Type" placeholder="Type"
onChange={(value) => { onChange={(value) => {
if (value === f.type) return; if (value === f.type) return;
@ -486,6 +488,11 @@ export default function Table(props) {
<TagInput <TagInput
separator={[",", ", ", " ,"]} separator={[",", ", ", " ,"]}
value={f.values} value={f.values}
validateStatus={
!f.values || f.values.length === 0
? "error"
: "default"
}
className="my-2" className="my-2"
placeholder="Use ',' for batch input" placeholder="Use ',' for batch input"
onChange={(v) => onChange={(v) =>
@ -527,6 +534,9 @@ export default function Table(props) {
className="my-2 w-full" className="my-2 w-full"
placeholder="Set length" placeholder="Set length"
value={f.length} value={f.length}
validateStatus={
f.length === "" ? "error" : "default"
}
onChange={(value) => onChange={(value) =>
updateField(props.tableData.id, j, { updateField(props.tableData.id, j, {
length: value, length: value,
@ -754,6 +764,9 @@ export default function Table(props) {
<Select <Select
placeholder="Select fields" placeholder="Select fields"
multiple multiple
validateStatus={
idx.fields.length === 0 ? "error" : "default"
}
optionList={props.tableData.fields.map((e) => ({ optionList={props.tableData.fields.map((e) => ({
value: e.name, value: e.name,
label: e.name, label: e.name,

18
src/components/table_overview.jsx
View File

@ -134,10 +134,11 @@ export default function TableOverview(props) {
tables.map((t, i) => ( tables.map((t, i) => (
<div id={`scroll_table_${t.id}`} key={t.id}> <div id={`scroll_table_${t.id}`} key={t.id}>
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}> <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
<div className="flex items-center mb-2"> <div className="flex items-center mb-2.5">
<div className="text-md font-semibold">Name: </div> <div className="text-md font-semibold">Name: </div>
<Input <Input
value={t.name} value={t.name}
validateStatus={t.name === "" ? "error" : "default"}
placeholder="Name" placeholder="Name"
className="ms-2" className="ms-2"
onChange={(value) => updateTable(t.id, { name: value })} onChange={(value) => updateTable(t.id, { name: value })}
@ -165,6 +166,7 @@ export default function TableOverview(props) {
<Col span={7}> <Col span={7}>
<Input <Input
value={f.name} value={f.name}
validateStatus={f.name === "" ? "error" : "default"}
placeholder="Name" placeholder="Name"
onChange={(value) => updateField(i, j, { name: value })} onChange={(value) => updateField(i, j, { name: value })}
onFocus={(e) => setEditField({ name: e.target.value })} onFocus={(e) => setEditField({ name: e.target.value })}
@ -190,7 +192,7 @@ export default function TableOverview(props) {
<Col span={8}> <Col span={8}>
<Select <Select
className="w-full" className="w-full"
optionList={sqlDataTypes.map((value, index) => { optionList={sqlDataTypes.map((value) => {
return { return {
label: value, label: value,
value: value, value: value,
@ -198,6 +200,7 @@ export default function TableOverview(props) {
})} })}
filter filter
value={f.type} value={f.type}
validateStatus={f.type === "" ? "error" : "default"}
placeholder="Type" placeholder="Type"
onChange={(value) => { onChange={(value) => {
if (value === f.type) return; if (value === f.type) return;
@ -332,6 +335,11 @@ export default function TableOverview(props) {
<TagInput <TagInput
separator={[",", ", ", " ,"]} separator={[",", ", ", " ,"]}
value={f.values} value={f.values}
validateStatus={
!f.values || f.values.length === 0
? "error"
: "default"
}
className="my-2" className="my-2"
placeholder="Use ',' for batch input" placeholder="Use ',' for batch input"
onChange={(v) => onChange={(v) =>
@ -372,6 +380,9 @@ export default function TableOverview(props) {
<InputNumber <InputNumber
className="my-2 w-full" className="my-2 w-full"
placeholder="Set length" placeholder="Set length"
validateStatus={
f.length === "" ? "error" : "default"
}
value={f.length} value={f.length}
onChange={(value) => onChange={(value) =>
updateField(i, j, { length: value }) updateField(i, j, { length: value })
@ -611,6 +622,9 @@ export default function TableOverview(props) {
<Select <Select
placeholder="Select fields" placeholder="Select fields"
multiple multiple
validateStatus={
idx.fields.length === 0 ? "error" : "default"
}
optionList={t.fields.map((e) => ({ optionList={t.fields.map((e) => ({
value: e.name, value: e.name,
label: e.name, label: e.name,