victorbatischev/react-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modals

Browse Source
This commit is contained in:
Mikola 2023-11-10 17:04:38 +03:00
parent 909611387e
commit d099886c9d
7 changed files with 252 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ModalAddAuction/ModalAddAuction.js Normal file
View File

@ -0,0 +1,40 @@
import React, {useState} from "react";
import ModalLayout from "../ModalLayout/ModalLayout";
import "./modalAddAuction.scss";
export const ModalAddAuction = ({
active,
close,
setAuctionItems
}) => {
const [newAuctionName, setNewAuctionName] = useState('')
const addNewAuction = () => {
setAuctionItems((prevValue) => [...prevValue, {
number: prevValue.length + 1,
name: newAuctionName,
receptionDate: '17.04.23-18.04.23',
startDate: '18.04.23',
status: 'Сбор заявок'
}])
setNewAuctionName('')
close(false)
}
return (
<ModalLayout active={active} close={close}>
<div className='modalAddAuction'>
<h3 className='modalAddAuction__title'>Добавить новый аукцион</h3>
<div className='modalAddAuction__inputWrapper'>
<span>Название аукциона*</span>
<input value={newAuctionName} placeholder='Название аукциона' onChange={(e) => setNewAuctionName(e.target.value)}/>
</div>
<button onClick={addNewAuction} className={newAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
Добавить новый аукцион
</button>
</div>
</ModalLayout>
);
};
export default ModalAddAuction;

46
src/components/ModalAddAuction/modalAddAuction.scss Normal file
View File

@ -0,0 +1,46 @@
.modalAddAuction {
padding: 20px;
background-color: white;
position: relative;
border-radius: 8px;
display: flex;
flex-direction: column;
row-gap: 10px;
&__title {
font-size: 35px;
font-weight: 700;
}
&__inputWrapper {
display: flex;
flex-direction: column;
row-gap: 8px;
span {
font-weight: 600;
font-size: 15px;
}
input {
border-radius: 8px;
padding: 10px;
}
}
&__create {
cursor: pointer;
margin: 0 auto;
color: white;
font-size: 15px;
background-color: gray;
max-width: 300px;
border: none;
border-radius: 8px;
padding: 10px 20px;
}
}
.disable {
opacity: 0.5;
pointer-events: none;
}

55
src/components/ModalEditAuction/ModalEditAuction.js Normal file
View File

@ -0,0 +1,55 @@
import React, {useState, useEffect} from "react";
import ModalLayout from "../ModalLayout/ModalLayout";
import "./modalEditAuction.scss";
export const ModalEditAuction = ({
active,
close,
currentAuction,
setAuctionItems
}) => {
const [newAuctionName, setNewAuctionName] = useState('')
useEffect(() => {
setNewAuctionName(currentAuction.name)
}, [currentAuction])
const onChangeHandler = (e) => {
setNewAuctionName(e.target.value)
}
const editAuction = () => {
setAuctionItems((prevValue) => {
return prevValue.map((item) => {
if (item.number === currentAuction.number) {
return {...item, name: newAuctionName}
}
return item
})
})
close(false)
}
return (
<ModalLayout active={active} close={close}>
<div className='modalEditAuction'>
<h3 className='modalEditAuction__title'>Редактировать аукцион </h3>
<div className='modalEditAuction__inputWrapper'>
<span>Название аукциона*</span>
<input
value={newAuctionName}
type='text'
placeholder='Название аукциона'
onChange={onChangeHandler}
/>
</div>
<button onClick={editAuction} className={newAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
Сохранить изменения
</button>
</div>
</ModalLayout>
);
};
export default ModalEditAuction;

46
src/components/ModalEditAuction/modalEditAuction.scss Normal file
View File

@ -0,0 +1,46 @@
.modalEditAuction {
padding: 20px;
background-color: white;
position: relative;
border-radius: 8px;
display: flex;
flex-direction: column;
row-gap: 10px;
&__title {
font-size: 35px;
font-weight: 700;
}
&__inputWrapper {
display: flex;
flex-direction: column;
row-gap: 8px;
span {
font-weight: 600;
font-size: 15px;
}
input {
border-radius: 8px;
padding: 10px;
}
}
&__create {
cursor: pointer;
margin: 0 auto;
color: white;
font-size: 15px;
background-color: gray;
max-width: 300px;
border: none;
border-radius: 8px;
padding: 10px 20px;
}
}
.disable {
opacity: 0.5;
pointer-events: none;
}

22
src/components/ModalLayout/ModalLayout.js Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import "./modalLayout.scss";
export const ModalLayout = ({
active,
close,
children
}) => {
return (
<div
className={active ? `modal-layout active` : "modal-layout"}
onClick={() => close(false)}
>
<div onClick={(e) => e.stopPropagation()}>
{children}
</div>
</div>
);
};
export default ModalLayout;

16
src/components/ModalLayout/modalLayout.scss Normal file
View File

@ -0,0 +1,16 @@
.modal-layout {
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
align-items: center;
justify-content: center;
display: none;
}
.active {
display: flex;
}

37
src/pages/Home/Home.js
View File

@ -1,7 +1,9 @@
import React from "react";
import React, {useState} from "react";
import BreadCrumbs from "../../components/BreadCrumbs/BreadCrumbs";
import FilterItem from "../../components/FilterItem/FilterItem";
import ModalAddAuction from "../../components/ModalAddAuction/ModalAddAuction";
import ModalEditAuction from "../../components/ModalEditAuction/ModalEditAuction";
import loupe from "../../assets/images/loupe.png"
import filterImg from "../../assets/images/filter.png"
@ -14,36 +16,39 @@ import "./home.scss"
const Home = () => {
const filterItems = ["Товарная группа", "Статус аукциона", "Новая заявка", "Выбрать период"]
const pagesMock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const auctionItems = [
const [auctionItems, setAuctionItems] = useState([
{
number: 324,
number: 1,
name: 'Аукцион на закупку в интересах компании ООО "Фабрика"',
receptionDate: '17.04.23-18.04.23',
startDate: '18.04.23',
status: 'Черновик'
},
{
number: 323,
number: 2,
name: 'Аукцион на закупку в интересах компании ООО "Пресс"',
receptionDate: '17.04.23-18.04.23',
startDate: '18.04.23',
status: 'Сбор заявок'
},
{
number: 322,
number: 3,
name: 'Аукцион на закупку в интересах компании ООО "Компания"',
receptionDate: '17.04.23-18.04.23',
startDate: '18.04.23',
status: 'Идут торги'
},
{
number: 321,
number: 4,
name: 'Аукцион на закупку в интересах компании ООО "Кот"',
receptionDate: '17.04.23-18.04.23',
startDate: '18.04.23',
status: 'В архиве'
},
]
])
const [openAddModal, setOpenAddModal] = useState(false)
const [openEditModal, setOpenEditModal] = useState(false)
const [currentEditAuction, setCurrentEditAuction] = useState(null)
return (
<div className="home">
<BreadCrumbs links={[
@ -52,7 +57,7 @@ const Home = () => {
<h2 className="home__title">Аукционы</h2>
<div className="home__info">
<div className="info__top">
<button>
<button onClick={() => setOpenAddModal(true)}>
+ Добавить аукцион
</button>
<div className="info__search">
@ -93,7 +98,10 @@ const Home = () => {
<td className="center">{item.startDate}</td>
<td className="center">{item.status}</td>
<td className="tableItem__edit">
<img src={edit} alt="edit" />
<img src={edit} alt="edit" onClick={() => {
setCurrentEditAuction(item)
setOpenEditModal(true)
}}/>
</td>
</tr>
})}
@ -102,7 +110,7 @@ const Home = () => {
<div className="table__pages">
<img className="prev" src={arrow} alt="arrow" />
{pagesMock.slice(0, 5).map((item) => {
return <p className={item === 1 ? "active" : ""}>{item}</p>
return <p className={item === 1 ? "active" : ""} key={item}>{item}</p>
})}
{pagesMock.length > 5 &&
<>
@ -114,6 +122,15 @@ const Home = () => {
</div>
</div>
</div>
<ModalAddAuction active={openAddModal} close={setOpenAddModal} setAuctionItems={setAuctionItems} />
{currentEditAuction &&
<ModalEditAuction
active={openEditModal}
close={setOpenEditModal}
currentAuction={currentEditAuction}
setAuctionItems={setAuctionItems}
/>
}
</div>
);
};