Skip to content

Commit

Permalink
Merge pull request #121 from PLADI-ALM/refactor/PDW-69-return-booking
Browse files Browse the repository at this point in the history 
[PDW-69/refactor] 일반 사원 예약 반납 기능 제거
  • Loading branch information
@psyeon1120
psyeon1120 authored Nov 4, 2023
2 parents 0372b6d + 7baa252 commit b4e9843
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 136 deletions.
78 changes: 44 additions & 34 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,41 +20,51 @@ import OfficeManageDetail from 'pages/admin/office/OfficeBookingManageDetail';

function App() {

const SidebarLayout = () => (
<>
<Sidebar />
<Outlet />
</>
)
const SidebarLayout = () => (
<>
<Sidebar/>
<Outlet/>
</>
)

return (
<div className="App">
<Routes>
<Route path="/" element={<Login />} />
<Route element={<SidebarLayout />}>
<Route path="/officeBooking" element={<SelectOffice title="회의실 예약" />} />
<Route path="/officeBooking/:officeId" element={<OfficeBooking isCheck='false' />} />
<Route path="/my/bookings/offices" element={<BookedList title="회의실 예약 내역" />} />
<Route path="/my/bookings/offices/:bookingId" element={<OfficeBookingCheck isAdmin={false} />} />
<Route path="/my/bookings/resources" element={<BookedList title="장비 예약 내역" />} />
<Route path='/my/bookings/resources/:bookingId' element={<ResourceBookingCheck />} />
<Route path='/resourceBooking' element={<SelectResource title="장비 예약" />} />
<Route path='/resourceBooking/:resourceId' element={<ResourceBooking />} />
<Route path='/admin/offices' element={<OfficeManage title="회의실 관리" />} />
<Route path='/admin/offices/:officeId' element={<OfficeManageDetail />} />
<Route path='/admin/officeBooking' element={<OfficeBookingManage title="회의실 예약 내역" />} />
<Route path='/admin/officeBooking/:bookingId' element={<OfficeBookingCheck isAdmin={true} />} />
<Route path='/admin/resources' element={<ResourceManage title="장비 관리" />} />
<Route path='/admin/resources/add' element={<ResourceManageAdd title="장비 관리" />} />
<Route path='/admin/resources/edit/:resourceId' element={<ResourceManageAdd title="장비 관리" />} />
<Route path='/admin/resources/:resourceId' element={<ResourceManageDetail/>} />
<Route path='/admin/resourceBooking' element={<ResourceBookingManage title="장비 예약 관리" />} />
<Route path='/admin/resourceBooking/:bookingId' element={<ResourceBookingCheck isAdmin={true} />} />
<Route path='/admin/users' element={<UserManage title="직원 관리" />} />
</Route>
</Routes>
</div>
)
return (
<div className="App">
<Routes>
<Route path="/" element={<Login/>}/>
<Route element={<SidebarLayout/>}>\
<Route path="/officeBooking" element={<SelectOffice title="회의실 예약"/>}>
<Route path="/:officeId" element={<OfficeBooking isCheck='false'/>}/>
</Route>
<Route path="/my/bookings/offices" element={<BookedList title="회의실 예약 내역" type={"offices"}/>}>
<Route path="/:bookingId" element={<OfficeBookingCheck isAdmin={false}/>}/>
</Route>
<Route path="/my/bookings/resources" element={<BookedList title="장비 예약 내역" type={"resources"}/>}>
<Route path='/:bookingId' element={<ResourceBookingCheck/>}/>
</Route>
<Route path="/my/bookings/cars" element={<BookedList title="차량 예약 내역" type={"cars"}/>}>
</Route>
<Route path='/resourceBooking' element={<SelectResource title="장비 예약"/>}>
<Route path='/:resourceId' element={<ResourceBooking/>}/>
</Route>
<Route path='/admin/offices' element={<OfficeManage title="회의실 관리"/>}>
<Route path='/:officeId' element={<OfficeManageDetail/>}/>
</Route>
<Route path='/admin/officeBooking' element={<OfficeBookingManage title="회의실 예약 내역"/>}>
<Route path='/:bookingId' element={<OfficeBookingCheck isAdmin={true}/>}/>
</Route>
<Route path='/admin/resources' element={<ResourceManage title="장비 관리"/>}>
<Route path='/add' element={<ResourceManageAdd title="장비 관리"/>}/>
<Route path='/edit/:resourceId' element={<ResourceManageAdd title="장비 관리"/>}/>
<Route path='/:resourceId' element={<ResourceManageDetail/>}/>
</Route>
<Route path='/admin/resourceBooking' element={<ResourceBookingManage title="장비 예약 관리"/>}>
<Route path='/:bookingId' element={<ResourceBookingCheck isAdmin={true}/>}/>
</Route>
<Route path='/admin/users' element={<UserManage title="직원 관리"/>}/>
</Route>
</Routes>
</div>
)
}

