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

fix ticket 5
All checks were successful
publish-main / release-image (push) Successful in 7m40s
Details

Browse Source
This commit is contained in:
kuwsh1n 2024-05-12 20:20:29 +03:00
parent caf16c4ea9
commit ca131a225c
8 changed files with 131 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.jsx
View File

@ -32,7 +32,6 @@ const App = () => {
{id: 8, text: 'Дата', typeTag: InputDate} {id: 8, text: 'Дата', typeTag: InputDate}
]); ]);
// useEffect(() => globalRender(window.location.pathname, user, navigate));
const [cookies, _, __] = useCookies(["user"]); const [cookies, _, __] = useCookies(["user"]);
useEffect(() => { useEffect(() => {
@ -41,7 +40,6 @@ const App = () => {
if (response.status === 200) { if (response.status === 200) {
setUser(response.data); setUser(response.data);
console.log(response.data)
globalRender(window.location.pathname, response.data, navigate); globalRender(window.location.pathname, response.data, navigate);
} }
else { else {

47
src/assets/styles/answersForm.module.scss
View File

@ -75,36 +75,55 @@
background-color: rgb(200, 200, 200); background-color: rgb(200, 200, 200);
} }
&__column { &__column {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px; font-size: 15px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
padding: 5px; padding: 5px;
width: 100%;
border-bottom: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200);
&__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 95%;
}
} }
&__item { &__item {
padding: 0 5px; padding: 0 5px;
// border-bottom: 1px solid rgb(200, 200, 200);
font-size: 15px; font-size: 15px;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
height: 20%; height: 20%;
width: 100%; width: 100%;
position: relative;
&:hover { &:hover {
background-color: rgba(230, 230, 230, 0.6); background-color: rgba(230, 230, 230, 0.6);
} }
&__user { &__wrapper {
cursor: pointer; display: flex;
&:hover { justify-content: space-between;
text-decoration: underline; align-items: center;
height: 100%;
width: 95%;
&__user {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__date {
}
i {
font-size: 13px;
position: absolute;
right: 10px;
cursor: pointer;
&:hover {
color: rgb(199, 73, 73);
}
} }
} }
&__date {
}
} }
} }
} }

4
src/components/CheckModal.jsx
View File

