From 38d763aad1cd043d2641a169c9333980e1227160 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Wed, 13 Dec 2023 14:48:13 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EC=B2=B4=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/basis/dron/BasisDronForm.js | 75 +-------------- src/components/basis/dron/BasisDronGrid.js | 1 - src/components/basis/dron/BasisDronTab.js | 8 +- .../basis/dron/BasisDronContainer.js | 96 ++++--------------- .../basis/dron/BasisDronDetailContainer.js | 46 ++++++--- .../basis/dron/BasisIdntfContainer.js | 53 +++++----- 6 files changed, 80 insertions(+), 199 deletions(-) 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} />