Merge pull request #154 from PLADI-ALM/feat/PDW-19-equipment

[PDW-21/feat] 비품 수정 및 삭제
PLADI-ALM · Dec 1, 2023 · 1671da7 · 1671da7
2 parents cbd86aa + b993a0d
commit 1671da7
Show file tree

Hide file tree

Showing 10 changed files with 118 additions and 38 deletions.
diff --git a/src/components/card/EquipmentInfo.js b/src/components/card/EquipmentInfo.js
@@ -7,6 +7,7 @@ import MyInfoIcon from "assets/images/sidebarIcon/MyInfoIcon.svg"
 import LocationIcon from "assets/images/Location.svg"
 import MoreIcon from "assets/images/triple_dot_icon_black.svg";
 import EmptyImg from "assets/images/EmptyImg.svg"
+import {EquipmentMoreModal} from "../modal/EquipmentMoreModal";
 
 // 카드 박스
 export const Card = styled.div`
@@ -16,6 +17,7 @@ export const Card = styled.div`
   border: 1px solid #E6E6E6;
   box-sizing: border-box;
   padding: 15px;
+  position: relative;
 `
 
 // 상단줄 컨테이너
@@ -24,11 +26,13 @@ const TopContainer = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
+  position: relative;
 `
 
 const TopGatherContainer = styled.div`
   display: flex;
   align-items: center;
+  position: relative;
 `
 
 // 비품명 컨테이너
