TenderReact/src/widgets/EditAuctionModal/EditAuctionModal.tsx

66 lines
2.5 KiB
TypeScript
Raw Normal View History

2023-12-15 13:25:44 +03:00
import React, {useState, useEffect} from "react";
import { ButtonUi, ButtonUiType } from "../../shared/UI/ButtonUi";
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
2023-12-19 16:23:03 +03:00
import { AuctionItem } from "../../types";
2023-12-15 13:25:44 +03:00
interface AddAuctionModalProps {
showModal: boolean,
onHide: () => void,
2023-12-19 16:23:03 +03:00
currentAuction: AuctionItem,
editAuctionItem: (newAuctionName:string, currentEditAuctionId:string) => void
2023-12-15 13:25:44 +03:00
}
export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHide, currentAuction, editAuctionItem}) => {
const [newAuctionName, setNewAuctionName] = useState('')
useEffect(() => {
currentAuction ? setNewAuctionName(currentAuction.name) : setNewAuctionName('')
}, [currentAuction])
const editAuction = () => {
2023-12-19 16:23:03 +03:00
editAuctionItem(newAuctionName, currentAuction.uuid)
2023-12-15 13:25:44 +03:00
onHide()
}
return (
<Modal
show={showModal}
onHide={onHide}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
2023-12-19 16:23:03 +03:00
Редактировать аукцион {currentAuction.uuid}
2023-12-15 13:25:44 +03:00
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput2">
<Form.Label>Название аукциона*</Form.Label>
<Form.Control
type="text"
placeholder="Название аукциона*"
value={newAuctionName}
onChange={(e) => setNewAuctionName(e.target.value)}
autoFocus
/>
</Form.Group>
<Form.Group
className="mb-3"
controlId="exampleForm.ControlTextarea1"
>
<Form.Label>Комментарий к аукциону</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
2023-12-18 18:31:43 +03:00
<ButtonUi title={'Сохранить изменения'} variant={ButtonUiType.PRIMARY} event={editAuction}/>
2023-12-15 13:25:44 +03:00
</Modal.Footer>
</Modal>
)
}