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

Merge branch 'image-modals' into 'main'

Browse Source 
Image modals

See merge request frontend/squiz!82
This commit is contained in:
Nastya 2023-12-19 20:52:35 +00:00
commit 7ee8c89172
41 changed files with 1266 additions and 1040 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -6,7 +6,7 @@
"@craco/craco": "^7.0.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@frontend/kitui": "^1.0.54",
"@frontend/kitui": "^1.0.55",
"@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14",
"@mui/x-date-pickers": "^6.16.1",

20
src/App.tsx
View File

@ -16,8 +16,8 @@ import { ResultSettings } from "./pages/ResultPage/ResultSettings";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import Main from "./pages/main";
import EditPage from "./pages/startPage/EditPage";
import { clearAuthToken, getMessageFromFetchError, useUserFetcher } from "@frontend/kitui";
import { clearUserData, setUser, useUserStore } from "@root/user";
import { clearAuthToken, getMessageFromFetchError, useUserAccountFetcher, useUserFetcher } from "@frontend/kitui";
import { clearUserData, setUser, setUserAccount, useUserStore } from "@root/user";
import { enqueueSnackbar } from "notistack";
import PrivateRoute from "@ui_kit/PrivateRoute";
@ -51,6 +51,22 @@ export default function App() {
}
},
});
useUserAccountFetcher({
url: "https://squiz.pena.digital/customer/account",
userId,
onNewUserAccount: setUserAccount,
onError: (error) => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) {
enqueueSnackbar(errorMessage);
clearUserData();
clearAuthToken();
navigate("/signin");
}
},
});
if (location.state?.redirectTo)
return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;

1
src/api/question.ts
View File

