From dfa690685adad4093275c0f44f2fb5938f6e459f Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 22 Feb 2024 00:16:10 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=BE=D0=B2=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B5=20=D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C?= =?UTF-8?q?=D1=82=D0=B0=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/QuizAnswersPage/QuizAnswersPage.tsx | 216 +++++------------- src/pages/QuizAnswersPage/SettingResults.tsx | 123 ++++++++++ .../tariffsUtils/createTariffElements.tsx | 2 +- src/ui_kit/CustomPagination.tsx | 68 ++++++ 4 files changed, 245 insertions(+), 164 deletions(-) create mode 100644 src/pages/QuizAnswersPage/SettingResults.tsx create mode 100644 src/ui_kit/CustomPagination.tsx diff --git a/src/pages/QuizAnswersPage/QuizAnswersPage.tsx b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx index 292ebccb..facfeed2 100644 --- a/src/pages/QuizAnswersPage/QuizAnswersPage.tsx +++ b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx @@ -37,6 +37,8 @@ import { setQuestions } from "@root/questions/actions"; import { useUserStore } from "@root/user"; import type { AxiosError } from "axios"; +import CustomPagination from "@ui_kit/CustomPagination"; +import SettingResults from "./SettingResults"; const itemsCities = [ { label: "Муром (1)", value: "option1" }, @@ -170,6 +172,16 @@ export const QuizAnswersPage: FC = () => { } }; + const PaginationHC = async (e, value) => { + setPage(value); + const result = await resultApi.getList( + editQuizId, + value - 1, + parseFilters(), + ); + setResults(result); + }; + if (quiz === undefined) return ( @@ -222,177 +234,55 @@ export const QuizAnswersPage: FC = () => { width: isTablet ? "auto" : "100%", }} > - - { - try { - const data = await resultApi.export( - editQuizId, - parseFilters(), - ); - console.log(typeof data); - - const blob = data; - const link = document.createElement("a"); - link.href = window.URL.createObjectURL(blob); - link.download = `report_${new Date().getTime()}.xlsx`; - link.click(); - } catch (nativeError) { - const error = nativeError as AxiosError; - - if (error.response?.statusText === "Payment Required") { - setPrePaymentModalOpen(true); - } - } - }} - sx={{ - width: "44px", - height: "44px", - borderRadius: "8px", - border: "1px solid #7E2AEA", - }} - > - - - { - const result = await resultApi.getList( + { + try { + const data = await resultApi.export( editQuizId, - page - 1, parseFilters(), ); - console.log(result); - setResults(result); - }} - > - - + console.log(typeof data); - {isTablet && ( - setFilterModalOpen(true)} - sx={{ - background: "#fff", - width: "44px", - height: "44px", - borderRadius: "8px", - border: "1px solid #7E2AEA", - }} - > - - - )} - + const blob = data; + const link = document.createElement("a"); + link.href = window.URL.createObjectURL(blob); + link.download = `report_${new Date().getTime()}.xlsx`; + link.click(); + } catch (nativeError) { + const error = nativeError as AxiosError; - {!isTablet && ( - - - - - - )} + if (error.response?.statusText === "Payment Required") { + setPrePaymentModalOpen(true); + } + } + }} + onclickUpdate={async () => { + const result = await resultApi.getList( + editQuizId, + page - 1, + parseFilters(), + ); + console.log(result); + setResults(result); + }} + onclickFilterTablet={() => setFilterModalOpen(true)} + onclickResetFilers={() => { + setFilterNew("Все заявки"); + setFilterDate("За всё время"); + }} + filterNewHC={filterNewHC} + filterDateHC={filterDateHC} + itemsTime={itemsTime} + itemsNews={itemsNews} + filterDate={filterDate} + filterNew={filterNew} + /> - { - setPage(value); - const result = await resultApi.getList( - editQuizId, - value - 1, - parseFilters(), - ); - setResults(result); - }} - sx={{ - marginRight: "-15px", - marginLeft: "-15px", - marginBottom: "20px", - "& .MuiPaginationItem-root": { - height: "30px", - width: "30px", - minWidth: "30px", - marginLeft: "5px", - marginRight: "5px", - backgroundColor: "white", - color: "black", - fontSize: "16px", - lineHeight: "20px", - fontWeight: 400, - borderRadius: "5px", - "&.Mui-selected": { - backgroundColor: "white", - color: "#7E2AEA", - fontWeight: 500, - }, - "&:hover": { - backgroundColor: "#ffffff55", - }, - "&:active": { - backgroundColor: "#7F2CEA", - color: "white", - }, - boxShadow: ` - 0px 77.2727px 238.773px rgba(210, 208, 225, 0.24), - 0px 32.2827px 99.7535px rgba(210, 208, 225, 0.172525), - 0px 17.2599px 53.333px rgba(210, 208, 225, 0.143066), - 0px 9.67574px 29.8981px rgba(210, 208, 225, 0.12), - 0px 5.13872px 15.8786px rgba(210, 208, 225, 0.0969343), - 0px 2.13833px 6.60745px rgba(210, 208, 225, 0.0674749) - `, - }, - "& .MuiPaginationItem-previousNext": { - backgroundColor: "#7E2AEA", - color: "white", - marginLeft: "15px", - marginRight: "15px", - "&:hover": { - backgroundColor: "#995DED", - }, - }, - }} + onChange={PaginationHC} /> {!isTablet && ( diff --git a/src/pages/QuizAnswersPage/SettingResults.tsx b/src/pages/QuizAnswersPage/SettingResults.tsx new file mode 100644 index 00000000..8ca6c0ce --- /dev/null +++ b/src/pages/QuizAnswersPage/SettingResults.tsx @@ -0,0 +1,123 @@ +import { + Box, + Button, + IconButton, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { FileExportIcon } from "./icons/FileExporIcon"; +import { UpdateIcon } from "./icons/UpdateIcon"; +import { FilterIcon } from "./icons/FilterIcon"; +import { Select } from "../Questions/Select"; + +interface Props { + onclickExport: () => void; + onclickUpdate: () => void; + onclickFilterTablet: () => void; + onclickResetFilers: () => void; + filterNewHC: (value: string) => void; + filterDateHC: (value: string) => void; + itemsTime: string[]; + itemsNews: string[]; + filterDate: string; + filterNew: string; +} + +export default function SettingResults({ + onclickExport, + onclickUpdate, + onclickFilterTablet, + onclickResetFilers, + filterNewHC, + filterDateHC, + itemsTime, + itemsNews, + filterDate, + filterNew, +}: Props) { + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + return ( + <> + + + + + + + + + {isTablet && ( + + + + )} + + + {!isTablet && ( + + + + + + )} + + ); +} diff --git a/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx b/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx index ff224bd9..a6d7959d 100644 --- a/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx +++ b/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx @@ -49,7 +49,7 @@ export const createTariffElements = ( onClick: () => onclick({ id: tariff._id, - price: (priceAfterDiscounts / 100), + price: priceAfterDiscounts / 100, }), }} headerText={tariff.name} diff --git a/src/ui_kit/CustomPagination.tsx b/src/ui_kit/CustomPagination.tsx new file mode 100644 index 00000000..c924edaa --- /dev/null +++ b/src/ui_kit/CustomPagination.tsx @@ -0,0 +1,68 @@ +import { Pagination } from "@mui/material"; +import { ChangeEvent } from "react"; +interface Props { + countPagination: number; + page: number; + onChange: (e: ChangeEvent, value: number) => void; +} + +export default function CustomPagination({ + countPagination, + page, + onChange, +}: Props) { + return ( + + ); +}