Compare commits

...

3 Commits

Author SHA1 Message Date
kuwsh1n
209c2e0a70 pull krbl
All checks were successful
publish-main / release-image (push) Successful in 3m30s
2024-04-15 00:38:11 +03:00
kuwsh1n
9a7d71e8fb fix one 2024-04-15 00:15:26 +03:00
kuwsh1n
0b48eb739e reg modify 2024-04-14 14:17:15 +03:00
16 changed files with 287 additions and 282 deletions

View File

@ -22,14 +22,14 @@ const App = () => {
const [user, setUser] = useState(false);
const [answersList, setAnswersList] = useState([]);
const [listTypeAnswer, setListTypeAnswer] = useState([
{ id: 1, text: "Краткий ответ", typeTag: InputText },
{ id: 2, text: "Расширенный ответ", typeTag: TextArea },
{ id: 3, text: "Выбор из вариантов", typeTag: InputRadio },
{ id: 4, text: "Множественный выбор", typeTag: InputMultipleRadio },
{ id: 5, text: "Выпадающий список", typeTag: DropDownList },
{ id: 6, text: "Да/Нет", typeTag: YesNo },
{ id: 7, text: "Файл", typeTag: InputFile },
{ id: 8, text: "Дата", typeTag: InputDate },
{id: 1, text: 'Краткий ответ', typeTag: InputText},
{id: 2, text: 'Расширенный ответ', typeTag: TextArea},
{id: 3, text: 'Выбор из вариантов', typeTag: InputRadio},
{id: 4, text: 'Множественный выбор', typeTag: InputMultipleRadio},
{id: 5, text: 'Выпадающий список', typeTag: DropDownList},
{id: 6, text: 'Да/Нет', typeTag: YesNo},
// {id: 7, text: 'Файл', typeTag: InputFile},
{id: 8, text: 'Дата', typeTag: InputDate}
]);
// useEffect(() => globalRender(window.location.pathname, user, navigate));
@ -40,12 +40,12 @@ const App = () => {
const response = await verifyUserApi(cookies.token);
console.log("app", user);
if (response) {
if (response.status === 200) {
setUser(response.data);
} else {
console.log(response);
globalRender(window.location.pathname, response.data, navigate);
}
else {
globalRender(window.location.pathname, false, navigate);
}
}

View File

@ -11,12 +11,26 @@
align-items: center;
}
.loading__wrapper {
width: 100%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
&__body {
// margin-top: 100px;
span {
}
}
}
.answers {
width: 70%;
height: 70%;
box-shadow: 0 0 5px 1px rgb(200, 200, 200);
padding: 1.5%;
position: relative;
&__linkAdmin {
position: absolute;
bottom: 103%;
@ -33,6 +47,8 @@
}
}
&__wrapper {
width: 100%;
height: 100%;
&__header {
width: 100%;
height: 15%;
@ -40,6 +56,7 @@
justify-content: start;
align-items: center;
margin-bottom: 10px;
// border-bottom: 1px solid rgb(200, 200, 200);
h3 {
font-size: 25px;
font-family: "Montserrat", sans-serif;
@ -49,30 +66,45 @@
&__body {
width: 100%;
height: 85%;
&__item {
padding: 5px;
overflow-y: auto;
border-bottom: 1px solid rgb(200, 200, 200);
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__column {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-family: "Montserrat", sans-serif;
padding: 5px;
border-bottom: 1px solid rgb(200, 200, 200);
}
&__item {
padding: 0 5px;
// border-bottom: 1px solid rgb(200, 200, 200);
font-size: 15px;
font-family: "Montserrat", sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
height: 20%;
width: 100%;
&:hover {
background-color: rgba(230, 230, 230, 0.6);
}
&__user {
cursor: pointer;
// &__question {
// &__text {
// font-size: 15px;
// font-family: "Montserrat", sans-serif;
// }
// &__comment {
// font-size: 11px;
// font-family: "Montserrat", sans-serif;
// font-style: italic;
// color: rgb(200, 200, 200);
// }
// }
// &__answer {
// &__text {
// font-size: 15px;
// font-family: "Montserrat", sans-serif;
// }
// }
&:hover {
text-decoration: underline;
}
}
&__date {
}
}
}
}

View File

@ -28,7 +28,6 @@
.content {
width: 100%;
height: 100%;
// box-shadow: 0 3px 5px 1px rgb(200, 200, 200);
border: 1px solid rgb(220, 220, 220);
border-top: none;
&__wrapper {
@ -58,6 +57,15 @@
display: flex;
justify-content: space-around;
flex-direction: column;
position: relative;
&__error {
position: absolute;
font-size: 13px;
font-family: "Montserrat", sans-serif;
top: 0;
left: 10px;
color: rgb(224, 75, 75);
}
}
&__footer {
width: 100%;
@ -87,7 +95,15 @@
justify-content: space-around;
flex-direction: column;
padding-bottom: 5px;
position: relative;
&__error {
position: absolute;
font-size: 13px;
font-family: "Montserrat", sans-serif;
top: 0;
left: 10px;
color: rgb(224, 75, 75);
}
&__fio {
height: 15%;
display: flex;

View File

@ -4,41 +4,25 @@ import classes from "../assets/styles/components/navbar.module.scss";
import { verifyUserApi } from "../hooks/api/enterAccountApi";
const NavBar = ({navigate, auth, setAuth}) => {
useEffect(() => {
console.log("nav", auth);
});
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.menu}>
<div className={classes.menu__authorized}>
<span onClick={() => navigate("/")}>Главная</span>
{auth ? (
auth.is_admin ? (
<span onClick={() => navigate("/forms")}>Мои формы</span>
) : (
<span></span>
)
) : (
<span></span>
)}
{auth ?
auth.is_admin ? <span onClick={() => navigate("/forms")}>Мои формы</span> : <span></span> :
<span></span>}
</div>
</div>
<div className={classes.profile}>
{auth ? (
{auth ?
<div className={classes.profile__authorized}>
<span onClick={() => navigate("/profile")}>
Профиль ({auth.login})
</span>
</div>
) : (
<span onClick={() => navigate("/profile")}>Профиль ({auth.login})</span>
</div> :
<div className={classes.profile__nonAuthorized}>
<span onClick={() => navigate("/enter")}>
Вход <i class="fa-solid fa-arrow-right-to-bracket"></i>
</span>
</div>
)}
<span onClick={() => navigate("/enter")}>Вход <i class="fa-solid fa-arrow-right-to-bracket"></i></span>
</div>}
</div>
</div>
</div>

View File

@ -7,11 +7,11 @@ const DropDownList = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
<div className={classes.main}>
<select
value={answers ? answers[postfix].answer : ""}
onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
onChange={updateAnswersForm ? (e) => updateAnswersForm(e.target.value, postfix) : () => {}}
>
<option selected disabled></option>
{optionAnswer.map((item, i) =>
// <option value={item.id ? item.id : item[0].Value} key={i}>{item.text ? item.text : item[1].Value}</option>
<option value={item.id} key={i}>{item.text}</option>
<option value={item.text} key={i}>{item.text}</option>
)}
</select>
</div>

View File

@ -2,20 +2,20 @@ import React from "react";
import classes from "../../assets/styles/components/typeAnswer/inputMultiple.module.scss"
const InputMultipleRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
function checkRadio(i) {
function checkRadio(value) {
if (answers[postfix].answer) {
return answers[postfix].answer.some(item => item === Number(i))
return answers[postfix].answer.some(item => item === value)
}
return false
}
function updateStateCheckbox(i) {
function updateStateCheckbox(value) {
if (updateAnswersForm) {
if (answers[postfix].answer.some((item) => item === Number(i))) {
answers[postfix].answer.splice(answers[postfix].answer.indexOf(i), 1)
if (answers[postfix].answer.some((item) => item === value)) {
answers[postfix].answer.splice(answers[postfix].answer.indexOf(value), 1)
}
else {
answers[postfix].answer.push(i)
answers[postfix].answer.push(value)
}
updateAnswersForm(answers[postfix].answer, postfix)
}
@ -30,9 +30,9 @@ const InputMultipleRadio = ({postfix, optionAnswer, answers, updateAnswersForm})
type="checkbox"
name={`inputMultiple_${postfix}`}
id={`inputMultiple_${postfix}`}
value={i}
checked={answers ? checkRadio(i) : false}
onChange={() => updateStateCheckbox(i)}
value={item.text}
checked={answers ? checkRadio(item.text) : false}
onChange={() => updateStateCheckbox(item.text)}
/>
{/* <label class="form-check-label" for={`inputMultiple_${postfix}`}>{item.text ? item.text : item[1].Value}</label> */}
<label class="form-check-label" for={`inputMultiple_${postfix}`}>{item.text}</label>

View File

@ -11,9 +11,9 @@ const InputRadio = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
type="radio"
name={`inputRadio_${postfix}`}
id={`choice_${item.id}`}
value={i}
checked={answers ? answers[postfix].answer === i : false}
onChange={updateAnswersForm ? (e) => updateAnswersForm(Number(e.target.value), postfix) : () => {}}
value={item.text}
checked={answers ? answers[postfix].answer === item.text : false}
onChange={updateAnswersForm ? (e) => updateAnswersForm(item.text, postfix) : () => {}}
/>
{/* <label class="form-check-label" for={`inputRadio_${postfix}`}>{item.text ? item.text : item[1].Value}</label> */}
<label class="form-check-label" for={`inputRadio_${postfix}`}>{item.text}</label>

View File

@ -11,8 +11,8 @@ const YesNo = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
name={`YesOrNo_${postfix}`}
id="choiceYes"
value="1"
checked={answers ? answers[postfix].answer === "1" : false}
onChange={updateAnswersForm ? () => updateAnswersForm("1", postfix) : () => {}}
checked={answers ? answers[postfix].answer === "Да" : false}
onChange={updateAnswersForm ? () => updateAnswersForm("Да", postfix) : () => {}}
/>
<label class="form-check-label" for="choiceYes">Да</label>
</div>
@ -23,8 +23,8 @@ const YesNo = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
name={`YesOrNo_${postfix}`}
id="choiceNo"
value="2"
checked={answers ? answers[postfix].answer === "2" : false}
onChange={updateAnswersForm ? () => updateAnswersForm("2", postfix) : () => {}}
checked={answers ? answers[postfix].answer === "Нет" : false}
onChange={updateAnswersForm ? () => updateAnswersForm("Нет", postfix) : () => {}}
/>
<label class="form-check-label" for="choiceNo">Нет</label>
</div>

View File

@ -23,7 +23,7 @@ async function completeRegistration(data) {
return response
}
catch (e) {
return e
return "Ошибка. Проверте корректность введенных данных."
}
}
return validate.message

View File

@ -31,4 +31,22 @@ function responseDataToListBlock(data) {
return result.sort((itemOne, itemTwo) => itemOne.order - itemTwo.order)
};
export { responseDataToListBlock }
function dateTimeParse(date) {
let newDate = "";
for (let symbol of date) {
if (symbol === "T") {
newDate += " ";
}
else if (symbol === ".") {
break;
}
else {
newDate += symbol;
}
}
return newDate
}
export { responseDataToListBlock, dateTimeParse }

View File

@ -16,16 +16,15 @@ const constructorAnswerValidate = (
const totalRegisterValidate = (data) => {
const listValidation = [
constructorAnswerValidate(data.login.length, "Обязательное поле."),
constructorAnswerValidate(data.login.length, "Введите логин."),
constructorAnswerValidate(data.password.length, "Введите пароль."),
constructorAnswerValidate(data.repiedPassword.length, "Введите повторно пароль."),
// constructorAnswerValidate(data.surname.length, "Обязательное поле."),
// constructorAnswerValidate(data.email.length, "Обязательное поле."),
// constructorAnswerValidate(data.phone.length, "Обязательное поле."),
constructorAnswerValidate(
data.password === data.repiedPassword,
"Введенные пароли не совпадают."
),
constructorAnswerValidate(data.password === data.repiedPassword, "Введенные пароли не совпадают."),
// constructorAnswerValidate(data.password >= 8, "Пароль должен иметь более 8 символов.")
];
]
for (let value of listValidation) {
if (!value.status) {

View File

@ -3,7 +3,7 @@ import { useCookies } from "react-cookie";
import { useNavigate, useParams } from 'react-router-dom';
import { answersData } from "../context";
import classes from "../assets/styles/answersForm.module.scss";
import { responseDataToListBlock } from "../hooks/sundry/parseListBlock";
import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock";
import { listFormBlockApi, getAnswersApi } from "../hooks/api/formApi";
import { listUsersApi } from "../hooks/api/adminApi";
@ -29,6 +29,7 @@ const AnswersForm = () => {
for (let item of responseAnswers.data) {
const blocks = {
user: listUsers.data.find(user => user.id === item.user_id).login,
date: dateTimeParse(item.date),
block: []
}
@ -67,12 +68,20 @@ const AnswersForm = () => {
<h3>Ответы</h3>
</div>
<div className={classes.answers__wrapper__body}>
<div className={classes.answers__wrapper__body__column}>
<div>Логин</div>
<div>Дата</div>
</div>
{data ?
data.map((item, i) =>
<div className={classes.answers__wrapper__body__item} key={i}>
<div className={classes.answers__wrapper__body__item__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${i}`}>
{item.user}
</div>
<div className={classes.answers__wrapper__body__item__date}>
{item.date}
</div>
<div class="modal fade myModal" className={classes.myModal} id={`answersModal${i}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
@ -87,7 +96,11 @@ const AnswersForm = () => {
<p className={classes.myModal__item__question__comment}>{block.question.comment}</p>
</div>
<div className={classes.myModal__item__answer}>
<p className={classes.myModal__item__question__text}>Ответ: {block.answers.answer}</p>
<p className={classes.myModal__item__question__text}>Ответ: {
Array.isArray(block.answers.answer) ?
block.answers.answer.map(item => <span>{item}; </span>) :
block.answers.answer
}</p>
</div>
</div>)}
</div>
@ -99,27 +112,14 @@ const AnswersForm = () => {
</div>
</div>
)
: <div>Ответов нет</div>}
{/* <MyButton text={'Предпросмотр'} backgroundColor={'rgb(225, 225, 225)'} toggle={"modal"} target={"#previewModal"}/>
{data ? <div className={classes.answers__wrapper__body__item}></div> */}
{/* {data ?
data.map((item, i) =>
<div className={classes.answers__wrapper__body__item} key={i}>
<div className={classes.answers__wrapper__body__item__question}>
<p className={classes.answers__wrapper__body__item__question__text}>{i + 1}) {item.question.question}</p>
<p className={classes.item__question__comment}>{item.question.comment}</p>
:
<div className={classes.loading__wrapper}>
<div class="spinner-border text-dark" className={classes.loading__wrapper__body} role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
<div className={classes.answers__wrapper__body__item__answer}>
<p className={classes.answers__wrapper__body__item__question__text}>Ответ: {item.answers.answer}</p>
</div>}
</div>
</div>
)
: <div>Ответов нет</div>} */}
</div>
</div>
</div>
</div>
</div>

View File

@ -26,6 +26,9 @@ const EnterAccount = () => {
const {user, setUser} = useContext(UserData);
const [cookies, setCookie, removeCookie] = useCookies(["user"]);
const [loginError, setLoginError] = useState(false);
const [regsterError, setRegsterError] = useState(false);
function cleanState() {
setEmail("");
setPhone("");
@ -49,35 +52,30 @@ const EnterAccount = () => {
});
if (response.status === 200) {
// setUser({
// email: email,
// phone: phone,
// login: login,
// surname: surname,
// patronymic: patronymic,
// password: password,
// });
const responseMe = await verifyUserApi(response.data.token);
const responseMe = await verifyUserApi(response.data.token)
setUser(responseMe.data);
setCookie("token", response.data.token);
cleanState();
navigate("/");
} else {
console.log("Error");
}
else {
setRegsterError(response)
}
};
async function logInToAccount() {
const response = await logIn(login, password);
if (response.status === 200) {
setCookie("token", response.data.token);
const responseMe = await verifyUserApi(response.data.token);
setUser(responseMe.data);
const responseMe = await verifyUserApi(response.data.token)
setUser(responseMe.data)
cleanState();
navigate("/");
} else {
console.log(response);
navigate("/")
}
else {
setLoginError(true);
}
}
@ -87,47 +85,25 @@ const EnterAccount = () => {
<div className={classes.tabs}>
<ul class="nav nav-tabs">
<li class="nav-item" onClick={() => selectTag("login")}>
<a
className={enter === "login" ? "nav-link active" : "nav-link"}
aria-current="page"
>
Авторизация
</a>
<a className={enter === "login" ? "nav-link active" : "nav-link"} aria-current="page">Авторизация</a>
</li>
<li class="nav-item" onClick={() => selectTag("register")}>
<a
className={
enter === "register" ? "nav-link active" : "nav-link"
}
>
Регистрация
</a>
<a className={enter === "register" ? "nav-link active" : "nav-link"}>Регитрация</a>
</li>
</ul>
</div>
<div className={classes.content}>
<div className={classes.content__wrapper}>
{enter === "login" ? (
<div className={classes.content__wrapper__login}>
{enter === 'login' ? <div className={classes.content__wrapper__login}>
<div className={classes.content__wrapper__login__header}>
<h3>Войти в аккаунт</h3>
</div>
<div className={classes.content__wrapper__login__body}>
<MyInput
placeholder={"Логин"}
otherMainStyle={{ width: "100%", height: "20%" }}
otherInputStyle={{ width: "100%" }}
value={login}
change={setLogin}
/>
<MyInput
type={"password"}
placeholder={"Пароль"}
otherMainStyle={{ width: "100%", height: "20%" }}
otherInputStyle={{ width: "100%" }}
value={password}
change={setPassword}
/>
{loginError ? <span className={classes.content__wrapper__login__body__error}>
Ошибка. Проверте корректность ввода логина и пароля.
</span> : <span className={classes.content__wrapper__login__body__error}></span>}
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "20%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
</div>
<div className={classes.content__wrapper__login__footer}>
<MyButton
@ -136,36 +112,18 @@ const EnterAccount = () => {
click={logInToAccount}
/>
</div>
</div>
) : (
</div> :
<div className={classes.content__wrapper__register}>
<div className={classes.content__wrapper__register__header}>
<h3>Зарегистрировать учетную запись</h3>
</div>
<div className={classes.content__wrapper__register__body}>
<MyInput
placeholder={"Логин"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={login}
change={setLogin}
/>
<MyInput
type={"password"}
placeholder={"Пароль"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={password}
change={setPassword}
/>
<MyInput
type={"password"}
placeholder={"Повторите пароль"}
otherMainStyle={{ width: "100%", height: "15%" }}
otherInputStyle={{ width: "100%" }}
value={repiedPassword}
change={setRepiedPassword}
/>
{regsterError ? <span className={classes.content__wrapper__register__body__error}>
{regsterError}
</span> : <span className={classes.content__wrapper__register__body__error}></span>}
<MyInput placeholder={"Логин"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={login} change={setLogin}/>
<MyInput type={"password"} placeholder={"Пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={password} change={setPassword}/>
<MyInput type={'password'} placeholder={"Повторите пароль"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={repiedPassword} change={setRepiedPassword}/>
</div>
{/* <div className={classes.content__wrapper__register__body}>
<MyInput placeholder={"Email"} otherMainStyle={{width: "100%", height: "15%"}} otherInputStyle={{width: "100%"}} value={email} change={setEmail}/>
@ -186,7 +144,7 @@ const EnterAccount = () => {
/>
</div>
</div>
)}
}
</div>
</div>
</div>

View File

@ -119,13 +119,6 @@ const NewForm = () => {
console.log(response)
}
// setListBlock(listBlock.map(item => {
// if (item.id === stateModal) {
// item = data
// }
// return item
// }))
cleanStates();
};

View File

@ -19,11 +19,9 @@ const ViewForm = () => {
const [cookies, setCookies, __] = useCookies(["user"]);
const [questions, setQuestions] = useState([]);
const [answers, setAnswers] = useState([]);
// const [title, setTitle] = useState("");
useEffect(() => {
async function getForm() {
// const responseForms = await listFormsApi(cookies.token);
const responseBlocks = await listFormBlockByTokenApi(cookies.token, formId);
if (responseBlocks.status === 200 && responseBlocks.data) {
@ -33,10 +31,8 @@ const ViewForm = () => {
setAnswers(listBlocks.map(item => (
{id: item.id, answer: []}
)))
// setTitle(responseForms.data.find(item => item.id === formId).title)
}
else {
// console.log(responseForms)
console.log(responseBlocks)
}
};
@ -45,6 +41,7 @@ const ViewForm = () => {
}, []);
function updateAnswersForm(value, id) {
console.log(value)
setAnswers(
answers.map((item, i) => {
if (id === i) {
@ -56,8 +53,8 @@ const ViewForm = () => {
};
async function saveAnswers() {
console.log(answers)
const response = await saveAnswersApi(cookies.token, formId, answers);
console.log(response)
if (response.status === 200) {
setAnswersList([...answersList, {

View File

@ -5,10 +5,10 @@ const protectedUrl = {
"/profile"
],
Authorized: [
"enter"
"/enter"
],
notRights: [
"/forms"
]
}
@ -16,6 +16,14 @@ function globalRender(url, user, navigate) {
if (!user && protectedUrl.notAuthorized.some(item => item === url)) {
navigate("/enter")
}
else if (user && protectedUrl.Authorized.some(item => item === url)) {
navigate("/")
}
else if (user && protectedUrl.notRights.some(item => item === url)) {
if (!user.is_admin) {
navigate("/")
}
}
}
export { globalRender }