auction api

2023-12-19 16:23:03 +03:00
parent f27d98607e
commit 88a676f6fb
6 changed files with 120 additions and 89 deletions
--- 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<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
--- a/src/pages/AuctionPage/auctionPage.module.scss
+++ b/src/pages/AuctionPage/auctionPage.module.scss
@@ -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%;
            }
          }
        }
--- a/src/query/query.ts
+++ b/src/query/query.ts
@@ -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)
 })
--- a/src/shared/UI/LoaderUi/LoaderUi.tsx
+++ b/src/shared/UI/LoaderUi/LoaderUi.tsx
@@ -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} />
+    )
+}
--- 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
 }

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