66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
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';
|
||
import { AuctionItem } from "../../types";
|
||
|
||
interface AddAuctionModalProps {
|
||
showModal: boolean,
|
||
onHide: () => void,
|
||
currentAuction: AuctionItem,
|
||
editAuctionItem: (newAuctionName:string, currentEditAuctionId:string) => void
|
||
}
|
||
|
||
export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHide, currentAuction, editAuctionItem}) => {
|
||
const [newAuctionName, setNewAuctionName] = useState('')
|
||
|
||
useEffect(() => {
|
||
currentAuction ? setNewAuctionName(currentAuction.name) : setNewAuctionName('')
|
||
}, [currentAuction])
|
||
|
||
const editAuction = () => {
|
||
editAuctionItem(newAuctionName, currentAuction.uuid)
|
||
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">
|
||
Редактировать аукцион №{currentAuction.uuid}
|
||
</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>
|
||
<ButtonUi title={'Сохранить изменения'} variant={ButtonUiType.PRIMARY} event={editAuction}/>
|
||
</Modal.Footer>
|
||
</Modal>
|
||
)
|
||
}
|