Browse Source

그룹명 생성/수정 시 validation 추가

pull/2/head
junh_eee(이준희) 2 years ago
parent
commit
27a7409f39
  1. 74
      src/components/basis/group/BaisGroupForm.js
  2. 62
      src/containers/basis/group/BasisGroupDetailContainer.js

74
src/components/basis/group/BaisGroupForm.js

@ -1,33 +1,51 @@
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import * as yup from 'yup';
import { useForm } from 'react-hook-form';
import classnames from 'classnames';
import { import {
Row, Row,
Col, Col,
Table,
Badge,
UncontrolledDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle,
Card, Card,
CardHeader,
CardBody, CardBody,
CardTitle,
CardSubtitle,
ButtonGroup,
Button, Button,
Input, Input,
CustomInput,
FormGroup, FormGroup,
Modal, Label,
ModalHeader, FormFeedback,
ModalBody, Form
ModalFooter,
Label
} from 'reactstrap'; } from 'reactstrap';
import { Link, useHistory } from 'react-router-dom'; import { yupResolver } from '@hookform/resolvers/yup';
export const BasisGroupForm = props => { export const BasisGroupForm = props => {
useEffect(() => {
if (props.groupData?.groupId) {
setValue('groupNm', props.groupData?.groupNm);
}
}, [props.groupData]);
const Schema = yup.object().shape({
groupNm: yup
.string()
.required('그룹명을 입력해 주세요')
.matches(
/^[ㄱ-힣A-Za-z0-9]{2,12}$/,
'2 자 이상, 12 자 이하 영문자/숫자만 입력 가능합니다.'
)
});
const { register, getValues, setValue, errors, handleSubmit } = useForm({
defaultValues: {
groupNm: ''
},
resolver: yupResolver(Schema)
});
const onSumbit = async data => {
props.handlerSave(data);
};
return ( return (
<Form onSubmit={handleSubmit(onSumbit)}>
<Row> <Row>
<Col> <Col>
<Card> <Card>
@ -50,7 +68,7 @@ export const BasisGroupForm = props => {
<Row> <Row>
<Col className='list-input' md='4' sm='12'> <Col className='list-input' md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='groupcode'> <Label for='groupId'>
<span className='necessary'>*</span> <span className='necessary'>*</span>
</Label> </Label>
<Input <Input
@ -66,7 +84,7 @@ export const BasisGroupForm = props => {
</Col> </Col>
<Col className='list-input' md='4' sm='12'> <Col className='list-input' md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='groupname'> <Label for='groupNm'>
<span className='necessary'>*</span> <span className='necessary'>*</span>
</Label> </Label>
<Input <Input
@ -74,10 +92,18 @@ export const BasisGroupForm = props => {
id='groupNm' id='groupNm'
name='groupNm' name='groupNm'
bsSize='sm' bsSize='sm'
onChange={props.handlerInput} innerRef={register}
value={props.groupData.groupNm || ''} // value={props.groupData.groupNm || ''}
placeholder='' placeholder=''
className={classnames({
'is-invalid': errors.groupNm
})}
/> />
{errors && errors.groupNm && (
<FormFeedback>
{errors.groupNm.message}
</FormFeedback>
)}
</FormGroup> </FormGroup>
</Col> </Col>
@ -105,7 +131,8 @@ export const BasisGroupForm = props => {
className='mr-1' className='mr-1'
color='primary' color='primary'
size='sm' size='sm'
onClick={props.handlerSave} // onClick={props.handlerSave}
type='submit'
> >
저장 저장
</Button.Ripple> </Button.Ripple>
@ -129,5 +156,6 @@ export const BasisGroupForm = props => {
</Card> </Card>
</Col> </Col>
</Row> </Row>
</Form>
); );
}; };

62
src/containers/basis/group/BasisGroupDetailContainer.js

@ -61,12 +61,32 @@ export const BasisGroupDetailContainer = () => {
dispatch(Actions.GROUP_DETAIL.request(id)); dispatch(Actions.GROUP_DETAIL.request(id));
}; };
const handlerCreate = () => { const handlerCreate = data => {
dispatch(Actions.GROUP_CREATE.request(groupData)); const saveData = {
createDt: '',
cstmrSno: groupData.cstmrSno,
groupId: groupData.groupId,
groupNm: data.groupNm,
groupTypeCd: groupData.groupTypeCd,
type: groupData.type,
updateDt: ''
};
// dispatch(Actions.GROUP_CREATE.request(groupData));
dispatch(Actions.GROUP_CREATE.request(saveData));
}; };
const handlerUpdate = () => { const handlerUpdate = data => {
dispatch(Actions.GROUP_UPDATE.request(groupData)); const saveData = {
createDt: groupData.createDt,
cstmrSno: groupData.cstmrSno,
groupId: groupData.groupId,
groupNm: data.groupNm,
groupTypeCd: groupData.groupTypeCd,
type: groupData.type,
updateDt: groupData.updateDt
};
// dispatch(Actions.GROUP_UPDATE.request(groupData));
dispatch(Actions.GROUP_UPDATE.request(saveData));
}; };
const handlerDelete = () => { const handlerDelete = () => {
dispatch(Actions.GROUP_DELETE.request(groupData.groupId)); dispatch(Actions.GROUP_DELETE.request(groupData.groupId));
@ -81,29 +101,33 @@ export const BasisGroupDetailContainer = () => {
return; return;
}; };
const handlerInput = e => { const handlerSave = data => {
const { name, value } = e.target; groupData.type === 'create' ? handlerCreate(data) : handlerUpdate(data);
if (name == 'groupNm') {
const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/;
if (regex.test(value)) {
setGroupData({
...groupData,
[name]: value
});
}
}
}; };
// const handlerInput = e => {
// const { name, innerRef } = e.target;
// if (name == 'groupNm') {
// // const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/;
// // if (regex.test(innerRef)) {
// console.log(innerRef);
// setGroupData({
// ...groupData,
// [name]: innerRef
// });
// // }
// }
// };
return ( return (
<CustomDetailLayout title={titleName}> <CustomDetailLayout title={titleName}>
<BasisGroupForm <BasisGroupForm
groupDetail={groupDetail} groupDetail={groupDetail}
groupData={groupData} groupData={groupData}
handlerSave={ setGroupData={setGroupData}
groupData.type === 'create' ? handlerCreate : handlerUpdate handlerSave={handlerSave}
}
handlerDelete={handlerDelete} handlerDelete={handlerDelete}
handlerInput={handlerInput} // handlerInput={handlerInput}
handlerWidthrow={handlerWidthrow} handlerWidthrow={handlerWidthrow}
/> />

Loading…
Cancel
Save