From 88a676f6fbc8a2fbca33b9356dc497ddb791ab02 Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 19 Dec 2023 16:23:03 +0300 Subject: [PATCH] auction api --- src/pages/AuctionPage/AuctionPage.tsx | 154 ++++++++++-------- src/pages/AuctionPage/auctionPage.module.scss | 8 +- src/query/query.ts | 7 +- src/shared/UI/LoaderUi/LoaderUi.tsx | 14 ++ src/types.ts | 9 +- .../EditAuctionModal/EditAuctionModal.tsx | 17 +- 6 files changed, 120 insertions(+), 89 deletions(-) create mode 100644 src/shared/UI/LoaderUi/LoaderUi.tsx diff --git a/src/pages/AuctionPage/AuctionPage.tsx b/src/pages/AuctionPage/AuctionPage.tsx index f652d27..930e40e 100644 --- a/src/pages/AuctionPage/AuctionPage.tsx +++ b/src/pages/AuctionPage/AuctionPage.tsx @@ -1,7 +1,8 @@ -import React, {useState} from "react"; +import React, { useState, useEffect } from "react"; import { BreadCrumbsUi } from "../../shared/UI/BreadCrumbsUi"; import {ButtonUi, ButtonUiType} from "../../shared/UI/ButtonUi"; +import { LoaderUi } from "../../shared/UI/LoaderUi/LoaderUi"; import { DefaultDropDown } from "../../entities/DefaultDropDown"; import { DefaultPagination } from "../../entities/DefaultPagination"; import { AddAuctionModal } from "../../widgets/AddAuctionModal"; @@ -10,6 +11,8 @@ import Form from 'react-bootstrap/Form'; import { AuctionItem } from "../../types"; import { filterItems } from "../../constants/data"; +import { api } from "../../query/query"; + import loupe from "../../shared/images/loupe.png" import filterImg from "../../shared/images/filter.png" import close from "../../shared/images/close.png" @@ -19,63 +22,42 @@ import styles from "./auctionPage.module.scss" export const AuctionPage = () => { - const [auctionItems, setAuctionItems] = useState([ - { - number: 1, - name: 'Аукцион на закупку в интересах компании ООО "Фабрика"', - receptionDate: '17.04.23-18.04.23', - startDate: '18.04.23', - status: 'Черновик' - }, - { - number: 2, - name: 'Аукцион на закупку в интересах компании ООО "Пресс"', - receptionDate: '17.04.23-18.04.23', - startDate: '18.04.23', - status: 'Сбор заявок' - }, - { - number: 3, - name: 'Аукцион на закупку в интересах компании ООО "Компания"', - receptionDate: '17.04.23-18.04.23', - startDate: '18.04.23', - status: 'Идут торги' - }, - { - number: 4, - name: 'Аукцион на закупку в интересах компании ООО "Кот"', - receptionDate: '17.04.23-18.04.23', - startDate: '18.04.23', - status: 'В архиве' - }, - ]) + const [auctionItems, setAuctionItems] = useState([]) const [openAddModal, setOpenAddModal] = useState(false) + const [loader, setLoader] = useState(false) + const [openEditModal, setOpenEditModal] = useState(false) const [currentEditAuction, setCurrentEditAuction] = useState({ - number: 0, + uuid: '018c448e-c7d7-7092-b151-08f8d8bc410e', + dateCreate: "2023-12-07 16:54:17", name: '', - receptionDate: '', - startDate: '', - status: '' + auctionStartDate: "2023-12-22 16:03:00", + description: "", + requestsEndDate: "2023-12-21 16:03:00", + requestsStartDate: "2023-12-18 16:06:00", + status: 'Сбор заявок' }) const addNewAuction = (newAction: string) => { setAuctionItems((prevValue) => [...prevValue, { - number: prevValue.length + 1, + uuid: '018c448e-c7d7-7092-b151-08f8d8bc480e', + dateCreate: "2023-12-07 16:54:17", name: newAction, - receptionDate: '17.04.23-18.04.23', - startDate: '18.04.23', + auctionStartDate: "2023-12-22 16:03:00", + description: "", + requestsEndDate: "2023-12-21 16:03:00", + requestsStartDate: "2023-12-18 16:06:00", status: 'Сбор заявок' }]) } - const editAuctionItem = (newAuctionName: string, currentEditAuctionId: number) => { + const editAuctionItem = (newAuctionName: string, currentEditAuctionId: string) => { setAuctionItems((prevValue) => { return prevValue.map((item) => { - if (item.number === currentEditAuctionId) { + if (item.uuid === currentEditAuctionId) { return {...item, name: newAuctionName} } return item @@ -83,6 +65,34 @@ export const AuctionPage = () => { }) } + const getCorrectDate = (day:string) => { + const months = [ + "января", + "февраля", + "марта", + "апреля", + "мая", + "июня", + "июля", + "августа", + "сентября", + "октября", + "ноября", + "декабря", + ]; + return `${new Date(day).getDate()} ${ + months[new Date(day).getMonth()] + } ${new Date(day).getFullYear()} года`; + } + + useEffect(() => { + setLoader(true) + api.get('/auctions').then((res) => { + setAuctionItems(res.data) + setLoader(false) + }) + }, []) + return (
{
- - - - - - - - - - - - {auctionItems.map((item) => { - return - - - - - - - - })} - -
№Название аукционаПрием заявокПроведениеСтатус
{item.number}{item.name}{item.receptionDate}{item.startDate}{item.status} - edit { - setCurrentEditAuction(item) - setOpenEditModal(true) - }}/> -
- + {loader ? + + : + <> + + + + + + + + + + + + {auctionItems.map((item) => { + return + + + + + + + + })} + +
№Название аукционаПрием заявокПроведениеСтатус
{item.uuid}{item.name}{getCorrectDate((item.requestsStartDate))}{item.dateCreate}{item.status} + edit { + setCurrentEditAuction(item) + setOpenEditModal(true) + }}/> +
+ + + }
= ({animation, variant}) => { + return ( + + ) +} diff --git a/src/types.ts b/src/types.ts index f019fca..918cfde 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,8 +1,11 @@ export interface AuctionItem { - number: number, + uuid: string, name: string, - receptionDate: string, - startDate: string, + description: string, + requestsStartDate: string, + requestsEndDate: string, + auctionStartDate: string, + dateCreate: string status: string } diff --git a/src/widgets/EditAuctionModal/EditAuctionModal.tsx b/src/widgets/EditAuctionModal/EditAuctionModal.tsx index d03f7a4..03fd558 100644 --- a/src/widgets/EditAuctionModal/EditAuctionModal.tsx +++ b/src/widgets/EditAuctionModal/EditAuctionModal.tsx @@ -3,20 +3,13 @@ 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'; - -type auctionItem = { - number: number, - name: string, - receptionDate: string, - startDate: string, - status: string -} +import { AuctionItem } from "../../types"; interface AddAuctionModalProps { showModal: boolean, onHide: () => void, - currentAuction: auctionItem, - editAuctionItem: (newAuctionName:string, currentEditAuctionId:number) => void + currentAuction: AuctionItem, + editAuctionItem: (newAuctionName:string, currentEditAuctionId:string) => void } export const EditAuctionModal:React.FC = ({showModal, onHide, currentAuction, editAuctionItem}) => { @@ -27,7 +20,7 @@ export const EditAuctionModal:React.FC = ({showModal, onHi }, [currentAuction]) const editAuction = () => { - editAuctionItem(newAuctionName, currentAuction.number) + editAuctionItem(newAuctionName, currentAuction.uuid) onHide() } return ( @@ -40,7 +33,7 @@ export const EditAuctionModal:React.FC = ({showModal, onHi > - Редактировать аукцион №{currentAuction.number} + Редактировать аукцион №{currentAuction.uuid}