Merge pull request #138 from PLADI-ALM/feat/PDW-93-car-return

[PDW-93/feat] 관리자 차량/장비 반납 모달 추가
PLADI-ALM · Nov 19, 2023 · ad7ed37 · ad7ed37
2 parents 4564597 + 9f38275
commit ad7ed37
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 52 deletions.
diff --git a/src/components/capsule/DropBox.js b/src/components/capsule/DropBox.js
@@ -33,7 +33,7 @@ const NoBorderSelect = styled(Select)`
 
 const ModalSelect = styled(Select)`
   width: 280px;
-  height: 100%;
+  height: ${props => props.height};
   border: 2px solid #E6E6E6;
   -webkit-appearance: none;
   -moz-appearance: none;

diff --git a/src/components/modal/BigModal.js b/src/components/modal/BigModal.js
@@ -62,14 +62,19 @@ export const AttrContainer = styled.div`
   display: flex;
   align-items: center;
   margin-bottom: 25px;
-  height: 40px;
+  //height: 40px;
 `
 
 export const AttrLabel = styled.div`
   width: 120px;
   font-size: 20px;
   text-align: left;
-  line-height: 40px;
+`
+
+export const AttrLabelCheckbox = styled(AttrLabel)`
+  width: fit-content;
+  line-height: 20px;
+  font-size: 18px;
 `
 
 export const AttrInput = styled.input`
@@ -87,6 +92,24 @@ export const AttrInput = styled.input`
   }
 `
 
+export const AttrTextArea = styled.textarea`
+  border: 2px solid #E6E6E6;
+  border-radius: 8px;
+  height: 80px;
+  width: 280px;
+  font-size: 18px;
+  color: #757575;
+  padding: 10px;
+  outline: none;
+  box-sizing: border-box;
+`
+
+export const AttrInputCheckBox = styled(AttrInput)`
+  height: 20px;
+  width: 20px;
+  margin-right: 20px;
+`
+
 // 하단 버튼 컨테이너
 export const BottomBtnContainer = styled.div`
   width: 100%;

