nik.polishuk/TenderReact
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

auction api

Browse Source
This commit is contained in:
Mikola 2023-12-19 16:23:03 +03:00
parent f27d98607e
commit 88a676f6fb
6 changed files with 120 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/AuctionPage/AuctionPage.tsx
View File

@ -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,6 +124,10 @@ export const AuctionPage = () => {
<ButtonUi title={'Применить'} variant={ButtonUiType.INFO} />
</div>
<div className={styles.info__tableWrapper}>
{loader ?
<LoaderUi animation={'border'} variant={'primary'} />
:
<>
<table>
<thead>
<tr className={styles.tableItem}>
@ -126,11 +140,11 @@ export const AuctionPage = () => {
</thead>
<tbody>
{auctionItems.map((item) => {
return <tr className={styles.tableItem} key={item.number}>
<td>{item.number}</td>
return <tr className={styles.tableItem} key={item.uuid}>
<td>{item.uuid}</td>
<td className={styles.tableItem__name}>{item.name}</td>
<td>{item.receptionDate}</td>
<td>{item.startDate}</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={() => {
@ -143,6 +157,8 @@ export const AuctionPage = () => {
</tbody>
</table>
<DefaultPagination pageCount={10} currentPage={2} />
</>
}
</div>
</div>
<AddAuctionModal

8
src/pages/AuctionPage/auctionPage.module.scss
View File

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

7
src/query/query.ts
View File

@ -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
View 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} />
)
}

9
src/types.ts
View File

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

17
src/widgets/EditAuctionModal/EditAuctionModal.tsx
View File

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