export default App;
29 changes: 15 additions & 14 deletions src/components/sidebar/MenuLineStyle.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { styled } from 'styled-components';
import { Link } from "react-router-dom";
import {styled} from 'styled-components';
import {Link} from "react-router-dom";

export const InactiveMenuLine = styled(Link)`
padding: 3px 20px;
margin-bottom: 13px;
cursor: pointer;
display: flex;
align-items: center;
color: #717171;
font-size: 19px;
border-left: 5px solid white;
&:hover {
color: #8741CB;
}
padding: 3px 20px;
margin-bottom: 13px;
cursor: pointer;
display: flex;
align-items: center;
color: #717171;
font-size: 19px;
border-left: 5px solid white;
&:hover {
color: #8741CB;
}
`

export const ActiveMenuLine = styled(InactiveMenuLine)`
color: #8741CB;
color: #8741CB;
`
10 changes: 5 additions & 5 deletions src/constants/Path.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@ export const ADMIN_MAIN_MENUS = [

export const MAIN_PATH = '/officeBooking'

export const BookingCategoryPathList = [
"offices", "resources"
export const BookingCategoryList = [
"offices", "resources", "cars"
]

export function getBookingCategoryPath(koreanName) {
if (koreanName === '회의실') {
return BookingCategoryPathList[0]
} else if (koreanName === '장비') {
return BookingCategoryPathList[1]
return BookingCategoryList[0]
} else if (koreanName === '장비' || koreanName === '차량') {
return BookingCategoryList[1]
}
}
62 changes: 24 additions & 38 deletions src/pages/basic/myBookings/BookedLine.js
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,60 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {Link} from 'react-router-dom';
import SmallButton from 'components/button/SmallButton';
import { BOOKED, USING, WAITING, findStatus } from 'constants/BookingStatus';
import { BookingsAxios } from 'api/AxiosApi';
import { BookedLineTr } from './BookedList';
import { BookingCategoryPathList } from 'constants/Path';
import { StatusText, StatusContainer, StatusCircle } from 'components/booking/StatusTag';
import { basicError } from 'utils/ErrorHandlerUtil';
import {BOOKED, USING, WAITING, findStatus} from 'constants/BookingStatus';
import {BookingsAxios} from 'api/AxiosApi';
import {BookedLineTr} from './BookedList';
import {BookingCategoryList} from 'constants/Path';
import {StatusText, StatusContainer, StatusCircle} from 'components/booking/StatusTag';
import {basicError} from 'utils/ErrorHandlerUtil';
import {getToken} from "../../../utils/IsLoginUtil";

function cancelBooking(bookingId, name, info, start, end, type) {
if (window.confirm(`${name}(${info}) ${start} ~ ${end}\n예약을 취소하시겠습니까?`)) {
BookingsAxios.patch(`/${type}/${bookingId}/cancel`,
BookingsAxios.patch(`/${type}/${bookingId}/cancel`, null,
{
headers: {
Authorization: getToken()
}
})
.catch((error) => {
basicError(error)
})
alert("취소되었습니다.")
window.location.reload()
}
}

function returnBooking(bookingId, name, info, start, end) {
if (window.confirm(`${name}(${info}) ${start} ~ ${end}\n장비를 반납하시겠습니까?`)) {
BookingsAxios.patch(`/resources/${bookingId}/return`,
{
headers: {
Authorization: getToken()
.then(() => {
alert("취소되었습니다.")
window.location.reload()
}
})
)
.catch((error) => {
basicError(error)
})
alert("반납되었습니다.")
window.location.reload()
}
}

function BookedLine(props) {
var status = findStatus(props.status)

const status = findStatus(props.status);
return (
<>
<BookedLineTr>
<td width="30%"><Link to={`/my/bookings/${props.type}/${props.id}`}>{props.name}({props.info})</Link></td>
<td width="30%"><Link to={`/my/bookings/${props.type}/${props.id}`}>{props.name}({props.info})</Link>
</td>
<td width="30%">{props.start} ~ {props.end}</td>
<td width="10%"><StatusContainer isCheck={'true'} background={status.background}>
<StatusCircle color={status.color} />
<StatusCircle color={status.color}/>
<StatusText color={status.color}>{props.status}</StatusText>
</StatusContainer></td>
{
(props.type === BookingCategoryPathList[0]) ?
(props.type === BookingCategoryList[0]) ?
// 회의실
((status === BOOKED) || (props.status === USING)) ?
((status === BOOKED) || (status === USING)) ?
<td width="10%"><SmallButton click={() =>
cancelBooking(props.id, props.name, props.info, props.start, props.end, props.type)} name={'취소'} /></td>
cancelBooking(props.id, props.name, props.info, props.start, props.end, props.type)}
name={'취소'}/></td>
: null
:
// 장비
// 장비, 차량
((status === WAITING) || (status === BOOKED)) ?
<td width="10%"><SmallButton click={() =>
cancelBooking(props.id, props.name, props.info, props.start, props.end, props.type)} name={'취소'} /></td>
: (status === USING) ?
<td width="10%"><SmallButton click={() =>
returnBooking(props.id, props.name, props.info, props.start, props.end)} name={'반납'} /></td>
: null
cancelBooking(props.id, props.name, props.info, props.start, props.end, props.type)}
name={'취소'}/></td>
: null
}
</BookedLineTr>
</>
Expand Down
56 changes: 11 additions & 45 deletions src/pages/basic/myBookings/BookedList.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState} from 'react';
import styled from "styled-components"
import BookedLine from './BookedLine';
import { RightContainer, WhiteContainer, TitleText } from "components/rightContainer/RightContainer";
import { BookingsAxios } from 'api/AxiosApi';
import { SelectToggle } from 'components/capsule/SelectToggle';
import { BookingCategoryList } from 'constants/ToggleList';
import { BookingCategoryPathList, getBookingCategoryPath } from 'constants/Path';
import { getToken } from 'utils/IsLoginUtil';
import { basicError } from 'utils/ErrorHandlerUtil';
import {RightContainer, TitleText, WhiteContainer} from "components/rightContainer/RightContainer";
import {BookingsAxios} from 'api/AxiosApi';
import {getToken} from 'utils/IsLoginUtil';
import {basicError} from 'utils/ErrorHandlerUtil';

const TitleContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -61,30 +58,13 @@ export const NoLineTr = styled.tr`
border-bottom: #E1E0E2 solid 1px;
`

const optionList = BookingCategoryList.map((category) => (<option>{category}</option>))

function BookedList(props) {

const [bookings, setBookingList] = useState([])
const [category, setCategory] = useState(BookingCategoryList[0])
const [categoryPath, setCategoryPath] = useState(BookingCategoryPathList[0])

// 회의실 예약내역
const getOfficeBookingList = () => {
BookingsAxios.get("?category=office", {
headers: {
Authorization: getToken()
}
})
.then((response) => { setBookingList(response.data.data.content) })
.catch((error) => {
basicError(error)
})
}

// 장비 예약내역
const getResourceBookingList = () => {
BookingsAxios.get("?category=resource", {
// 예약내역
const getBookingList = () => {
BookingsAxios.get(`${props.type}`, {
headers: {
Authorization: getToken()
}
Expand All @@ -96,27 +76,13 @@ function BookedList(props) {
}

useEffect(() => {
getOfficeBookingList()
}, [])

useEffect(() => {
if (category === BookingCategoryList[0]) {
getOfficeBookingList()
} else {
getResourceBookingList()
}
}, [category])

const changeCategory = (e) => {
setCategory(e.target.value)
setCategoryPath(getBookingCategoryPath(e.target.value))
}
getBookingList()
}, [props.type])

return (
<RightContainer>
<TitleContainer>
<TitleText>{props.title}</TitleText>
<SelectToggle items={optionList} change={changeCategory} />
</TitleContainer>
<WhiteContainer>
<Bar />
Expand All @@ -143,7 +109,7 @@ function BookedList(props) {
start={booking.startDateTime}
end={booking.endDateTime}
status={booking.status}
type={categoryPath}
type={props.type}
/>)}
</tbody>
</BookedTable>
Expand Down

0 comments on commit b4e9843

Please sign in to comment.