Skip to content

Commit

Permalink
Merge pull request #149 from PLADI-ALM/feat/PDW-75-resource-booking
Browse files Browse the repository at this point in the history 
[PDW-75/feat] 장비 예약 시간별 예약 정보 확인
  • Loading branch information
@psyeon1120
psyeon1120 authored Nov 27, 2023
2 parents 0fc0181 + 1317b36 commit 26b9eab
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 89 deletions.
39 changes: 33 additions & 6 deletions src/components/modal/BookingInfoModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const BookingInfoModalView = styled.div`
z-index: 3;
`

export const BookingInfosModalView = styled(BookingInfoModalView)`
export const BookingProductInfosModalView = styled(BookingInfoModalView)`
max-height: 300px;
position: relative;
z-index: initial;
Expand All @@ -28,6 +28,15 @@ export const BookingInfosModalView = styled(BookingInfoModalView)`
overflow-y: scroll;
`

// export const BookingProductInfoModalView = styled(BookingProductInfosModalView)`
// max-height: 300px;
// position: relative;
// z-index: initial;
// margin-left: 50px;
// margin-top: initial;
// overflow-y: scroll;
// `

export const BookingInfoText = styled.span`
font-size: 15px;
margin-bottom: 10px;
Expand All @@ -53,18 +62,36 @@ export function BookingInfoModal(props) {
)
}

export function BookingInfosModal(props) {
export function BookingProductInfosModal(props) {
return (
<BookingInfosModalView x={props.x} y={props.y} onMouseOver={props.onMouseOver} onMouseOut={props.onMouseOut}>
{props.info && props.info.map((value, index) =>
<BookingProductInfosModalView>
{props.info && Array.isArray(props.info) ? props.info.map((value, index) =>
<>
<BookingInfoText>{value.startDateTime} ~ {value.endDateTime}</BookingInfoText>
<BookingInfoText>{value.reservatorName}</BookingInfoText>
<BookingInfoText>{value.reservatorDepartment}</BookingInfoText>
<BookingLastInfoText>{value.reservatorPhone}</BookingLastInfoText>
{index < props.info.length - 1 ? <Line/> : null}
</>
)}
</BookingInfosModalView>
) :
<>
<BookingInfoText>{props.info.startDateTime} ~ {props.info.endDateTime}</BookingInfoText>
<BookingInfoText>{props.info.reservatorName}</BookingInfoText>
<BookingInfoText>{props.info.reservatorDepartment}</BookingInfoText>
<BookingLastInfoText>{props.info.reservatorPhone}</BookingLastInfoText>
</>
}
</BookingProductInfosModalView>
)
}

export function BookingProductInfoModal(props) {
return (
<BookingInfoModalView onMouseOver={props.onMouseOver} onMouseOut={props.onMouseOut}>
<BookingInfoText>{props.info.startDateTime} ~ {props.info.endDateTime}</BookingInfoText>
<BookingInfoText>{props.info.reservatorName}</BookingInfoText>
<BookingInfoText>{props.info.reservatorDepartment}</BookingInfoText>
<BookingLastInfoText>{props.info.reservatorPhone}</BookingLastInfoText>
</BookingInfoModalView>
)
}
50 changes: 2 additions & 48 deletions src/components/resourceBooking/TimeSelector.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import styled from "styled-components"
import React, {useEffect, useState} from "react";
import {findTimeIndex, ResourceTimeList, TimeList} from "../../constants/ToggleList";
import {ResourceTimeList} from "../../constants/ToggleList";
import {ResourcesAxios} from "../../api/AxiosApi";
import {getToken} from "../../utils/IsLoginUtil";
import {basicError} from "../../utils/ErrorHandlerUtil";
import {BookingInfosModal} from "../modal/BookingInfoModal";

export const TimeContainer = styled.ul`
margin-top: 10px;
Expand Down Expand Up @@ -56,8 +55,6 @@ export function setDate(date) {

export function TimeSelector(props) {
const [bookedTimes, setBookedTimes] = useState([]);
const [bookingInfos, setBookingInfos] = useState(false)
const [isOpen, setIsOpen] = useState(false)

useEffect(() => {
getResourceBookedDates(currentDate, props.resourceId)
Expand All @@ -75,40 +72,6 @@ export function TimeSelector(props) {
return false
}

// 시간에 마우스 오버
const handleTimeMouseEnter = (time, date) => {
// ResourcesAxios.get(`/${props.resourceId}/booking?dateTime=${date} ${time.slice(0 ,2)}`, {
// headers: {
// Authorization: getToken()
// }
// })
// .then((Response) => {
// const info = Response.data.data;
// if (info === undefined) {
// setBookingInfos(null)
// } else {
// setBookingInfos(Response.data.data)
// setIsOpen(true)
// }
// })
// .catch((Error) => {
// basicError(Error)
// window.alert("예약 정보를 불러오는데 실패하였습니다.")
// });
}

const handleTimeMouseLeave = () => {
setIsOpen(false)
}

const handleModalMouseEnter = () => {
setIsOpen(true)
}

const handleModalMouseLeave = () => {
setIsOpen(false)
}

const getResourceBookedDates = (date, resourceId) => {
const params = {date: date};
ResourcesAxios.get(`/${resourceId}/booking-time`, {
Expand Down Expand Up @@ -136,21 +99,12 @@ export function TimeSelector(props) {
ResourceTimeList.map(function (time) {
if (isTimeMatch(time))
return (<TimeCard
onMouseOver={() => handleTimeMouseEnter(time, currentDate)}
onMouseOut={() => handleTimeMouseLeave()}
onMouseOver={() => props.onMouseOver(time, currentDate)}
className={'disabled'}>{time}</TimeCard>)
else
return (<TimeCard onClick={() => clickHandler(time)}>{time}</TimeCard>)
})
}
{isOpen && (
<BookingInfosModal
info={bookingInfos}
// x={x}
// y={y}
onMouseOver={() => handleModalMouseEnter()}
onMouseOut={() => handleModalMouseLeave()}/>
)}
</TimeContainer>
);
}
1 change: 0 additions & 1 deletion src/pages/admin/car/CarManageTableCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ function CarManageTableCell(props) {
})
.then((Response) => { })
.catch((error) => {basicError(error)})
console.log(isEnable)
}

return (
Expand Down
71 changes: 37 additions & 34 deletions src/pages/basic/booking/resource/ResourceBooking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {Bar} from 'pages/basic/myBookings/BookedList';
import {getToken} from 'utils/IsLoginUtil';
import ResourceDetailInfo from "components/card/ResourceDetailInfo";
import {setDate, TimeSelector} from "components/resourceBooking/TimeSelector";
import {BookingInfosModal} from "components/modal/BookingInfoModal";
import {BookingProductInfosModal} from "components/modal/BookingInfoModal";

export const BookingDateTimeContainer = styled.div`
margin-left: 10px;
Expand Down Expand Up @@ -67,13 +67,10 @@ function ResourceBooking(props) {
var [startDate, setStartDate] = useState("");
var endDate = useRef("");
var [startTime, setStartTime] = useState("");
// var endTime = useRef("");
var [endTime, setEndTime] = useState("");
const [changed, setCurrentMonth] = useState();
const [isOpen, setIsOpen] = useState(false)
const [bookingInfos, setBookingInfos] = useState(false)
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [bookingInfos, setBookingInfos] = useState([])
const [clickedDate, setClickedDate] = useState(null);

const getResourceInfo = () => {
Expand All @@ -87,7 +84,6 @@ function ResourceBooking(props) {
})
.catch((Error) => {
basicError(Error)
window.alert("장비 정보를 불러올 수 없습니댜.")
window.history.back()
});
};
Expand All @@ -108,8 +104,7 @@ function ResourceBooking(props) {
})
.catch((Error) => {
basicError(Error)
window.alert("예약 정보를 불러올 수 없습니댜.")
// window.history.back()
window.history.back()
});
}

Expand Down Expand Up @@ -189,7 +184,6 @@ function ResourceBooking(props) {
})
.catch((Error) => {
basicError(Error)
window.alert("장비 예약에 실패하였습니다.")
});
}
}
Expand Down Expand Up @@ -228,27 +222,42 @@ function ResourceBooking(props) {
const info = Response.data.data;
if (info === undefined) {
setBookingInfos(null)
setIsOpen(false)
} else {
setBookingInfos(Response.data.data)
// setIsOpen(true)
if (info.length === 0) {
setIsOpen(false)
setBookingInfos(null)
} else {
setIsOpen(true)
setBookingInfos(info)
}
}
})
.catch((Error) => {
basicError(Error)
window.alert("예약 정보를 불러오는데 실패하였습니다.")
});
}

const handleMouseLeave = () => {
setIsOpen(false)
}

const handleModalMouseEnter = () => {
setIsOpen(true)
}

const handleModalMouseLeave = () => {
setIsOpen(false)
// 시간에 마우스 오버
const handleTimeMouseEnter = (time, date) => {
ResourcesAxios.get(`/${resourceId}/booking?dateTime=${date} ${time.slice(0, 2)}`, {
headers: {
Authorization: getToken()
}
})
.then((Response) => {
const info = Response.data.data;
if (info === undefined) {
setBookingInfos(null)
setIsOpen(false)
} else {
setBookingInfos(info)
setIsOpen(true)
}
})
.catch((Error) => {
basicError(Error)
});
}

return (
Expand Down Expand Up @@ -283,15 +292,8 @@ function ResourceBooking(props) {
<BookingDateContainer
onMouseOver={(event) => {
if (event.target.classList.contains("react-calendar__month-view__days__day")) {
console.log(event)
setX(event.clientX)
setY(event.clientY)
setClickedDate(formatDate(event.target.children[0].ariaLabel))
}
}}
onMouseOut={(event) => {
if (event.target.classList.contains("react-calendar__month-view__days__day")) {
}
}}>
<Calendar className={styles}
onClickDay={changeDate}
Expand All @@ -316,15 +318,16 @@ function ResourceBooking(props) {
/>
{
startDate !== "" ?
<TimeSelector resourceId={resourceId} click={clickTime}/>
<TimeSelector resourceId={resourceId} click={clickTime}
onMouseOver={handleTimeMouseEnter}/>
: null
}
</BookingDateContainer>
</DateContainer>
<BookingInfosModal
info={bookingInfos}
onMouseOver={() => handleModalMouseEnter()}
onMouseOut={() => handleModalMouseLeave()}/>
{
isOpen &&
<BookingProductInfosModal info={bookingInfos}/>
}
</BookingContentContainer>

<BookingPurposeContainer>
Expand Down

0 comments on commit 26b9eab

Please sign in to comment.