@@ -74,11 +78,15 @@ function EquipmentInfo(props) {
             <TopContainer>
                 <TopGatherContainer>
                     <EquipmentNameContainer>{props.name}</EquipmentNameContainer>
-                    <CardText>{props.quantity}개</CardText>
+                    <CardText>{props.quantity}</CardText>
                 </TopGatherContainer>
                 <TopGatherContainer>
                     <MiniCapsule color="purple" text={props.category}/>
                     <MoreBtn src={MoreIcon} onClick={openMoreModalHandler}/>
+                    {
+                        isOpen &&
+                        <EquipmentMoreModal id={props.equipmentId}/>
+                    }
                 </TopGatherContainer>
             </TopContainer>
 

diff --git a/src/components/modal/EquipmentMoreModal.js b/src/components/modal/EquipmentMoreModal.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import {EquipmentMoreModalView, MenuText, NormalDiv, RedDiv} from "./MoreModal";
+import {EquipmentsAxios} from "api/AxiosApi";
+import {getToken} from "utils/IsLoginUtil";
+import {basicError} from "utils/ErrorHandlerUtil";
+
+export function EquipmentMoreModal(props) {
+
+    const editEquipment = () => {
+        window.location.href = `/equipments/${props.id}/edit`
+    };
+
+    const deleteEquipment = () => {
+        EquipmentsAxios.delete(`/${props.id}`, {
+            headers: {
+                Authorization: getToken()
+            }
+        })
+            .then((response) => {
+                alert("삭제되었습니다.")
+                window.location.reload();
+            })
+            .catch((error) => {
+                basicError(error)
+            })
+    };
+
+    return (
+        <>
+            <EquipmentMoreModalView onClick={(e) => e.stopPropagation()}>
+                <NormalDiv>
+                    <MenuText onClick={editEquipment}>수정</MenuText>
+                </NormalDiv>
+                <RedDiv>
+                    <MenuText onClick={deleteEquipment}>삭제</MenuText>
+                </RedDiv>
+            </EquipmentMoreModalView>
+        </>
+    );
+}
diff --git a/src/components/modal/MoreModal.js b/src/components/modal/MoreModal.js
@@ -9,8 +9,6 @@ export const MoreModalView = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
-  position: absolute;
-  right: 3%;
   border-radius: 10px;
   background-color: #ffffff;
   box-sizing: border-box;
@@ -19,12 +17,22 @@ export const MoreModalView = styled.div`
   padding: 0 5px;
 `
 
+export const UserMoreModalView = styled(MoreModalView)`
+  position: absolute;
+  right: 3%;
+`
+
+export const EquipmentMoreModalView = styled(MoreModalView)`
+  position: absolute;
+  right: 3%;
+  top: 30px;
+`
+
 export const NormalDiv = styled.div`
   display: flex;
   align-items: center;
   padding: 10px;
   color: #545F71;
-  
 `
 
 export const RedDiv = styled(NormalDiv)`

diff --git a/src/pages/admin/user/UserMoreModal.js → src/components/modal/UserMoreModal.js b/src/pages/admin/user/UserMoreModal.js → src/components/modal/UserMoreModal.js
@@ -1,9 +1,9 @@
 import React, {useState} from 'react';
-import {MenuText, MoreModalView, NormalDiv, RedDiv} from "../../../components/modal/MoreModal";
-import {UserModal} from "../../../components/modal/UserModal";
-import {AdminUsersAxios} from "../../../api/AxiosApi";
-import {getToken} from "../../../utils/IsLoginUtil";
-import {basicError} from "../../../utils/ErrorHandlerUtil";
+import {MenuText, NormalDiv, RedDiv, UserMoreModalView} from "./MoreModal";
+import {UserModal} from "./UserModal";
+import {AdminUsersAxios} from "../../api/AxiosApi";
+import {getToken} from "../../utils/IsLoginUtil";
+import {basicError} from "../../utils/ErrorHandlerUtil";
 
 export function UserMoreModal(props) {
     const [isOpen, setIsOpen] = useState(false)
@@ -33,14 +33,14 @@ export function UserMoreModal(props) {
 
     return (
         <>
-            <MoreModalView onClick={(e) => e.stopPropagation()}>
+            <UserMoreModalView onClick={(e) => e.stopPropagation()}>
                 <NormalDiv>
                     <MenuText onClick={editUser}>정보 수정</MenuText>
                 </NormalDiv>
                 <RedDiv>
                     <MenuText onClick={deleteUser}>탈퇴 처리</MenuText>
                 </RedDiv>
-            </MoreModalView>
+            </UserMoreModalView>
             {isOpen ?
                 <UserModal id={props.id} handler={openModalHandler} title={"직원 정보 수정"}/>
                 : null

diff --git a/src/pages/admin/carBookings/CarBookingManage.js b/src/pages/admin/carBookings/CarBookingManage.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
-import {Bar, BookedTable, BookedThead, TableContainer} from "../../basic/myBookings/BookedList";
+import {Bar, BookedTable, BookedThead, NoLineTr, TableContainer} from "../../basic/myBookings/BookedList";
 import CarBookingManageCell from "./CarBookingManageCell";
 import {AdminBookingAxios} from "api/AxiosApi";
 import {getToken} from "utils/IsLoginUtil";
@@ -44,7 +44,11 @@ function CarBookingManage(props) {
                             </tr>
                         </BookedThead>
                         <tbody>
-                            {carBookings.map(carBooking =>
+                            {carBookings.length === 0 ?
+                                <NoLineTr>
+                                    <td colSpan={6}>예약 내역이 없습니다.</td>
+                                </NoLineTr> :
+                                carBookings.map(carBooking =>
                                 <CarBookingManageCell
                                     key={carBooking.id}
                                     id={carBooking.id}

diff --git a/src/pages/admin/officeBookings/OfficeBookingManage.js b/src/pages/admin/officeBookings/OfficeBookingManage.js
@@ -1,10 +1,11 @@
 import React, {useEffect, useState} from "react";
 import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
-import {Bar, BookedTable, BookedThead, TableContainer} from "../../basic/myBookings/BookedList";
+import {Bar, BookedTable, BookedThead, NoLineTr, TableContainer} from "../../basic/myBookings/BookedList";
 import OfficeBookingManageCell from "./OfficeBookingManageCell";
 import {AdminBookingAxios} from "api/AxiosApi";
 import {getToken} from "utils/IsLoginUtil";
 import {basicError} from 'utils/ErrorHandlerUtil';
+import {NoCard} from "../../../components/card/Card";
 
 function OfficeBookingManage(props) {
 
@@ -43,7 +44,11 @@ function OfficeBookingManage(props) {
                             </tr>
                         </BookedThead>
                         <tbody>
-                            {bookingOffices.map((bookingOffice, index) => 
+                            {bookingOffices.length === 0 ?
+                                <NoLineTr>
+                                    <td colSpan={6}>예약 내역이 없습니다.</td>
+                                </NoLineTr> :
+                                bookingOffices.map((bookingOffice, index) =>
                                 <OfficeBookingManageCell 
                                     key={index} 
                                     id={bookingOffice.id}

diff --git a/src/pages/admin/resourceBookings/ResourceBookingManage.js b/src/pages/admin/resourceBookings/ResourceBookingManage.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
-import {Bar, BookedTable, BookedThead, TableContainer} from "../../basic/myBookings/BookedList";
+import {Bar, BookedTable, BookedThead, NoLineTr, TableContainer} from "../../basic/myBookings/BookedList";
 import ResourceBookingManageCell from "./ResourceBookingManageCell";
 import {AdminBookingAxios} from "api/AxiosApi";
 import {getToken} from "utils/IsLoginUtil";
@@ -46,7 +46,11 @@ function ResourceBookingManage(props) {
                             </tr>
                         </BookedThead>
                         <tbody>
-                            {bookingResources.map((bookingResource, index) => 
+                            {bookingResources.length === 0 ?
+                                <NoLineTr>
+                                    <td colSpan={6}>예약 내역이 없습니다.</td>
+                                </NoLineTr> :
+                                bookingResources.map((bookingResource, index) =>
                                 <ResourceBookingManageCell
                                     key={index}
                                     id={bookingResource.id}

diff --git a/src/pages/admin/user/UserManageLine.js b/src/pages/admin/user/UserManageLine.js
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {BookedLineTr} from 'pages/basic/myBookings/BookedList';
 import {RoleCapsule} from 'components/capsule/RoleCapsule';
 import MoreIcon from 'assets/images/moreIcon.svg'
-import {UserMoreModal} from "./UserMoreModal";
+import {UserMoreModal} from "../../../components/modal/UserMoreModal";
 import {MoreBtn} from "../../../components/modal/MoreModal";
 
 

diff --git a/src/pages/basic/equipment/EquipmentAdd.js b/src/pages/basic/equipment/EquipmentAdd.js
@@ -11,7 +11,7 @@ import {ExitBtn} from "components/modal/BigModal";
 import axios from "axios";
 import {useParams} from "react-router-dom";
 import {getImgKey} from "utils/ImageUtil";
-import {DropBox} from "components/capsule/DropBox";
+import {DropBox, SelectToggleInModal} from "components/capsule/DropBox";
 
 const MarginWhiteContainer = styled(WhiteContainer)`
   padding: 40px;
@@ -178,11 +178,16 @@ function EquipmentManageAdd(props) {
             })
     }
     useEffect(() => {
-        getCategoryList();
         if (equipmentId !== undefined) {
             getEquipmentInfo();
+        } else {
+            getCategoryList();
         }
     }, [])
