[권한정리] - 기체 목록

src/components/basis/dron/BasisDronGrid.js

@@ -1,27 +1,8 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import {
+import { Card, Button } from 'reactstrap';
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
-import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 
 export const BasisDronGrid = props => {
+  // console.log(props.isMyGroup);
   return (
     <>
       <div className='mt-2 cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
@@ -34,6 +15,7 @@ export const BasisDronGrid = props => {
             color='primary'
             size='sm'
             onClick={props.handlerGroupCreate}
+            {...(props?.isMyGroup ? {} : { disabled: true })}
           >
             기체등록
           </Button.Ripple>

src/containers/basis/dron/BasisDronContainer.js

@@ -2,11 +2,18 @@ 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 } from 'reactstrap';
+import {
+  Button,
+  Col,
+  Row,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from 'reactstrap';
 import { BasisDronGrid } from '../../../components/basis/dron/BasisDronGrid';
 import { BasisGroupDronGrid } from '../../../components/basis/dron/BasisGroupDronGrid';
 import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
-// import { InfoModal } from '../../../components/modal/InfoModal';
 import * as Actions from '../../../modules/basis/dron/actions/basisDronAction';
 import * as GroupActions from '../../../modules/basis/group/actions/basisGroupAction';
 import { GET_ARCTFT_TYPE_CD } from '../../../utility/CondeUtil';
@@ -30,43 +37,44 @@ export const BasisDronContainer = props => {
     desc: ''
   });
 
+  const [isMyGroup, setIsMyGroup] = useState();
+
   const columns = [
     {
-      name: '생성일시',
+      name: '그룹명',
-      selector: row => row?.createDt,
+      selector: row => row.groupNm,
+      minWidth: '102px',
       sortable: true,
       cell: row => {
-        return row?.createDt ? row.createDt : '-';
+        return row?.groupNm;
+        // return selectData;
       }
     },
     {
-      name: '가입일시',
+      name: '그룹 코드',
-      selector: row => row?.joinDt,
+      selector: row => row.groupId,
+      minWidth: '102px',
       sortable: true,
       cell: row => {
-        return row?.joinDt ? row.joinDt : '-';
+        return row?.groupId;
       }
     },
     {
-      name: '그룹명',
+      name: '생성일시',
-      selector: row => row.groupNm,
+      selector: row => row?.createDt,
-      minWidth: '102px',
       sortable: true,
       cell: row => {
-        return row?.groupNm;
+        return row?.createDt ? row.createDt : '-';
-        // return selectData;
       }
     },
     {
-      name: '그룹 코드',
+      name: '가입일시',
-      selector: row => row.groupId,
+      selector: row => row?.joinDt,
-      minWidth: '102px',
       sortable: true,
       cell: row => {
-        return row?.groupId;
+        return row?.joinDt ? row.joinDt : '-';
       }
     },
-
     {
       name: '',
       // selector: 'cntrlStDate',
@@ -144,11 +152,63 @@ export const BasisDronContainer = props => {
       // minWidth: '102px',
       sortable: true,
       cell: row => {
-        return <Link to={`/basis/dron/detail/${row.arcrftSno}`}>상세보기</Link>;
+        const [isHover, setIsHover] = useState(false);
+        const enter = () => {
+          setIsHover(true);
+        };
+        const leave = () => {
+          setIsHover(false);
+        };
+
+        let mine = false;
+        if (user.authId === 'SUPER') {
+          mine = true;
+        } else if (user.authId === 'ADMIN' || user.authId === 'USER') {
+          if (row.createUserId === user.userId) {
+            mine = true;
+          }
+        }
+
+        return (
+          <>
+            {mine ? (
+              <>
+                <Link to={`/basis/dron/detail/${row.arcrftSno}`}>상세보기</Link>
+              </>
+            ) : (
+              <>
+                {/* <span
+                  disabled={true}
+                  style={{
+                    textDecoration: 'underline',
+                    cursor: isHover ? 'pointer' : '',
+                    color: isHover ? '#7367f0' : ''
+                  }}
+                  onMouseEnter={enter}
+                  onMouseLeave={leave}
+                  onClick={handlerNotMine}
+                >
+                  상세보기
+                </span> */}
+                -
+              </>
+            )}
+          </>
+        );
       }
     }
   ];
 
+  const handlerNotMine = () => {
+    setModal({
+      isOpen: true,
+      title: '조회 불가',
+      desc: '사용자가 등록한 기체가 아닙니다.',
+      color: 'danger'
+    });
+    return;
+  };
+
   useEffect(() => {
     handlerCancel();
     // if (selectData) {
@@ -193,26 +253,15 @@ export const BasisDronContainer = props => {
     });
     dispatch(Actions.LIST.request({ groupId: groupId }));
 
-    // if (
+    let my = false;
-    //   // groupAuthCd === 'CREATER' ||
+    if (user.authId === 'SUPER') {
-    //   groupAuthCd === 'MASTER' || user.authId ==='SUPER' ||
+      my = true;
-    //   // (aprvlYn === 'Y' && groupAuthCd === 'ADMIN')
+    } else if (user.authId === 'ADMIN' || user.authId === 'USER') {
-    //   (aprvlYn === 'Y' && groupAuthCd === 'LEADER')
+      if (groupAuthCd) {
-    // ) {
+        my = true;
-    //   dispatch(Actions.SELECT({ groupId: groupId, groupNm: groupNm }));
+      }
-    //   setParams({
+    }
-    //     ...params,
+    setIsMyGroup(my);
-    //     groupId: groupId,
-    //     groupNm: groupNm
-    //   });
-    //   dispatch(Actions.LIST.request({ groupId: groupId }));
-    // } else {
-    //   setModal({
-    //     isOpen: true,
-    //     title: '권한 확인',
-    //     desc: '기체정보 확인을 위해서는 운영자 권한이 필요합니다. 운영자에게 권한을 부여받고 다시 시도해 주세요.'
-    //   });
-    // }
   };
 
   const handlerGroupCreate = () => {
@@ -279,12 +328,35 @@ export const BasisDronContainer = props => {
                 pagination={true}
                 paginationPerPage={10}
                 paginationRowsPerPageOptions={[10, 20, 30, 40]}
+                isMyGroup={isMyGroup}
               />
             )}
           </Col>
         </Row>
       </div>
-      {/* <InfoModal modal={modal} setModal={setModal} /> */}
+      <div className='vertically-centered-modal'>
+        <Modal
+          isOpen={modal.isOpen}
+          toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+          modalClassName={'modal-' + `${modal.color}`}
+          className='modal-dialog-centered'
+        >
+          <ModalHeader
+            toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+          >
+            {modal.title}
+          </ModalHeader>
+          <ModalBody>{modal.desc}</ModalBody>
+          <ModalFooter>
+            <Button
+              color={modal.color}
+              onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
+            >
+              확인
+            </Button>{' '}
+          </ModalFooter>
+        </Modal>
+      </div>
     </CustomMainLayout>
   );
 };