@ -18,7 +18,6 @@ function createQuestion(body: CreateQuestionRequest) {
}
async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
console.log("body" , body)
if (!body?.quiz_id) return null;
const response = await makeRequest<GetQuestionListRequest, GetQuestionListResponse>({

2
src/pages/ContactFormPage/NewField/ButtonsNewField.tsx
View File

@ -17,8 +17,6 @@ interface Props {
export default function ButtonsNewField ({SSHC, switchState, type}:Props) {
const theme = useTheme();
const quiz = useCurrentQuiz()
console.log(quiz)
console.log(type)
const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
{icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
{icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},

2
src/pages/ContactFormPage/NewField/NewFieldParent.tsx
View File

@ -18,7 +18,6 @@ interface Props {
export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children }: Props) {
const quiz = useCurrentQuiz()
console.log({ defaultValue, placeholderHelp, placeholderField, outerContainerSx: sx, children })
return (
<Box sx={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
@ -73,7 +72,6 @@ export default function NewFieldParent({ drawerNewFieldHC, defaultValue, placeho
<CustomCheckbox
checked={quiz.config.formContact[defaultValue].required}
handleChange={({ target }) => {
console.log("click")
updateQuiz(quiz.id, (quiz) => {
quiz.config.formContact[defaultValue].required = target.checked
})

1
src/pages/ContactFormPage/NewField/SwitchNewField.tsx
View File

@ -14,7 +14,6 @@ interface Props {
export default function SwitchNewField({switchState ='name', drawerNewFieldHC}: Props) {
const [SwitchMask, setSwitchMask] = React.useState(false);
console.log(switchState)
const SwitchMaskHC = (bool:boolean) => {
setSwitchMask(bool)
}

1
src/pages/InstallQuiz/InstallQuiz.tsx
View File

@ -48,7 +48,6 @@ type BackgroundType = "text" | "video";
export default function InstallQuiz() {
const quiz = useCurrentQuiz()
console.log(quiz)
const [display, setDisplay] = React.useState("1");
const handleChange = (event: SelectChangeEvent) => {

39
src/pages/Questions/BranchingMap/CsComponent.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import Cytoscape from "cytoscape";
import { Button } from "@mui/material";
import { Button, Box } from "@mui/material";
import CytoscapeComponent from "react-cytoscapejs";
import popper from "cytoscape-popper";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -8,9 +8,10 @@ import { updateRootContentId } from "@root/quizes/actions"
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared"
import { useQuestionsStore } from "@root/questions/store";
import { deleteQuestion, updateQuestion, getQuestionByContentId, clearRuleForAll, createFrontResult } from "@root/questions/actions";
import { updateOpenedModalSettingsId, } from "@root/uiTools/actions";
import { updateCanCreatePublic, updateModalInfoWhyCantCreate, updateOpenedModalSettingsId, } from "@root/uiTools/actions";
import { cleardragQuestionContentId } from "@root/uiTools/actions";
import { withErrorBoundary } from "react-error-boundary";
import { ProblemIcon } from "@ui_kit/ProblemIcon";
import { storeToNodes } from "./helper";
@ -115,6 +116,7 @@ interface Props {
}
function CsComponent({
modalQuestionParentContentId,
modalQuestionTargetContentId,
@ -124,7 +126,7 @@ function CsComponent({
}: Props) {
const quiz = useCurrentQuiz();
const { dragQuestionContentId, desireToOpenABranchingModal } = useUiTools()
const { dragQuestionContentId, desireToOpenABranchingModal, canCreatePublic } = useUiTools()
const trashQuestions = useQuestionsStore().questions
const questions = trashQuestions.filter((question) => question.type !== "result" && question.type !== null)
const [startCreate, setStartCreate] = useState("");
@ -136,6 +138,13 @@ function CsComponent({
const crossesContainer = useRef<HTMLDivElement | null>(null);
const gearsContainer = useRef<HTMLDivElement | null>(null);
useEffect(() => {
return () => {
// if (!canCreatePublic) updateModalInfoWhyCantCreate(true)
}
}, []);
useLayoutEffect(() => {
const cy = cyRef?.current
if (desireToOpenABranchingModal) {
@ -188,7 +197,6 @@ function CsComponent({
}
])
cy?.layout(lyopts).run()
console.log(es)
cy?.center(es)
} else {
enqueueSnackbar("Добавляемый вопрос не найден")
@ -203,7 +211,6 @@ function CsComponent({
//смотрим не добавлен ли родителю result. Если да - убираем его. Веточкам result не нужен
trashQuestions.forEach((targetQuestion) => {
if (targetQuestion.type === "result" && targetQuestion.content.rule.parentId === parentQuestion.content.id) {
console.log('deleteQ', targetQuestion.id)
deleteQuestion(targetQuestion.id);
}
})
@ -228,7 +235,6 @@ function CsComponent({
const removeNode = ({ targetNodeContentId }: { targetNodeContentId: string }) => {
console.log("старт удаление")
const deleteNodes = [] as string[]
const deleteEdges: any = []
const cy = cyRef?.current
@ -272,7 +278,7 @@ function CsComponent({
const parentQuestionContentId = cy?.$('edge[target = "' + targetNodeContentId + '"]')?.toArray()?.[0]?.data()?.source
if (targetNodeContentId && parentQuestionContentId) {
if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
createFrontResult(quiz.backendId, parentQuestionContentId)
clearDataAfterRemoveNode({ targetQuestionContentId: targetNodeContentId, parentQuestionContentId })
cy?.remove(cy?.$('#' + targetNodeContentId)).layout(lyopts).run()
@ -640,7 +646,7 @@ if (cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0)
return crossElement;
},
});
let gearsPopper = null
let gearsPopper = null
if (node.data().root !== true) {
gearsPopper = node.popper({
popper: {
@ -663,7 +669,6 @@ let gearsPopper = null
gearElement.style.zIndex = "1"
gearsContainer.current?.appendChild(gearElement);
gearElement.addEventListener("mouseup", (e) => {
console.log("up")
updateOpenedModalSettingsId(item.id())
});
@ -786,9 +791,10 @@ let gearsPopper = null
return (
<>
<Box
mb="20px">
<Button
sx={{
mb: "20px",
height: "27px",
color: "#7E2AEA",
textDecoration: "underline",
@ -803,6 +809,9 @@ let gearsPopper = null
>
Выровнять
</Button>
<ProblemIcon blink={!canCreatePublic} onClick={() => updateModalInfoWhyCantCreate(true)} />
</Box>
<CytoscapeComponent
wheelSensitivity={0.1}
elements={[]}
@ -815,16 +824,6 @@ let gearsPopper = null
}}
autoungrabify={true}
/>
{/* <button onClick={() => {
console.log("NODES____________________________")
cyRef.current?.elements().forEach((ele: any) => {
console.log(ele.data())
})
}}>nodes</button>
<button onClick={() => {
console.log("ELEMENTS____________________________")
console.log(questions)
}}>elements</button> */}
</>
);
};

1
src/pages/Questions/BranchingMap/FirstNodeField.tsx
View File

@ -18,7 +18,6 @@ export const FirstNodeField = ({ setOpenedModalQuestions, modalQuestionTargetCon
useLayoutEffect(() => {
updateOpenedModalSettingsId()
console.log("first render firstComponent")
updateRootContentId(quiz.id, "")
clearRuleForAll()
}, [])

2
src/pages/Questions/ButtonsOptions.tsx
View File

@ -106,7 +106,6 @@ export default function ButtonsOptions({
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
@ -149,7 +148,6 @@ export default function ButtonsOptions({
title: "Ветвление",
value: "branching",
myFunc: (question) => {
console.log("buttons opiums")
updateOpenBranchingPanel(true);
updateDesireToOpenABranchingModal(question.content.id);
}

2
src/pages/Questions/ButtonsOptionsAndPict.tsx
View File

@ -107,7 +107,6 @@ export default function ButtonsOptionsAndPict({
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};
@ -254,7 +253,6 @@ export default function ButtonsOptionsAndPict({
onMouseEnter={() => setButtonHover("branching")}
onMouseLeave={() => setButtonHover("")}
onClick={() => {
console.log("buttonsOptions")
updateOpenBranchingPanel(true);
updateDesireToOpenABranchingModal(question.content.id);
}}

1
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -123,7 +123,6 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
deleteQuestion(question.id);
} else {
console.log("удаляю безтипогово");
deleteQuestion(question.id);
}
};

3
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -51,6 +51,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
});
}, 200);
console.log(question)
return (
<>
<Paper
@ -85,7 +86,7 @@ export default function QuestionsPageCard({ question, questionIndex, draggablePr
>
<CustomTextField
placeholder={`Заголовок ${questionIndex + 1} вопроса`}
text={question.title}
value={question.title}
onChange={({ target }) => setTitle(target.value)}
sx={{ width: "100%" }}
InputProps={{

3
src/pages/Questions/Form/FormDraggableList/index.tsx
View File

@ -6,8 +6,7 @@ import FormDraggableListItem from "./FormDraggableListItem";
import { useQuestions } from "@root/questions/hooks";
export const FormDraggableList = () => {
const { questions } = useQuestions();
const questions = useQuestions().questions.filter((q) => q.type !== "result");
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index);
};

1
src/pages/Questions/Form/FormQuestionsPage.tsx
View File

@ -13,6 +13,7 @@ export default function FormQuestionsPage() {
const quiz = useCurrentQuiz();
if (!quiz) return null;
console.log("Анкета")
return (
<>

2
src/pages/Questions/QuestionSwitchWindowTool.tsx
View File

@ -14,8 +14,6 @@ export const QuestionSwitchWindowTool = () => {
const {openBranchingPanel} = useUiTools()
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
console.log("questions ", questions)
console.log("rules ", questions.filter((q) => q.type !== null).map((q) => ({id: q.content.id, rule: q.content.rule})))
return (
<Box sx={{ display: "flex", gap: "20px", flexWrap: "wrap", marginBottom: isMobile ? "20px" : undefined }}>
<Box sx={{ flexBasis: "796px" }}>

2
src/pages/Questions/SwitchBranchingPanel/index.tsx
View File

@ -12,7 +12,7 @@ import { useUiTools } from "@root/uiTools/store";
export const SwitchBranchingPanel = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(660));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isTablet = useMediaQuery(theme.breakpoints.down(1446));
const {openBranchingPanel} = useUiTools()
const ref = useRef()

1
src/pages/Questions/UploadImage/UploadImageModal.tsx
View File

@ -42,7 +42,6 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
const acceptedFormats = accept ? accept.map((format) => "." + format).join(", ") : "";
console.log(acceptedFormats);
return (
<Modal

1
src/pages/ResultPage/cards/ResultCard.tsx
View File

@ -120,7 +120,6 @@ const InfoView = ({ resultData }: { resultData: QuizQuestionResult }) => {
}
export const ResultCard = ({ resultContract, resultData }: Props) => {
console.log("resultData", resultData)
const quizQid = useCurrentQuiz()?.qid;
const theme = useTheme();

7
src/pages/ViewPublicationPage/Footer.tsx
View File

@ -78,7 +78,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
}, [question, answers]);
const showResult = (nextQuestion) => {
console.log(nextQuestion);
if (nextQuestion && quiz?.config.resultInfo.when === "before") {
setShowResultForm(true);
@ -154,14 +153,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
const questionIndex = questions.findIndex(({ id }) => id === question.id);
const nextQuestion = questions[questionIndex + 1];
console.log("questionIndex ", questionIndex);
console.log(nextQuestion);
console.log(questions);
if (nextQuestion && nextQuestion.type !== "result") {
console.log("следующий вопрос результирующий ", nextQuestion.type === "result");
setCurrentQuestion(nextQuestion);
} else {
console.log("следующий вопрос результирующий ", nextQuestion.type === "result");
showResult(nextQuestion);
}
@ -173,7 +167,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
if (nextQuestionId) {
const nextQuestion = getQuestionByContentId(nextQuestionId);
console.log(nextQuestion);
if (nextQuestion?.type && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
return;

7
src/pages/ViewPublicationPage/Question.tsx
View File

@ -43,7 +43,8 @@ const QUESTIONS_MAP: any = {
export const Question = ({ questions }: QuestionProps) => {
const quiz = useCurrentQuiz();
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
const [currentQuestion, setCurrentQuestion] =
useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false);
@ -61,9 +62,9 @@ export const Question = ({ questions }: QuestionProps) => {
if (!currentQuestion) return <>не смог отобразить вопрос</>;
const QuestionComponent = QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
const QuestionComponent =
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
console.log("showResultForm " , showResultForm)
return (
<Box>
{!showContactForm && !showResultForm && (

6
src/pages/ViewPublicationPage/ResultForm.tsx
View File

@ -30,17 +30,13 @@ export const ResultForm = ({
);
console.log(currentQuestion)
console.log(resultQuestion
)
console.log(questions)
console.log(quiz?.config.resultInfo.when)
const followNextForm = () => {
setShowResultForm(false);
setShowContactForm(true);
};
if (resultQuestion === undefined) return <></>
return (
<Box

29
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -74,6 +74,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
className="quiz-preview-draghandle"
sx={{
height: "100vh",
width: "100vw",
background:
quiz.config.startpageType === "expanded"
? quiz.config.startpage.position === "left"
@ -82,6 +83,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: "",
color: quiz.config.startpageType === "expanded" ? "white" : "black",
}}
>
@ -142,6 +144,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
overflowWrap: "break-word",
width: "100%",
textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
}}
>
{quiz.name}
@ -150,6 +155,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
sx={{
fontSize: "16px",
m: "16px 0",
overflowWrap: "break-word",
width: "100%",
textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
}}
>
{quiz.config.startpage.description}
@ -172,7 +180,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
<Box
sx={{ mt: "46px", display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}
>
<Box>
<Box sx={{ maxWidth: "300px" }}>
{quiz.config.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${quiz.config.info.phonenumber}`}>
@ -192,7 +200,9 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
{quiz.config.info.phonenumber}
</Typography>
)}
<Typography sx={{ fontSize: "12px", textAlign: "end" }}>{quiz.config.info.law}</Typography>
<Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
{quiz.config.info.law}
</Typography>
</Box>
<Box
@ -288,7 +298,7 @@ function QuizPreviewLayoutByType({
width: "40%",
position: "relative",
padding: "16px",
zIndex: 2,
zIndex: 3,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
@ -301,11 +311,11 @@ function QuizPreviewLayoutByType({
<Box
sx={{
position: "absolute",
zIndex: -1,
left: 0,
top: 0,
height: "100%",
width: "100%",
zIndex: 1,
overflow: "hidden",
}}
>
@ -329,7 +339,16 @@ function QuizPreviewLayoutByType({
}}
>
{quizHeaderBlock}
{backgroundBlock && <Box>{backgroundBlock}</Box>}
{backgroundBlock && (
<Box
sx={{
width: "60%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
)}
{quizMainBlock}
</Box>
);

6
src/pages/ViewPublicationPage/index.tsx
View File

@ -52,9 +52,11 @@ export const ViewPage = () => {
questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
).sort((previousItem, item) => previousItem.page - item.page);
console.log("visualStartPage ", visualStartPage);
console.log(questions)
if (visualStartPage === undefined) return <></>;
if (questions.length === 0) return <ApologyPage message="Нет созданных вопросов"/>
if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return <ApologyPage message="Нет созданных вопросов"/>
return (
<Box>
{!visualStartPage ? (

2
src/pages/ViewPublicationPage/questions/Varimg.tsx
View File

@ -31,8 +31,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
({ id }) => answer === id
);
console.log(currentQuestion)
return (
<Box>
<Typography variant="h5">{currentQuestion.title}</Typography>

109
src/pages/startPage/EditPage.tsx
View File

@ -1,5 +1,5 @@
import { quizApi } from "@api/quiz";
import { devlog } from "@frontend/kitui";
import { LogoutButton } from "@ui_kit/LogoutButton";
import BackArrowIcon from "@icons/BackArrowIcon";
import { Burger } from "@icons/Burger";
import EyeIcon from "@icons/EyeIcon";
@ -16,7 +16,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import {decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz} from "@root/quizes/actions";
import { decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import CustomAvatar from "@ui_kit/Header/Avatar";
@ -30,9 +30,10 @@ import { enqueueSnackbar } from "notistack";
import React, { useEffect, useLayoutEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { useDebouncedCallback } from "use-debounce";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import { cleanQuestions, setQuestions } from "@root/questions/actions";
import { updateOpenBranchingPanel } from "@root/uiTools/actions";
import { updateOpenBranchingPanel, updateCanCreatePublic, updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import { BranchingPanel } from "../Questions/BranchingPanel";
import { useQuestionsStore } from "@root/questions/store";
import { useQuizes } from "@root/quizes/hooks";
@ -40,10 +41,16 @@ import { questionApi } from "@api/question";
import { useUiTools } from "@root/uiTools/store";
import Logotip from "../Landing/images/icons/QuizLogo";
import { clearUserData } from "@root/user";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
export default function EditPage() {
const quiz = useCurrentQuiz();
const { editQuizId } = useQuizStore();
const { questions } = useQuestionsStore();
useEffect(() => {
const getData = async () => {
@ -56,7 +63,7 @@ export default function EditPage() {
getData();
}, []);
const { openBranchingPanel } = useUiTools();
const { openBranchingPanel, whyCantCreatePublic, canCreatePublic } = useUiTools();
const theme = useTheme();
const navigate = useNavigate();
const currentStep = useQuizStore((state) => state.currentStep);
@ -74,11 +81,61 @@ export default function EditPage() {
() => () => {
resetEditConfig();
cleanQuestions();
updateModalInfoWhyCantCreate(false)
},
[]
);
console.log(currentStep)
console.log(quizConfig)
const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
const problems: any = {}
questions.forEach((question) => {
//Если не участвует в ветвлении, или безтиповый, или резулт - он нам не интересен
if (question.type === null
|| question.type === "result"
|| question.content.rule.parentId.length === 0) return
//если есть дети, но нет дефолта - логическая ошибка. Так нельзя
if (question.content.rule.children.length > 0 && question.content.rule.default.length === 0) {
problems[question.content.id] = {
name: question.title,
problems: ["Не выбран дефолтный вопрос"]
}
}
})
useUiTools.setState({ whyCantCreatePublic: problems })
if (Object.keys(problems).length > 0) {
updateQuiz(quiz?.id, (state) => { state.status = "stop" })
updateCanCreatePublic(false)
} else {
updateCanCreatePublic(true)
}
}, 600);
useEffect(() => {
updateQuestionHint(questions)
}, [questions]);
async function handleLogoutClick() {
const [, logoutError] = await logout();
if (logoutError) {
return enqueueSnackbar(logoutError);
}
clearAuthToken();
clearUserData();
navigate("/");
}
if (!quizConfig) return <></>
return (
@ -99,7 +156,7 @@ export default function EditPage() {
}}
>
<Link to="/" style={{ display: "flex" }}>
{isMobile ? <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} /> : <PenaLogo width={124} />}
{isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
</Link>
<Box
sx={{
@ -155,6 +212,7 @@ export default function EditPage() {
style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
/>
) : (
<Box>
<CustomAvatar
sx={{
ml: "11px",
@ -163,6 +221,7 @@ export default function EditPage() {
width: "36px",
}}
/>
</Box>
)}
</Box>
) : (
@ -196,6 +255,7 @@ export default function EditPage() {
width: "36px",
}}
/>
<LogoutButton onClick={handleLogoutClick} />
</Box>
</>
)}
@ -230,6 +290,7 @@ export default function EditPage() {
</>
)}
</Box>
<Box
sx={{
position: "absolute",
@ -304,20 +365,22 @@ export default function EditPage() {
</Box>
</Box>
)}
{disableTest ? (
{!canCreatePublic && quiz.config.type !== "form" ?
<Button
variant="contained"
disabled
// disabled
sx={{
fontSize: "14px",
lineHeight: "18px",
height: "34px",
minWidth: "130px",
}}
onClick={() => Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)}
>
Тестовый просмотр
</Button>
) : (
:
<a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
<Button
variant="contained"
@ -331,7 +394,7 @@ export default function EditPage() {
Тестовый просмотр
</Button>
</a>
)}
}
<Button
variant="outlined"
@ -343,24 +406,28 @@ export default function EditPage() {
backgroundColor: quiz?.status === "start" ? theme.palette.brightPurple.main : "transparent",
color: quiz?.status === "start" ? "#FFFFFF" : theme.palette.brightPurple.main,
}}
onClick={() => {
updateQuiz(
quiz?.id, (state) => {
state.status = quiz?.status === "start" ? "stop" : "start"
onClick={
Object.keys(whyCantCreatePublic).length === 0 ?
() => updateQuiz(quiz?.id, (state) => {
state.status = quiz?.status === "start" ? "stop" : "start";
})
:
() => updateModalInfoWhyCantCreate(true)
}
)
}}
>{quiz?.status === "start" ? "Стоп" : "Старт"}</Button>
>
{quiz?.status === "start" ? "Стоп" : "Старт"}
</Button>
{quiz?.status === "start" && <Box
component={Link}
sx={{
color: "#7e2aea",
fontSize: "14px"
}}
target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}</Box> }
</Box>
target="_blank" to={"https://hbpn.link/" + quiz.qid}>https://hbpn.link/{quiz.qid}
</Box>}
</Box>
</Box >
<ModalInfoWhyCantCreate />
</>
);
}

49
src/pages/startPage/ModalInfoWhyCantCreate.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Box, Modal, Typography, Divider } from "@mui/material"
import { useUiTools } from "@root/uiTools/store";
import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
import { useLayoutEffect } from "react";
export const ModalInfoWhyCantCreate = () => {
const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();
return (
<Modal
open={openModalInfoWhyCantCreate}
onClose={() => updateModalInfoWhyCantCreate(false)}
>
<Box sx={{
position: 'absolute' as 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
maxWidth: '620px',
width: '100%',
bgcolor: 'background.paper',
borderRadius: '12px',
boxShadow: 24,
p: "25px",
minHeight: "60vh",
maxHeight: "90vh",
overflow: "auto"
}}
>
{
Object.values(whyCantCreatePublic).map((data) => {
return (
<Box>
<Typography color="#7e2aea">У вопроса "{data.name}"</Typography>
{
data.problems.map((problem) => <Typography p="5px 0">{problem}</Typography>)
}
<Divider/>
</Box>
)
})
}
</Box>
</Modal>
)
}

1
src/pages/startPage/Restore.tsx
View File

@ -41,7 +41,6 @@ export const Restore: FC = () => {
initialValues,
validationSchema,
onSubmit: (values) => {
console.log(values);
},
});

191
src/pages/startPage/StartPageSettings.tsx
View File

@ -18,7 +18,7 @@ import {
Select,
Typography,
useMediaQuery,
useTheme
useTheme,
} from "@mui/material";
import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -35,27 +35,13 @@ import SelectableIconButton from "./SelectableIconButton";
import { DropZone } from "./dropZone";
import Extra from "./extra";
const designTypes = [
[
"standard",
(color: string) => <LayoutStandartIcon color={color} />,
"Standard",
],
[
"expanded",
(color: string) => <LayoutExpandedIcon color={color} />,
"Expanded",
],
[
"centered",
(color: string) => <LayoutCenteredIcon color={color} />,
"Centered",
],
["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
] as const;
// type DesignType = typeof designTypes[number][0];
export default function StartPageSettings() {
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
@ -75,14 +61,14 @@ export default function StartPageSettings() {
const favIconDropZoneElement = (
<FaviconDropZone
imageUrl={quiz.config.startpage.favIcon}
onImageUploadClick={async file => {
onImageUploadClick={async (file) => {
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.favIcon = null;
});
}}
@ -91,10 +77,7 @@ export default function StartPageSettings() {
return (
<>
<Typography
variant="h5"
sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}
>
<Typography variant="h5" sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}>
Стартовая страница
</Typography>
{isSmallMonitor && (
@ -105,10 +88,7 @@ export default function StartPageSettings() {
fontWeight: 500,
fontSize: "16px",
color: formState === "design" ? "#7E2AEA" : "#7D7E86",
borderBottom:
formState === "design"
? "2px solid #7E2AEA"
: "1px solid transparent",
borderBottom: formState === "design" ? "2px solid #7E2AEA" : "1px solid transparent",
}}
>
Дизайн
@ -120,10 +100,7 @@ export default function StartPageSettings() {
fontWeight: 500,
fontSize: "16px",
color: formState === "content" ? "#7E2AEA" : "#7D7E86",
borderBottom:
formState === "content"
? "2px solid #7E2AEA"
: "1px solid transparent",
borderBottom: formState === "content" ? "2px solid #7E2AEA" : "1px solid transparent",
}}
>
Контент
@ -153,8 +130,7 @@ export default function StartPageSettings() {
<Box
sx={{
pr: "20px",
borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main
}`,
borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main}`,
display: "flex",
flexDirection: "column",
flex: `1 1 361px`,
@ -183,9 +159,11 @@ export default function StartPageSettings() {
variant="outlined"
value={designType}
displayEmpty
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpageType = e.target.value as QuizStartpageType;
})}
})
}
sx={{
height: "48px",
borderRadius: "8px",
@ -240,11 +218,7 @@ export default function StartPageSettings() {
color: theme.palette.grey2.main,
}}
>
{type[1](
type[0] === designType
? theme.palette.orange.main
: theme.palette.grey2.main
)}
{type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
{type[2]}
</MenuItem>
))}
@ -268,17 +242,21 @@ export default function StartPageSettings() {
>
<SelectableButton
isSelected={quiz.config.startpage.background.type === "image"}
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.type = "image";
})}
})
}
>
Изображение
</SelectableButton>
<SelectableButton
isSelected={quiz.config.startpage.background.type === "video"}
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.type = "video";
})}
})
}
>
Видео
</SelectableButton>
@ -311,19 +289,19 @@ export default function StartPageSettings() {
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.background.desktop}
originalImageUrl={quiz.config.startpage.background.originalDesktop}
onImageUploadClick={file => {
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop = url;
});
}}
onImageSaveClick={file => {
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.desktop = null;
});
}}
@ -331,8 +309,6 @@ export default function StartPageSettings() {
</Box>
<ModalSizeImage />
</Box>
<Box
@ -345,14 +321,15 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="URL видео"
text={quiz.config.startpage.background.video ?? ""}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.background.video = e.target.value;
})}
})
}
/>
</Box>
{designType !== "centered" &&
{designType !== "centered" && (
<>
<Typography
sx={{
@ -371,31 +348,36 @@ export default function StartPageSettings() {
}}
>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.position = "left";
})}
})
}
isActive={quiz.config.startpage.position === "left"}
Icon={AlignLeftIcon}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.position = "center";
})}
})
}
isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "standard" ? "none" : "flex" }}
/>
<SelectableIconButton
onClick={() => updateQuiz(quiz.id, quiz => {
onClick={() =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.position = "right";
})}
})
}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
</Box>
</>
}
)}
{(isTablet || !isSmallMonitor) && (
<>
<Box
@ -418,19 +400,19 @@ export default function StartPageSettings() {
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => {
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
@ -482,19 +464,19 @@ export default function StartPageSettings() {
sx={{ maxWidth: "300px" }}
imageUrl={quiz.config.startpage.logo}
originalImageUrl={quiz.config.startpage.originalLogo}
onImageUploadClick={file => {
onImageUploadClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
onImageSaveClick={(file) => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.logo = null;
});
}}
@ -528,9 +510,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Имя заголовка об опроснике для подбора табуретки"
text={quiz.name}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.name = e.target.value;
})}
})
}
maxLength={40}
/>
<Typography
sx={{
@ -545,9 +530,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Внимательно заполняйте поля ответов"
text={quiz.config.startpage.description}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.description = e.target.value;
})}
})
}
maxLength={70}
/>
<Typography
sx={{
@ -562,9 +550,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Начать опрос"
text={quiz.config.startpage.button}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.button = e.target.value;
})}
})
}
maxLength={15}
/>
<Typography
sx={{
@ -579,17 +570,22 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="8-800-000-00-00"
text={quiz.config.info.phonenumber}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.phonenumber = e.target.value;
})}
})
}
maxLength={20}
/>
<CustomCheckbox
sx={{ margin: "10px 0" }}
label="Кликабельный"
checked={quiz.config.info.clickable}
handleChange={e => updateQuiz(quiz.id, quiz => {
handleChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.clickable = e.target.checked;
})}
})
}
/>
<Typography
sx={{
@ -604,9 +600,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Только лучшее"
text={quiz.config.info.orgname}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.orgname = e.target.value;
})}
})
}
maxLength={25}
/>
<Typography
sx={{
@ -621,9 +620,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="https://mysite.com"
text={quiz.config.info.site}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.site = e.target.value;
})}
})
}
maxLength={25}
/>
<Typography
sx={{
@ -638,9 +640,12 @@ export default function StartPageSettings() {
<CustomTextField
placeholder="Данные наших документов"
text={quiz.config.info.law}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.law = e.target.value;
})}
})
}
maxLength={45}
/>
<Extra />
</>
@ -663,7 +668,7 @@ export default function StartPageSettings() {
textUnderlineOffset: "2px",
}}
>
<ArrowLeft right={false}/> Вернуться к дизайну
<ArrowLeft right={false} /> Вернуться к дизайну
</Button>
)}
{formState === "design" && (
@ -681,7 +686,7 @@ export default function StartPageSettings() {
textUnderlineOffset: "2px",
}}
>
Далее заполнить контент <ArrowLeft right={true}/>
Далее заполнить контент <ArrowLeft right={true} />
</Button>
)}
</Box>
@ -694,7 +699,7 @@ export default function StartPageSettings() {
justifyContent: "flex-end",
flexDirection: isTablet ? "column" : "row",
marginTop: "30px",
marginBottom: isTablet ? "90px" : undefined
marginBottom: isTablet ? "90px" : undefined,
}}
>
<FormControlLabel
@ -726,9 +731,11 @@ export default function StartPageSettings() {
borderRadius: 0,
padding: 0,
}}
onChange={e => updateQuiz(quiz.id, quiz => {
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.config.noStartPage = e.target.checked;
})}
})
}
checked={quiz.config.noStartPage}
/>
}
@ -740,11 +747,7 @@ export default function StartPageSettings() {
justifyContent: "flex-end",
}}
/>
<Button
variant="contained"
data-cy="setup-questions"
onClick={incrementCurrentStep}
>
<Button variant="contained" data-cy="setup-questions" onClick={incrementCurrentStep}>
Настроить вопросы
</Button>
</Box>

4
src/stores/questions/actions.ts
View File

@ -297,7 +297,6 @@ export const uploadQuestionImage = async (
if (!question || !quizQid) return;
try {
console.log(question.quizId)
const response = await quizApi.addImages(question.quizId, blob);
const values = Object.values(response);
@ -387,16 +386,13 @@ export const createTypedQuestion = async (
});
export const deleteQuestion = async (questionId: string) => requestQueue.enqueue(async () => {
console.log("Я получил запрос на удаление. ИД - ", questionId)
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
console.log("delete question ", question)
if (!question) return;
if (question.type === null) {
console.log("removeQuestion")
removeQuestion(questionId);
return;
}

1
src/stores/quizes/actions.ts
View File

@ -179,7 +179,6 @@ export const deleteQuiz = async (quizId: string) => requestQueue.enqueue(async (
export const updateRootContentId = (quizId: string, id:string) => updateQuiz(
quizId,
quiz => {
console.log("Я изменение статуса корня проекта дерева, меняю на ", id)
quiz.config.haveRoot = id
},
);

5
src/stores/uiTools/actions.ts
View File

@ -32,3 +32,8 @@ export const updateEditSomeQuestion = (contentId?: string) => {
export const updateOpenedModalSettingsId = (id?: string) => useUiTools.setState({ openedModalSettingsId: id ? id : null });
export const updateCanCreatePublic = (can: boolean) => useUiTools.setState({ canCreatePublic: can });
export const updateModalInfoWhyCantCreate = (can: boolean) => useUiTools.setState({ openModalInfoWhyCantCreate: can });

11
src/stores/uiTools/store.ts
View File

@ -8,7 +8,15 @@ export type UiTools = {
openBranchingPanel: boolean;
desireToOpenABranchingModal: string | null;
editSomeQuestion: string | null;
canCreatePublic: boolean;
whyCantCreatePublic: Record<string, WhyCantCreatePublic>//ид вопроса и список претензий к нему
openModalInfoWhyCantCreate: boolean;
};
export type WhyCantCreatePublic = {
name: string;
problems: string[]
}
const initialState: UiTools = {
openedModalSettingsId: null as null,
@ -16,6 +24,9 @@ const initialState: UiTools = {
openBranchingPanel: false,
desireToOpenABranchingModal: null as null,
editSomeQuestion: null as null,
canCreatePublic: false,
whyCantCreatePublic: {},
openModalInfoWhyCantCreate: false
};
export const useUiTools = create<UiTools>()(

10
src/stores/user.ts
View File

@ -1,4 +1,4 @@
import { User } from "@frontend/kitui";
import { User, UserAccount } from "@frontend/kitui";
import { produce } from "immer";
import { create } from "zustand";
import { createJSONStorage, devtools, persist } from "zustand/middleware";
@ -6,12 +6,13 @@ import { createJSONStorage, devtools, persist } from "zustand/middleware";
interface UserStore {
userId: string | null;
user: User | null;
// userAccount: UserAccount | null;
userAccount: UserAccount | null;
}
const initialState: UserStore = {
userId: null,
user: null,
userAccount: null,
};
export const useUserStore = create<UserStore>()(
@ -19,12 +20,11 @@ export const useUserStore = create<UserStore>()(
devtools((set, get) => initialState, {
name: "User",
enabled: process.env.NODE_ENV === "development",
trace: true,
trace: process.env.NODE_ENV === "development",
}),
{
version: 2,
name: "user",
storage: createJSONStorage(() => localStorage),
partialize: (state) => ({
userId: state.userId,
user: state.user,
@ -46,3 +46,5 @@ export const setUser = (user: User) =>
);
export const clearUserData = () => useUserStore.setState({ ...initialState });
export const setUserAccount = (userAccount: UserAccount) => useUserStore.setState({ userAccount });

64
src/ui_kit/CustomTextField.tsx
View File

@ -1,7 +1,7 @@
import { FormControl, TextField, useTheme, SxProps, Theme } from "@mui/material";
import React, { useState } from "react";
import { Box, FormControl, TextField, Typography, useTheme } from "@mui/material";
import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
import type { InputProps } from "@mui/material";
import type { InputProps, SxProps, Theme } from "@mui/material";
interface CustomTextFieldProps {
placeholder: string;
@ -11,6 +11,7 @@ interface CustomTextFieldProps {
onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
text?: string;
maxLength?: number;
sx?: SxProps<Theme>;
InputProps?: Partial<InputProps>;
}
@ -18,28 +19,54 @@ interface CustomTextFieldProps {
export default function CustomTextField({
placeholder,
value,
text,
sx,
error,
onChange,
onKeyDown,
onBlur,
text,
sx,
error,
InputProps,
maxLength = 200,
}: CustomTextFieldProps) {
const theme = useTheme();
const [inputValue, setInputValue] = useState(value || text || "");
const [isInputActive, setIsInputActive] = useState(false);
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = event.target.value;
setInputValue(inputValue);
if (onChange) {
onChange(event);
}
};
const handleInputFocus = () => {
setIsInputActive(true);
};
const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
setIsInputActive(false);
if (onBlur) {
onBlur(event);
}
};
return (
<FormControl fullWidth variant="standard" sx={{ p: 0 }}>
<TextField
defaultValue={text}
fullWidth
value={value}
value={inputValue}
placeholder={placeholder}
onChange={handleInputChange}
error={!!error}
label={error}
onChange={onChange}
onFocus={handleInputFocus}
onBlur={handleInputBlur}
onKeyDown={onKeyDown}
onBlur={onBlur}
sx={{
"& .MuiInputBase-root": {
backgroundColor: theme.palette.background.default,
@ -50,19 +77,36 @@ export default function CustomTextField({
fontSize: "13.5px",
marginTop: "3px",
},
...sx,
}}
InputProps={InputProps}
inputProps={{
maxLength: maxLength,
sx: {
borderRadius: "10px",
fontSize: "18px",
lineHeight: "21px",
py: 0,
},
...sx,
}}
data-cy="textfield"
/>
{isInputActive && inputValue.length >= maxLength - 7 && (
<Box
sx={{
display: "flex",
marginTop: "5px",
marginLeft: "auto",
position: "absolute",
bottom: "-25px",
right: "0",
}}
>
<Typography fontSize="14px">{inputValue.length}</Typography>
<span>/</span>
<Typography fontSize="14px">{maxLength}</Typography>
</Box>
)}
</FormControl>
);
}

4
src/ui_kit/Modal/CropModal.tsx
View File

@ -18,6 +18,7 @@ import { FC, useEffect, useMemo, useRef, useState } from "react";
import ReactCrop, { PercentCrop, PixelCrop } from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
import { getCroppedImageBlob, getDarkenedAndResizedImageBlob, getRotatedImageBlob } from "./utils/imageManipulation";
import { isImageBlobAGifFile } from "../../utils/isImageBlobAGifFile";
const styleSlider: SxProps<Theme> = {
@ -324,6 +325,9 @@ export function useCropModalState(initialOpenState = false) {
image = await response.blob();
}
const isGif = await isImageBlobAGifFile(image);
if (isGif) return;
setCropModalImageBlob(image);
setOriginalImageUrl(originalImageUrl);
setOpened(true);

23
src/ui_kit/ProblemIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
import Info from "@icons/Info";
interface Props {
blink: boolean;
onClick: (a: boolean) => void;
}
export const ProblemIcon = ({ blink, onClick }: Props) => {
return (
<Info
sx={{
"MuiIconButton-root": {
boxShadow: "0 0 10px 10px red"
}
}}
className={blink ? "blink" : ""}
onClick={onClick}
/>
)
}

1
src/ui_kit/switchStepPages.tsx
View File

@ -24,6 +24,7 @@ export default function SwitchStepPages({
quizStartPageType,
quizResults,
}: Props) {
console.log("Выбор текущей странички")
switch (activeStep) {
case 0: {
if (!quizType) return <StepOne />;

15
src/utils/isImageBlobAGifFile.ts Normal file
View File

@ -0,0 +1,15 @@
const gifSignature = [0x47, 0x49, 0x46, 0x38];
export async function isImageBlobAGifFile(blob: Blob) {
const arrayBuffer = await blob.arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);
if (
uint8Array[0] === gifSignature[0]
&& uint8Array[1] === gifSignature[1]
&& uint8Array[2] === gifSignature[2]
&& uint8Array[3] === gifSignature[3]
) return true;
return false;
}

8
yarn.lock
View File

@ -1407,10 +1407,10 @@
resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz"
integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
"@frontend/kitui@^1.0.54":
version "1.0.54"
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.54.tgz#0235d5a8effb9b92351471c3c7775f28cb2839f6"
integrity sha1-AjXVqO/7m5I1FHHDx3dfKMsoOfY=
"@frontend/kitui@^1.0.55":
version "1.0.55"
resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.55.tgz#6e02f80b2c13828142ffeacaf9704e50e54324d0"
integrity sha1-bgL4CywTgoFC/+rK+XBOUOVDJNA=
dependencies:
immer "^10.0.2"
reconnecting-eventsource "^1.6.2"