Modals

src/components/ModalAddAuction/ModalAddAuction.js

@@ -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;

src/components/ModalAddAuction/modalAddAuction.scss

@@ -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;
+}

src/components/ModalEditAuction/ModalEditAuction.js

@@ -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;

src/components/ModalEditAuction/modalEditAuction.scss

@@ -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;
+}

src/components/ModalLayout/ModalLayout.js

@@ -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;

src/components/ModalLayout/modalLayout.scss

@@ -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;
+}

src/pages/Home/Home.js

@@ -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>
     );
 };