diff --git a/package.json b/package.json index a28e97a..d962d5a 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@popperjs/core": "^2.11.8", + "@uiw/react-markdown-editor": "^5.12.1", "axios": "^1.6.8", "bootstrap": "^5.3.3", "react": "^18.2.0", diff --git a/src/assets/styles/components/answerModal.module.scss b/src/assets/styles/components/answerModal.module.scss index 09f25ba..8d4d703 100644 --- a/src/assets/styles/components/answerModal.module.scss +++ b/src/assets/styles/components/answerModal.module.scss @@ -50,6 +50,21 @@ padding: 0 1%; } } + &__video { + margin-top: 5%; + &__title { + display: block; + font-size: 15px; + font-family: "Montserrat", sans-serif; + } + &__link { + display: block; + font-family: "Montserrat", sans-serif; + border: 1px solid rgb(200, 200, 200); + width: 100%; + padding: 0 1%; + } + } &__answerOptions { margin-top: 5%; &__title { diff --git a/src/assets/styles/components/markDown.module.scss b/src/assets/styles/components/markDown.module.scss new file mode 100644 index 0000000..d917ed5 --- /dev/null +++ b/src/assets/styles/components/markDown.module.scss @@ -0,0 +1,3 @@ +.main { + border: 1px solid rgb(200, 200, 200); +} \ No newline at end of file diff --git a/src/assets/styles/generatingFormFields.module.scss b/src/assets/styles/generatingFormFields.module.scss index f69cd75..16d4e50 100644 --- a/src/assets/styles/generatingFormFields.module.scss +++ b/src/assets/styles/generatingFormFields.module.scss @@ -2,15 +2,48 @@ padding: 10px 20px; border-top: 1px solid rgb(200, 200, 200); &__question { + width: 100%; + overflow-x: auto; + margin-bottom: 10px; &__text { font-size: 15px; font-family: "Montserrat", sans-serif; + width: 100%; + // overflow-x: auto; + // &::-webkit-scrollbar { + // height: 7px; + // border: 1px solid rgb(200, 200, 200); + // } + // &::-webkit-scrollbar-thumb { + // background-color: rgb(200, 200, 200); + // } } &__comment { font-size: 11px; font-family: "Montserrat", sans-serif; font-style: italic; color: rgb(200, 200, 200); + width: 100%; + // overflow-x: auto; + // &::-webkit-scrollbar { + // height: 7px; + // border: 1px solid rgb(200, 200, 200); + // } + // &::-webkit-scrollbar-thumb { + // background-color: rgb(200, 200, 200); + // } + } + &__video { + iframe { + + } + } + &::-webkit-scrollbar { + height: 7px; + border: 1px solid rgb(200, 200, 200); + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); } } &__answer { diff --git a/src/assets/styles/newForm.module.scss b/src/assets/styles/newForm.module.scss index 62c3ec7..e860114 100644 --- a/src/assets/styles/newForm.module.scss +++ b/src/assets/styles/newForm.module.scss @@ -130,6 +130,7 @@ &__list { overflow-y: auto; + overflow-x: hidden; width: 100%; height: 90%; &::-webkit-scrollbar { @@ -141,7 +142,7 @@ &__item { padding: 1%; width: 100%; - height: 25%; + min-height: 25%; border-bottom: 1px solid rgb(220, 220, 220); display: flex; justify-content: space-between; @@ -152,6 +153,14 @@ } &__answer { width: 90%; + overflow-x: auto; + &::-webkit-scrollbar { + height: 7px; + border: 1px solid rgb(200, 200, 200); + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } span { display: block; } diff --git a/src/components/AnswerModal.jsx b/src/components/AnswerModal.jsx index 5068641..118cb8b 100644 --- a/src/components/AnswerModal.jsx +++ b/src/components/AnswerModal.jsx @@ -1,6 +1,7 @@ import React from "react"; import classes from "../assets/styles/components/answerModal.module.scss"; -import MyButton from "./MyButton.jsx" +import MyButton from "./MyButton.jsx"; +import MarkDowm from "./MarkDown.jsx"; const AnswerModal = ({ cleanStates, @@ -10,6 +11,8 @@ const AnswerModal = ({ addFormBlock, question, file, + video, + setVideo, listTypeAnswer, optionAnswer, setOptionAnswer, @@ -40,7 +43,7 @@ const AnswerModal = ({
Вопрос - + setFile(event.target.value)} - > + >
Комментарий
+
+ Видео + setVideo(e.target.value)}/> +
{[3, 4, 5].find(item => item === currentTypeAnswer) ?
Варианты ответа
diff --git a/src/components/GeneratingFormFields.jsx b/src/components/GeneratingFormFields.jsx index cd2aaef..c11e092 100644 --- a/src/components/GeneratingFormFields.jsx +++ b/src/components/GeneratingFormFields.jsx @@ -1,13 +1,25 @@ import React, { useState } from "react"; import classes from "../assets/styles/generatingFormFields.module.scss"; +import MarkdownEditor from "@uiw/react-markdown-editor"; const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswersForm}) => { return ( listBlock.map((item, i) =>
-

{i + 1}) {item.question}

+

{i + 1})

{item.comment}

+
+ {item.video ? : } +
{ diff --git a/src/components/MarkDown.jsx b/src/components/MarkDown.jsx new file mode 100644 index 0000000..e9027e8 --- /dev/null +++ b/src/components/MarkDown.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import MarkdownEditor from '@uiw/react-markdown-editor'; +import classes from "../assets/styles/components/markDown.module.scss" + +const MarkDown = ({mkValue, setMkValue}) => { + return ( +
+ setMkValue(value)} + enablePreview={false} + /> +
+ + ) +} + +export default MarkDown; \ No newline at end of file diff --git a/src/pages/Forms.jsx b/src/pages/Forms.jsx index aeb3d62..49f4f7c 100644 --- a/src/pages/Forms.jsx +++ b/src/pages/Forms.jsx @@ -36,13 +36,13 @@ const Forms = () => { async function createForm() { setStateLoading(true); const response = await createFormApi(cookies.token); - console.log("response", response) setStateLoading(false); if (response.data) { const token = await newFormTokenApi(cookies.token, response.data.id) navigate(`/forms/${response.data.id}/edit`) + // navigate(`/forms/1/edit`) } else { console.log(response) diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx index cf155ff..0eb4116 100644 --- a/src/pages/NewForm.jsx +++ b/src/pages/NewForm.jsx @@ -9,6 +9,7 @@ import { FormsData, TypeAnswerData } from "../context"; import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js"; import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi } from "../hooks/api/formApi.js"; import { responseDataToListBlock } from "../hooks/sundry/parseListBlock.js"; +import MarkDown from "../components/MarkDown.jsx"; const NewForm = () => { const navigate = useNavigate(); @@ -30,6 +31,7 @@ const NewForm = () => { const [mandatory, setMandatory] = useState(false); const [optionAnswer, setOptionAnswer] = useState([]); const [file, setFile] = useState([]); + const [video, setVideo] = useState(""); const [currentTypeAnswer, setCurrentTypeAnswer] = useState(""); const [currentOptionAnswer, setCurrentOptionAnswer] = useState(""); @@ -50,6 +52,7 @@ const NewForm = () => { setComment(""); setOptionAnswer([]) setFile([]); + setVideo(""); setCurrentTypeAnswer(""); setCurrentOptionAnswer("") setMandatory(false); @@ -86,6 +89,7 @@ const NewForm = () => { setQuestion(obj.question); setComment(obj.comment); setFile(obj.file); + setVideo(obj.video); setCurrentTypeAnswer(obj.typeAnswer); setOptionAnswer(obj.optionAnswer); setMandatory(obj.mandatory); @@ -98,13 +102,12 @@ const NewForm = () => { question: question, comment: comment, file: file, + video: video, mandatory: mandatory, optionAnswer: optionAnswer, typeAnswer: currentTypeAnswer, } - console.log(stateModal) - const response = await updateBlockApi(cookies.token, stateModal, data); if (response.status === 200) { @@ -129,7 +132,8 @@ const NewForm = () => { comment: comment, mandatory: mandatory, optionAnswer: optionAnswer, - file: file + file: file, + video: video } const response = await addFormBlockApi(cookies.token, formId, newBlock) @@ -259,6 +263,8 @@ const NewForm = () => { optionAnswer={optionAnswer} setOptionAnswer={setOptionAnswer} file={file} + video={video} + setVideo={setVideo} currentOptionAnswer={currentOptionAnswer} listTypeAnswer={listTypeAnswer} setQuestion={setQuestion}