+    useEffect(() => {
+        if (category != null)
+            getCategoryList();
+    }, [category])
 
     // 카테고리 리스트 검색
     const getCategoryList = () => {
@@ -195,9 +200,10 @@ function EquipmentManageAdd(props) {
                 let categories = Response.data.data.categoryNames
                 if (categoryOptionList.length === 0) {
                     setCategoryOptionList((prevList) => [...prevList, <option value="">선택</option>])
-                    categories.map((category) =>
+                    categories.map((c) =>
                         setCategoryOptionList((prevList) => [...prevList,
-                            <option value={category}>{category}</option>]))
+                            <option selected={category === c ? 'selected' : null} value={c}>{c}</option>])
+                    )
                 }
             })
             .catch((error) => {
@@ -329,7 +335,11 @@ function EquipmentManageAdd(props) {
 
                 <ShortColumnContainer>
                     <TitleLabel>카테고리</TitleLabel>
-                    <DropBox name='category' height={"40px"} items={categoryOptionList} change={onChangeInput} color={'#E6E6E6'}/>
+                    <SelectToggleInModal name='category'
+                                         height={"40px"}
+                                         items={categoryOptionList}
+                                         change={onChangeInput}
+                                         value={category}/>
                 </ShortColumnContainer>
 
                 <DescriptionContainer>

diff --git a/src/pages/basic/equipment/EquipmentList.js b/src/pages/basic/equipment/EquipmentList.js
@@ -70,21 +70,22 @@ function EquipmentList(props) {
                 </ManageAddButton>
             </SearchBarContainer>
             <Container>
-                <CardList className="cardList">
-                    {equipments.length === 0 ? <NoCard>비품 내역이 없습니다.</NoCard> : equipments.map((equipment) =>
-                        <EquipmentInfo
-                            key={equipment.equipmentId}
-                            equipmentId={equipment.equipmentId}
-                            name={equipment.name}
-                            imgUrl={equipment.imgUrl}
-                            location={equipment.location}
-                            keeper={equipment.keeper}
-                            contact={equipment.contact}
-                            quantity={equipment.quantity}
-                            category={equipment.category}
-                            description={equipment.description}
-                        />)}
-                </CardList>
+                {equipments.length === 0 ? <NoCard>비품 내역이 없습니다.</NoCard> :
+                    <CardList className="cardList">
+                        {equipments.map((equipment) =>
+                            <EquipmentInfo
+                                key={equipment.equipmentId}
+                                equipmentId={equipment.equipmentId}
+                                name={equipment.name}
+                                imgUrl={equipment.imgUrl}
+                                location={equipment.location}
+                                keeper={equipment.keeper}
+                                contact={equipment.contact}
+                                quantity={equipment.quantity}
+                                category={equipment.category}
+                                description={equipment.description}
+                            />)}
+                    </CardList>}
             </Container>
         </RightContainer>
     );