diff --git a/src/components/modal/CarReturnModal.js b/src/components/modal/CarReturnModal.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {AdminBookingAxios} from 'api/AxiosApi';
+import {getToken} from 'utils/IsLoginUtil';
+import {basicError} from 'utils/ErrorHandlerUtil';
+import {
+    AttrContainer,
+    AttrInput, AttrInputCheckBox,
+    AttrLabel, AttrLabelCheckbox,
+    AttrsForm, AttrTextArea,
+    BottomBtnContainer,
+    ModalBackdrop,
+    ModalTitle,
+    ModalView,
+    TitleContainer
+} from 'components/modal/BigModal';
+import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton';
+
+export function CarReturnModal(props) {
+    const returnCar = (e) => {
+        e.preventDefault()
+        const inputLocation = e.target.location.value
+        const inputEtc = e.target.etc.value
+        const isChecked = e.target.check.checked
+
+        if (inputLocation === "") {
+            alert("반납장소를 입력해주세요.")
+        } else if (!isChecked) {
+            alert("차량과 차키를 실제로 반납하시고 반납 처리해주세요.")
+        } else {
+            AdminBookingAxios.patch(`/cars/${props.id}/return`, {
+                returnLocation: inputLocation,
+                remark: inputEtc
+            }, {
+                headers: {
+                    Authorization: getToken()
+                }
+            })
+                .then((response) => {
+                    alert("반납되었습니다.")
+                    window.location.reload();
+                })
+                .catch((error) => {
+                    basicError(error)
+                })
+        }
+    };
+
+    return (
+        <ModalBackdrop onClick={props.handler}>
+            <ModalView onClick={(e) => e.stopPropagation()}>
+                <TitleContainer>
+                    <ModalTitle>차량 반납</ModalTitle>
+                </TitleContainer>
+                <AttrsForm method="post" id="return-form" onSubmit={returnCar}>
+                    <AttrContainer>
+                        <AttrLabel>반납장소<br/>(주차위치)</AttrLabel>
+                        <AttrInput type='text' name='location'/>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>파손 및<br/>특이사항</AttrLabel>
+                        <AttrTextArea name='etc'/>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrInputCheckBox type='checkbox' name='check'/>
+                        <AttrLabelCheckbox>
+                            반납장소에 반납하셨나요?<br/>차키 반납까지 완료 후, 작성해주세요.
+                        </AttrLabelCheckbox>
+                    </AttrContainer>
+                    <BottomBtnContainer>
+                        <InputPurpleButton value={'반납'}/>
+                        <BigSquareButton name={"취소"} color={"white"} click={props.handler}/>
+                    </BottomBtnContainer>
+                </AttrsForm>
+            </ModalView>
+        </ModalBackdrop>
+    );
+}
diff --git a/src/components/modal/ResourceReturnModal.js b/src/components/modal/ResourceReturnModal.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import {AdminBookingAxios} from 'api/AxiosApi';
+import {getToken} from 'utils/IsLoginUtil';
+import {basicError} from 'utils/ErrorHandlerUtil';
+import {
+    AttrContainer,
+    AttrInput, AttrInputCheckBox,
+    AttrLabel, AttrLabelCheckbox,
+    AttrsForm, AttrTextArea,
+    BottomBtnContainer,
+    ModalBackdrop,
+    ModalTitle,
+    ModalView,
+    TitleContainer
+} from 'components/modal/BigModal';
+import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton';
+
+export function ResourceReturnModal(props) {
+    const returnResource = (e) => {
+        e.preventDefault()
+        const inputLocation = e.target.location.value
+        const inputEtc = e.target.etc.value
+        const isChecked = e.target.check.checked
+
+        if (inputLocation === "") {
+            alert("반납장소를 입력해주세요.")
+        } else if (!isChecked) {
+            alert("장비를 실제로 반납하시고 반납 처리해주세요.")
+        } else {
+            AdminBookingAxios.patch(`/resources/${props.id}/return`, {
+                returnLocation: inputLocation,
+                remark: inputEtc
+            }, {
+                headers: {
+                    Authorization: getToken()
+                }
+            })
+                .then((response) => {
+                    alert("반납되었습니다.")
+                    window.location.reload();
+                })
+                .catch((error) => {
+                    basicError(error)
+                })
+        }
+    };
+
+    return (
+        <ModalBackdrop onClick={props.handler}>
+            <ModalView onClick={(e) => e.stopPropagation()}>
+                <TitleContainer>
+                    <ModalTitle>장비 반납</ModalTitle>
+                </TitleContainer>
+                <AttrsForm method="post" id="return-form" onSubmit={returnResource}>
+                    <AttrContainer>
+                        <AttrLabel>반납장소<br/>(현재위치)</AttrLabel>
+                        <AttrInput type='text' name='location'/>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrLabel>파손 및<br/>특이사항</AttrLabel>
+                        <AttrTextArea name='etc'/>
+                    </AttrContainer>
+                    <AttrContainer>
+                        <AttrInputCheckBox type='checkbox' name='check'/>
+                        <AttrLabelCheckbox>
+                            반납장소에 반납하셨나요?
+                        </AttrLabelCheckbox>
+                    </AttrContainer>
+                    <BottomBtnContainer>
+                        <InputPurpleButton value={'반납'}/>
+                        <BigSquareButton name={"취소"} color={"white"} click={props.handler}/>
+                    </BottomBtnContainer>
+                </AttrsForm>
+            </ModalView>
+        </ModalBackdrop>
+    );
+}
diff --git a/src/components/modal/UserModal.js b/src/components/modal/UserModal.js
@@ -21,7 +21,7 @@ import {
     BasicRadioInput
 } from 'components/capsule/RoleCapsule';
 import BigSquareButton, {InputPurpleButton} from 'components/button/BigSquareButton';
