그룹관리-승인관리(그룹별 조회 가능 기능 추가)

src/components/basis/group/BasisGroupApprovalSearch.js

@@ -49,7 +49,7 @@ export const BasisGroupApprovalSearch = props => {
   //     aprvYn: aprvYn
   //   });
   // }, [isCheckBox]);
-  let aprvYn='N';
+  let aprvYn = 'A';
   const initCheckState = {
     'all': aprvYn == 'A',
     'yes': (aprvYn == 'Y' || aprvYn == 'A'),
@@ -58,10 +58,10 @@ export const BasisGroupApprovalSearch = props => {
   const [checkState, setCheckState] = useState(initCheckState);
 
   const handleChangeCheckbox = (e) => {
-    const {name, value, checked} = e.target;
+    const { name, value, checked } = e.target;
     let val;
-    switch(value) {
+    switch (value) {
-      case 'A' :
+      case 'A':
         val = checked ? '' : '-';
         props.setParams({
           ...props.params,
@@ -143,7 +143,7 @@ export const BasisGroupApprovalSearch = props => {
                                   type='text'
                                   id='groupNm'
                                   name='groupNm'
-                                  value={props.params.groupNm ||''}
+                                  value={props.params.groupNm || ''}
                                   onChange={props.handlerInput}
                                   bsSize='sm'
                                   onKeyPress={props.onKeyPress}
@@ -200,14 +200,14 @@ export const BasisGroupApprovalSearch = props => {
                             value='A'
                             checked={checkState.all}
                             onChange={handleChangeCheckbox}
-                            // defaultChecked={isCheckBox.all}
+                          // defaultChecked={isCheckBox.all}
-                            // onClick={() =>
+                          // onClick={() =>
-                            //   setIsCheckBox({
+                          //   setIsCheckBox({
-                            //     all: !isCheckBox.all,
+                          //     all: !isCheckBox.all,
-                            //     yes: !isCheckBox.all,
+                          //     yes: !isCheckBox.all,
-                            //     no: !isCheckBox.all
+                          //     no: !isCheckBox.all
-                            //   })
+                          //   })
-                            // }
+                          // }
                           />
                           <CustomInput
                             inline
@@ -218,13 +218,13 @@ export const BasisGroupApprovalSearch = props => {
                             value='Y'
                             checked={checkState.yes}
                             onChange={handleChangeCheckbox}
-                            // defaultChecked={isCheckBox.yes || isCheckBox.all}
+                          // defaultChecked={isCheckBox.yes || isCheckBox.all}
-                            // onClick={() =>
+                          // onClick={() =>
-                            //   setIsCheckBox({
+                          //   setIsCheckBox({
-                            //     all: false,
+                          //     all: false,
-                            //     yes: !isCheckBox.yes
+                          //     yes: !isCheckBox.yes
-                            //   })
+                          //   })
-                            // }
+                          // }
                           />
                           <CustomInput
                             inline
@@ -235,13 +235,13 @@ export const BasisGroupApprovalSearch = props => {
                             value='N'
                             checked={checkState.no}
                             onChange={handleChangeCheckbox}
-                            // defaultChecked={isCheckBox.no || isCheckBox.all}
+                          // defaultChecked={isCheckBox.no || isCheckBox.all}
-                            // onClick={() =>
+                          // onClick={() =>
-                            //   setIsCheckBox({
+                          //   setIsCheckBox({
-                            //     all: false,
+                          //     all: false,
-                            //     no: !isCheckBox.no
+                          //     no: !isCheckBox.no
-                            //   })
+                          //   })
-                            // }
+                          // }
                           />
                         </div>
                       </div>

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -1,27 +1,183 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { Button, Col, Row } from 'reactstrap';
-import { Button } from 'reactstrap';
 import { BasisGroupApprovalGrid } from '../../../components/basis/group/BasisGroupApprovalGrid';
 import { BasisGroupApprovalSearch } from '../../../components/basis/group/BasisGroupApprovalSearch';
 import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import * as Actions from '../../../modules/basis/group/actions/basisGroupAction';
+import * as GroupActions from '../../../modules/basis/group/actions/basisGroupAction';
+import { BasisGroupDronGrid } from '../../../components/basis/dron/BasisGroupDronGrid';
 
 export const BasisGroupApprovalContainer = props => {
   const { aprvList, aprvCount } = useSelector(state => state.groupState);
 
   const { user } = useSelector(state => state.authState);
+  const { joinList, joinListCount } = useSelector(state => state.groupState);
+  const { selectData } = useSelector(state => state.groupState);
 
   const dispatch = useDispatch();
-  const history = useHistory();
-
   const titleName = '승인관리';
-
   const [params, setParams] = useState({
-    cstmrSno: user?.cstmrSno
+    cstmrSno: user?.cstmrSno,
+    aprvYn: '',
   });
+  const column = [
+    {
+      name: '그룹명',
+      selector: 'groupNm',
+      minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return row?.groupNm;
+        // return selectData;
+      }
+    },
+    {
+      name: '그룹 코드',
+      selector: 'groupId',
+      minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return row?.groupId;
+      }
+    },
+
+    {
+      name: '',
+      // selector: 'cntrlStDate',
+      // width: '100px',
+      sortable: true,
+      cell: row => {
+        return selectData?.groupId === row?.groupId ? (
+          <Button.Ripple
+            color='danger'
+            className='badge badge-danger'
+            onClick={() => handlerCancel()}
+          >
+            선택취소
+          </Button.Ripple>
+        ) : (
+          <Button.Ripple
+            color='primary'
+            className='badge badge-primary'
+            onClick={() =>
+              handlerDetail(
+                row?.groupId,
+                row?.groupNm,
+                row?.groupAuthCd,
+                row?.aprvlYn,
+              )
+            }
+          >
+            상세보기
+          </Button.Ripple>
+        );
+      }
+    }
+  ];
+  const handlerDetail = (groupId, groupNm) => {
+    // 권한 상관 없이 모두 조회 가능
+    // param.cstmrSno = user.cstmrSno;
+    dispatch(Actions.SELECT({ groupId: groupId, groupNm: groupNm }));
+    if (user?.cstmrSno) {
+      setParams({
+        ...params,
+        cstmrSno: user?.cstmrSno,
+        aprvYn: '',
+        groupId: groupId
+      });
+
+      dispatch(
+        Actions.APPROVAL_LIST.request({
+          searchParams: { cstmrSno: user?.cstmrSno, aprvYn: '', groupId: groupId }
+
+        })
+
+      ); 
+    }
+  };
+
+  const handlerCancel = () => {
+    dispatch(Actions.SELECT());
+
+    setParams({
+      ...params,
+      groupId: '',
+      groupNm: ''
+    });
+  };
+
+  useEffect(() => {
+    if (user?.cstmrSno) {
+      setParams({
+        ...params,
+        cstmrSno: user?.cstmrSno,
+        groupId: selectData?.groupId,
+        aprvYn: 'A'
+      });
+      dispatch(
+        GroupActions.JOIN_LIST.request({
+          cstmrSno: user?.cstmrSno,
+          groupId: selectData?.groupId
+        })
 
+      );
+    }
+  }, [user]);
+  const dronColumns = [
+    {
+      name: '모델명',
+      selector: 'arcrftModelNm',
+      minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return row?.arcrftModelNm;
+      }
+    },
+    {
+      name: '종류',
+      selector: 'arcrftTypeCd',
+      minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return GET_ARCTFT_TYPE_CD(row?.arcrftTypeCd);
+      }
+    },
+    {
+      name: '제작사',
+      selector: 'prdctCmpnNm',
+      minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return row?.prdctCmpnNm;
+      }
+    },
+    {
+      name: '수정일자',
+      selector: 'updateDt',
+      minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return moment(row?.updateDt).format('MM-DD HH:mm');
+      }
+    },
+    {
+      name: '상세보기',
+      // selector: 'cntrlStDate',
+      // minWidth: '102px',
+      sortable: true,
+      cell: row => {
+        return (
+          <Link
+            to={`/basis/dron/detail/${row.arcrftSno}`}
+          >
+            상세보기
+          </Link>
+        );
+      }
+    }
+  ];
   const [saveData, setSaveData] = useState({
     cstmrGroupSno: '',
     // aprvlYn: 'N', //가입은 USER 로만
@@ -127,26 +283,10 @@ export const BasisGroupApprovalContainer = props => {
     }
   ];
 
-  useEffect(() => {
-    if (user?.cstmrSno) {
-      setParams({
-        ...params,
-        cstmrSno: user?.cstmrSno,
-        aprvYn: 'N'
-      });
-
-      dispatch(
-        Actions.APPROVAL_LIST.request({
-          searchParams: { cstmrSno: user?.cstmrSno, aprvYn: 'N' }
-          //  searchParams: params
-        })
-      );
-    }
-  }, [user]);
 
   const onKeyPress = e => {
     if (e.key == 'Enter') {
-      handlerSearch();
+      //  handlerSearch();
     }
   };
 
@@ -195,25 +335,52 @@ export const BasisGroupApprovalContainer = props => {
       [name]: value
     });
   };
-
   return (
     <CustomMainLayout title={titleName}>
-      <BasisGroupApprovalSearch
+      <div className='pal-card-box'>
-        handlerInput={handlerInput}
+        <Row>
-        onKeyPress={onKeyPress}
+          <Col sm='4'>
-        params={params}
+            <BasisGroupDronGrid
-        setParams={setParams}
+              data={joinList}
-        handlerSearch={handlerSearch}
+              title={'그룹'}
-      />
+              columns={column}
-
+              count={joinListCount}
-      <BasisGroupApprovalGrid
+              pagination={false}
-        data={aprvList}
+            />
-        title={titleName}
+          </Col>
-        columns={columns}
+          <Col sm='8'>
-        count={aprvCount}
+            {!selectData ? (
-        pagination={false}
+              <div className='no-dataTable'>
-      />
+                그룹 목록에서 상세보기를 클릭하세요.
-
+              </div>
+            ) : (
+              <BasisGroupApprovalSearch
+                handlerInput={handlerInput}
+                onKeyPress={onKeyPress}
+                params={params}
+                setParams={setParams}
+                handlerSearch={handlerSearch}
+              />
+            )}
+            <Col sm='12'>
+              {!selectData ? (
+                <>
+                  <div className='no-dataTable'>
+                  </div>
+                </>
+              ) : (
+                <BasisGroupApprovalGrid
+                  data={aprvList}
+                  title={titleName}
+                  columns={columns}
+                  count={aprvCount}
+                  pagination={false}
+                />
+              )}
+            </Col>
+          </Col>
+        </Row>
+      </div>
       <ConfirmModal
         modal={modal}
         setModal={setModal}

src/modules/basis/group/actions/basisGroupAction.ts

@@ -9,7 +9,8 @@ import {
   UserGroupData,
   UserGroupState,
   GroupState,
-  MainGroupData
+  MainGroupData,
+  SelectData
 } from '../models/basisGroupModel';
 
 //# 나의 그룹 목록 조회
@@ -101,6 +102,9 @@ const GROUP_MAIN_LIST_REQUEST = 'basis/group/GROUP_MAIN_LIST_REQUEST';
 const GROUP_MAIN_LIST_SUCCESS = 'basis/group/GROUP_MAIN_LIST_SUCCESS';
 const GROUP_MAIN_LIST_FAILURE = 'basis/group/GROUP_MAIN_LIST_FAILURE';
 
+//그룹 선택
+const SELECT_GROUP = 'basis/group/SELECT_GROUP';
+
 export const MY_LIST = createAsyncAction(
   MY_LIST_REQUEST,
   MY_LIST_SUCCESS,
@@ -207,6 +211,8 @@ export const USER_DELEGATE = createAsyncAction(
   USER_DELEGATE_FAILURE
 )<UserGroupState, string, AxiosError>();
 
+export const SELECT = createAction(SELECT_GROUP)<SelectData>();
+
 const actions = {
   MY_LIST,
   JOIN_LIST,
@@ -225,7 +231,9 @@ const actions = {
   USER_UPDATE,
   USER_DELEGATE,
   GROUP_MYLIST,
-  GROUP_MAIN_LIST
+  GROUP_MAIN_LIST,
+  SELECT
 };
 
+
 export type GroupAction = ActionType<typeof actions>;

src/modules/basis/group/models/basisGroupModel.ts

@@ -18,6 +18,8 @@ export interface GroupState {
   newGroupId: String | '';
   searchParams: string | '';
   error: ErrorModel | undefined;
+  selectData: SelectData | undefined;
+
 }
 
 export interface GroupSearchData {
@@ -33,7 +35,10 @@ export interface GroupData {
   createDt: Date;
   updateDt: Date;
 }
-
+export interface SelectData {
+  groupId: string;
+  groupNm: string;
+}
 export interface JoinGroupData {
   cstmrGroupSno: number;
   groupId: string;
@@ -111,5 +116,6 @@ export const initGroup = {
   groupId: '',
   newGroupId: '',
   searchParams: '',
-  error: undefined
+  error: undefined,
+  selectData: undefined
 };

src/modules/basis/group/reducers/basisGroupReducer.ts

@@ -45,6 +45,7 @@ export const groupReducer = createReducer<GroupState, Actions.GroupAction>(
       draft.mainListCount = count;
     })
   )
+  
   .handleAction(Actions.GROUP_MYLIST.success, (state, action) =>
     produce(state, draft => {
       const { data, count } = action.payload;
@@ -96,4 +97,10 @@ export const groupReducer = createReducer<GroupState, Actions.GroupAction>(
       draft.userList = data;
       draft.userCount = count;
     })
+  )
+  .handleAction(Actions.SELECT, (state, action) =>
+    produce(state, draft => {
+      const selectData = action.payload;
+      draft.selectData = selectData;
+    })
   );