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

fixes

Browse Source
This commit is contained in:
Mikola 2023-11-13 19:05:17 +03:00
parent f573e23d01
commit 18051f3705
11 changed files with 275 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer/footer.scss
View File

@ -1,6 +1,6 @@
.footer {
padding: 50px 0 35px;
background-color: #4d4d4d;
background-color: #2f95f2;
color: white;
height: 450px;
@ -58,7 +58,7 @@
max-width: 250px;
color: white;
font-weight: 600;
background-color: gray;
background-color: #00529d;
}
}

8
src/components/Header/header.scss
View File

@ -1,6 +1,8 @@
.header {
background: gray;
background: #2f95f2;
padding: 10px 0;
position: relative;
color: white;
&__logo {
font-size: 30px;
@ -45,7 +47,7 @@
border-radius: 50px;
width: 30px;
height: 30px;
background-color: #b0aeae;
background-color: #0d8afb;
img {
width: 28px;
@ -82,7 +84,7 @@
display: none;
flex-direction: column;
border-radius: 8px;
background-color: #d9d9d9;
background-color: #0270d5;
padding: 10px;
position: absolute;
right: 10px;

106
src/components/Modal/Modal.js Normal file
View File

@ -0,0 +1,106 @@
import React, {useState, useEffect} from "react";
import ModalLayout from "../ModalLayout/ModalLayout";
import closeImg from "../../assets/images/closeBurger.png"
import "./modal.scss";
export const Modal = ({
active,
close,
currentAuction,
setAuctionItems,
type
}) => {
const [newAuctionName, setNewAuctionName] = useState('')
const [addAuctionName, setAddNewAuctionName] = useState('')
useEffect(() => {
currentAuction ? setNewAuctionName(currentAuction.name) : setNewAuctionName('')
}, [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)
}
const addNewAuction = () => {
setAuctionItems((prevValue) => [...prevValue, {
number: prevValue.length + 1,
name: addAuctionName,
receptionDate: '17.04.23-18.04.23',
startDate: '18.04.23',
status: 'Сбор заявок'
}])
setAddNewAuctionName('')
close(false)
}
return (
<ModalLayout active={active} close={close}>
<div className='modal__wrapper'>
<img className='modal__close' src={closeImg} alt='close' onClick={() => close(false)} />
{type === 'edit' &&
<div className='modalEditAuction'>
<h3 className='modalEditAuction__title'>Редактировать аукцион </h3>
<div className='modalEditAuction__inputWrapper'>
<span>Название аукциона*</span>
<input
value={newAuctionName}
type='text'
placeholder='Название аукциона'
onChange={onChangeHandler}
/>
</div>
<div className='modalEditAuction__inputWrapper'>
<span>Комментарий к аукциону*</span>
<textarea placeholder='Комментарий к аукциону' />
</div>
<button onClick={editAuction} className={newAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
Сохранить изменения
</button>
<div className='modalEditAuction__warning'>
<span>Внимание</span>
<p>Если аукцион опубликован, участники будут оповещены о изменениях автоматически.</p>
</div>
</div>
}
{type === 'add' &&
<div className='modalAddAuction'>
<h3 className='modalAddAuction__title'>Добавить новый аукцион</h3>
<div className='modalAddAuction__inputWrapper'>
<span>Название аукциона*</span>
<input value={addAuctionName} placeholder='Название аукциона' onChange={(e) => setAddNewAuctionName(e.target.value)}/>
</div>
<div className='modalAddAuction__inputWrapper'>
<span>Комментарий к аукциону*</span>
<textarea placeholder='Комментарий к аукциону' />
</div>
<div className='modalAddAuction__bottom'>
<button onClick={addNewAuction} className={addAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
Добавить новый аукцион
</button>
<div className='modalAddAuction__addFile'>
<span>Документы аукциона:</span>
<p>Прикрепить файл</p>
</div>
</div>
</div>
}
</div>
</ModalLayout>
);
};
export default Modal;

145
src/components/Modal/modal.scss Normal file
View File

@ -0,0 +1,145 @@
.modal {
&__wrapper {
padding: 20px;
background-color: white;
position: relative;
border-radius: 8px;
}
&__close {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
width: 15px;
height: 15px;
}
}
.modalEditAuction {
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;
outline: none;
}
textarea {
height: 150px;
border-radius: 8px;
padding: 10px;
outline: none;
resize: none;
font-size: 15px;
border: 2px solid gray;
}
}
&__warning {
padding: 10px;
border-radius: 8px;
border: 2px solid #0101a9;
span {
font-weight: 700;
font-size: 18px;
}
p {
color: gray;
font-size: 12px;
}
}
}
.modalAddAuction {
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;
}
textarea {
height: 150px;
border-radius: 8px;
padding: 10px;
outline: none;
resize: none;
font-size: 15px;
border: 2px solid gray;
}
}
&__create {
cursor: pointer;
color: white;
font-size: 15px;
background-color: #0255ff;
max-width: 215px;
border: none;
border-radius: 8px;
padding: 10px 20px;
}
&__bottom {
display: flex;
column-gap: 15px;
}
&__addFile {
display: flex;
flex-direction: column;
span {
font-size: 14px;
font-weight: 600;
}
p {
cursor: pointer;
font-size: 12px;
color: gray;
}
}
}
.disable {
opacity: 0.5;
pointer-events: none;
}

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

@ -1,40 +0,0 @@
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
View File

@ -1,46 +0,0 @@
.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
View File

@ -1,55 +0,0 @@
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
View File

@ -1,46 +0,0 @@
.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;
}

2
src/components/SocialItem/socialItem.scss
View File

@ -3,7 +3,7 @@
align-items: center;
justify-content: center;
border-radius: 50px;
background-color: #b6b6b6;
background-color: #0d8afb;
width: 30px;
height: 30px;

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

@ -2,8 +2,7 @@ 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 Modal from "../../components/Modal/Modal";
import loupe from "../../assets/images/loupe.png"
import filterImg from "../../assets/images/filter.png"
@ -122,9 +121,17 @@ const Home = () => {
</div>
</div>
</div>
<ModalAddAuction active={openAddModal} close={setOpenAddModal} setAuctionItems={setAuctionItems} />
{openAddModal &&
<Modal
type='add'
active={openAddModal}
close={setOpenAddModal}
setAuctionItems={setAuctionItems}
/>
}
{currentEditAuction &&
<ModalEditAuction
<Modal
type='edit'
active={openEditModal}
close={setOpenEditModal}
currentAuction={currentEditAuction}

10
src/pages/Home/home.scss
View File

@ -14,7 +14,7 @@
overflow: auto;
&::-webkit-scrollbar-thumb {
background: #333333;
background: #0255ff;
border-radius: 5px;
}
@ -32,7 +32,7 @@
min-width: 1213px;
button {
background-color: #b6b6b6;
background-color: #00529d;
color: white;
cursor: pointer;
padding: 10px 20px;
@ -65,7 +65,7 @@
&__filters {
display: flex;
padding: 10px 15px;
background-color: #e6e6e6;
background-color: #2f95f2;
align-items: center;
justify-content: space-between;
min-width: 1213px;
@ -103,11 +103,11 @@
.filter {
&__reset {
background-color: darkgrey;
background-color: #0668c2;
}
&__confirm {
background-color: gray;
background-color: #00529d;
}
}
}