-import {AffiliationList} from "../../constants/ToggleList";
+import {AffiliationList} from "constants/ToggleList";
 
 export function UserModal(props) {
     const [affiliationOptionList, setAffiliationOptionList] = useState([]);
@@ -261,13 +261,15 @@ export function UserModal(props) {
                         <SelectToggleInModal name='affiliation' items={affiliationOptionList}
                                              value={currentAffiliation.current}
                                              onChange={handleAffiliationChange}
+                                             height={'40px'}
                                              disabled={props.my}/>
                     </AttrContainer>
                     <AttrContainer>
                         <AttrLabel>부서</AttrLabel>
                         <SelectToggleInModal name='department' items={departmentOptionList}
                                              value={currentDepartment.current}
                                              onChange={handleDepartmentChange}
+                                             height={'40px'}
                                              disabled={props.my}/>
                     </AttrContainer>
                     <AttrContainer>

diff --git a/src/pages/admin/carBookings/CarBookingManageCell.js b/src/pages/admin/carBookings/CarBookingManageCell.js
@@ -1,13 +1,19 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {BookedLineTr} from '../../basic/myBookings/BookedList';
 import {StatusCircle, StatusContainer, StatusText} from 'components/booking/StatusTag';
 import {BOOKED, findStatus, USING} from 'constants/BookingStatus';
 import {AdminBookingAxios} from 'api/AxiosApi';
 import {getToken} from 'utils/IsLoginUtil';
 import {basicError} from 'utils/ErrorHandlerUtil';
 import {SettingButton, SettingButtonContainer} from "../officeBookings/OfficeBookingManageCell";
+import {CarReturnModal} from "../../../components/modal/CarReturnModal";
 
 function CarBookingManageCell(props) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const openReturnModalHandler = () => {
+        setIsOpen(!isOpen)
+    }
 
     const rejectResource = () => {
         if (window.confirm(`${props.name}의 예약을 반려하시겠습니까?`)) {
@@ -29,27 +35,6 @@ function CarBookingManageCell(props) {
         }
     };
 
-    const returnResource = () => {
-        if (window.confirm(`${props.name}를 반납하시겠습니까?`)) {
-            AdminBookingAxios.patch(`cars/${props.id}/return`, null, {
-                headers: {
-                    Authorization: getToken()
-                }
-            })
-                .then((Response) => {
-                    alert('반납 완료되었습니다.')
-                    window.location.reload()
-                })
-                .catch((error) => {
-                    basicError(error)
-                })
-
-            props.refresh()
-        } else {
-            alert("반납을 취소하셨습니다.")
-        }
-    };
-
     const moveToDetail = () => {
         window.location.href = `/admin/carBooking/${props.id}`
     };
@@ -61,7 +46,7 @@ function CarBookingManageCell(props) {
 
     var usingButton = (
         <SettingButtonContainer>
-            <SettingButton onClick={returnResource}>반납</SettingButton> | <SettingButton
+            <SettingButton onClick={openReturnModalHandler}>반납</SettingButton> | <SettingButton
             onClick={moveToDetail}>상세보기</SettingButton>
         </SettingButtonContainer>)
 
@@ -88,6 +73,10 @@ function CarBookingManageCell(props) {
                 {status === USING ? usingButton :
                     status === BOOKED ? bookingButton : cancelButton
                 }
+                {isOpen ?
+                    <CarReturnModal id={props.id} handler={openReturnModalHandler}/>
+                    : null
+                }
             </td>
         </BookedLineTr>
     )

diff --git a/src/pages/admin/resourceBookings/ResourceBookingManageCell.js b/src/pages/admin/resourceBookings/ResourceBookingManageCell.js
@@ -1,13 +1,21 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {BookedLineTr} from '../../basic/myBookings/BookedList';
 import {StatusCircle, StatusContainer, StatusText} from 'components/booking/StatusTag';
 import {BOOKED, findStatus, USING, WAITING} from 'constants/BookingStatus';
 import {AdminBookingAxios} from 'api/AxiosApi';
 import {getToken} from 'utils/IsLoginUtil';
 import {basicError} from 'utils/ErrorHandlerUtil';
 import {SettingButton, SettingButtonContainer} from "../officeBookings/OfficeBookingManageCell";
+import {CarReturnModal} from "../../../components/modal/CarReturnModal";
+import {ResourceReturnModal} from "../../../components/modal/ResourceReturnModal";
 
 function ResourceBookingManageCell(props) {
+    const [isOpen, setIsOpen] = useState(false)
+
+    const openReturnModalHandler = () => {
+        setIsOpen(!isOpen)
+    }
+
     const allowResource = () => {
         if (window.confirm(`${props.name}의 예약을 허가하시겠습니까?`)) {
             AdminBookingAxios.patch(`resources/${props.id}/allow`, null, {
@@ -49,33 +57,12 @@ function ResourceBookingManageCell(props) {
         }
     };
 
-    const returnResource = () => {
-        if (window.confirm(`${props.name}를 반납하시겠습니까?`)) {
-            AdminBookingAxios.patch(`resources/${props.id}/return`, null, {
-                headers: {
-                    Authorization: getToken()
-                }
-            })
-                .then((Response) => {
-                    alert('반납 완료되었습니다.')
-                    window.location.reload()
-                })
-                .catch((error) => {
-                    basicError(error)
-                })
-
-            props.refresh()
-        } else {
-            alert("반납을 취소하셨습니다.")
-        }
-    };
-
     const moveToDetail = () => {
         window.location.href = `/admin/resourceBooking/${props.id}`
     };
 
     var status = findStatus(props.status)
-    var watingButton = (
+    var waitingButton = (
         <SettingButtonContainer>
             <SettingButton onClick={allowResource}>허가</SettingButton> | <SettingButton
             onClick={rejectResource}>반려</SettingButton> | <SettingButton onClick={moveToDetail}>상세보기</SettingButton>
@@ -86,7 +73,7 @@ function ResourceBookingManageCell(props) {
 
     var usingButton = (
         <SettingButtonContainer>
-            <SettingButton onClick={returnResource}>반납</SettingButton> | <SettingButton
+            <SettingButton onClick={openReturnModalHandler}>반납</SettingButton> | <SettingButton
             onClick={moveToDetail}>상세보기</SettingButton>
         </SettingButtonContainer>)
 
@@ -110,10 +97,14 @@ function ResourceBookingManageCell(props) {
                 </StatusContainer>
             </td>
             <td width="15%">
-                {status === WAITING ? watingButton :
+                {status === WAITING ? waitingButton :
                     status === USING ? usingButton :
                         status === BOOKED ? bookingButton : cancelButton
                 }
+                {isOpen ?
+                    <ResourceReturnModal id={props.id} handler={openReturnModalHandler}/>
+                    : null
+                }
             </td>
         </BookedLineTr>
     )