Skip to content

S
seat-booking
Commit d9fb75a6 by Syed Abdul Rahman
Options

modal code refactor done

parent 8636c0a5
Showing with 263 additions and 129 deletions
db.json
{
"users": [
{
"id": "594f",
"id": "eba4",
"email": "syedabdul.rahman@krds.com",
"selectionCount": "3"
},
{
"id": "eece",
"email": "lucy@gmail.com",
"selectionCount": "4"
},
{
"id": "bd3f",
"email": "abdul@gmail.com",
"selectionCount": "4"
},
{
"id": "fa09",
"email": "test@gmail.com"
},
{
"id": "da06",
"email": "testing@gmail.com",
"selectionCount": 3
}
],
"selectedSeats": [
{
"id": "eba4",
"userid": "eba4",
"selected": [
{
"row": 6,
"seat": 3
},
{
"row": 6,
"seat": 4
},
{
"row": 5,
"seat": 4
}
]
},
{
"id": "eece",
"userid": "eece",
"selected": [
{
"row": 7,
"seat": 1
},
{
"row": 7,
"seat": 2
},
{
"row": 7,
"seat": 4
},
{
"row": 6,
"seat": 2
}
]
},
{
"id": "bd3f",
"userid": "bd3f",
"selected": [
{
"row": 5,
"seat": 5
},
{
"row": 5,
"seat": 6
},
{
"row": 5,
"seat": 7
},
{
"row": 5,
"seat": 8
}
]
}
]
}
\ No newline at end of file
src/components/Base/Input/styles.module.css
.inputWrapper {
display: flex;
flex-direction: column;
gap: .5rem;
gap: 0.5rem;
}
.label {
......@@ -13,10 +13,9 @@
outline: none;
padding: 0.8em;
border-radius: 5px;
width: 93%;
font-family: 'Inter-Medium';
color: #000000db;
font-size: 16px;
border: none;
outline: none;
}
\ No newline at end of file
}
src/components/Shared/Modal/Index.jsx
import Input from "../../Base/Input/Index";
import Button from "../../Base/Button/Index";
import styles from "./styles.module.css";
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
const Modal = ({ onConfirm, onChange, variant, onOfSeats, onCancel }) => {
const Modal = ({ children }) => {
return (
<div className={styles["overlay-container"]}>
<div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
{variant == "input" && (
<>
<h2 className={styles["modal-title"]}>Select Your Seats</h2>
<p>Please choose how many seats you'd like to book.</p>
<Input
label={"Number of Seats"}
placeholder="Enter number of seats"
type="number"
max="10"
min="1"
onChange={(e) => onChange(e.target.value)}
/>
<div className={`${styles["btn-wrapper"]} ${styles["flex-direction"]}`}>
<Button size={"sm"} onClick={onConfirm}>
Confirm
</Button>
</div>
</>
)}
{variant == "confirm" && (
<>
<h2 className={styles["modal-title"]}>Confirm Your Selection</h2>
{/* <p>
You have selected <strong>{onOfSeats}</strong> seat
{onOfSeats !== 1 ? "s" : ""}.
</p> */}
<p>Please confirm to proceed with your booking.</p>
<div className={styles["btn-wrapper"]}>
{/* <Button size={"sm"} onClick={onCancel}>
Cancel
</Button> */}
<Button size={"sm"} onClick={onConfirm}>
Confirm
</Button>
</div>
</>
)}
<div className={styles['overlay-container']}>
<div className={styles['modal-dialog']} role="dialog" aria-modal="true">
{children}
</div>
</div>
);
......
src/components/Shared/Modal/Modal.stories.jsx
......@@ -4,24 +4,9 @@ export default {
tags: ['autodocs'],
title: 'component/Shared/Modal',
component: Modal,
argTypes: {
onConfirm: { action: 'On Modal confirm' },
onChange: { action: 'On No of seats value change' },
variant: {
control: { type: 'select' },
options: ['confirm', 'input']
},
onChange: {
action: 'onchange'
},
onConfirm: {
action: 'onconfirmm'
}
}
argTypes: {}
};
export const Default = {
args: {
variant: 'input'
}
args: {}
};
src/components/Shared/Modal/styles.module.css
.overlay-container {
background-color: rgba(54, 54, 54, 0.788);
backdrop-filter: blur(2px);
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100%;
color: rgb(234, 227, 227);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgba(54, 54, 54, 0.788);
backdrop-filter: blur(2px);
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100%;
color: rgb(234, 227, 227);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-dialog {
background-color: rgba(1, 1, 6, 0.801);
border-radius: 10px;
padding: 1rem 1.5rem;
box-sizing: border-box;
background-color: rgba(1, 1, 6, 0.801);
border-radius: 10px;
padding: 1rem 1.5rem;
box-sizing: border-box;
min-width: 300px;
min-height: 150px;
}
.btn-wrapper {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin: 1rem 0;
display: flex;
justify-content: flex-end;
gap: 1rem;
margin: 1rem 0;
}
.flex-direction{
flex-direction: column;
.flex-direction {
flex-direction: column;
}
.modal-title {
font-family: 'Poppins-Medium';
font-weight: 500;
font-family: 'Poppins-Medium';
font-weight: 500;
}
p {
font-family: 'Poppins-Medium';
font-weight: 200;
}
\ No newline at end of file
font-family: 'Poppins-Medium';
font-weight: 200;
}
src/components/TopLevel/ConfirmSeatContent/ConfirmSeatContent.stories.jsx 0 → 100644
import SeatConfirmationContent from './Index';
export default {
title: 'Component/TopLevel/ConfirmationModal',
tags: ['autodocs'],
component: SeatConfirmationContent,
argTypes: {
onConfirm: { action: 'onConfirm' }
}
};
export const ConfirmationModal = {};
src/components/TopLevel/ConfirmSeatContent/Index.jsx 0 → 100644
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
const Index = ({ onConfirm }) => {
return (
<>
<h2 className={styles['modal-title']}>Confirm Your Selection</h2>
<p className={styles['modal-title']}>
Please confirm to proceed with your booking.
</p>
<div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onConfirm}>
Confirm
</Button>
</div>
</>
);
};
export default Index;
src/components/TopLevel/ConfirmSeatContent/styles.module.css 0 → 100644
.btn-wrapper {
display: flex;
gap: 1rem;
margin: 1rem 0;
flex-direction: column;
}
.modal-title {
font-family: 'Poppins-Medium';
font-weight: 500;
}
src/components/TopLevel/Login/Login.stories.jsx
......@@ -4,7 +4,7 @@ export default {
title: 'component/TopLevel/Login',
component: Login,
argTypes: {
handleSubmit: { action: 'Form Value' }
onSubmit: { action: 'Form Value' }
}
};
......
src/components/TopLevel/SeatSelectionContent/Index.jsx 0 → 100644
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index';
import styles from './styles.module.css';
const Index = ({ onChange, onConfirm, disabled }) => {
return (
<>
<h2 className={styles['modal-title']}>Select Your Seats</h2>
<p className={styles['modal-title']}>
Please choose how many seats you'd like to book.
</p>
<Input
label={'Number of Seats'}
placeholder="Enter number of seats"
type="number"
max="10"
min="1"
onChange={(e) => onChange(e.target.value)}
/>
<div className={`${styles['btn-wrapper']} ${styles['flex-direction']}`}>
<Button size={'md'} onClick={onConfirm} disabled={disabled}>
Confirm
</Button>
</div>
</>
);
};
export default Index;
src/components/TopLevel/SeatSelectionContent/SeatSelectionContent.stories.jsx 0 → 100644
import SeatSelectionContent from './Index';
export default {
title: 'Component/TopLevel/SeatSelectionContent',
tags: ['autodocs'],
component: SeatSelectionContent,
argTypes: {
onChange: { action: 'onChange' },
onConfirm: { action: 'onConfirm' }
}
};
export const SelectSeatContent = {};
src/components/TopLevel/SeatSelectionContent/styles.module.css 0 → 100644
.btn-wrapper {
display: flex;
/* justify-content: flex-end; */
flex-direction: column;
gap: 1rem;
margin: 1rem 0;
width: 100%;
}
.modal-title {
font-family: 'Poppins-Medium';
font-weight: 500;
}
src/pages/BookingPage/Index.jsx
......@@ -12,6 +12,8 @@ import {
import BookingWrapper from '../../components/Layout/BookingWrapper/Index';
import Header from '../../components/Layout/Header/Index';
import Modal from '../../components/Shared/Modal/Index';
import ConfirmSeatContent from '../../components/TopLevel/ConfirmSeatContent/Index';
import SeatSelectionContent from '../../components/TopLevel/SeatSelectionContent/Index';
import Button from '../../components/Base/Button/Index';
import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index';
import img from '../../assets/images/power-button_12080802.png';
......@@ -30,14 +32,8 @@ const BookingPage = () => {
useState(false);
const [noOfSeats, setNoOfSeats] = useState();
const [buttonState, setButtonState] = useState(true);
const [modalButtonState, setModalButtonState] = useState(true);
useEffect(() => {
const fetchSelectedSeats = async () => {
const data = await getSelectedSeatsApi();
const currentData = data?.find((e) => e.userid == userId);
setSelectedSeats(data);
setCurrentSeats(currentData?.selected);
};
const fetchSeatSelectionCount = async () => {
const data = await getSeatSelectionCountApi(userId);
setNoOfSeats(data?.selectionCount);
......@@ -47,6 +43,13 @@ const BookingPage = () => {
setShowSeatsModal(getItem(appConstants.MODAL));
}, []);
const fetchSelectedSeats = async () => {
const data = await getSelectedSeatsApi();
const currentData = data?.find((e) => e.userid == userId);
setSelectedSeats(data);
setCurrentSeats(currentData?.selected);
};
const data = [
{
row_id: 1,
......@@ -333,7 +336,13 @@ const BookingPage = () => {
};
const onModalChange = (value) => {
setNoOfSeats(value);
const numericValue = parseInt(value, 10);
setNoOfSeats(numericValue);
if (value && value !== '') {
setModalButtonState(false);
} else {
setModalButtonState(true);
}
};
const modalClose = () => {
......@@ -341,6 +350,7 @@ const BookingPage = () => {
if (userId && noOfSeats) {
saveSeatSelectionCountApi(userId, noOfSeats);
}
fetchSelectedSeats();
setShowSeatsModal(false);
};
......@@ -378,20 +388,23 @@ const BookingPage = () => {
setButtonState(true);
}
} else {
if (prev?.length < noOfSeats) {
updatedSeats = [...prev, { row: rowId, seat: columnId }];
console.log('INSIDE ELSE', prev?.length, noOfSeats);
if (prev?.length < noOfSeats || !prev?.length) {
console.log('INSIDE IF 22');
if (prev) {
updatedSeats = [...prev, { row: rowId, seat: columnId }];
} else {
updatedSeats = [{ row: rowId, seat: columnId }];
}
if (updatedSeats?.length === parseInt(noOfSeats)) {
setButtonState(false);
} else {
setButtonState(true);
}
} else {
console.log('INSIDE ELSE 222');
updatedSeats = prev ? [...prev] : [];
// if (updatedSeats?.length === parseInt(noOfSeats)) {
// setButtonState(false);
// } else {
// setButtonState(true);
// }
}
}
......@@ -420,10 +433,10 @@ const BookingPage = () => {
};
await createSeatApi(info);
}
setCurrentSeats([]);
fetchData();
setShowSeatsConfirmationModal(false);
};
return (
<div className={styles['seat-booking-wrapper']}>
<img
......@@ -442,30 +455,24 @@ const BookingPage = () => {
/>
</div>
<div className={styles['btn-wrapper']}>
<Button
size={'lg'}
onClick={onSeatsConfirm}
// disabled={currentSeats?.length == noOfSeats ? true : false}>
disabled={buttonState}>
<Button size={'lg'} onClick={onSeatsConfirm} disabled={buttonState}>
Confirm
</Button>
</div>
<LegendWrapper />
{showSeatsModal && (
<Modal
onConfirm={modalClose}
onChange={onModalChange}
variant="input"
value={noOfSeats}
/>
<Modal>
<SeatSelectionContent
onChange={onModalChange}
onConfirm={modalClose}
disabled={modalButtonState}
/>
</Modal>
)}
{showSeatsConfirmationModal && (
<Modal
onConfirm={seatsFinal}
onChange={onModalChange}
variant={'confirm'}
onCancel={finalCancel}
/>
<Modal>
<ConfirmSeatContent onConfirm={seatsFinal} />
</Modal>
)}
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment