auction api
This commit is contained in:
Mikola
parent
f27d98607e
commit
88a676f6fb
@ -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<AuctionItem[]>([
|
||||
{
|
||||
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<AuctionItem[]>([])
|
||||
|
||||
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 (
|
||||
<div className={styles.home}>
|
||||
<BreadCrumbsUi links={[
|
||||
@ -114,35 +124,41 @@ export const AuctionPage = () => {
|
||||
<ButtonUi title={'Применить'} variant={ButtonUiType.INFO} />
|
||||
</div>
|
||||
<div className={styles.info__tableWrapper}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr className={styles.tableItem}>
|
||||
<td>№</td>
|
||||
<td>Название аукциона</td>
|
||||
<td>Прием заявок</td>
|
||||
<td>Проведение</td>
|
||||
<td>Статус</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{auctionItems.map((item) => {
|
||||
return <tr className={styles.tableItem} key={item.number}>
|
||||
<td>{item.number}</td>
|
||||
<td className={styles.tableItem__name}>{item.name}</td>
|
||||
<td>{item.receptionDate}</td>
|
||||
<td>{item.startDate}</td>
|
||||
<td>{item.status}</td>
|
||||
<td className={styles.tableItem__edit}>
|
||||
<img src={edit} alt="edit" onClick={() => {
|
||||
setCurrentEditAuction(item)
|
||||
setOpenEditModal(true)
|
||||
}}/>
|
||||
</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<DefaultPagination pageCount={10} currentPage={2} />
|
||||
{loader ?
|
||||
<LoaderUi animation={'border'} variant={'primary'} />
|
||||
:
|
||||
<>
|
||||
<table>
|
||||
<thead>
|
||||
<tr className={styles.tableItem}>
|
||||
<td>№</td>
|
||||
<td>Название аукциона</td>
|
||||
<td>Прием заявок</td>
|
||||
<td>Проведение</td>
|
||||
<td>Статус</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{auctionItems.map((item) => {
|
||||
return <tr className={styles.tableItem} key={item.uuid}>
|
||||
<td>{item.uuid}</td>
|
||||
<td className={styles.tableItem__name}>{item.name}</td>
|
||||
<td>{getCorrectDate((item.requestsStartDate))}</td>
|
||||
<td>{item.dateCreate}</td>
|
||||
<td>{item.status}</td>
|
||||
<td className={styles.tableItem__edit}>
|
||||
<img src={edit} alt="edit" onClick={() => {
|
||||
setCurrentEditAuction(item)
|
||||
setOpenEditModal(true)
|
||||
}}/>
|
||||
</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<DefaultPagination pageCount={10} currentPage={2} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<AddAuctionModal
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
&__info {
|
||||
width: 100%;
|
||||
margin: 35px 0;
|
||||
min-height: 168px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
@ -105,6 +106,9 @@
|
||||
}
|
||||
&__tableWrapper {
|
||||
min-width: 1243px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.tableItem {
|
||||
padding: 10px;
|
||||
@ -143,7 +147,7 @@
|
||||
|
||||
tr {
|
||||
display: grid;
|
||||
grid-template-columns: 7% 50% 16% 12% 10% 5%;
|
||||
grid-template-columns: 30% 20% 16% 12% 14% 8%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,7 +157,7 @@
|
||||
|
||||
tr {
|
||||
display: grid;
|
||||
grid-template-columns: 7% 50% 16% 12% 10% 5%;
|
||||
grid-template-columns: 30% 20% 16% 12% 14% 8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
import axios from 'axios'
|
||||
import { removeCookie } from 'typescript-cookie'
|
||||
import { removeCookie, getCookie } from 'typescript-cookie'
|
||||
|
||||
export const api = axios.create({
|
||||
baseURL: 'https://tender.prof-press.ru/api/v1/',
|
||||
headers: {
|
||||
accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': getCookie('authToken') ? `Bearer ${getCookie('authToken')}` : ''
|
||||
},
|
||||
})
|
||||
|
||||
api.interceptors.response.use(undefined, async function (error) {
|
||||
if (error?.response?.status === 401) {
|
||||
removeCookie('access-token')
|
||||
removeCookie('refresh-token')
|
||||
removeCookie('authToken')
|
||||
removeCookie('refreshToken')
|
||||
}
|
||||
return Promise.reject(error)
|
||||
})
|
||||
|
||||
14
src/shared/UI/LoaderUi/LoaderUi.tsx
Normal file
14
src/shared/UI/LoaderUi/LoaderUi.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
|
||||
import Spinner from 'react-bootstrap/Spinner';
|
||||
|
||||
interface LoaderUi {
|
||||
animation: 'border' | 'grow',
|
||||
variant: string
|
||||
}
|
||||
|
||||
export const LoaderUi:React.FC<LoaderUi> = ({animation, variant}) => {
|
||||
return (
|
||||
<Spinner animation={animation} variant={variant} />
|
||||
)
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
|
||||
|
||||
@ -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<AddAuctionModalProps> = ({showModal, onHide, currentAuction, editAuctionItem}) => {
|
||||
@ -27,7 +20,7 @@ export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHi
|
||||
}, [currentAuction])
|
||||
|
||||
const editAuction = () => {
|
||||
editAuctionItem(newAuctionName, currentAuction.number)
|
||||
editAuctionItem(newAuctionName, currentAuction.uuid)
|
||||
onHide()
|
||||
}
|
||||
return (
|
||||
@ -40,7 +33,7 @@ export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHi
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title id="contained-modal-title-vcenter">
|
||||
Редактировать аукцион №{currentAuction.number}
|
||||
Редактировать аукцион №{currentAuction.uuid}
|
||||
</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user