Skip to content

Commit 9d74dd2

Browse files
Liam-ZhaoLiam-Zhao
authored
fix: multiple input box (#314)
1 parent 09eaa8c commit 9d74dd2

File tree

5 files changed

+103
-24
lines changed

5 files changed

+103
-24
lines changed

‎src/components/clusters/edit.tsx‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ export default function EditCluster() {
6363
is_default: false,
6464
});
6565
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
66+
const [idcHelperText, setIDCHelperText] = useState('Fill in the characters, the length is 0-100.');
67+
const [cidrsHelperText, setCIDRsHelperText] = useState('Fill in the characters, the length is 0-1000.');
68+
6669
const navigate = useNavigate();
6770
const params = useParams();
6871

@@ -170,6 +173,7 @@ export default function EditCluster() {
170173
},
171174

172175
onInputChange: (e: any) => {
176+
setIDCHelperText('Fill in the characters, the length is 0-100.');
173177
changeValidate(e.target.value, scopesForm[1]);
174178
},
175179

@@ -184,7 +188,7 @@ export default function EditCluster() {
184188
name: 'idc',
185189
placeholder: 'Please enter IDC',
186190
error: idcError,
187-
helperText: idcError ? 'Fill in the characters, the length is 0-100.' : '',
191+
helperText: idcError ? idcHelperText : '',
188192

189193
onKeyDown: (e: any) => {
190194
if (e.keyCode === 13) {
@@ -214,6 +218,7 @@ export default function EditCluster() {
214218
},
215219

216220
onInputChange: (e: any) => {
221+
setIDCHelperText('Fill in the characters, the length is 0-1000.');
217222
changeValidate(e.target.value, scopesForm[2]);
218223
},
219224

@@ -228,7 +233,7 @@ export default function EditCluster() {
228233
name: 'cidrs',
229234
placeholder: 'Please enter CIDRs',
230235
error: cidrsError,
231-
helperText: cidrsError ? 'Fill in the characters, the length is 0-1000.' : '',
236+
helperText: cidrsError ? cidrsHelperText : '',
232237

233238
onKeyDown: (e: any) => {
234239
if (e.keyCode === 13) {
@@ -467,6 +472,24 @@ export default function EditCluster() {
467472
setLoadingButton(true);
468473
event.preventDefault();
469474
const data = new FormData(event.currentTarget);
475+
const idcText = event.currentTarget.elements.idc.value;
476+
const cidrsText = event.currentTarget.elements.cidrs.value;
477+
478+
if (idcText) {
479+
setIDCHelperText('Please press ENTER to end the IDC creation');
480+
setIDCError(true);
481+
} else {
482+
setIDCError(false);
483+
setIDCHelperText('Fill in the characters, the length is 0-100.');
484+
}
485+
486+
if (cidrsText) {
487+
setCIDRsHelperText('Please press ENTER to end the CIDRs creation');
488+
setCIDRsError(true);
489+
} else {
490+
setCIDRsError(false);
491+
setCIDRsHelperText('Fill in the characters, the length is 0-100.');
492+
}
470493

471494
informationForm.forEach((item) => {
472495
const value = data.get(item.formProps.name);
@@ -481,15 +504,19 @@ export default function EditCluster() {
481504
});
482505

483506
scopesForm.forEach((item) => {
484-
const value = data.get(item.formProps.name);
485-
item.setError(!item.validate(value as string));
486-
item.syncError = !item.validate(value as string);
507+
if (item.formProps.name === 'location') {
508+
const value = data.get(item.formProps.name);
509+
item.setError(!item.validate(value as string));
510+
item.syncError = !item.validate(value as string);
511+
}
487512
});
488513

489514
const canSubmit = Boolean(
490515
!informationForm.filter((item) => item.syncError).length &&
491516
!scopesForm.filter((item) => item.syncError).length &&
492-
!configForm.filter((item) => item.syncError).length,
517+
!configForm.filter((item) => item.syncError).length &&
518+
Boolean(!idcText) &&
519+
Boolean(!cidrsText),
493520
);
494521

495522
const formdata = {

‎src/components/clusters/new.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ import {
1414
} from '@mui/material';
1515
import styles from './new.module.css';
1616
import { useState } from 'react';
17-
import { createCluster } from '../../lib/api';
1817
import HelpIcon from '@mui/icons-material/Help';
1918
import { LoadingButton } from '@mui/lab';
2019
import CancelIcon from '@mui/icons-material/Cancel';
2120
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
2221
import { useNavigate } from 'react-router-dom';
22+
import { createCluster } from '../../lib/api';
2323

2424
export default function NewCluster() {
2525
const [successMessage, setSuccessMessage] = useState(false);
@@ -39,6 +39,8 @@ export default function NewCluster() {
3939
const [idc, setIDC] = useState([]);
4040
const [loadingButton, setLoadingButton] = useState(false);
4141
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
42+
const [idcHelperText, setIDCHelperText] = useState('Fill in the characters, the length is 0-100.');
43+
const [cidrsHelperText, setCIDRsHelperText] = useState('Fill in the characters, the length is 0-1000.');
4244
const navigate = useNavigate();
4345

4446
const informationForm = [
@@ -136,6 +138,7 @@ export default function NewCluster() {
136138
},
137139

138140
onInputChange: (e: any) => {
141+
setIDCHelperText('Fill in the characters, the length is 0-100.');
139142
changeValidate(e.target.value, scopesForm[1]);
140143
},
141144

@@ -151,7 +154,7 @@ export default function NewCluster() {
151154
name: 'idc',
152155
placeholder: 'Please enter IDC',
153156
error: idcError,
154-
helperText: idcError ? 'Fill in the characters, the length is 0-100.' : '',
157+
helperText: idcError ? idcHelperText : '',
155158

156159
onKeyDown: (e: any) => {
157160
if (e.keyCode === 13) {
@@ -182,6 +185,7 @@ export default function NewCluster() {
182185
},
183186

184187
onInputChange: (e: any) => {
188+
setIDCHelperText('Fill in the characters, the length is 0-1000.');
185189
changeValidate(e.target.value, scopesForm[2]);
186190
},
187191

@@ -197,7 +201,7 @@ export default function NewCluster() {
197201
name: 'cidrs',
198202
placeholder: 'Please enter CIDRs',
199203
error: cidrsError,
200-
helperText: cidrsError ? 'Fill in the characters, the length is 0-1000.' : '',
204+
helperText: cidrsError ? cidrsHelperText : '',
201205

202206
onKeyDown: (e: any) => {
203207
if (e.keyCode === 13) {
@@ -412,6 +416,24 @@ export default function NewCluster() {
412416
const numberOfConcurrentDownloadPieces = event.currentTarget.elements.numberOfConcurrentDownloadPieces.value;
413417
const candidateParentLimit = event.currentTarget.elements.candidateParentLimit.value;
414418
const filterParentLimit = event.currentTarget.elements.filterParentLimit.value;
419+
const idcText = event.currentTarget.elements.idc.value;
420+
const cidrsText = event.currentTarget.elements.cidrs.value;
421+
422+
if (idcText) {
423+
setIDCHelperText('Please press ENTER to end the IDC creation');
424+
setIDCError(true);
425+
} else {
426+
setIDCError(false);
427+
setIDCHelperText('Fill in the characters, the length is 0-100.');
428+
}
429+
430+
if (cidrsText) {
431+
setCIDRsHelperText('Please press ENTER to end the CIDRs creation');
432+
setCIDRsError(true);
433+
} else {
434+
setCIDRsError(false);
435+
setCIDRsHelperText('Fill in the characters, the length is 0-100.');
436+
}
415437

416438
informationForm.forEach((item) => {
417439
const value = data.get(item.formProps.name);
@@ -438,7 +460,9 @@ export default function NewCluster() {
438460
const canSubmit = Boolean(
439461
!informationForm.filter((item) => item.syncError).length &&
440462
!scopesForm.filter((item) => item.syncError).length &&
441-
!configForm.filter((item) => item.syncError).length,
463+
!configForm.filter((item) => item.syncError).length &&
464+
Boolean(!idcText) &&
465+
Boolean(!cidrsText),
442466
);
443467

444468
const formData = {

‎src/components/developer/tokens/new.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@ import {
1717
FormGroup,
1818
InputLabel,
1919
} from '@mui/material';
20-
import { useEffect, useState } from 'react';
20+
import { useContext, useEffect, useState } from 'react';
2121
import { formatDate, getExpiredTime } from '../../../lib/utils';
2222
import { LoadingButton } from '@mui/lab';
2323
import { useNavigate } from 'react-router-dom';
2424
import { createTokens } from '../../../lib/api';
2525
import HelpIcon from '@mui/icons-material/Help';
2626
import CancelIcon from '@mui/icons-material/Cancel';
2727
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
28+
import { MyContext } from '../../menu';
2829

2930
const theme = createTheme({
3031
palette: {
@@ -48,6 +49,8 @@ export default function CreateTokens() {
4849
const [cluster, setCluster] = useState(false);
4950
const [loadingButton, setLoadingButton] = useState(false);
5051

52+
const { user } = useContext(MyContext);
53+
5154
const formList = [
5255
{
5356
formProps: {
@@ -156,6 +159,7 @@ export default function CreateTokens() {
156159
bio: bio.value,
157160
scopes: filteredScopes,
158161
expired_at: expiredTime,
162+
user_id: user.id,
159163
};
160164

161165
const canSubmit = Boolean(!formList.filter((item) => item.syncError).length);

‎src/components/job/preheats/new.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export default function NewPreheat() {
5050
const [filter, setFilter] = useState([]);
5151
const [clusterName, setClusterName] = useState<string[]>([]);
5252
const [clusterID, setClusterID] = useState<number[]>([]);
53+
const [filterHelperText, setFilterHelperText] = useState('Fill in the characters, the length is 0-100.');
5354

5455
const navigate = useNavigate();
5556

@@ -183,6 +184,7 @@ export default function NewPreheat() {
183184
}
184185
},
185186
onInputChange: (e: any) => {
187+
setFilterHelperText('Fill in the characters, the length is 0-100.');
186188
changeValidate(e.target.value, argsForm[2]);
187189
},
188190

@@ -198,7 +200,7 @@ export default function NewPreheat() {
198200
name: 'filter',
199201
placeholder: 'Press the Enter key to confirm the entered value',
200202
error: filterError,
201-
helperText: filterError ? 'Fill in the characters, the length is 0-100.' : '',
203+
helperText: filterError ? filterHelperText : '',
202204

203205
onKeyDown: (e: any) => {
204206
if (e.keyCode === 13) {
@@ -245,23 +247,34 @@ export default function NewPreheat() {
245247
setLoadingButton(true);
246248

247249
event.preventDefault();
248-
const bio = event.currentTarget.elements.bio;
249-
const url = event.currentTarget.elements.url;
250-
const tag = event.currentTarget.elements.tag;
250+
const bio = event.currentTarget.elements.bio.value;
251+
const url = event.currentTarget.elements.url.value;
252+
const tag = event.currentTarget.elements.tag.value;
253+
const filterText = event.currentTarget.elements.filter.value;
251254
const filters = filter.join('&');
252255

253256
const data = new FormData(event.currentTarget);
254257

258+
if (filterText) {
259+
setFilterError(true);
260+
setFilterHelperText('Please press ENTER to end the filter creation');
261+
} else {
262+
setFilterError(false);
263+
setFilterHelperText('Fill in the characters, the length is 0-100.');
264+
}
265+
255266
informationForm.forEach((item) => {
256267
const value = data.get(item.formProps.name);
257268
item.setError(!item.validate(value as string));
258269
item.syncError = !item.validate(value as string);
259270
});
260271

261272
argsForm.forEach((item) => {
262-
const value = data.get(item.formProps.name);
263-
item.setError(!item.validate(value as string));
264-
item.syncError = !item.validate(value as string);
273+
if (item.formProps.name !== 'filter') {
274+
const value = data.get(item.formProps.name);
275+
item.setError(!item.validate(value as string));
276+
item.syncError = !item.validate(value as string);
277+
}
265278
});
266279

267280
const headerValidate = headers.every((item) => {
@@ -289,16 +302,17 @@ export default function NewPreheat() {
289302
!informationForm.filter((item) => item.syncError).length &&
290303
!argsForm.filter((item) => item.syncError).length &&
291304
clusterIDValidate &&
292-
headerValidate,
305+
headerValidate &&
306+
Boolean(!filterText),
293307
);
294308

295309
const formDate = {
296-
bio: bio.value,
310+
bio: bio,
297311
type: 'preheat',
298312
args: {
299313
type: 'file',
300-
url: url.value,
301-
tag: tag.value,
314+
url: url,
315+
tag: tag,
302316
filter: filters,
303317
headers: headerList,
304318
},

‎src/components/menu/index.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,17 @@ import { getUserRoles, getUser, signOut } from '../../lib/api';
2525
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
2626
import { getJwtPayload, setPageTitle } from '../../lib/utils';
2727
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom';
28+
2829
import { ROLE_ROOT, ROLE_GUEST } from '../../lib/constants';
30+
interface MyContextType {
31+
user: { name: string; id: number };
32+
role: string;
33+
}
34+
35+
export const MyContext = createContext<MyContextType>({
36+
user: { name: '', id: 0 },
37+
role: '',
38+
});
2939

3040
const Main = styled('div')(({ theme }) => ({
3141
flexGrow: 1,
@@ -197,7 +207,7 @@ export default function Layout(props: any) {
197207
};
198208

199209
return (
200-
<Box>
210+
<MyContext.Provider value={{ user, role }}>
201211
<Backdrop
202212
open={pageLoding}
203213
sx={{
@@ -679,6 +689,6 @@ export default function Layout(props: any) {
679689
</Main>
680690
</Box>
681691
)}
682-
</Box>
692+
</MyContext.Provider>
683693
);
684694
}

0 commit comments

Comments
 (0)