SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
ArtChaos189 2024-01-22 01:09:26 +03:00
parent deb3a2c672
commit 3acee01801
6 changed files with 516 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/icons/ClockWiseIcon.tsx Normal file
View File

@ -0,0 +1,14 @@
export const ClockWiseIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M10.4115 22.35L11.1615 22.35L11.1615 20.85L10.4115 20.85L10.4115 22.35ZM19.2553 12L19.2553 12.75L20.7553 12.75L20.7553 12L19.2553 12ZM20.0053 13.6L19.4748 14.1302L20.0053 14.661L20.5358 14.1302L20.0053 13.6ZM10.4115 20.85C5.52885 20.85 1.56777 16.887 1.56777 12L0.0677734 12C0.0677731 17.7146 4.6995 22.35 10.4115 22.35L10.4115 20.85ZM1.56777 12C1.56777 7.11295 5.52885 3.15 10.4115 3.15L10.4115 1.65C4.6995 1.65 0.0677736 6.28545 0.0677734 12L1.56777 12ZM10.4115 3.15C15.2942 3.15 19.2553 7.11295 19.2553 12L20.7553 12C20.7553 6.28545 16.1235 1.65 10.4115 1.65L10.4115 3.15ZM22.6726 9.86985L19.4748 13.0698L20.5358 14.1302L23.7336 10.9302L22.6726 9.86985ZM20.5358 13.0698L17.3377 9.86983L16.2767 10.9302L19.4748 14.1302L20.5358 13.0698Z"
fill="#7E2AEA"
/>
</svg>
);

249
src/pages/QuizAnswersPage/CardAnswer.tsx
View File

