From d099886c9d77bb1666e60540703010c32ff36852 Mon Sep 17 00:00:00 2001 From: Mikola Date: Fri, 10 Nov 2023 17:04:38 +0300 Subject: [PATCH] Modals --- .../ModalAddAuction/ModalAddAuction.js | 40 ++++++++++++++ .../ModalAddAuction/modalAddAuction.scss | 46 ++++++++++++++++ .../ModalEditAuction/ModalEditAuction.js | 55 +++++++++++++++++++ .../ModalEditAuction/modalEditAuction.scss | 46 ++++++++++++++++ src/components/ModalLayout/ModalLayout.js | 22 ++++++++ src/components/ModalLayout/modalLayout.scss | 16 ++++++ src/pages/Home/Home.js | 37 +++++++++---- 7 files changed, 252 insertions(+), 10 deletions(-) create mode 100644 src/components/ModalAddAuction/ModalAddAuction.js create mode 100644 src/components/ModalAddAuction/modalAddAuction.scss create mode 100644 src/components/ModalEditAuction/ModalEditAuction.js create mode 100644 src/components/ModalEditAuction/modalEditAuction.scss create mode 100644 src/components/ModalLayout/ModalLayout.js create mode 100644 src/components/ModalLayout/modalLayout.scss diff --git a/src/components/ModalAddAuction/ModalAddAuction.js b/src/components/ModalAddAuction/ModalAddAuction.js new file mode 100644 index 0000000..447c8be --- /dev/null +++ b/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 ( + +
+

Добавить новый аукцион

+
+ Название аукциона* + setNewAuctionName(e.target.value)}/> +
+ +
+ + ); +}; + +export default ModalAddAuction; diff --git a/src/components/ModalAddAuction/modalAddAuction.scss b/src/components/ModalAddAuction/modalAddAuction.scss new file mode 100644 index 0000000..20455a9 --- /dev/null +++ b/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; +} diff --git a/src/components/ModalEditAuction/ModalEditAuction.js b/src/components/ModalEditAuction/ModalEditAuction.js new file mode 100644 index 0000000..f977a11 --- /dev/null +++ b/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 ( + +
+

Редактировать аукцион

+
+ Название аукциона* + +
+ +
+ + ); +}; + +export default ModalEditAuction; diff --git a/src/components/ModalEditAuction/modalEditAuction.scss b/src/components/ModalEditAuction/modalEditAuction.scss new file mode 100644 index 0000000..ab9c6f2 --- /dev/null +++ b/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; +} diff --git a/src/components/ModalLayout/ModalLayout.js b/src/components/ModalLayout/ModalLayout.js new file mode 100644 index 0000000..b4f7475 --- /dev/null +++ b/src/components/ModalLayout/ModalLayout.js @@ -0,0 +1,22 @@ +import React from "react"; + +import "./modalLayout.scss"; + +export const ModalLayout = ({ + active, + close, + children +}) => { + return ( +
close(false)} + > +
e.stopPropagation()}> + {children} +
+
+ ); +}; + +export default ModalLayout; diff --git a/src/components/ModalLayout/modalLayout.scss b/src/components/ModalLayout/modalLayout.scss new file mode 100644 index 0000000..0a3ad49 --- /dev/null +++ b/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; +} diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index fc69622..f997cc0 100644 --- a/src/pages/Home/Home.js +++ b/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 (
{

Аукционы

-
@@ -93,7 +98,10 @@ const Home = () => { {item.startDate} {item.status} - edit + edit { + setCurrentEditAuction(item) + setOpenEditModal(true) + }}/> })} @@ -102,7 +110,7 @@ const Home = () => {
arrow {pagesMock.slice(0, 5).map((item) => { - return

{item}

+ return

{item}

})} {pagesMock.length > 5 && <> @@ -114,6 +122,15 @@ const Home = () => {
+ + {currentEditAuction && + + }
); };