Skip to content

Commit

Permalink
fix: multiple input box (#314)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Liam-Zhao
Liam-Zhao authored Oct 31, 2023
1 parent 09eaa8c commit 9d74dd2
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 24 deletions.
39 changes: 33 additions & 6 deletions src/components/clusters/edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@ export default function EditCluster() {
is_default: false,
});
const cidrsOptions = ['10.0.0.0/8', '172.16.0.0/12', '192.168.0.0/16'];
const [idcHelperText, setIDCHelperText] = useState('Fill in the characters, the length is 0-100.');
const [cidrsHelperText, setCIDRsHelperText] = useState('Fill in the characters, the length is 0-1000.');

const navigate = useNavigate();
const params = useParams();

Expand Down Expand Up @@ -170,6 +173,7 @@ export default function EditCluster() {
},

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

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

onKeyDown: (e: any) => {
if (e.keyCode === 13) {
Expand Down Expand Up @@ -214,6 +218,7 @@ export default function EditCluster() {
},

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

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

onKeyDown: (e: any) => {
if (e.keyCode === 13) {
Expand Down Expand Up @@ -467,6 +472,24 @@ export default function EditCluster() {
setLoadingButton(true);
event.preventDefault();
const data = new FormData(event.currentTarget);
const idcText = event.currentTarget.elements.idc.value;
const cidrsText = event.currentTarget.elements.cidrs.value;

if (idcText) {
setIDCHelperText('Please press ENTER to end the IDC creation');
setIDCError(true);
} else {
setIDCError(false);
setIDCHelperText('Fill in the characters, the length is 0-100.');
}

if (cidrsText) {
setCIDRsHelperText('Please press ENTER to end the CIDRs creation');
setCIDRsError(true);
} else {
setCIDRsError(false);
setCIDRsHelperText('Fill in the characters, the length is 0-100.');
}

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

scopesForm.forEach((item) => {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
item.syncError = !item.validate(value as string);
if (item.formProps.name === 'location') {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
item.syncError = !item.validate(value as string);
}
});

const canSubmit = Boolean(
!informationForm.filter((item) => item.syncError).length &&
!scopesForm.filter((item) => item.syncError).length &&
!configForm.filter((item) => item.syncError).length,
!configForm.filter((item) => item.syncError).length &&
Boolean(!idcText) &&
Boolean(!cidrsText),
);

const formdata = {
Expand Down
32 changes: 28 additions & 4 deletions src/components/clusters/new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ import {
} from '@mui/material';
import styles from './new.module.css';
import { useState } from 'react';
import { createCluster } from '../../lib/api';
import HelpIcon from '@mui/icons-material/Help';
import { LoadingButton } from '@mui/lab';
import CancelIcon from '@mui/icons-material/Cancel';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { useNavigate } from 'react-router-dom';
import { createCluster } from '../../lib/api';

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

const informationForm = [
Expand Down Expand Up @@ -136,6 +138,7 @@ export default function NewCluster() {
},

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

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

onKeyDown: (e: any) => {
if (e.keyCode === 13) {
Expand Down Expand Up @@ -182,6 +185,7 @@ export default function NewCluster() {
},

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

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

onKeyDown: (e: any) => {
if (e.keyCode === 13) {
Expand Down Expand Up @@ -412,6 +416,24 @@ export default function NewCluster() {
const numberOfConcurrentDownloadPieces = event.currentTarget.elements.numberOfConcurrentDownloadPieces.value;
const candidateParentLimit = event.currentTarget.elements.candidateParentLimit.value;
const filterParentLimit = event.currentTarget.elements.filterParentLimit.value;
const idcText = event.currentTarget.elements.idc.value;
const cidrsText = event.currentTarget.elements.cidrs.value;

if (idcText) {
setIDCHelperText('Please press ENTER to end the IDC creation');
setIDCError(true);
} else {
setIDCError(false);
setIDCHelperText('Fill in the characters, the length is 0-100.');
}

if (cidrsText) {
setCIDRsHelperText('Please press ENTER to end the CIDRs creation');
setCIDRsError(true);
} else {
setCIDRsError(false);
setCIDRsHelperText('Fill in the characters, the length is 0-100.');
}

informationForm.forEach((item) => {
const value = data.get(item.formProps.name);
Expand All @@ -438,7 +460,9 @@ export default function NewCluster() {
const canSubmit = Boolean(
!informationForm.filter((item) => item.syncError).length &&
!scopesForm.filter((item) => item.syncError).length &&
!configForm.filter((item) => item.syncError).length,
!configForm.filter((item) => item.syncError).length &&
Boolean(!idcText) &&
Boolean(!cidrsText),
);

const formData = {
Expand Down
6 changes: 5 additions & 1 deletion src/components/developer/tokens/new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ import {
FormGroup,
InputLabel,
} from '@mui/material';
import { useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import { formatDate, getExpiredTime } from '../../../lib/utils';
import { LoadingButton } from '@mui/lab';
import { useNavigate } from 'react-router-dom';
import { createTokens } from '../../../lib/api';
import HelpIcon from '@mui/icons-material/Help';
import CancelIcon from '@mui/icons-material/Cancel';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { MyContext } from '../../menu';

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

const { user } = useContext(MyContext);

const formList = [
{
formProps: {
Expand Down Expand Up @@ -156,6 +159,7 @@ export default function CreateTokens() {
bio: bio.value,
scopes: filteredScopes,
expired_at: expiredTime,
user_id: user.id,
};

const canSubmit = Boolean(!formList.filter((item) => item.syncError).length);
Expand Down
36 changes: 25 additions & 11 deletions src/components/job/preheats/new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default function NewPreheat() {
const [filter, setFilter] = useState([]);
const [clusterName, setClusterName] = useState<string[]>([]);
const [clusterID, setClusterID] = useState<number[]>([]);
const [filterHelperText, setFilterHelperText] = useState('Fill in the characters, the length is 0-100.');

const navigate = useNavigate();

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

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

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

event.preventDefault();
const bio = event.currentTarget.elements.bio;
const url = event.currentTarget.elements.url;
const tag = event.currentTarget.elements.tag;
const bio = event.currentTarget.elements.bio.value;
const url = event.currentTarget.elements.url.value;
const tag = event.currentTarget.elements.tag.value;
const filterText = event.currentTarget.elements.filter.value;
const filters = filter.join('&');

const data = new FormData(event.currentTarget);

if (filterText) {
setFilterError(true);
setFilterHelperText('Please press ENTER to end the filter creation');
} else {
setFilterError(false);
setFilterHelperText('Fill in the characters, the length is 0-100.');
}

informationForm.forEach((item) => {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
item.syncError = !item.validate(value as string);
});

argsForm.forEach((item) => {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
item.syncError = !item.validate(value as string);
if (item.formProps.name !== 'filter') {
const value = data.get(item.formProps.name);
item.setError(!item.validate(value as string));
item.syncError = !item.validate(value as string);
}
});

const headerValidate = headers.every((item) => {
Expand Down Expand Up @@ -289,16 +302,17 @@ export default function NewPreheat() {
!informationForm.filter((item) => item.syncError).length &&
!argsForm.filter((item) => item.syncError).length &&
clusterIDValidate &&
headerValidate,
headerValidate &&
Boolean(!filterText),
);

const formDate = {
bio: bio.value,
bio: bio,
type: 'preheat',
args: {
type: 'file',
url: url.value,
tag: tag.value,
url: url,
tag: tag,
filter: filters,
headers: headerList,
},
Expand Down
14 changes: 12 additions & 2 deletions src/components/menu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,17 @@ import { getUserRoles, getUser, signOut } from '../../lib/api';
import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
import { getJwtPayload, setPageTitle } from '../../lib/utils';
import { Link, useLocation, useNavigate, Outlet } from 'react-router-dom';

import { ROLE_ROOT, ROLE_GUEST } from '../../lib/constants';
interface MyContextType {
user: { name: string; id: number };
role: string;
}

export const MyContext = createContext<MyContextType>({
user: { name: '', id: 0 },
role: '',
});

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

return (
<Box>
<MyContext.Provider value={{ user, role }}>
<Backdrop
open={pageLoding}
sx={{
Expand Down Expand Up @@ -679,6 +689,6 @@ export default function Layout(props: any) {
</Main>
</Box>
)}
</Box>
</MyContext.Provider>
);
}

0 comments on commit 9d74dd2

Please sign in to comment.