pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비행계획서 승인 - 체크박스

pull/2/head
junh_eee(이준희) 2 years ago
parent
418558e3e8
commit
1339446648
3 changed files with 239 additions and 177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 57
      src/components/basis/flight/aprv/FlightPlanAprvGrid.js
  2. 333
      src/components/basis/flight/aprv/FlightPlanAprvSearch.js
  3. 26
      src/containers/basis/flight/aprv/FlightPlanAprvContainer.js

57
src/components/basis/flight/aprv/FlightPlanAprvGrid.js
Unescape View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { Button, Card, Col, Row } from 'reactstrap';
import { Button, Card, Col, Row, CustomInput } from 'reactstrap';
import { GridDatabase } from '../../../crud/grid/GridDatatable';
import { Link } from 'react-router-dom';
@ -10,17 +10,17 @@ const FlightPlanAprvGrid = ({
handleClickAprv,
joinList,
selectGroup,
selPlanSnoList,
setSelPlanSnoList,
handleChangeCheckbox
}) => {
const [aprvAuth, setAprvAuth] = useState('');
useEffect(() => {
joinList.forEach(c => {
if (c.groupId === selectGroup.groupId) {
// if (c.groupAuthCd === 'USER') {
if (c.groupAuthCd === 'NORMAL') {
setAprvAuth(false);
// } else if (c.groupAuthCd === 'CREATER' || c.groupAuthCd === 'ADMIN') {
} else if (c.groupAuthCd === 'MASTER' || c.groupAuthCd === 'LEADER') {
setAprvAuth(true);
}
@ -28,16 +28,53 @@ const FlightPlanAprvGrid = ({
});
}, [selectGroup]);
useEffect(() => {
console.log(selPlanSnoList, '>>>');
}, [selPlanSnoList]);
const columns = [
{ id: 'planSno', name: '번호', cell: (row, i) => <div>{i + 1}</div> },
// {
// id: '',
// name: '',
// minWidth: '50px',
// cell: (row, i) => (
// <>
// <CustomInput
// type='checkbox'
// id={`check${i + 1}`}
// name={`check${i + 1}`}
// // checked={checkState}
// onChange={e => handleChangeCheckbox(e, row)}
// />
// </>
// )
// },
{
id: 'planSno',
name: '번호',
cell: (row, i) => (
<>
{/* <CustomInput
type='checkbox'
id={`check${i + 1}`}
name={`check${i + 1}`}
// checked={checkState}
onChange={e => handleChangeCheckbox(e, row)}
/> */}
<div>{i + 1}</div>
</>
)
},
{
id: 'fltPurpose',
name: '비행목적',
minWidth: '150px',
cell: row => <div>{row.fltPurpose}</div>
},
{
id: 'fltMethod',
name: '비행방식',
minWidth: '200px',
cell: row => {
const displayName =
(row.areaList &&
@ -50,6 +87,7 @@ const FlightPlanAprvGrid = ({
{
id: 'schFltStDt',
name: '출발일',
minWidth: '200px',
cell: row => <div>{row.schFltStDt}</div>
},
{ id: 'aprvlYn', name: '승인여부', cell: row => <div>{row.aprvlYn}</div> },
@ -58,12 +96,15 @@ const FlightPlanAprvGrid = ({
name: '상세보기',
cell: row => {
return (
<Link to={`/basis/flight/plan/detail/${row.planSno}`}
<Button.Ripple
color='primary'
size='sm'
onClick={() => {
handleMoveDetail(row.planSno);
}}
>
상세
</Link>
</Button.Ripple>
);
}
}

333
src/components/basis/flight/aprv/FlightPlanAprvSearch.js
Unescape View File

@ -1,176 +1,175 @@
import React, {useState} from 'react';
import {Button, Card, CardBody, Col, CustomInput, Row} from 'reactstrap';
import {Search} from 'react-feather';
import React, { useState } from 'react';
import { Button, Card, CardBody, Col, CustomInput, Row } from 'reactstrap';
import { Search } from 'react-feather';
import Flatpickr from 'react-flatpickr';
import moment from 'moment';
const FlightPlanAprvSearch = ({searchData, handleChangeSearchData, handleSearch}) => {
const {schFltStDt, schFltEndDt, aprvlYn} = searchData;
const initCheckState = {
'all': aprvlYn == 'A',
'yes': (aprvlYn == 'Y' || aprvlYn == 'A'),
'no': (aprvlYn == 'N' || aprvlYn == 'A'),
}
const [checkState, setCheckState] = useState(initCheckState);
const handleClickSearch = (e) => {
handleSearch(searchData);
}
const handleChangeInput = (dates, value, config) => {
if (dates.length === 2) {
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss');
const schFltEndDt = moment(dates[1]).set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss');
handleChangeSearchData({schFltStDt, schFltEndDt})
}
const FlightPlanAprvSearch = ({
searchData,
handleChangeSearchData,
handleSearch
}) => {
const { schFltStDt, schFltEndDt, aprvlYn } = searchData;
const initCheckState = {
all: aprvlYn == 'A',
yes: aprvlYn == 'Y' || aprvlYn == 'A',
no: aprvlYn == 'N' || aprvlYn == 'A'
};
const [checkState, setCheckState] = useState(initCheckState);
const handleClickSearch = e => {
handleSearch(searchData);
};
const handleChangeInput = (dates, value, config) => {
if (dates.length === 2) {
const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss');
const schFltEndDt = moment(dates[1])
.set({ h: 23, m: 59, s: 59 })
.format('YYYY-MM-DD HH:mm:ss');
handleChangeSearchData({ schFltStDt, schFltEndDt });
}
const handleChangeCheckbox = (e) => {
const {name, value, checked} = e.target;
let val;
switch (value) {
case 'A':
val = checked ? 'A' : '';
handleChangeSearchData({[name]: val})
setCheckState({
'all': checked,
'yes': checked,
'no': checked
})
break;
case 'Y':
if (checked && checkState.no) val = 'A'
else if (checked && !checkState.no) val = 'Y'
else if (!checked && checkState.no) val = 'N'
else if (!checked && !checkState.no) val = ''
handleChangeSearchData({[name]: val})
setCheckState(prevState => ({
'all': prevState.no && checked,
'yes': checked,
'no': prevState.no
}))
break;
case 'N':
if (checked && checkState.yes) val = 'A'
else if (checked && !checkState.yes) val = 'N'
else if (!checked && checkState.yes) val = 'Y'
else if (!checked && !checkState.yes) val = ''
handleChangeSearchData({[name]: val})
setCheckState(prevState => ({
'all': prevState.yes && checked,
'yes': prevState.yes,
'no': checked
}))
break;
default:
break;
}
};
const handleChangeCheckbox = e => {
const { name, value, checked } = e.target;
let val;
switch (value) {
case 'A':
val = checked ? 'A' : '';
handleChangeSearchData({ [name]: val });
setCheckState({
all: checked,
yes: checked,
no: checked
});
break;
case 'Y':
if (checked && checkState.no) val = 'A';
else if (checked && !checkState.no) val = 'Y';
else if (!checked && checkState.no) val = 'N';
else if (!checked && !checkState.no) val = '';
handleChangeSearchData({ [name]: val });
setCheckState(prevState => ({
all: prevState.no && checked,
yes: checked,
no: prevState.no
}));
break;
case 'N':
if (checked && checkState.yes) val = 'A';
else if (checked && !checkState.yes) val = 'N';
else if (!checked && checkState.yes) val = 'Y';
else if (!checked && !checkState.yes) val = '';
handleChangeSearchData({ [name]: val });
setCheckState(prevState => ({
all: prevState.yes && checked,
yes: prevState.yes,
no: checked
}));
break;
default:
break;
}
return (
// <div className='pal-card-box'>
<div>
<Row>
<Col>
<div
className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<div>
<h4>검색조건</h4>
</div>
<div className='d-flex align-items-center'>
<Button.Ripple
color='primary'
size='sm'
onClick={handleClickSearch}
>
<Search size={16}/>
검색
</Button.Ripple>
</div>
</div>
<Card>
{/* <CardBody className='pal-card-body'> */}
<div className='search-cont'>
<dl>
<dt>
<div className='search-box'>
<div className='search-list-ti'>신청일</div>
<div className='search-list'>
<div className='search-list-cont'>
<Row>
<Col className='list-input' xl='4' md='6' sm='12'>
<div className='d-flex align-items-center calendar-flat'>
<Flatpickr
id='searchDate'
value={[
schFltStDt,
schFltEndDt
]}
options={{
mode: 'range',
// defaultDate: [
// props.params.stDate,
// props.params.endDate
// ]
}}
onChange={handleChangeInput}
className='form-control flat-picker bg-transparent border-0 shadow-none'
/>
</div>
</Col>
</Row>
</div>
</div>
</div>
</dt>
<dt>
<div className='search-box'>
<div className='search-list-ti'>승인여부</div>
<div className='search-list'>
<div className='search-list-cont'>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox'
label='전체'
name="aprvlYn"
value="A"
// checked={true}
checked={checkState.all}
onChange={handleChangeCheckbox}
/>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox2'
label='승인'
name="aprvlYn"
value="Y"
checked={checkState.yes}
onChange={handleChangeCheckbox}
/>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox3'
label='미승인'
name="aprvlYn"
value="N"
checked={checkState.no}
onChange={handleChangeCheckbox}
/>
</div>
</div>
</div>
</dt>
</dl>
};
return (
// <div className='pal-card-box'>
<div>
<Row>
<Col>
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<div>
<h4>검색조건</h4>
</div>
<div className='d-flex align-items-center'>
<Button.Ripple
color='primary'
size='sm'
onClick={handleClickSearch}
>
<Search size={16} />
검색
</Button.Ripple>
</div>
</div>
<Card>
{/* <CardBody className='pal-card-body'> */}
<div className='search-cont'>
<dl>
<dt>
<div className='search-box'>
<div className='search-list-ti'>신청일</div>
<div className='search-list'>
<div className='search-list-cont'>
<Row>
<Col className='list-input' xl='4' md='6' sm='12'>
<div className='d-flex align-items-center calendar-flat'>
<Flatpickr
id='searchDate'
value={[schFltStDt, schFltEndDt]}
options={{
mode: 'range'
// defaultDate: [
// props.params.stDate,
// props.params.endDate
// ]
}}
onChange={handleChangeInput}
className='form-control flat-picker bg-transparent border-0 shadow-none'
/>
</div>
{/* </CardBody> */}
</Card>
</Col>
</Row>
</div>
</div>
</div>
</dt>
</Col>
</Row>
</div>
)
}
<dt>
<div className='search-box'>
<div className='search-list-ti'>승인여부</div>
<div className='search-list'>
<div className='search-list-cont'>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox'
label='전체'
name='aprvlYn'
value='A'
// checked={true}
checked={checkState.all}
onChange={handleChangeCheckbox}
/>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox2'
label='승인'
name='aprvlYn'
value='Y'
checked={checkState.yes}
onChange={handleChangeCheckbox}
/>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox3'
label='미승인'
name='aprvlYn'
value='N'
checked={checkState.no}
onChange={handleChangeCheckbox}
/>
</div>
</div>
</div>
</dt>
</dl>
</div>
{/* </CardBody> */}
</Card>
</Col>
</Row>
</div>
);
};
export default FlightPlanAprvSearch;

26
src/containers/basis/flight/aprv/FlightPlanAprvContainer.js
Unescape View File

@ -143,8 +143,6 @@ const FlightPlanAprvContainer = () => {
);
};
// 최초 비행계획서 목록 조회
useEffect(() => {
handlerGroupCancel();
@ -177,6 +175,27 @@ const FlightPlanAprvContainer = () => {
const handleChangeSelected = ({ selectedRows }) => {
setSelPlanSnoList(selectedRows.map(item => item.planSno));
};
const handleChangeCheckbox = (e, row) => {
const { checked } = e.target;
const dupli = selPlanSnoList?.find(prev => {
if (prev.planSno === row.planSno) {
return true;
}
});
if (checked) {
if (!dupli) {
setSelPlanSnoList([...selPlanSnoList, row.planSno]);
}
} else {
const list = selPlanSnoList.filter(prev => {
if (prev !== row.planSno) {
return prev;
}
});
setSelPlanSnoList(list);
}
};
const handleClickAprv = type => e => {
// notAprov, aprv
@ -244,6 +263,9 @@ const FlightPlanAprvContainer = () => {
joinList={joinList}
selectGroup={selectGroup}
handleChangeSelected={handleChangeSelected}
selPlanSnoList={selPlanSnoList}
setSelPlanSnoList={setSelPlanSnoList}
handleChangeCheckbox={handleChangeCheckbox}
/>
</>
) : (

Write Preview
Loading…
Cancel
Save