@ -2,10 +2,10 @@ import React from "react";
import classes from "../assets/styles/components/checkModal.module.scss"; import classes from "../assets/styles/components/checkModal.module.scss";
import MyButton from "./MyButton.jsx"; import MyButton from "./MyButton.jsx";
const CheckModal = ({message, action}) => { const CheckModal = ({postfix, message, action}) => {
return ( return (
<div class="modal fade" tabindex="-1" id="checkModal" tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true"> <div class="modal fade" tabindex="-1" id={`checkModal${postfix}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">

36
src/hooks/api/answersApi.js Normal file
View File

@ -0,0 +1,36 @@
import axios from "axios";
async function getAnswersApi(token, formToken) {
try {
const response = await axios.get(`https://api.minerva.krbl.ru/formBuilder/edit/${formToken}/answers`,
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e
}
};
async function removeAnswerFormApi(token, formId, answerId) {
try {
const response = await axios.delete(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/answers`,
{
headers: {
"Authorization": `Token ${token}`
},
data: {
"answer_id": answerId
}
})
return response
}
catch (e) {
return e
}
};
export { getAnswersApi, removeAnswerFormApi }

3
src/hooks/api/enterAccountApi.js
View File

@ -32,7 +32,8 @@ async function completeRegistration(data) {
async function verifyUserApi(token=false) { async function verifyUserApi(token=false) {
if (token) { if (token) {
try { try {
const response = await axios.get("https://api.minerva.krbl.ru/auth/me", { const response = await axios.get("https://api.minerva.krbl.ru/auth/me",
{
headers: { headers: {
"Authorization": `Token ${token}`, "Authorization": `Token ${token}`,
}, },

27
src/hooks/api/formApi.js
View File

@ -138,21 +138,6 @@ async function saveAnswersApi(token, formToken, data) {
} }
}; };
async function getAnswersApi(token, formToken) {
try {
const response = await axios.get(`https://api.minerva.krbl.ru/formBuilder/edit/${formToken}/answers`,
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e
}
};
async function getBlockApi(token, formId, order) { async function getBlockApi(token, formId, order) {
try { try {
const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/get`, const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/get`,
@ -171,4 +156,14 @@ async function getBlockApi(token, formId, order) {
} }
}; };
export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi, updateOrderBlockApi, listFormBlockByTokenApi, saveAnswersApi, getAnswersApi, removeBlockApi, getBlockApi } export {
addFormBlockApi,
listFormBlockApi,
saveFormApi,
updateBlockApi,
updateOrderBlockApi,
listFormBlockByTokenApi,
saveAnswersApi,
removeBlockApi,
getBlockApi
}

58
src/pages/AnswersForm.jsx
View File

@ -4,9 +4,11 @@ import { useNavigate, useParams } from 'react-router-dom';
import { answersData } from "../context"; import { answersData } from "../context";
import classes from "../assets/styles/answersForm.module.scss"; import classes from "../assets/styles/answersForm.module.scss";
import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock"; import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock";
import { listFormBlockApi, getAnswersApi } from "../hooks/api/formApi"; import { listFormBlockApi } from "../hooks/api/formApi";
import { listUsersApi } from "../hooks/api/adminApi"; import { listUsersApi } from "../hooks/api/adminApi";
import { removeAnswerFormApi, getAnswersApi } from "../hooks/api/answersApi.js";
import Loading from "../components/Loading.jsx"; import Loading from "../components/Loading.jsx";
import CheckModal from "../components/CheckModal.jsx";
const AnswersForm = () => { const AnswersForm = () => {
const { formId } = useParams(); const { formId } = useParams();
@ -27,6 +29,7 @@ const AnswersForm = () => {
if (responseAnswers.data) { if (responseAnswers.data) {
for (let item of responseAnswers.data) { for (let item of responseAnswers.data) {
const blocks = { const blocks = {
id: item.id,
user: listUsers.data.find(user => user.id === item.user_id).login, user: listUsers.data.find(user => user.id === item.user_id).login,
date: dateTimeParse(item.date), date: dateTimeParse(item.date),
block: [] block: []
@ -60,6 +63,17 @@ const AnswersForm = () => {
getForm() getForm()
}, []); }, []);
async function removeAnswerForm(answerId) {
const response = await removeAnswerFormApi(cookies.token, formId, answerId)
if (response.status === 200) {
setData([...data].filter(item => item.id !== answerId))
}
else {
console.log(response)
}
}
return ( return (
<div className={classes.main}> <div className={classes.main}>
<div className={classes.wrapper}> <div className={classes.wrapper}>
@ -70,26 +84,40 @@ const AnswersForm = () => {
</div> </div>
<div className={classes.answers__wrapper__body}> <div className={classes.answers__wrapper__body}>
<div className={classes.answers__wrapper__body__column}> <div className={classes.answers__wrapper__body__column}>
<div>Логин</div> <div className={classes.answers__wrapper__body__column__wrapper}>
<div>Дата</div> <div>Логин</div>
<div>Дата</div>
</div>
</div> </div>
{data ? {data ?
data.map((item, i) => data.map((item, dataIndex) =>
<div className={classes.answers__wrapper__body__item} key={i}> <div className={classes.answers__wrapper__body__item} key={dataIndex}>
<div className={classes.answers__wrapper__body__item__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${i}`}> <div className={classes.answers__wrapper__body__item__wrapper}>
{item.user} <div className={classes.answers__wrapper__body__item__wrapper__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${dataIndex}`}>
</div> {item.user}
<div className={classes.answers__wrapper__body__item__date}> </div>
{item.date} <div className={classes.answers__wrapper__body__item__wrapper__date}>
</div> {item.date}
</div>
<i class="fa-solid fa-trash" data-bs-toggle="modal" data-bs-target={`#checkModal${item.id}`}></i>
</div>
<div class="modal fade myModal" className={classes.myModal} id={`answersModal${i}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true"> <CheckModal
postfix={item.id}
message={`Вы хотетите удалить ответы пользователя <${item.user}>?`}
action={{
execute: () => removeAnswerForm(item.id),
cancel: () => {}
}}
/>
<div class="modal fade myModal" className={classes.myModal} id={`answersModal${dataIndex}`} 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-dialog myModal__dialog" className={classes.myModal__dialog}>
<div class="modal-content" className={classes.myModal__dialog__content}> <div class="modal-content" className={classes.myModal__dialog__content}>
<div class="modal-body" className={classes.myModal__dialog__content__body}> <div class="modal-body" className={classes.myModal__dialog__content__body}>
{item.block.map((block, i) => {item.block.map((block, blockIndex) =>
<div className={classes.myModal__item} key={i}> <div className={classes.myModal__item} key={blockIndex}>
<div className={classes.myModal__item__question}> <div className={classes.myModal__item__question}>
<p className={classes.myModal__item__question__text}>{block.question.question}</p> <p className={classes.myModal__item__question__text}>{block.question.question}</p>
<p className={classes.myModal__item__question__comment}>{block.question.comment}</p> <p className={classes.myModal__item__question__comment}>{block.question.comment}</p>
@ -97,7 +125,7 @@ const AnswersForm = () => {
<div className={classes.myModal__item__answer}> <div className={classes.myModal__item__answer}>
<p className={classes.myModal__item__question__text}>Ответ: { <p className={classes.myModal__item__question__text}>Ответ: {
Array.isArray(block.answers.answer) ? Array.isArray(block.answers.answer) ?
block.answers.answer.map(item => <span>{item}; </span>) : block.answers.answer.map((answer, indexAnswer) => <span key={indexAnswer}>{answer}; </span>) :
block.answers.answer block.answers.answer
}</p> }</p>
</div> </div>

9
src/pages/Forms.jsx
View File

@ -13,7 +13,6 @@ const Forms = () => {
const {forms, setForms} = useContext(FormsData); const {forms, setForms} = useContext(FormsData);
const {user, setUser} = useContext(UserData); const {user, setUser} = useContext(UserData);
const [stateLoading, setStateLoading] = useState(false); const [stateLoading, setStateLoading] = useState(false);
const [currentRemoveForm, setCurrentRemoveForm] = useState(false);
const [searchForm, setSearchForm] = useState(""); const [searchForm, setSearchForm] = useState("");
const [cookies, _, __] = useCookies(["user"]); const [cookies, _, __] = useCookies(["user"]);
@ -118,14 +117,14 @@ const Forms = () => {
<li><a class="dropdown-item" onClick={() => navigate(`/forms/${item.id}/answers`)}>Ответы</a></li> <li><a class="dropdown-item" onClick={() => navigate(`/forms/${item.id}/answers`)}>Ответы</a></li>
<li><a class="dropdown-item" onClick={() => navigate(`/tokens/${item.id}`)}>Список токенов</a></li> <li><a class="dropdown-item" onClick={() => navigate(`/tokens/${item.id}`)}>Список токенов</a></li>
<li><a class="dropdown-item" onClick={() => copyLinkToFormView(item.id)}>Скопировать ссылку</a></li> <li><a class="dropdown-item" onClick={() => copyLinkToFormView(item.id)}>Скопировать ссылку</a></li>
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#checkModal" onClick={() => setCurrentRemoveForm({id: item.id, title: item.title})}>Удалить</a></li> <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target={`#checkModal${item.id}`}>Удалить</a></li>
</ul> </ul>
<CheckModal <CheckModal
message={`Вы хотетите удалить форму <${currentRemoveForm.title}>?`} postfix={item.id}
message={`Вы хотетите удалить форму <${item.title}>?`}
action={{ action={{
execute: () => removeForm(currentRemoveForm.id), execute: () => removeForm(item.id),
// cancel: () => setCurrentRemoveForm(false)
cancel: () => {} cancel: () => {}
}} }}
/> />