pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/2/head
junh_eee(이준희) 2 years ago
parent
4cf6533571
commit
27a7409f39
2 changed files with 168 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 222
      src/components/basis/group/BaisGroupForm.js
  2. 62
      src/containers/basis/group/BasisGroupDetailContainer.js

222
src/components/basis/group/BaisGroupForm.js
Unescape View File

@ -1,87 +1,113 @@
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 (
<Row> <Form onSubmit={handleSubmit(onSumbit)}>
<Col> <Row>
<Card> <Col>
<CardBody className='pal-card-body'> <Card>
<div className='search-cont search-info'> <CardBody className='pal-card-body'>
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> <div className='search-cont search-info'>
<div> <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<h4>{props.title} 상세정보</h4> <div>
</div> <h4>{props.title} 상세정보</h4>
<div className='final'> </div>
{props.groupData.type === 'update' ? ( <div className='final'>
<span>최종 수정일자 : {props.groupData.updateDt}</span> {props.groupData.type === 'update' ? (
) : null} <span>최종 수정일자 : {props.groupData.updateDt}</span>
) : null}
</div>
</div> </div>
</div>
<dl> <dl>
<dt> <dt>
<div className='search-info-box'> <div className='search-info-box'>
<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
type='text' type='text'
id='groupId' id='groupId'
name='groupId' name='groupId'
bsSize='sm' bsSize='sm'
readOnly={true} readOnly={true}
value={props.groupData.groupId || ''} value={props.groupData.groupId || ''}
placeholder='' placeholder=''
/> />
</FormGroup> </FormGroup>
</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
type='text' type='text'
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({
</FormGroup> 'is-invalid': errors.groupNm
</Col> })}
/>
{errors && errors.groupNm && (
<FormFeedback>
{errors.groupNm.message}
</FormFeedback>
)}
</FormGroup>
</Col>
{/* <Col className='list-input' md='4' sm='12'> {/* <Col className='list-input' md='4' sm='12'>
<FormGroup> <FormGroup>
<Label for='groupauthority'>그룹 구분 코드</Label> <Label for='groupauthority'>그룹 구분 코드</Label>
<Input <Input
@ -95,39 +121,41 @@ export const BasisGroupForm = props => {
</Input> </Input>
</FormGroup> </FormGroup>
</Col> */} </Col> */}
</Row> </Row>
</div> </div>
</dt> </dt>
</dl> </dl>
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>
<Button.Ripple
className='mr-1'
color='primary'
size='sm'
onClick={props.handlerSave}
>
저장
</Button.Ripple>
{/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
목록
</Button.Ripple> */}
{props.groupData.type != 'create' ? (
<Button.Ripple <Button.Ripple
color='danger' className='mr-1'
color='primary'
size='sm' size='sm'
onClick={() => props.handlerWidthrow()} // onClick={props.handlerSave}
type='submit'
> >
삭제 저장
</Button.Ripple> </Button.Ripple>
) : ( {/* <Button.Ripple className='mr-1' color='secondary' size='sm'>
<></> 목록
)} </Button.Ripple> */}
{props.groupData.type != 'create' ? (
<Button.Ripple
color='danger'
size='sm'
onClick={() => props.handlerWidthrow()}
>
삭제
</Button.Ripple>
) : (
<></>
)}
</div>
</div> </div>
</div> </CardBody>
</CardBody> </Card>
</Card> </Col>
</Col> </Row>
</Row> </Form>
); );
}; };

62
src/containers/basis/group/BasisGroupDetailContainer.js
Unescape View File

@ -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}
/> />

Write Preview
Loading…
Cancel
Save