вынесение компонентов на странице результатов
This commit is contained in:
Tamara
parent
9839f8b9de
commit
dfa690685a
@ -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 (
|
||||
<Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
|
||||
@ -222,177 +234,55 @@ export const QuizAnswersPage: FC = () => {
|
||||
width: isTablet ? "auto" : "100%",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<IconButton
|
||||
onClick={async () => {
|
||||
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",
|
||||
}}
|
||||
>
|
||||
<FileExportIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
}}
|
||||
onClick={async () => {
|
||||
const result = await resultApi.getList(
|
||||
<SettingResults
|
||||
onclickExport={async () => {
|
||||
try {
|
||||
const data = await resultApi.export(
|
||||
editQuizId,
|
||||
page - 1,
|
||||
parseFilters(),
|
||||
);
|
||||
console.log(result);
|
||||
setResults(result);
|
||||
}}
|
||||
>
|
||||
<UpdateIcon />
|
||||
</IconButton>
|
||||
console.log(typeof data);
|
||||
|
||||
{isTablet && (
|
||||
<IconButton
|
||||
onClick={() => setFilterModalOpen(true)}
|
||||
sx={{
|
||||
background: "#fff",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
}}
|
||||
>
|
||||
<FilterIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
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 && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
width: "100%",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
items={itemsTime}
|
||||
data={filterDate}
|
||||
onChange={filterDateHC}
|
||||
placeholder="За всё время"
|
||||
/>
|
||||
<Select
|
||||
items={itemsNews}
|
||||
data={filterNew}
|
||||
onChange={filterNewHC}
|
||||
placeholder="Все заявки"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
setFilterNew("Все заявки");
|
||||
setFilterDate("За всё время");
|
||||
}}
|
||||
sx={{
|
||||
maxWidth: "200px",
|
||||
width: "100%",
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
color: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
Сбросить фильтры
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
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}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Pagination
|
||||
variant="pena-pagination"
|
||||
count={countPagination}
|
||||
<CustomPagination
|
||||
countPagination={countPagination}
|
||||
page={page}
|
||||
onChange={async (e, value) => {
|
||||
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 && (
|
||||
|
||||
123
src/pages/QuizAnswersPage/SettingResults.tsx
Normal file
123
src/pages/QuizAnswersPage/SettingResults.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
|
||||
<IconButton
|
||||
onClick={onclickExport}
|
||||
sx={{
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
}}
|
||||
>
|
||||
<FileExportIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
sx={{
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
}}
|
||||
onClick={onclickUpdate}
|
||||
>
|
||||
<UpdateIcon />
|
||||
</IconButton>
|
||||
|
||||
{isTablet && (
|
||||
<IconButton
|
||||
onClick={onclickFilterTablet}
|
||||
sx={{
|
||||
background: "#fff",
|
||||
width: "44px",
|
||||
height: "44px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
}}
|
||||
>
|
||||
<FilterIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{!isTablet && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
width: "100%",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
items={itemsTime}
|
||||
data={filterDate}
|
||||
onChange={filterDateHC}
|
||||
placeholder="За всё время"
|
||||
/>
|
||||
<Select
|
||||
items={itemsNews}
|
||||
data={filterNew}
|
||||
onChange={filterNewHC}
|
||||
placeholder="Все заявки"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={onclickResetFilers}
|
||||
sx={{
|
||||
maxWidth: "200px",
|
||||
width: "100%",
|
||||
height: "48px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #7E2AEA",
|
||||
color: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
Сбросить фильтры
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -49,7 +49,7 @@ export const createTariffElements = (
|
||||
onClick: () =>
|
||||
onclick({
|
||||
id: tariff._id,
|
||||
price: (priceAfterDiscounts / 100),
|
||||
price: priceAfterDiscounts / 100,
|
||||
}),
|
||||
}}
|
||||
headerText={tariff.name}
|
||||
|
||||
68
src/ui_kit/CustomPagination.tsx
Normal file
68
src/ui_kit/CustomPagination.tsx
Normal file
@ -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 (
|
||||
<Pagination
|
||||
count={countPagination}
|
||||
page={page}
|
||||
onChange={onChange}
|
||||
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",
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user