비행계획 그룹 관리, 비행구역 작업

src/components/basis/flight/plan/FlightPlanGrid.js

@@ -53,8 +53,8 @@ const FlightPlanGrid = ({movePage, planListData, handleMoveDetail}) => {
                                 <GridDatabase
                                     title={'비행이력'}
                                     data={planListData}                                    
-                                    // count={0}
                                     columns={columns}
+                                    count={!!planListData ? planListData.length : 0}
                                     // pagination={props.pagination}
                                 />
                                 {/* 검색된 데이터가 없습니다. */}

src/components/basis/flight/plan/FlightPlanGroupGrid.js

@@ -0,0 +1,67 @@
+import React, {} from 'react';
+import { GridDatabase } from "../../../crud/grid/GridDatatable";
+import {
+    Card,
+    Button
+} from 'reactstrap';
+
+
+const FlightPlanGroupGrid = ({ data, count, selectGroup, handlerGroupCancel, handleGroupSelect }) => {
+
+    const columns = [
+        {id: 'groupNm', name: '그룹 명', minWidth: '102px', cell: row => (<div>{row.groupNm}</div>)},
+        {id: 'groupId', name: '그룹 코드', minWidth: '102px', sortable: true, cell: row => (<div>{row.groupId}</div>)},        
+        {sortable: true, cell: row => {
+            return selectGroup?.groupId === row?.groupId ? (                
+                <Button.Ripple 
+                    color='danger'
+                    className='badge badge-danger'
+                    onClick={() => handlerGroupCancel()}
+                >
+                    선택취소
+                </Button.Ripple>
+            ) : (
+                <Button.Ripple
+                    color='primary'
+                    className='badge badge-primary'
+                    onClick={() => {
+                        handleGroupSelect({
+                            groupId: row?.groupId,
+                            groupNm: row?.groupNm,
+                            groupAuthCd: row?.groupAuthCd
+                        }) 
+                    }
+                    }
+                >
+                    상세보기
+                </Button.Ripple>
+            )
+        }}
+    ];
+
+    return (
+        <>
+            <div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div>
+                    <h4>나의 그룹 목록</h4>
+                    <span className='search-case'>검색결과 총 {count}건</span>
+                </div>
+                <div className='d-flex align-items-center'></div>
+            </div>
+            <div className='invoice-list-wrapper'>
+                <Card>
+                    <div className='invoice-list-dataTable'>
+                        <GridDatabase                        
+                            data={data}
+                            count={count}
+                            columns={columns}
+                        />
+                    </div>
+                </Card>
+            </div>
+        </>
+    )
+
+}
+
+export default FlightPlanGroupGrid;

src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js

@@ -51,11 +51,14 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => {
 
   useEffect(() => {
     // detail의 area 정보가 존재하면 detail 정보로 매핑    
-    if(detail.areaList[0].planAreaSno !== 0) {
+    if(detail.areaList) {
-      setAreaDetail(detail.areaList);
+      if(detail.areaList[0].planAreaSno !== 0) {
+        setAreaDetail(detail.areaList);
         
-      dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList));
+        dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList));
+      }   
     }
+    
   }, [])
 
 

src/containers/basis/flight/plan/FlightPlanContainer.js

@@ -4,22 +4,32 @@ import {Link, Redirect, useHistory} from 'react-router-dom';
 import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid';
 import {CustomMainLayout} from '../../../../components/layout/CustomMainLayout';
 import FlightPlanSearch from '../../../../components/basis/flight/plan/FlightPlanSearch';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch, useSelector, shallowEqual} from 'react-redux';
 import * as FlightAction from '../../../../modules/basis/flight/actions/basisFlightAction';
 import {FlightPlanListRqData} from '../../../../modules/basis/flight/models/basisFlightModel';
