SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

varimg images отправляют новую модель content Image Description

Browse Source
This commit is contained in:
Nastya 2024-07-11 22:26:46 +03:00
parent 481a8681ca
commit 465c4824e1
5 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx
View File

@ -114,6 +114,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
async function handleShowResultsClick() {
const FC = settings.cfg.formContact.fields;
console.log(phone);
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
return enqueueSnackbar("введена некорректная почта");
}

1
lib/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx
View File

@ -21,6 +21,7 @@ export const CountrySelector: FC<CountrySelectorProps> = ({ setMask }) => {
value={country}
onChange={handleChange}
renderValue={(value) => value}
// autoComplete={true}
MenuProps={{
PaperProps: {
style: {

36
lib/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx
View File

@ -1,9 +1,9 @@
import { Box, InputAdornment, TextField as MuiTextField, TextFieldProps, Typography, useTheme } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext.ts";
import { useQuizSettings } from "@contexts/QuizDataContext.ts";
import { useIMask } from "react-imask";
import { useIMask, IMask } from "react-imask";
import { quizThemes } from "@utils/themes/Publication/themePublication.ts";
import { FC, HTMLInputTypeAttribute, useState } from "react";
import { ChangeEvent, FC, HTMLInputTypeAttribute, useEffect, useState } from "react";
import { CountrySelector } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CountrySelector/CountrySelector.tsx";
import { phoneMasksByCountry } from "@utils/phoneMasksByCountry.tsx";
@ -18,13 +18,33 @@ type InputProps = {
};
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
let first = true;
export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type }: InputProps) => {
function phoneChange(e: ChangeEvent<HTMLInputElement>, mask: string) {
console.log(e);
const masked = IMask.createMask({
mask: "+7 (000) 000-00-00",
// ...and other options
});
masked.value = e.target.value;
console.log(masked);
console.log(masked.typedValue);
console.log(masked.parse);
const a = IMask.pipe(e.target.value, {
mask,
});
console.log(a);
return a || "";
}
export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type, value }: InputProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 600;
const { settings } = useQuizSettings();
const [mask, setMask] = useState(phoneMasksByCountry["RU"][1]);
const { ref } = useIMask({ mask });
console.log(mask);
// const { ref } = useIMask({ mask });
return (
<Box m="10px 0">
<Typography
@ -36,9 +56,11 @@ export const CustomInput = ({ title, desc, Icon, onChange, isPhone, type }: Inpu
</Typography>
<TextField
inputRef={isPhone ? ref : null}
onChange={onChange}
type={type}
// inputRef={isPhone ? ref : null}
//@ts-ignore
onChange={isPhone ? (e: ChangeEvent<HTMLInputElement>) => onChange(phoneChange(e, mask)) : onChange}
type={isPhone ? "tel" : type}
value={value}
sx={{
width: isMobile ? "100%" : "390px",
backgroundColor: theme.palette.background.default,

14
lib/components/ViewPublicationPage/ContactForm/Inputs/Inputs.tsx
View File

@ -6,6 +6,7 @@ import AddressIcon from "@icons/ContactFormIcon/AddressIcon.tsx";
import { Dispatch, SetStateAction } from "react";
import { CustomInput } from "@/components/ViewPublicationPage/ContactForm/CustomInput/CustomInput.tsx";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon.tsx";
import PhoneInput from "react-phone-number-input";
type InputsProps = {
name: string;
@ -47,7 +48,11 @@ export const Inputs = ({
);
const Email = (
<CustomInput
onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ""))}
onChange={({ target }) => {
console.log("onChange of email");
console.log(target.value);
setEmail(target.value.replaceAll(/\s/g, ""));
}}
id={email}
title={FC["email"].innerText || "Введите Email"}
desc={FC["email"].text || "Email"}
@ -57,7 +62,12 @@ export const Inputs = ({
);
const Phone = (
<CustomInput
onChange={({ target }) => setPhone(target.value)}
onChange={(phone: string) => {
console.log("onChange of phone");
console.log(phone);
setPhone(phone);
}}
value={phone}
id={phone}
title={FC["phone"].innerText || "Введите номер телефона"}
desc={FC["phone"].text || "Номер телефона"}

14
lib/utils/sendQuestionAnswer.ts
View File

@ -42,12 +42,15 @@ export function sendQuestionAnswer(
case "images": {
const variant = question.content.variants.find((v) => v.id === questionAnswer.answer);
if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`);
const body = variant.extendedText.split("/").pop();
const body = {
Image: variant.extendedText,
Description: variant.answer,
};
if (!body) throw new Error(`Body of answer in question ${question.id} is undefined`);
return sendAnswer({
questionId: question.id,
body,
body: JSON.stringify(body),
qid: quizId,
});
}
@ -119,12 +122,15 @@ export function sendQuestionAnswer(
case "varimg": {
const variant = question.content.variants.find((v) => v.id === questionAnswer.answer);
if (!variant) throw new Error(`Cannot find variant with id ${questionAnswer.answer} in question ${question.id}`);
const body = variant.extendedText.split("/").pop();
const body = {
Image: variant.extendedText,
Description: variant.answer,
};
if (!body) throw new Error(`Body of answer in question ${question.id} is undefined`);
return sendAnswer({
questionId: question.id,
body,
body: JSON.stringify(body),
qid: quizId,
});
}