diff --git a/src/components/basis/dron/BasisDronForm.js b/src/components/basis/dron/BasisDronForm.js
index 27320aa..ff4248d 100644
--- a/src/components/basis/dron/BasisDronForm.js
+++ b/src/components/basis/dron/BasisDronForm.js
@@ -1,5 +1,5 @@
import classnames from 'classnames';
-import React from 'react';
+import React, { useEffect } from 'react';
import {
Card,
CardBody,
@@ -316,80 +316,7 @@ export const BasisDronForm = props => {
- {/*
-
-
운영자 정보
-
-
-
-
-
-
-
- {props.errors && props.errors.ownerNm && (
-
- {props.errors.ownerNm.message}
-
- )}
-
-
-
-
-
-
- {props.errors && props.errors.hpno && (
-
- {props.errors.hpno.message}
-
- )}
-
-
-
-
- */}
-
- {/*
-
- 저장
-
-
- 삭제
-
-
*/}
diff --git a/src/components/basis/dron/BasisDronGrid.js b/src/components/basis/dron/BasisDronGrid.js
index c8cb6f7..12f5efc 100644
--- a/src/components/basis/dron/BasisDronGrid.js
+++ b/src/components/basis/dron/BasisDronGrid.js
@@ -2,7 +2,6 @@ import { GridDatabase } from '../../crud/grid/GridDatatable';
import { Card, Button } from 'reactstrap';
export const BasisDronGrid = props => {
- // console.log(props.isMyGroup);
return (
<>
diff --git a/src/components/basis/dron/BasisDronTab.js b/src/components/basis/dron/BasisDronTab.js
index 094e75c..ff4b020 100644
--- a/src/components/basis/dron/BasisDronTab.js
+++ b/src/components/basis/dron/BasisDronTab.js
@@ -15,16 +15,20 @@ import { Settings, AlertTriangle } from 'react-feather';
import { BasisDronDetailContainer } from '../../../containers/basis/dron/BasisDronDetailContainer';
import { BasisIdntfContainer } from '../../../containers/basis/dron/BasisIdntfContainer';
export const BasisDronTab = props => {
+ // 현재 활성화 된 탭
const [activeTab, setActiveTab] = useState('1');
- //내가 등록한 기체인가
+ // 유저가 등록한 기체인지 판단
const [isDisabled, setIsDisabled] = useState(false);
- //내가 소속된 그룹의 기체인가
+
+ // 유저가 소속된 그룹의 기체인지 판단
const [isMyGroup, setIsMyGroup] = useState(false);
+ // 탭 변경
const toggle = tab => {
if (activeTab !== tab) setActiveTab(tab);
};
+
return (
diff --git a/src/containers/basis/dron/BasisDronContainer.js b/src/containers/basis/dron/BasisDronContainer.js
index 2284282..255e793 100644
--- a/src/containers/basis/dron/BasisDronContainer.js
+++ b/src/containers/basis/dron/BasisDronContainer.js
@@ -2,15 +2,7 @@ import moment from 'moment';
import { useEffect, useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useHistory, Link } from 'react-router-dom';
-import {
- Button,
- Col,
- Row,
- Modal,
- ModalHeader,
- ModalBody,
- ModalFooter
-} from 'reactstrap';
+import { Button, Col, Row } from 'reactstrap';
import { BasisDronGrid } from '../../../components/basis/dron/BasisDronGrid';
import { BasisGroupDronGrid } from '../../../components/basis/dron/BasisGroupDronGrid';
import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
@@ -22,25 +14,28 @@ import { GET_WGHT_TYPE_CD } from '../../../utility/CondeUtil';
export const BasisDronContainer = props => {
const dispatch = useDispatch();
const history = useHistory();
+
+ // 가입한 그룹목록, 가입한 그룹 수, 전체 그룹목록, 전체 그룹 수
const { joinList, joinListCount, groupList, groupListCount } = useSelector(
state => state.groupState
);
+
+ // 현재 활성화한 그룹 정보
const { selectData } = useSelector(state => state.dronState);
- const { list, count, total } = useSelector(state => state.dronState);
+
+ // 기체 목록, 총 기체 수
+ const { list, total } = useSelector(state => state.dronState);
+
+ // 유저 정보
const { user } = useSelector(state => state.authState, shallowEqual);
+
const [params, setParams] = useState({});
const titleName = '기체 관리';
- //모달 관련 설정
- // const [modal, setModal] = useState({
- // isOpen: false,
- // title: '',
- // desc: ''
- // });
-
- //기체등록버튼 활성/비활성 제어
+ // 기체등록버튼 활성/비활성 제어
const [isMyGroup, setIsMyGroup] = useState();
+ // 그룹목록 컬럼명
const columns = [
{
name: '그룹명',
@@ -112,6 +107,7 @@ export const BasisDronContainer = props => {
}
];
+ // 기체목록 컬럼명
const dronColumns = [
{
name: '모델명',
@@ -169,7 +165,6 @@ export const BasisDronContainer = props => {
},
{
name: '상세보기',
- // selector: 'cntrlStDate',
// minWidth: '102px',
sortable: true,
cell: row => {
@@ -182,23 +177,7 @@ export const BasisDronContainer = props => {
}
];
- // const handlerNotMine = () => {
- // setModal({
- // isOpen: true,
- // title: '조회 불가',
- // desc: '사용자가 등록한 기체가 아닙니다.',
- // color: 'danger'
- // });
- // return;
- // };
-
- // useEffect(() => {
- // handlerCancel();
- // // if (selectData) {
- // // handlerDronSearch();
- // // }
- // }, []);
-
+ // param 설정 및 권한에 따른 그룹 목록 요청
useEffect(() => {
if (user?.cstmrSno) {
setParams({
@@ -217,20 +196,14 @@ export const BasisDronContainer = props => {
}
}, [user]);
- // const handlerSearch = () => {
- // GroupActions.JOIN_LIST.request({
- // searchParams: { cstmrSno: user?.cstmrSno }
- // });
- // };
-
- // const handlerDronSearch = () => {
- // dispatch(Actions.LIST.request(selectData));
- // };
+ // 기체목록 페이지 이동 시 새 목록 요청
const handlerPageChange = page => {
const param = params;
param.page = page;
dispatch(Actions.LIST.request({ searchParams: param }));
};
+
+ // 상세보기 선택 시
const handlerDetail = (groupId, groupNm, groupAuthCd, myGroupAuthCd) => {
dispatch(Actions.SELECT({ groupId: groupId, groupNm: groupNm }));
localStorage.setItem('dronGroupId', groupId);
@@ -260,11 +233,13 @@ export const BasisDronContainer = props => {
setIsMyGroup(my);
};
+ // 기체 등록 화면으로 이동
const handlerGroupCreate = () => {
dispatch(Actions.RESET_IDNTF()); // 초기화 진행
history.push(`/basis/dron/create`);
};
+ // 상세보기 선택취소 시
const handlerCancel = () => {
dispatch(Actions.SELECT());
@@ -277,15 +252,8 @@ export const BasisDronContainer = props => {
return (
- {/* */}
- {/* */}
{user ? (
<>
@@ -307,7 +275,6 @@ export const BasisDronContainer = props => {
<>>
)}
- {/* */}
{!selectData ? (
@@ -331,29 +298,6 @@ export const BasisDronContainer = props => {
- {/*
- setModal({ ...modal, isOpen: !modal.isOpen })}
- modalClassName={'modal-' + `${modal.color}`}
- className='modal-dialog-centered'
- >
- setModal({ ...modal, isOpen: !modal.isOpen })}
- >
- {modal.title}
-
- {modal.desc}
-
- {' '}
-
-
-
*/}
);
};
diff --git a/src/containers/basis/dron/BasisDronDetailContainer.js b/src/containers/basis/dron/BasisDronDetailContainer.js
index aa30bec..659103b 100644
--- a/src/containers/basis/dron/BasisDronDetailContainer.js
+++ b/src/containers/basis/dron/BasisDronDetailContainer.js
@@ -1,27 +1,38 @@
-import { yupResolver } from '@hookform/resolvers/yup';
import { useEffect, useState } from 'react';
+import { Button, Col, Row } from 'reactstrap';
import { useForm } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { Button, Col, Row } from 'reactstrap';
+// yup
import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+
import { BasisDronForm } from '../../../components/basis/dron/BasisDronForm';
import { BasisDronImage } from '../../../components/basis/dron/BasisDronImage';
-import { IMG_PATH } from '../../../configs/constants';
import * as Actions from '../../../modules/basis/dron/actions/basisDronAction';
import { dronAPI } from '../../../modules/basis/dron/apis/basisDronApi';
+import { IMG_PATH } from '../../../configs/constants';
export const BasisDronDetailContainer = props => {
+ const dispatch = useDispatch();
+ const titleName = ' 기체 관리';
+
+ // 가입한 그룹목록, 전체 그룹목록
const { joinList, groupList } = useSelector(state => state.groupState);
+
+ // 기체 상세정보, 선택한 기체정보
const { detail, selectData } = useSelector(state => state.dronState);
- const history = useHistory();
+
+ // 유저 정보
const { user } = useSelector(state => state.authState);
+
+ // 기체 이미지
const [img, setImg] = useState(null);
const [imageUrl, setImageUrl] = useState('');
- const dispatch = useDispatch();
- const titleName = ' 기체 관리';
+
+ // 기체 등록인지, 수정인지 판단
const [pageType, setPageType] = useState('create');
+ // 유효성검사 목록
const validationSchema = yup.object().shape({
arcrftModelNm: yup
.string()
@@ -54,9 +65,9 @@ export const BasisDronDetailContainer = props => {
'지원하지 않는 특수문자입니다.'
),
wghtTypeCd: yup.string().trim().required('중량구분 을 선택해 주세요.')
- // ownerNm: yup.string().trim().required('운영자명 을 입력해 주세요.'),
- // hpno: yup.string().trim().required('운영자 연락처 를 입력해 주세요.')
});
+
+ // 유효성검사를 위한 기체 정보 기본값
const { register, getValues, setValue, errors, handleSubmit } = useForm({
defaultValues: {
groupId: '',
@@ -74,12 +85,11 @@ export const BasisDronDetailContainer = props => {
createUserId: '',
updateUserId: '',
updateDt: ''
- // ownerSno: '',
- // ownerNm: '',
- // hpno: ''
},
resolver: yupResolver(validationSchema)
});
+
+ // 모달 창
const [modal, setModal] = useState({
isOpen: false,
title: '',
@@ -87,6 +97,7 @@ export const BasisDronDetailContainer = props => {
color: ''
});
+ // 이전 화면에서 넘겨받은 그룹 아이디가 있을 시 기체 수정으로 판단
useEffect(() => {
if (props.id) {
handlerSearch();
@@ -95,6 +106,7 @@ export const BasisDronDetailContainer = props => {
return () => dispatch(Actions.RESET_IDNTF());
}, []);
+ // 기체 정보 존재 할 경우 데이터 셋팅
useEffect(() => {
if (!selectData && !detail) {
// history.goBack();
@@ -117,9 +129,6 @@ export const BasisDronDetailContainer = props => {
setValue('prdctNum', detail?.prdctNum);
setValue('imageUrl', detail?.imageUrl);
setValue('wghtTypeCd', detail?.wghtTypeCd);
- // setValue('ownerSno', detail?.ownerSno);
- // setValue('ownerNm', detail?.ownerNm);
- // setValue('hpno', detail?.hpno);
setValue('updateUserId', detail?.updateUserId);
setValue('updateDt', detail?.updateDt);
@@ -163,6 +172,7 @@ export const BasisDronDetailContainer = props => {
}
}, [selectData, detail]);
+ // 이미지 업로드
const handlerImageChange = e => {
const reader = new FileReader(),
files = e.target.files;
@@ -183,21 +193,25 @@ export const BasisDronDetailContainer = props => {
saveFileAPI(files[0]);
};
+ // 이미지 삭제
const handlerImageDelete = () => {
setImageUrl('');
setImg('');
};
+ // 이미지 저장
const saveFileAPI = async file => {
const fileName = await dronAPI.fileupload(file);
setImageUrl(fileName);
setImg(IMG_PATH + fileName);
};
+ // 기체 상세정보 요청
const handlerSearch = () => {
dispatch(Actions.DETAIL.request(props.id));
};
+ // 기체 생성
const handlerCreate = async data => {
const saveData = {
...data,
@@ -208,6 +222,7 @@ export const BasisDronDetailContainer = props => {
dispatch(Actions.CREATE.request(saveData));
};
+ // 기체 수정
const handlerUpdate = async data => {
const saveData = {
...data,
@@ -219,6 +234,7 @@ export const BasisDronDetailContainer = props => {
dispatch(Actions.UPDATE.request(saveData));
};
+ // 기체 삭제
const handlerDelete = async data => {
dispatch(Actions.DELETE.request(detail.arcrftSno));
};
diff --git a/src/containers/basis/dron/BasisIdntfContainer.js b/src/containers/basis/dron/BasisIdntfContainer.js
index c8ee2d5..85ce00a 100644
--- a/src/containers/basis/dron/BasisIdntfContainer.js
+++ b/src/containers/basis/dron/BasisIdntfContainer.js
@@ -5,12 +5,20 @@ import { BasisIdntfForm } from '../../../components/basis/dron/BasisIdntform';
import * as Actions from '../../../modules/basis/dron/actions/basisDronAction';
import { ErrorModal } from '../../../components/modal/ErrorModal';
export const BasisIdntfContainer = props => {
- const { listIdntf, idntfCount, detail, isRefreshIdntf } = useSelector(
+ const dispatch = useDispatch();
+
+ // 식별장치 목록 (저장 이전 데이터 포함)
+ const [idntDataList, setIdntfDataList] = useState([]);
+
+ // 식별장치 목록, 기체 상세정보
+ const { listIdntf, detail, isRefreshIdntf } = useSelector(
state => state.dronState
);
+
+ // 유저 정보
const { user } = useSelector(state => state.authState);
- const dispatch = useDispatch();
+ // 식별장치 추가 시 초기 정보
const [idntfData, setIdntfData] = useState({
id: '',
idntfNum: '',
@@ -19,6 +27,7 @@ export const BasisIdntfContainer = props => {
hpno: '',
isSave: false
});
+
//모달 관련 설정
const [modal, setModal] = useState({
isOpen: false,
@@ -26,14 +35,13 @@ export const BasisIdntfContainer = props => {
desc: ''
});
- const [idntDataList, setIdntfDataList] = useState([]);
-
useEffect(() => {
if (props.id) {
handlerSearch();
}
}, []);
+ // 권한에 따른 식별장치 삭제버튼 disabled 판단
useEffect(() => {
let newArr = [];
@@ -57,36 +65,23 @@ export const BasisIdntfContainer = props => {
});
}
}
- // else if (user?.authId === 'USER') {
- // if (newArr.length > 0) {
- // newArr.filter(prev => {
- // if (user?.cstmrSno === prev.cstmrSno) {
- // prev.disabled = false;
- // } else {
- // prev.disabled = true;
- // }
- // });
- // }
- // }
-
- // setIdntfDataList(listIdntf);
+
setIdntfDataList(newArr);
}, [listIdntf]);
- // useEffect(() => {
- // console.log(idntDataList);
- // }, [idntDataList]);
-
useEffect(() => {
if (isRefreshIdntf) {
handlerSearch();
}
}, [isRefreshIdntf]);
+ // 식별장치 목록 요청
const handlerSearch = () => {
+ console.log(props.id, '??');
dispatch(Actions.IDNTF_LIST.request(props.id));
};
+ // 식별장치 추가(+ 유효성검사)
const handlerCreate = async () => {
let saveArr = idntDataList.filter(item => item.isSave === false);
@@ -94,7 +89,7 @@ export const BasisIdntfContainer = props => {
let checking = true;
saveArr.forEach(idntf => {
- const check_num = /01[016789][^0][0-9]{2,3}[0-9]{3,4}/
+ const check_num = /01[016789][^0][0-9]{2,3}[0-9]{3,4}/;
const check_kor =
/^[가-힣a-zA-Z0-9][^!@#$%^&*()+\=\[\]{};':"\\|,.<>\/?\s]*$/;
@@ -159,11 +154,11 @@ export const BasisIdntfContainer = props => {
//saveArr[0].idntfNum = 'PA' + saveArr[0].idntfNum
// saveArr = 'PA' + saveArr[0].idntfNum, saveArr
- saveArr
+ saveArr;
dispatch(
Actions.IDNTF_CREATE.request({
arcrftSno: detail?.arcrftSno,
- data: saveArr.map((i) => ({
+ data: saveArr.map(i => ({
...i,
idntfNum: `PA${i.idntfNum}`
}))
@@ -179,24 +174,21 @@ export const BasisIdntfContainer = props => {
}
};
- const handlerDelete = async data => {
- dispatch(Actions.IDNTF_DELETE.request(data.arcrftSno));
- };
-
+ // 식별장치 추가 버튼 클릭 시
const addData = () => {
-
setIdntfDataList([...idntDataList, { ...idntfData, id: Math.random() }]);
};
+ // 식별장치 삭제
const deletaData = (isSave, id) => {
if (!isSave) {
setIdntfDataList(idntDataList.filter(item => item.id !== id));
} else {
-
dispatch(Actions.IDNTF_DELETE.request(id));
}
};
+ // 식별장치 정보 입력
const handlerInput = (event, index) => {
const { name, value } = event.target;
let newArr = [...idntDataList];
@@ -229,7 +221,6 @@ export const BasisIdntfContainer = props => {
addData={addData}
deletaData={deletaData}
handlerSave={handlerCreate}
- handlerDelete={handlerDelete}
isMyGroup={props.isMyGroup}
/>