@ -18,129 +18,113 @@ export const CardAnswer: FC = () => {
<Box
onClick={() => setIsOpen(!isOpen)}
sx={{
borderRadius: "12px",
maxWidth: isTablet ? "450px" : "auto",
width: "100%",
display: "flex",
justifyContent: "space-between",
flexDirection: isTablet ? "column" : "-moz-initial",
boxShadow:
"0px 2.767px 8.551px 0px rgba(210, 208, 225, 0.07), 0px 6.65px 20.549px 0px rgba(210, 208, 225, 0.10), 0px 12.522px 38.692px 0px rgba(210, 208, 225, 0.12), 0px 22.336px 69.019px 0px rgba(210, 208, 225, 0.14), 0px 41.778px 129.093px 0px rgba(210, 208, 225, 0.17), 0px 100px 309px 0px rgba(210, 208, 225, 0.24)",
}}
>
<Box
sx={{
flexDirection: isTablet ? "column" : "-moz-initial",
cursor: "pointer",
p: "20px",
borderRadius: isOpen ? "0" : "12px 0 0 12px",
display: "flex",
alignItems: "flex-start",
background: "#FFF",
width: "100%",
display: "flex",
justifyContent: "space-between",
flexDirection: isTablet ? "column" : "-moz-initial",
}}
>
<Box
sx={{
width: isTablet ? "100%" : "auto",
flexDirection: isTablet ? "column" : "-moz-initial",
cursor: "pointer",
p: "20px",
borderRadius: isTablet
? "12px 12px 0 0"
: isOpen
? "12px 0 0 0"
: "12px 0 0 12px",
display: "flex",
alignItems: "flex-start",
flexDirection: isTablet ? "row-reverse" : "-moz-initial",
justifyContent: isTablet ? "space-between" : "-moz-initial",
pb: isTablet ? "20px" : "0",
mb: isTablet ? "20px" : "0",
borderBottom: isTablet
? "1px solid rgba(154, 154, 175, 0.50)"
: "0",
background: "#FFF",
width: "100%",
}}
>
<Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "30px",
height: "30px",
borderRadius: "50%",
background: "#EEE4FC",
color: "#7E2AEA",
}}
>
1
</Box>
<ArrowDownIcon
style={{ transform: isOpen ? "rotate(180deg)" : "0" }}
fontSize="10px"
/>
</Box>
<Typography
<Box
sx={{
ml: isTablet ? "0" : "50px",
mr: isTablet ? "0" : "188px",
fontSize: "18px",
color: "#7E2AEA",
maxWidth: "143px",
width: "100%",
}}
>
Сегодня в 18:59 Россия, Москва
</Typography>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
<ContactIcon />
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
Екатерина
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
<MessageIcon />
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
exampleemail@gmail.com
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
<PhoneIcon />
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
+79876543210
</Typography>
</Box>
</Box>
{!isTablet && (
<Typography
sx={{
ml: "auto",
width: isTablet ? "100%" : "auto",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#FB5607",
borderRadius: "8px",
width: "77px",
height: "36px",
color: "white",
alignItems: "flex-start",
flexDirection: isTablet ? "row-reverse" : "-moz-initial",
justifyContent: isTablet ? "space-between" : "-moz-initial",
pb: isTablet ? "20px" : "0",
mb: isTablet ? "20px" : "0",
borderBottom: isTablet
? "1px solid rgba(154, 154, 175, 0.50)"
: "0",
}}
>
Новая
</Typography>
)}
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "6px" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "30px",
height: "30px",
borderRadius: "50%",
background: "#EEE4FC",
color: "#7E2AEA",
}}
>
1
</Box>
<ArrowDownIcon
style={{
transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",
}}
fontSize="10px"
/>
</Box>
<Box
sx={{
p: isTablet ? "20px" : "0",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: isTablet ? "space-between" : "center",
width: isTablet ? "100%" : "100px",
background: "#F2F3F7",
}}
>
{isTablet ? (
<>
<Typography
sx={{
ml: isTablet ? "0" : "50px",
mr: isTablet ? "0" : "188px",
fontSize: "18px",
color: "#7E2AEA",
maxWidth: "143px",
width: "100%",
}}
>
Сегодня в 18:59 Россия, Москва
</Typography>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: "10px" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
<ContactIcon />
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
Екатерина
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
<MessageIcon />
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
exampleemail@gmail.com
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: "13px" }}>
<PhoneIcon />
<Typography sx={{ fontSize: "18px", color: "#4D4D4D" }}>
+79876543210
</Typography>
</Box>
</Box>
{!isTablet && (
<Typography
sx={{
ml: "auto",
display: "flex",
alignItems: "center",
justifyContent: "center",
@ -153,27 +137,60 @@ export const CardAnswer: FC = () => {
>
Новая
</Typography>
<Box sx={{ display: "flex", alignItems: "center" }}>
<EyeIcon />
<span
style={{
height: "50px",
width: "2px",
background: "rgba(154, 154, 175, 0.50)",
margin: "0 20px",
)}
</Box>
<Box
sx={{
borderRadius: "8px",
p: isTablet ? "20px" : "0",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: isTablet ? "space-between" : "center",
width: isTablet ? "100%" : "100px",
background: "#F2F3F7",
}}
>
{isTablet ? (
<>
<Typography
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "#FB5607",
borderRadius: "8px",
width: "77px",
height: "36px",
color: "white",
}}
/>
<DeleteIcon color="#4D4D4D" fontSize="34px" />
</Box>
</>
) : (
<DeleteIcon color="#4D4D4D" fontSize="34px" />
)}
>
Новая
</Typography>
<Box sx={{ display: "flex", alignItems: "center" }}>
<EyeIcon />
<span
style={{
height: "50px",
width: "2px",
background: "rgba(154, 154, 175, 0.50)",
margin: "0 20px",
}}
/>
<DeleteIcon color="#4D4D4D" fontSize="34px" />
</Box>
</>
) : (
<DeleteIcon color="#4D4D4D" fontSize="34px" />
)}
</Box>
</Box>
{isOpen && (
<Box
sx={{
borderRadius: "12px",
maxWidth: isTablet ? "450px" : "auto",
width: "100%",
boxShadow:

25
src/pages/QuizAnswersPage/QuizAnswersPage.tsx
View File

@ -15,6 +15,10 @@ import { Select } from "../../pages/Questions/Select";
import { CheckboxSelect } from "../../ui_kit/CheckboxSelect";
import { CardAnswer } from "./CardAnswer";
import { FilterIcon } from "./icons/FilterIcon";
import { FilterModal } from "@ui_kit/Modal/FilterModal/FilterModal";
import CalendarIcon from "@icons/CalendarIcon";
import { DatePicker, TimePicker } from "@mui/x-date-pickers";
import { ExportContactsModal } from "@ui_kit/Modal/ExportContactsModal";
const options = [
{ label: "Муром (1)", value: "option1" },
@ -24,10 +28,17 @@ const options = [
export const QuizAnswersPage: FC = () => {
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const [filterModalOpen, setFilterModalOpen] = useState<boolean>(false);
const [exportContactsModalOpen, setExportContactsModalOpen] =
useState<boolean>(false);
return (
<Box>
<HeaderFull />
<SectionWrapper maxWidth="lg">
<SectionWrapper
sx={{ padding: isMobile ? "0 16px" : "20px" }}
maxWidth="lg"
>
<Typography
sx={{ fontSize: "36px", fontWeight: "500", mb: "50px", mt: "60px" }}
>
@ -64,6 +75,7 @@ export const QuizAnswersPage: FC = () => {
>
<Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
<IconButton
onClick={() => setExportContactsModalOpen(true)}
sx={{
width: "44px",
height: "44px",
@ -86,7 +98,9 @@ export const QuizAnswersPage: FC = () => {
{isTablet && (
<IconButton
onClick={() => setFilterModalOpen(true)}
sx={{
background: "#fff",
width: "44px",
height: "44px",
borderRadius: "8px",
@ -183,6 +197,15 @@ export const QuizAnswersPage: FC = () => {
<CardAnswer />
</Box>
</SectionWrapper>
<FilterModal
open={filterModalOpen}
handleClose={() => setFilterModalOpen(false)}
/>
<ExportContactsModal
open={exportContactsModalOpen}
handleClose={() => setExportContactsModalOpen(false)}
/>
</Box>
);
};

16
src/ui_kit/CheckboxSelect.tsx
View File

@ -3,11 +3,10 @@ import {
FormControl,
MenuItem,
Select,
Checkbox,
ListItemText,
SelectChangeEvent,
} from "@mui/material";
import ArrowDown from "@icons/ArrowDownIcon";
import CustomCheckbox from "./CustomCheckbox";
type CheckboxSelectProps = {
options: { label: string; value: string }[];
@ -58,7 +57,7 @@ export const CheckboxSelect: React.FC<CheckboxSelectProps> = ({
mt: "8px",
p: "4px",
borderRadius: "8px",
backgroundColor: "#F5F2FF",
backgroundColor: "#fff",
border: "1px solid #EEE4FC",
boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
},
@ -70,7 +69,7 @@ export const CheckboxSelect: React.FC<CheckboxSelectProps> = ({
flexDirection: "column",
gap: "8px",
"& .Mui-selected": {
backgroundColor: "#F5F2FF",
backgroundColor: "#fff",
color: "#7E2AEA",
},
},
@ -109,17 +108,16 @@ export const CheckboxSelect: React.FC<CheckboxSelectProps> = ({
}}
value="SelectAll"
>
<Checkbox
sx={{ padding: "0", borderRadius: "6px" }}
<CustomCheckbox
checked={selectedValues.includes("SelectAll")}
label="Выбрать всё"
/>
<ListItemText primary="Выбрать все" />
</MenuItem>
{options.map((option) => (
<MenuItem key={option.value} value={option.value}>
<ListItemText primary={option.label} />
<Checkbox
<CustomCheckbox
sx={{ padding: "0", borderRadius: "6px" }}
label={option.label}
checked={selectedValues.includes(option.value)}
/>
</MenuItem>

190
src/ui_kit/Modal/ExportContactsModal.tsx Normal file
View File

@ -0,0 +1,190 @@
import {
Box,
Button,
Modal,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { FC } from "react";
import { DatePicker } from "@mui/x-date-pickers";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CalendarIcon from "@icons/CalendarIcon";
interface Iprops {
open: boolean;
handleClose: () => void;
}
export const ExportContactsModal: FC<Iprops> = ({ open, handleClose }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const style = {
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "100%",
maxWidth: isMobile ? 343 : 620,
bgcolor: "background.paper",
boxShadow: 24,
borderRadius: "12px",
};
return (
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box
sx={{
background: "#F2F3F7",
p: "25px 20px",
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
}}
>
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
Настройте фильтры отображения
</Typography>
</Box>
<Box
sx={{
mt: "10px",
display: "flex",
flexDirection: isMobile ? "column" : "-moz-initial",
alignItems: "center",
gap: isMobile ? "8px" : "18px",
p: "0 20px 20px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: isMobile ? "6px" : "18px",
}}
>
<Typography>c</Typography>
<DatePicker
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
p: "10px",
"& .MuiInputBase-root": {
maxWidth: "250px",
width: "100%",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "31px",
"& input": {
py: "11px",
pl: "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: isMobile ? "6px" : "18px",
}}
>
<Typography>до</Typography>
<DatePicker
slots={{
openPickerIcon: () => <CalendarIcon />,
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
p: "10px",
"& .MuiInputBase-root": {
maxWidth: "250px",
width: "100%",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "31px",
"& input": {
py: "11px",
pl: "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
</Box>
</Box>
<Box sx={{ p: "0 20px 20px" }}>
<Box sx={{ display: "flex", flexDirection: "column", gap: "14px" }}>
<CustomCheckbox label="Ответы в отдельных полях" />
<CustomCheckbox label="Cookies в отдельных полях" />
<CustomCheckbox label="Только верифицированные номера" />
</Box>
<Box
sx={{
display: "flex",
gap: "10px",
width: "100%",
justifyContent: "flex-end",
mt: "40px",
}}
>
<Button
sx={{
width: isMobile ? "100%" : "130px",
border: "1px solid #9A9AAF",
}}
onClick={handleClose}
variant="outlined"
>
Отмена
</Button>
<Button
variant="contained"
sx={{
width: isMobile ? "100%" : "130px",
height: "48px",
fontSize: "18px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
Готово
</Button>
</Box>
</Box>
</Box>
</Modal>
);
};

148
src/ui_kit/Modal/FilterModal/FilterModal.tsx Normal file
View File

@ -0,0 +1,148 @@
import {
Box,
Button,
Modal,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { CheckboxSelect } from "@ui_kit/CheckboxSelect";
import { Select } from "../../../pages/Questions/Select";
import { FC } from "react";
import { ClockWiseIcon } from "@icons/ClockWiseIcon";
const options = [
{ label: "Муром (1)", value: "option1" },
{ label: "Москва (1)", value: "option2" },
];
interface Iprops {
open: boolean;
handleClose: () => void;
}
export const FilterModal: FC<Iprops> = ({ open, handleClose }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const style = {
position: "absolute" as "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "100%",
maxWidth: isMobile ? 343 : 620,
bgcolor: "background.paper",
boxShadow: 24,
borderRadius: "12px",
};
return (
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box
sx={{
background: "#F2F3F7",
p: "25px 20px",
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
}}
>
<Typography sx={{ fontSize: "18px", color: "#9A9AAF" }}>
Настройте фильтры отображения
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "15px",
mb: "35px",
p: "20px",
}}
>
<Select
sx={{ width: "100%" }}
items={[
"За все время",
"Сегодня",
"Вчера",
"Последние 7 дней",
"Последние 30 дней",
"Этот месяц",
]}
/>
<Select
sx={{ width: "100%" }}
items={["Все заявки", "Новые", "Ошибка интеграции"]}
/>
<CheckboxSelect
sx={{ width: "100%" }}
placeholder="Выберите город"
options={options}
/>
</Box>
<Box sx={{ p: "0 20px 20px" }}>
<Button
sx={{
width: "234px",
height: "48px",
gap: "6px",
fontSize: "18px",
color: "#7E2AEA",
background: "#F2F3F7",
borderRadius: "8px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
Сбросить фильтры <ClockWiseIcon />
</Button>
<Box
sx={{
display: "flex",
gap: "10px",
width: "100%",
justifyContent: "flex-end",
mt: "35px",
}}
>
<Button
sx={{
width: isMobile ? "100%" : "130px",
border: "1px solid #9A9AAF",
}}
onClick={handleClose}
variant="outlined"
>
Отмена
</Button>
<Button
variant="contained"
sx={{
width: isMobile ? "100%" : "130px",
height: "48px",
fontSize: "18px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
Готово
</Button>
</Box>
</Box>
</Box>
</Modal>
);
};