+import { Row, Col } from 'reactstrap';
+import { JOIN_LIST } from "../../../../modules/basis/group/actions/basisGroupAction";
+import FlightPlanGroupGrid from '../../../../components/basis/flight/plan/FlightPlanGroupGrid';
 
 
 const initSearchData = {
     schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'),
     schFltEndDt: moment().set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'),
     aprvlYn: 'N',
+    groupId: '',
+    cstmrSno: 0,
 }
 const columns = [{}]
 const FlightPlanContainer = () => {
     const dispatch = useDispatch();
     const history = useHistory();
     const [searchData, setSerchData] = useState(initSearchData);
-    const {list: planListData, detail: planDetailData} = useSelector(state => state.flightState);
+    const {list: planListData, detail: planDetailData, selectGroup} = useSelector(state => state.flightState);
+    const { joinList, joinListCount } = useSelector(state => state.groupState);
+    const { user } = useSelector(state => state.authState, shallowEqual);
+
+    const [ params, setParams ] = useState({});
+    
 
     const moveFlightPlanDetailPage = () => {
         if(planDetailData){
@@ -31,9 +41,6 @@ const FlightPlanContainer = () => {
     const handleSearch = (data) => {
         dispatch(FlightAction.FLIGHT_PLAN_LIST.request(data));
     }
-    useEffect(() => {
-        handleSearch(searchData);
-    }, [])
     
     const handleChangeSearchData = (values) => {
         setSerchData(prevState => ({
@@ -46,19 +53,78 @@ const FlightPlanContainer = () => {
         history.push(`/basis/flight/plan/detail/${id}`)
     }
 
+    const handleGroupSelect = ({ groupId, groupNm, groupAuthCd }) => {
+        // 권한 상관 없이 모두 조회 가능
+        console.log('select group : ', groupId)
+        const param = searchData;
+
+        param.cstmrSno = user.cstmrSno;
+        param.groupId = groupId;
+
+        dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: user.cstmrSno, groupId: groupId, groupNm: groupNm} ));
+
+        setSerchData(prevState => {
+            return {
+                ...prevState,
+                cstmrSno: user.cstmrSno,
+                groupId: groupId
+            }
+        });        
+        
+        dispatch(FlightAction.FLIGHT_PLAN_LIST.request(param));
+    }
+
+    const handlerGroupCancel = () => {
+        dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: 0, groupId: '', groupNm: ''} ));
+    }    
+
+    useEffect(() => {
+        if (user?.cstmrSno) {
+            dispatch(
+              JOIN_LIST.request({
+                cstmrSno: user?.cstmrSno
+              })
+            );
+        }
+    }, [user])
+
     return (
         <CustomMainLayout title={"비행계획서 신청"}>
-            <FlightPlanSearch
+            <div className='pal-card-box'>
-                searchData={searchData}
+                <Row>
-                handleChangeSearchData={handleChangeSearchData}
+                    <Col sm='4'>
-                handleSearch={handleSearch}
+                    <FlightPlanGroupGrid
-            />
+                        data = {joinList}
-            <FlightPlanGrid
+                        count = {joinListCount}
-                movePage={moveFlightPlanDetailPage}
+                        selectGroup = {selectGroup}
-                planListData={planListData}
+                        handleGroupSelect = {handleGroupSelect}
-                columns={columns}
+                        handlerGroupCancel = {handlerGroupCancel}
-                handleMoveDetail={handleMoveDetail}
+                    />
-            />
+                    </Col>
+                    <Col sm='8'>
+                        {selectGroup.cstmrSno !== 0 ? (
+                            <>
+                                <FlightPlanSearch
+                                    searchData={searchData}
+                                    handleChangeSearchData={handleChangeSearchData}
+                                    handleSearch={handleSearch}
+                                />
+                                <FlightPlanGrid
+                                    movePage={moveFlightPlanDetailPage}
+                                    planListData={planListData}
+                                    columns={columns}
+                                    handleMoveDetail={handleMoveDetail}
+                                />  
+                            </>
+                        ) : (
+                            <div className='no-dataTable'>
+                                나의 그룹 목록에서 상세보기를 클릭하세요.
+                            </div>
+                        )}
+                          
+                    </Col>
+                </Row>        
+            </div>
         </CustomMainLayout>
     )
 }

src/containers/basis/flight/plan/FlightPlanDetailContainer.js

@@ -19,7 +19,7 @@ const FlightPlanDetailContainer = () => {
     const location = useLocation();
     const urlParams = useParams();
     const flightState = useSelector(state => state.flightState);
-    const { detail, pilotSelect, arcrftSelect, areaList } = flightState;
+    const { detail, pilotSelect, arcrftSelect, areaList, selectGroup } = flightState;
     const [modal, setModal] = useState(initModal);
     const [detailData, setDetailData] = useState(initFlightBas.initDetail);
 
@@ -29,7 +29,11 @@ const FlightPlanDetailContainer = () => {
     }, [urlParams])
 
     useEffect(() => {        
-        setDetailData(detail);
+        setDetailData({
+            ...detail,
+            cstmrSno: selectGroup.cstmrSno,
+            groupId: selectGroup.groupId,            
+        });
     }, [detail])
 
     useEffect(() => {
@@ -99,36 +103,37 @@ const FlightPlanDetailContainer = () => {
 
     useEffect(() => {
         if(areaList !== undefined) {
-            // const detailAreaList = detailData.areaList.concat();
+            const areas = detailData.areaList.concat();
-            // const area = Object.assign({}, initFlightBas['area']);
             
+            const createAreaList = areas.map((area, i) => {
+                const targetArea = areaList[i];
                 
-            const detailAreaList = areaList.map((area) => {
+                let targetCoordList = area.coordList;
-              return {
+                if(targetArea.coordList) {
-                ...area
+                    targetCoordList = targetArea.coordList.map((coord, j) => {
-              }  
+                        return {
-            })
+                            ...coord,
-
+                            planAreaSno : area.planAreaSno,
-            // area.bufferZone = areaList[0].bufferZone;
+                            planAreaCoordSno : 0
-            // area.fltElev = areaList[0].fltElev;
+                        }
-            // area.fltMethod = areaList[0].fltMethod;
+                    })
-            // area.areaType = areaList[0]
+                }
-            // area.coordList = areaList[0].coordList;
-
-            // detailAreaList.forEach((a, i) => {
-            //     detailAreaList[i] = area;
                 
-            //     // if(a.planAreaSno === 0) { // create
-            //     //     areaList[i] = area;
-            //     // } else { // update
 
-            //     // }
+                return {
-            // });            
+                    ...area,
+                    areaType : targetArea.areaType,
+                    bufferZone: targetArea.bufferZone,
+                    fltElev : targetArea.fltElev,
+                    fltMethod : targetArea.fltMethod,
+                    coordList : targetCoordList
+                }
+            });        
 
             setDetailData(prevState => {
                 return {
                     ...prevState,
-                    ['areaList']: detailAreaList
+                    ['areaList']: createAreaList
                 }
             })
         }

src/modules/basis/flight/actions/basisFlightAction.ts

@@ -7,7 +7,7 @@ import {
     FlightPlanAreaDataList,
     // FlightPlanArea,
     FlightPlanData,
-    FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData
+    FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData, SelectGroupData
 } from '../models/basisFlightModel';
 
 
@@ -72,6 +72,9 @@ const AREA_COORDINATE_LIST = 'basis/flight/plan/area/COORDINATE_LIST';
 // 비행 구역 상세 저장
 const AREA_DETAIL_LIST = 'basis/flight/plan/area/DETAIL_LIST';
 
+// 비행계획서 그룹 선택
+const ROUP_SELECT = 'basis/flight/plan/group/select';
+
 export const PUBLIC_AREA_LIST = createAsyncAction(
     PUBLIC_AREA_LIST_REQUEST,
     PUBLIC_AREA_LIST_SUCCESS,
@@ -149,6 +152,9 @@ export const AREA_COORDINATE_LIST_SAVE = createAction(AREA_COORDINATE_LIST)<Flig
 // 비행 구역 상세 저장
 export const AREA_DETAIL_LIST_SAVE = createAction(AREA_DETAIL_LIST)<FlightPlanAreaDataList>();
 
+// 비행 계획서 그룹 선택
+export const FLIGHT_PLAN_GROUP_SELECT = createAction(ROUP_SELECT)<SelectGroupData>();
+
 const actions = {
   PUBLIC_AREA_LIST,
     // FLIGHT_PLAN_AREA,
@@ -164,7 +170,8 @@ const actions = {
     ARCRFT_SELECT,
     PILOT_ARCRFT_SELECT_INIT,
     AREA_COORDINATE_LIST_SAVE,
-    AREA_DETAIL_LIST_SAVE
+    AREA_DETAIL_LIST_SAVE,
+    FLIGHT_PLAN_GROUP_SELECT
 };
 
 export type FlightAction = ActionType<typeof actions>;

src/modules/basis/flight/models/basisFlightModel.ts

@@ -11,6 +11,13 @@ export interface FlightState {
   arcrftSelect: FlightPlanArcrftData | undefined
   areaCoordList: FlightPlanAreaData[] | undefined
   areaList: FlightPlanAreaData[] | undefined
+  selectGroup: SelectGroupData | undefined
+}
+
+export interface SelectGroupData {
+  cstmrSno: number,
+  groupId: string,
+  groupNm: string,
 }
 
 export interface PublicAreaData {
@@ -136,6 +143,8 @@ export interface FlightPlanArcrftDataList extends Array<FlightPlanArcrftData> {}
 
 // rq
 export interface FlightPlanListRqData {
+  groupId: string,
+  cstmrSno: number,
   schFltStDt: string,
   schFltEndDt: string,
   aprvlYn: string
@@ -167,6 +176,11 @@ export interface AreaCoordinateCreateData {
 
 
 export const initFlight = {
+  selectGroup: {
+    cstmrSno: 0,
+    groupId: '',
+    groupNm: ''
+  },
   publicAreaList: undefined,
   flightPlanArea: undefined,
   list: undefined,

src/modules/basis/flight/reducers/basisFlightReducer.ts

@@ -9,7 +9,7 @@ import { any } from 'prop-types';
 export const flightReducer = createReducer<FlightState, Actions.FlightAction>(initFlight)
   .handleAction(Actions.PUBLIC_AREA_LIST.success, (state, action) =>
     produce(state, draft => {
-      const {data} = action.payload;
+      const { data } = action.payload;
       draft.publicAreaList = data;
     })
   )
@@ -69,10 +69,10 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(in
   // 조종사, 기체 선택 초기화
   .handleAction(Actions.PILOT_ARCRFT_SELECT_INIT, (state, action) =>
     produce(state, draft => {
-        draft.arcrftSelect = undefined;
+      draft.arcrftSelect = undefined;
-        draft.pilotSelect = undefined;
+      draft.pilotSelect = undefined;
-        draft.areaList = undefined;
+      draft.areaList = undefined;
-        draft.areaCoordList = undefined;        
+      draft.areaCoordList = undefined;
     })
   )
   // 비행 구역 좌표 저장
@@ -82,11 +82,18 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(in
       draft.areaCoordList = data;
     })
   )
-   // 비행 구역 상세 저장
+  // 비행 구역 상세 저장
-   .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) =>
+  .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) =>
-   produce(state, draft => {
+    produce(state, draft => {
-     const data = action.payload;
+      const data = action.payload;
-     draft.areaList = data;
+      draft.areaList = data;
-     draft.areaCoordList = data;        
+      draft.areaCoordList = data;
-   })
+    })
- )
+  )
+  // 비행 계획서 그룹 선택
+  .handleAction(Actions.FLIGHT_PLAN_GROUP_SELECT, (state, action) =>
+    produce(state, draft => {
+      const data = action.payload;
+      draft.selectGroup = data;
+    })
+  )