KRBL/MinervaFrontend
6
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

add modal preview

Browse Source
This commit is contained in:
kuwsh1n
2024-02-26 20:00:45 +03:00
parent 5ceaac5e3d
commit b18c49628f
14 changed files with 149 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/MyModal.jsx → src/components/AnswerModal.jsx
View File

@ -1,7 +1,8 @@
import React from "react";
import classes from "../assets/styles/components/myModal.module.scss";
import classes from "../assets/styles/components/answerModal.module.scss";
import MyButton from "./MyButton.jsx"
const MyModal = ({
const AnswerModal = ({
cleanStates,
currentTypeAnswer,
updateAnswerByForm,
@ -10,10 +11,15 @@ const MyModal = ({
answer,
file,
listTypeAnswer,
optionAnswer,
setOptionAnswer,
currentOptionAnswer,
setCurrentOptionAnswer,
comment,
datetime,
mandatory,
setMandatory,
addOptionAnswer,
setAnswer,
setComment,
setDatetime,
@ -23,7 +29,7 @@ const MyModal = ({
return (
<div class="modal fade myModal" className={classes.myModal} id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal fade myModal" className={classes.myModal} id="answerModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
<div class="modal-content" className={classes.myModal__dialog__content}>
<div class="modal-header" className={classes.myModal__dialog__content__header}>
@ -51,6 +57,24 @@ const MyModal = ({
<span className={classes.myModal__dialog__content__body__comment__title}>Комментарий</span>
<textarea className={classes.myModal__dialog__content__body__comment__text} value={comment} onChange={event => setComment(event.target.value)}></textarea>
</div>
{[3, 4, 5].find(item => item === currentTypeAnswer) ? <div className={classes.myModal__dialog__content__body__answerOptions}>
<span className={classes.myModal__dialog__content__body__answerOptions__title}>Варианты ответа</span>
<div className={classes.myModal__dialog__content__body__answerOptions__list}>
{optionAnswer.map((item, i) =>
<span key={i} className={classes.myModal__dialog__content__body__answerOptions__list__answer}>{item.id}) {item.text}</span>
)}
</div>
<input
type="text"
className={classes.myModal__dialog__content__body__answerOptions__text}
value={currentOptionAnswer}
onChange={event => setCurrentOptionAnswer(event.target.value)}/>
<MyButton
text={'Добавить'}
click={addOptionAnswer}
backgroundColor={'rgb(200, 200, 200)'}
otherStyle={{padding: '1% 2%'}}/>
</div> : <div></div>}
<div className={classes.myModal__dialog__content__body__mandatory}>
<span className={classes.myModal__dialog__content__body__mandatory__title}>Обязательный вопрос</span>
<input className={classes.myModal__dialog__content__body__mandatory__choice} type="checkbox" checked={mandatory} onChange={() => setMandatory(!mandatory)}/>
@ -70,4 +94,4 @@ const MyModal = ({
)
}
export default MyModal;
export default AnswerModal;

3
src/components/MyButton.jsx
View File

@ -9,6 +9,9 @@ const MyButton = (props) => {
type="button"
class={props.class}
onClick={props.click}
data-bs-target={props.target}
data-bs-toggle={props.toggle}
data-bs-dismiss={props.dismiss}
style={{backgroundColor: props.backgroundColor, ...props.otherStyle}}>
{props.text}
</button>

6
src/components/NavBar.jsx
View File

@ -1,13 +1,13 @@
import React from "react";
import { Link } from "react-router-dom";
import { Link, BrowserRouter, useNavigate } from "react-router-dom";
import classes from "../assets/styles/components/navbar.module.scss"
const NavBar = () => {
return (
<div className={classes.main}>
<div className={classes.wrapper}>
{/* <Link to={'/new'}>New Form</Link>
<Link to={'/forms'}>Forms</Link> */}
</div>
</div>
)

26
src/components/PreviewModal.jsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import classes from "../assets/styles/components/previewModal.module.scss";
// import MyButton from "./MyButton.jsx";
const PreviewModal = () => {
return (
<div class="modal fade" className={classes.myModal} id="previewModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal-dialog" className={classes.myModal__dialog}>
<div class="modal-content" className={classes.myModal__dialog__content}>
<div class="modal-header" className={classes.myModal__dialog__content__header}>
<h5 class="modal-title" id="exampleModalLabel">Форма</h5>
<i class="fa-solid fa-xmark" data-bs-dismiss="modal" aria-label="Close"></i>
</div>
<div class="modal-body" className={classes.myModal__dialog__content__body}>
</div>
<div class="modal-footer" className={classes.myModal__dialog__content__footer}>
</div>
</div>
</div>
</div>
)
}
export default PreviewModal;