Compare commits

..

6 Commits

Author SHA1 Message Date
7bccb29aa6 qrcode temporary fix
All checks were successful
publish-main / release-image (push) Successful in 10m12s
2024-07-03 19:35:51 +03:00
2b50f7c332 articles styles fix
All checks were successful
publish-main / release-image (push) Successful in 10m46s
2024-07-03 18:56:34 +03:00
0e1dc49f59 ticket 16, 4, 18, 19, 20, 21, 22
Some checks failed
publish-main / release-image (push) Has been cancelled
2024-07-03 16:26:24 +03:00
d25e54f73f mybutton fix
All checks were successful
publish-main / release-image (push) Successful in 4m40s
2024-06-27 23:07:29 +03:00
58b6d1387d ticket 17
All checks were successful
publish-main / release-image (push) Successful in 7m24s
2024-06-25 14:01:13 +03:00
0e7f962645 ticket 17 2024-06-25 13:52:14 +03:00
43 changed files with 1795 additions and 266 deletions

View File

@ -28,6 +28,8 @@
"webpack-dev-server": "^5.0.2"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^41.4.2",
"@ckeditor/ckeditor5-react": "^7.0.0",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
@ -36,10 +38,14 @@
"@uiw/react-markdown-editor": "^5.12.1",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"inputmask": "^5.0.9",
"primereact": "^10.6.6",
"qrcode": "^1.5.3",
"react": "^18.2.0",
"react-bootstrap": "^2.10.1",
"react-cookie": "^7.1.4",
"react-dom": "^18.2.0",
"react-qr-code": "^2.0.15",
"react-router-dom": "^6.22.1"
}
}

View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useLayoutEffect } from "react";
import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { FormsData, UserData, TypeAnswerData, answersData } from "./context";
import { useCookies } from "react-cookie";
@ -20,6 +20,9 @@ const App = () => {
const navigate = useNavigate();
const [forms, setForms] = useState([]);
const [user, setUser] = useState(false);
globalRender(window.location.pathname, user, navigate);
const userRef = useRef(false)
const [answersList, setAnswersList] = useState([]);
const [listTypeAnswer, setListTypeAnswer] = useState([
{id: 1, text: 'Краткий ответ', typeTag: InputText},
@ -37,13 +40,16 @@ const App = () => {
useEffect(() => {
async function verifyUser() {
const response = await verifyUserApi(cookies.token);
console.log("verifyUser App")
if (response.status === 200) {
setUser(response.data);
globalRender(window.location.pathname, response.data, navigate);
userRef.current = response.data
// globalRender(window.location.pathname, response.data, navigate);
}
else {
globalRender(window.location.pathname, false, navigate);
// globalRender(window.location.pathname, false, navigate);
setUser(false);
}
}
@ -51,7 +57,7 @@ const App = () => {
}, []);
return (
<UserData.Provider value={{ user, setUser }}>
<UserData.Provider value={{ user, setUser, userRef }}>
<answersData.Provider value={{ answersList, setAnswersList }}>
<FormsData.Provider value={{ forms, setForms }}>
<TypeAnswerData.Provider

View File

@ -12,8 +12,8 @@
}
.admin {
width: 70%;
height: 70%;
width: 85%;
height: 80%;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
@ -84,7 +84,7 @@
}
&__item {
width: 100%;
height: 20%;
height: 60px;
border-bottom: 1px solid rgb(200, 200, 200);
position: relative;
&__wrapper {

View File

@ -0,0 +1,166 @@
.main {
width: 100%;
min-height: 100%;
padding: 4% 8%;
}
.wrapper {
width: 100%;
min-height: 100%;
}
.panel {
width: 100%;
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 25px;
gap: 15px;
div:first-child {
flex-grow: 1;
input {
width: 100%;
}
}
}
.listforms {
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
border-radius: 16px;
height: 70%;
min-height: 700px;
margin-bottom: 50px;
width: 100%;
&__columns {
display: flex;
justify-content: start;
align-items: center;
padding: 20px 25px;
border-bottom: 1px solid rgb(220, 220, 220);
&__item {
font-size: 15px;
font-family: "Montserrat", sans-serif;
font-weight: bold;
}
}
&__forms {
min-height: 100%;
display: inline;
overflow-y: auto;
&__item {
display: flex;
justify-content: start;
align-items: center;
width: 100%;
padding: 20px 25px;
font-family: "Montserrat", sans-serif;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
&:hover {
background-color: rgba(240, 240, 240, 0.8);
}
&__title {
text-align: center;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__answers {
width: 33.3%;
text-align: center;
}
&__update {
width: 33.3%;
text-align: center;
}
i {
position: absolute;
font-size: 15px;
right: 30px;
top: calc(50% - 7px);
cursor: pointer;
}
ul {
li {
cursor: pointer;
}
}
}
}
}
.listArticles {
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
border-radius: 16px;
height: 70%;
min-height: 700px;
margin-bottom: 50px;
width: 100%;
&__columns {
display: flex;
justify-content: start;
align-items: center;
padding: 20px 25px;
border-bottom: 1px solid rgb(220, 220, 220);
&__item {
width: 33.3%;
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
&__forms {
width: 100%;
height: 85%;
overflow-y: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__item {
display: flex;
justify-content: start;
align-items: center;
width: 100%;
padding: 20px 25px;
font-family: "Montserrat", sans-serif;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
&:hover {
background-color: rgba(240, 240, 240, 0.8);
}
&__title {
width: 33.3%;
// text-align: center;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
&__date {
width: 33.3%;
// text-align: center;
}
&__author {
width: 33.3%;
// text-align: center;
}
i {
position: absolute;
font-size: 15px;
right: 30px;
top: calc(50% - 7px);
cursor: pointer;
}
ul {
li {
cursor: pointer;
}
}
}
}
}

View File

@ -32,7 +32,27 @@
padding: 0 1%;
}
&__file {
// margin-top: 10px;
display: none;
}
&__fileLabel {
margin-top: 10px;
border: 1px solid rgb(100, 100, 100);
background-color: rgb(240, 240, 240);
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
cursor: pointer;
padding: 1%;
transition: 0.3s;
&:hover {
background-color: rgb(230, 230, 230);
transition: 0.3s;
}
}
&__listFile {
margin-left: 10px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
}
&__comment {

View File

@ -0,0 +1,5 @@
.main {
width: 100%;
height: 100%;
padding: 2%;
}

View File

@ -0,0 +1,8 @@
.main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 2% 0;
}

View File

@ -30,5 +30,27 @@
&:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
}
&__green {
color: white;
background-color: rgb(150, 209, 158);
}
&__white {
color: black;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.2);
&:hover {
border: 1px solid rgba(0, 0, 0, 0.3);
}
}
&__transparent {
background-color: rgba(0, 0, 0, 0);
border: 1px solid rgba(0, 0, 0, 0);
transition: 0.3s;
&:hover {
background-color: rgba(180, 180, 180, 0.5);
color: white;
transition: 0.3s;
}
}
}
}
}

View File

@ -35,6 +35,14 @@
}
}
&__answer {
&__file {
margin-right: 10px;
color: rgb(105, 136, 220);
text-decoration: none;
&:hover {
text-decoration: underline;
color: rgb(53, 88, 182);
}
}
}
}

View File

@ -0,0 +1,121 @@
.main {
width: 100%;
height: 100%;
padding: 4% 8%;
}
.wrapper {
width: 100%;
height: 100%;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
height: 8%;
&__listInput {
width: 40%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&__date {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: relative;
span {
position: absolute;
font-size: 8px;
font-family: "Montserrat", sans-serif;
top: -40%;
left: 2%;
}
}
&__title {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
position: relative;
span {
position: absolute;
font-size: 8px;
font-family: "Montserrat", sans-serif;
top: -40%;
left: 2%;
}
}
}
&__listBtn {
display: flex;
justify-content: end;
width: 30%;
}
}
.tags {
width: 100%;
margin: 30px 0;
&__wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: start;
&__input {
position: relative;
&__title {
top: -40%;
left: 2px;
position: absolute;
font-size: 8px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
}
&__list {
width: 100%;
// height: 100%;
flex-wrap: wrap;
display: flex;
justify-content: start;
align-items: center;
margin-top: 5px;
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
position: relative;
span {
font-size: 13px;
font-family: "Montserrat", sans-serif;
color: rgb(100, 100, 100);
}
&:hover span {
visibility: hidden;
}
&:hover i {
visibility: visible;
}
i {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgb(239, 73, 73);
cursor: pointer;
}
}
}
}
}
.content {
}

View File

@ -0,0 +1,159 @@
.main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 90%;
height: 90%;
}
.header {
width: 100%;
// height: 10%;
&__wrapper {
width: 100%;
height: 100%;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
border-radius: 5px 5px 0 0;
padding: 0 5px;
&__article {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
&__title {
width: 20%;
height: 75%;
display: flex;
border-right: 1px solid rgb(180, 180, 180);
justify-content: center;
align-items: center;
position: relative;
&__name {
position: absolute;
top: -20%;
left: 3px;
font-size: 8px;
font-family: "Montserrat", sans-serif;
}
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
&__tags {
width: 60%;
height: 75%;
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
padding: 5px;
position: relative;
overflow-y: auto;
// &::-webkit-scrollbar {
// width: 10px;
// }
// &::-webkit-scrollbar-thumb {
// background-color: rgb(200, 200, 200);
// }
// &::-webkit-scrollbar-button:single-button {
// background-color: #bbbbbb;
// display: block;
// border-style: solid;
// height: 10px;
// width: 16px;
// }
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
span {
}
}
}
&__owner {
width: 20%;
height: 75%;
border-left: 1px solid rgb(180, 180, 180);
display: flex;
justify-content: center;
align-items: center;
position: relative;
&__name {
position: absolute;
top: -20%;
right: 3px;
font-size: 8px;
font-family: "Montserrat", sans-serif;
}
&__text {
font-size: 15px;
font-family: "Montserrat", sans-serif;
}
}
}
&__tags {
width: 100%;
height: 50%;
display: flex;
justify-content: start;
align-items: center;
margin-top: 20px;
&__item {
padding: 0 5px;
border-radius: 5px;
border: 1px solid rgb(100, 100, 100);
margin: 1px 3px;
span {
}
}
}
}
}
.content {
width: 100%;
height: 90%;
&__wrapper {
width: 100%;
height: 100%;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px;
border-radius: 0 0 5px 5px;
overflow: auto;
&::-webkit-scrollbar {
width: 7px;
}
&::-webkit-scrollbar {
height: 7px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(200, 200, 200);
}
&__article {
max-width: 100%;
height: 100%;
}
}
}
// .image {
// width: 400px;
// height: 200px;
// border: 4px solid red
// img {
// width: 400px;
// height: 200px;
// aspect-ratio: 1000/700;
// }
// }

View File

@ -26,7 +26,8 @@ const AnswerModal = ({
setComment,
setCurrentTypeAnswer,
setFile,
removeOptionAnswer
removeOptionAnswer,
addFiles
}) => {
return (
@ -45,13 +46,15 @@ const AnswerModal = ({
<div className={classes.myModal__dialog__content__body__answer}>
<span className={classes.myModal__dialog__content__body__answer__title}>Вопрос</span>
<MarkDowm mkValue={question} setMkValue={setQuestion}></MarkDowm>
<label for="fileUpload" className={classes.myModal__dialog__content__body__answer__fileLabel}>Добавить файл</label>
<label for="fileUpload" className={classes.myModal__dialog__content__body__answer__listFile}>Файлы : {file ? file.map(item => `${item.name}; `) : Нет}</label>
<input
id="fileUpload"
type="file"
multiple
accept="image/*,image/jpeg,video/mp4,video/x-m4v,video/*"
className={classes.myModal__dialog__content__body__answer__file}
value={file}
onChange={event => setFile(event.target.value)}
onChange={e => addFiles(e.target.files)}
></input>
</div>
<div className={classes.myModal__dialog__content__body__comment}>

View File

@ -5,14 +5,13 @@ import MyButton from "./MyButton.jsx";
const DefaultModal = ({
name,
postfix,
btn,
BodyModal
}) => {
return (
<div class="modal fade myModal" className={classes.main} id={`${name}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
<div class="modal-dialog myModal__dialog" className={classes.main__dialog}>
<div class="modal-dialog modal-dialog-centered myModal__dialog" className={classes.main__dialog}>
<div class="modal-content" className={classes.main__dialog__content}>
{BodyModal}
<div class="modal-footer myModal__dialog__content__footer" className={classes.myModal__dialog__content__footer}>

View File

@ -4,11 +4,23 @@ import MarkdownEditor from "@uiw/react-markdown-editor";
import { parseTotalLinkVideo } from "../hooks/sundry/parseLinkVideo";
const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswersForm}) => {
const getUint8Array = (binary) => {
let bytesArray = []
let len = binary.length
for (let i = 0; i < len; i++) {
bytesArray.push(binary.charCodeAt(i))
}
return [new Uint8Array(bytesArray)]
}
return (
listBlock.map((item, i) =>
<div className={classes.item} key={i}>
<div className={classes.item__question}>
<p className={classes.item__question__text}>{i + 1}) <MarkdownEditor.Markdown source={item.question}/></p>
<p className={classes.item__question__text}><MarkdownEditor.Markdown source={`${i + 1}) ${item.question}`}/></p>
<p className={classes.item__question__comment}>{item.comment}</p>
<div className={classes.item__question__video}>
{item.video ?
@ -37,6 +49,13 @@ const GeneratingFormFields = ({listBlock, listTypeAnswer, answers, updateAnswers
updateAnswersForm: updateAnswersForm ? updateAnswersForm : false
})
}
{
item.file.map(f => <a className={classes.item__answer__file} download={f.name} href={
URL.createObjectURL(
new Blob(getUint8Array(atob(f.binary)), { type: f.type })
)
}>{f.name}</a>)
}
</div>
</div>
)

View File

@ -4,7 +4,7 @@ import classes from "../assets/styles/components/myButton.module.scss"
const MyButton = (props) => {
return (
<div className={classes.main}>
<div className={classes.main} style={props.mainStyle}>
<button
type="button"
className={classes[props.class]}

View File

@ -1,16 +1,28 @@
import React from "react";
import { InputMask } from "primereact/inputmask";
import classes from "../assets/styles/components/myInput.module.scss";
const MyInput = (props) => {
return (
<div className={classes.main} style={{...props.otherMainStyle}}>
<input
type={props.type}
placeholder={props.placeholder}
style={{...props.otherInputStyle}}
onChange={(e) => props.change(e.target.value)}
value={props.value}
/>
{
props.mask ?
<InputMask
type={props.type}
placeholder={props.placeholder}
style={{...props.otherInputStyle}}
onChange={(e) => props.change(e.target.value)}
value={props.value}
mask={props.mask}
/> :
<input
type={props.type}
placeholder={props.placeholder}
style={{...props.otherInputStyle}}
onChange={(e) => props.change(e.target.value)}
value={props.value}
/>
}
</div>
)
}

View File

@ -0,0 +1,11 @@
import React from "react";
import QRCode from "react-qr-code";
const MyQrCode = ({value}) => {
return (
<QRCode value={value}/>
)
}
export default MyQrCode

View File

@ -14,7 +14,8 @@ const NavBar = ({navigate, auth, setAuth}) => {
auth ?
auth.is_admin ?
<><span onClick={() => navigate("/forms")}>Мои формы</span>
<span onClick={() => navigate("/admin")}>Админ панель</span></> :
<span onClick={() => navigate("/admin")}>Админ панель</span>
<span onClick={() => navigate("/articles")}>Мои статьи</span></> :
<span></span> :
<span></span>
}

View File

@ -0,0 +1,57 @@
import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
const TextEditor = ({data, setData}) => {
function uploadAdapter(loader) {
return {
upload: () => {
return new Promise(async (resolve, reject) => {
try {
const file = await loader.file;
const buff = await file.arrayBuffer()
const bytesArray = new Uint8Array(buff)
const bytesString = btoa(String.fromCharCode.apply(null, bytesArray))
resolve({
default: `data:image/jpg;base64, ${bytesString}`
});
} catch (error) {
reject("Hello");
}
});
}
}
}
function uploadPlugin(editor) {
editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
return uploadAdapter(loader);
};
}
return (
<div className="App">
<h2>Редактор статьи</h2>
<CKEditor
editor={ ClassicEditor }
data={data}
config = {{
extraPlugins: [uploadPlugin],
mediaEmbed: {previewsInData: true }
}}
onReady={ editor => {
// You can store the "editor" and use when it is needed.
console.log( 'Editor is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
setData(editor.getData())
}}
onBlur={ ( event, editor ) => {}}
onFocus={ ( event, editor ) => {}}
/>
</div>
);
}
export default TextEditor

View File

@ -0,0 +1,14 @@
import React from "react";
import classes from "../../assets/styles/components/bodyModal/editToken.module.scss";
import MyInput from "../MyInput.jsx";
const EditToken = ({titleToken, setTitleToken}) => {
return (
<div className={classes.main}>
<MyInput type={"text"} value={titleToken} change={setTitleToken} placeholder={"Название"}/>
</div>
)
}
export default EditToken

View File

@ -1,4 +1,4 @@
import React, {useState} from "react";
import React, {useState, useRef} from "react";
import classes from "../../assets/styles/components/bodyModal/editUserAdminPanel.module.scss";
import MyInput from "../../components/MyInput.jsx";
@ -12,6 +12,7 @@ const EditUserAdminPanel = ({
lastName,
login,
phone,
pass,
setEmail,
setFirstName,
setIsAdmin,
@ -19,10 +20,9 @@ const EditUserAdminPanel = ({
setLastName,
setLogin,
setPhone,
setPass
}) => {
console.log('228', id, isAdmin, isAdmin)
return (
<div className={classes.main}>
<MyInput
@ -35,6 +35,7 @@ const EditUserAdminPanel = ({
/>
<MyInput
type={"text"}
mask={"9 (999) 999-99-99"}
value={phone}
placeholder={"Телефон"}
change={setPhone}
@ -65,6 +66,14 @@ const EditUserAdminPanel = ({
otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}}
otherInputStyle={{width: "100%", height: "10%"}}
/>
<MyInput
type={"text"}
value={pass}
placeholder={"Пароль"}
change={setPass}
otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}}
otherInputStyle={{width: "100%", height: "10%"}}
/>
<div className={classes.main__status}>
<div className={classes.main__status__admin}>
<div className={classes.main__status__admin__text}>Администратор</div>

View File

@ -0,0 +1,13 @@
import React from "react";
import classes from "../../assets/styles/components/bodyModal/qrCodeToken.module.scss";
import MyQrCode from "../MyQrCode.jsx";
const QrCodeToken = ({ value }) => {
return (
<div className={classes.main}>
<MyQrCode value={`http://minerva.krbl.ru/forms/${value}`} />
</div>
);
};
export default QrCodeToken;

View File

@ -1,42 +0,0 @@
// import axios from "axios";
// async function listUsersApi(token) {
// try {
// const response = await axios.get(`https://api.minerva.krbl.ru/auth/manage/users`,
// {
// headers: {
// "Authorization": `Token ${token}`
// }
// })
// return response
// }
// catch (e) {
// return e
// }
// };
// async function editUserApi(token, data) {
// try {
// const response = await axios.post(`https://api.minerva.krbl.ru/auth/manage/edit`,
// {
// "email": data.email,
// "first_name": data.first_name,
// "id": data.id,
// "is_admin": data.is_admin,
// "last_name": data.last_name,
// "login": data.login,
// "phone": data.phone
// },
// {
// headers: {
// "Authorization": `Token ${token}`
// }
// })
// return response
// }
// catch (e) {
// return e
// }
// };
// export {listUsersApi, editUserApi}

View File

@ -11,7 +11,7 @@ async function getAnswersApi(token, formToken) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -29,7 +29,7 @@ async function removeAnswerFormApi(token, formId, answerId) {
return response
}
catch (e) {
return e
return e.response
}
};

144
src/hooks/api/articleApi.js Normal file
View File

@ -0,0 +1,144 @@
import axios from "axios";
async function createArticleApi(token, data) {
try {
const response = await axios.post(`https://api.minerva.krbl.ru/articles/new`,
{
"tags": [],
"title": "Новая статья"
},
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
async function getListArticlesApi(token) {
try {
const response = await axios.get(`https://api.minerva.krbl.ru/articles/list`,
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
async function getArticleApi(token, articleId) {
try {
const response = await axios.get(`https://api.minerva.krbl.ru/articles/${articleId}/view`,
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
async function editTagsApi(token, articleId, tags, flag) {
try {
const response = await axios.post(`https://api.minerva.krbl.ru/articles/edit/${articleId}/tags`,
{
"delete_flag": flag,
"tags": tags,
},
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
async function editTitleArticleApi(token, articleId, title) {
console.log('set')
try {
const response = await axios.post(`https://api.minerva.krbl.ru/articles/edit/${articleId}/setTitle`,
{
"title": title,
},
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
async function addArticleApi(token, articleId, content) {
console.log('add')
try {
const response = await axios.post(`https://api.minerva.krbl.ru/articles/edit/${articleId}/add`,
{
"data": content,
},
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
async function editArticleApi(token, articleId, content) {
try {
const response = await axios.post(`https://api.minerva.krbl.ru/articles/edit/${articleId}/set`,
{
"order": 0,
"data": content,
},
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
export {
createArticleApi,
getArticleApi,
getListArticlesApi,
editTagsApi,
editTitleArticleApi,
addArticleApi,
editArticleApi
}

View File

@ -7,7 +7,7 @@ async function logIn(login, password) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -41,7 +41,7 @@ async function verifyUserApi(token=false) {
return response
}
catch(e) {
return e
return e.response
}
}
return false

View File

@ -11,7 +11,7 @@ async function listFormBlockApi(token, formId) {
return response
}
catch (e) {
return e
return e.response
}
}
@ -29,7 +29,7 @@ async function addFormBlockApi(token, formId, data) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -48,7 +48,7 @@ async function updateBlockApi(token, formId, data, order) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -67,7 +67,7 @@ async function removeBlockApi(token, formId, order) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -86,7 +86,7 @@ async function updateOrderBlockApi(token, formId, data) {
return response
}
catch (e) {
return e
return e.response
}
}
@ -104,7 +104,7 @@ async function saveFormApi(token) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -119,7 +119,7 @@ async function listFormBlockByTokenApi(token, formToken) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -135,7 +135,7 @@ async function saveAnswersApi(token, formToken, data) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -153,7 +153,7 @@ async function getBlockApi(token, formId, order) {
return response
}
catch (e) {
return e
return e.response
}
};

View File

@ -11,7 +11,7 @@ async function listFormsApi(token) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -30,7 +30,7 @@ async function createFormApi(token) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -44,7 +44,7 @@ async function removeFormApi(token, formId) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -62,15 +62,15 @@ async function updateTitleFormApi(token, formId, title) {
return response
}
catch (e) {
return e
return e.response
}
};
async function newFormTokenApi(token, formId) {
async function newFormTokenApi(token, formId, name) {
try {
const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/access/new`,
{
"name": "test"
"name": name
},
{
headers: {
@ -80,7 +80,7 @@ async function newFormTokenApi(token, formId) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -96,7 +96,7 @@ async function listFormsByTokenApi(token, formId) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -114,9 +114,29 @@ async function removeTokenFormApi(token, formId, formToken) {
return response
}
catch (e) {
return e
return e.response
}
}
};
async function editTokenFormApi(token, formId, formToken, name) {
try {
const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/access/revoke`,
{
"token_id": formToken,
"is_active": true,
"name": name
},
{
headers: {
"Authorization": `Token ${token}`
}
})
return response
}
catch (e) {
return e.response
}
};
export {
listFormsApi,
@ -125,5 +145,6 @@ export {
updateTitleFormApi,
newFormTokenApi,
listFormsByTokenApi,
removeTokenFormApi
removeTokenFormApi,
editTokenFormApi
};

View File

@ -21,8 +21,7 @@ async function editUserApi(token, data) {
return response
}
catch(e) {
console.log(e)
return e
return e.response
}
};
@ -38,7 +37,7 @@ async function getListUserApi(token) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -63,7 +62,7 @@ async function addUserApi(token, data) {
return response
}
catch (e) {
return e
return e.response
}
};
@ -82,8 +81,27 @@ async function removeUserApi(token, login) {
return response
}
catch(e) {
console.log(e)
return e
return e.response
}
};
async function editUserPass(token, login, pass) {
try {
const response = await axios.post("https://api.minerva.krbl.ru/auth/manage/updatePassword",
{
"login": login,
"password": pass
},
{
headers: {
"Authorization": `Token ${token}`,
},
})
return response
}
catch(e) {
return e.response
}
}
@ -91,5 +109,6 @@ export {
editUserApi,
getListUserApi,
addUserApi,
removeUserApi
removeUserApi,
editUserPass
}

View File

@ -13,11 +13,13 @@ function responseDataToListBlock(data) {
}
for (let param of block.data) {
if (Array.isArray(param.Value) && param.Value.length) {
newParam[param.Key] = param.Value.map(item => ({
id: item.find(obj => obj.Key === "id").Value,
text: item.find(obj => obj.Key === "text").Value
id: item.find(obj => obj.Key === "id") ? item.find(obj => obj.Key === "id").Value : null,
text: item.find(obj => obj.Key === "text") ? item.find(obj => obj.Key === "text").Value : null,
name: item.find(obj => obj.Key === "name") ? item.find(obj => obj.Key === "name").Value : null,
type: item.find(obj => obj.Key === "type") ? item.find(obj => obj.Key === "type").Value : null,
binary: item.find(obj => obj.Key === "binary") ? item.find(obj => obj.Key === "binary").Value : null,
}))
}
else {

View File

@ -3,7 +3,7 @@ import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";
import classes from "../assets/styles/adminPanel.module.scss";
import { UserData } from "../context";
import { getListUserApi, editUserApi, addUserApi, removeUserApi } from "../hooks/api/profileApi.js";
import { getListUserApi, editUserApi, addUserApi, removeUserApi, editUserPass } from "../hooks/api/profileApi.js";
import { verifyUser } from "../hooks/services/profile.js";
import DefaultModal from "../components/DefaultModal.jsx";
import EditUserAdminPanel from "../components/bodyModal/EditUserAdminPanel.jsx";
@ -14,33 +14,36 @@ import CheckModal from "../components/CheckModal.jsx";
const AdminPanel = () => {
const navigate = useNavigate();
const [cookies, setCookies] = useCookies(["user"]);
const {user, setUser} = useContext(UserData);
const {user, setUser, userRef} = useContext(UserData);
const [listUser, setListUser] = useState([]);
const [email, setEmail] = useState("")
const [firstName, setFirstName] = useState("")
const [id, setId] = useState(false)
const [isAdmin, setIsAdmin] = useState(false)
const [isTeacher, setIsTeacher] = useState(false)
const [lastName, setLastName] = useState("")
const [login, setLogin] = useState("")
const [phone, setPhone] = useState("")
const [email, setEmail] = useState("");
const [firstName, setFirstName] = useState("");
const [id, setId] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
const [isTeacher, setIsTeacher] = useState(false);
const [lastName, setLastName] = useState("");
const [login, setLogin] = useState("");
const [phone, setPhone] = useState("");
const [pass, setPass] = useState("");
useEffect(() => {
async function getListUser() {
const responseListUser = await getListUserApi(cookies.token);
const responseCurrentUser = await verifyUser(cookies, user, setUser)
if (
responseListUser.status === 200 &&
responseCurrentUser.status === 200 &&
responseCurrentUser.data.is_admin
responseListUser.status === 200
) {
setListUser([...responseListUser.data].filter(item => item.id !== responseCurrentUser.data.id))
setListUser(responseListUser.data)
}
else if (
responseListUser.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log('responseListUser', responseListUser)
console.log('responseCurrentUser', responseCurrentUser)
console.log(responseListUser)
}
}
@ -56,7 +59,8 @@ const AdminPanel = () => {
setLastName("")
setLogin("")
setPhone("")
}
setPass("")
};
async function addUser() {
const currentState = {
@ -73,9 +77,22 @@ const AdminPanel = () => {
if (response.status === 200) {
setListUser([...listUser, currentState])
if (pass) {
await editUserPass(cookies.token, login, pass);
}
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
clearState()
}
};
async function editUser() {
const currentState = {
@ -87,14 +104,27 @@ const AdminPanel = () => {
last_name: lastName,
login: login,
phone: phone
}
const response = await editUserApi(cookies.token, currentState)
};
const response = await editUserApi(cookies.token, currentState);
if (response.status === 200) {
setListUser(listUser.map(item => item.id === id ? currentState : item))
setListUser(listUser.map(item => item.id === id ? currentState : item));
if (pass) {
await editUserPass(cookies.token, login, pass);
};
}
clearState()
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
clearState();
};
function openUser(user) {
setEmail(user.email)
@ -113,6 +143,15 @@ const AdminPanel = () => {
if (response.status === 200) {
setListUser(listUser.filter(item => item.login !== login))
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
return (
@ -168,7 +207,7 @@ const AdminPanel = () => {
</div>
<div className={classes.admin__wrapper__body__users__item__info}>
{
item.admin ?
item.is_admin ?
<i class="fa-solid fa-circle-check" style={{color: "rgb(150, 209, 158)"}}></i> :
<i class="fa-solid fa-circle-xmark" style={{color: "rgb(235, 130, 130)"}}></i>}
</div>
@ -205,6 +244,8 @@ const AdminPanel = () => {
setLastName={setLastName}
setLogin={setLogin}
setPhone={setPhone}
pass={pass}
setPass={setPass}
/>
}
btn={[

View File

@ -3,16 +3,18 @@ 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, dateTimeParse } from "../hooks/sundry/parseListBlock";
import { listFormBlockApi } from "../hooks/api/formApi";
import { listUsersApi } from "../hooks/api/adminApi";
import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock.js";
import { listFormBlockApi } from "../hooks/api/formApi.js";
import { getListUserApi } from "../hooks/api/profileApi.js";
import { removeAnswerFormApi, getAnswersApi } from "../hooks/api/answersApi.js";
import Loading from "../components/Loading.jsx";
import CheckModal from "../components/CheckModal.jsx";
import { UserData } from "../context";
const AnswersForm = () => {
const { formId } = useParams();
const {answersList, setAnswersList} = useContext(answersData);
const {user, setUser} = useContext(UserData);
const [data, setData] = useState(false);
const [cookies, _, __] = useCookies(["user"]);
@ -21,7 +23,7 @@ const AnswersForm = () => {
const result = []
const responseBlocks = await listFormBlockApi(cookies.token, formId);
const responseAnswers = await getAnswersApi(cookies.token, formId);
const listUsers = await listUsersApi(cookies.token);
const listUsers = await getListUserApi(cookies.token);
if (responseBlocks.status === 200 && responseBlocks.data) {
const listBlocks = responseDataToListBlock(responseBlocks.data);
@ -55,8 +57,14 @@ const AnswersForm = () => {
setData(result)
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(responseBlocks)
console.log(response)
}
};
@ -69,6 +77,12 @@ const AnswersForm = () => {
if (response.status === 200) {
setData([...data].filter(item => item.id !== answerId))
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}

138
src/pages/Articles.jsx Normal file
View File

@ -0,0 +1,138 @@
import React, { useState, useContext, useEffect } from "react";
import { useCookies } from "react-cookie";
import { useNavigate } from "react-router-dom";
import classes from "../assets/styles/articles.module.scss";
import MyButton from "../components/MyButton.jsx";
import MyInput from "../components/MyInput.jsx";
import { UserData } from "../context";
import CheckModal from "../components/CheckModal.jsx";
import {
createArticleApi,
getListArticlesApi,
} from "../hooks/api/articleApi.js";
const Articles = () => {
const navigate = useNavigate();
const { user, setUser } = useContext(UserData);
const [stateLoading, setStateLoading] = useState(false);
const [listArticles, setListArticles] = useState([]);
const [cookies, _, __] = useCookies(["user"]);
useEffect(() => {
async function getListArticles() {
const response = await getListArticlesApi(cookies.token);
if (response.status === 200) {
setListArticles(response.data);
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
getListArticles();
}, []);
async function createArticle() {
const response = await createArticleApi(cookies.token);
if (response.status === 200) {
navigate(`/articles/${response.data.id}/edit`);
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.panel}>
<MyInput placeholder={"Поиск..."} />
<MyButton
click={createArticle}
class={"main__blue"}
otherStyle={{ width: "200px" }}
text={
stateLoading ? (
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
) : (
"Создать"
)
}
/>
</div>
<div className={classes.listArticles}>
<div className={classes.listArticles__columns}>
<div className={classes.listArticles__columns__item}>Название</div>
<div className={classes.listArticles__columns__item}>
Дата публикации
</div>
<div className={classes.listArticles__columns__item}>Автор</div>
</div>
<div className={classes.listArticles__forms}>
{listArticles.map((item) => (
<div className={classes.listArticles__forms__item}>
<div
className={classes.listArticles__forms__item__title}
onClick={() => navigate(`/articles/${item.id}/edit`)}
>
{item.title}
</div>
<div className={classes.listArticles__forms__item__date}>
24.06.24
</div>
<div className={classes.listArticles__forms__item__author}>
kuwsh1n
</div>
<i
class="fa-solid fa-ellipsis-vertical"
id="action"
data-bs-toggle="dropdown"
></i>
<ul class="dropdown-menu" aria-labelledby="action">
<li>
<a
class="dropdown-item"
onClick={() => navigate(`/articles/${item.id}/`)}
>
Открыть
</a>
</li>
<li>
<a
class="dropdown-item"
data-bs-toggle="modal"
data-bs-target={`#checkModaltest`}
>
Удалить
</a>
</li>
</ul>
<CheckModal
postfix={"test"}
message={`Вы хотетите удалить статью <Test article>?`}
action={{
execute: () => {},
cancel: () => {},
}}
/>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default Articles;

View File

@ -6,6 +6,7 @@ import MyButton from "../components/MyButton.jsx";
import MyInput from "../components/MyInput.jsx";
import { FormsData, UserData } from "../context";
import CheckModal from "../components/CheckModal.jsx";
import { verifyUserApi } from "../hooks/api/enterAccountApi.js";
import {
listFormsApi,
createFormApi,
@ -17,22 +18,27 @@ import {
const Forms = () => {
const navigate = useNavigate();
const { forms, setForms } = useContext(FormsData);
const { user, setUser } = useContext(UserData);
const { user, setUser, userRef } = useContext(UserData);
const [stateLoading, setStateLoading] = useState(false);
const [searchForm, setSearchForm] = useState("");
const [cookies, _, __] = useCookies(["user"]);
const [cookies, setCookies, __] = useCookies(["user"]);
useEffect(() => {
async function listForms() {
const response = await listFormsApi(cookies.token);
const responseForms = await listFormsApi(cookies.token);
const responseUser = await verifyUserApi(cookies.token)
if (response.data) {
setForms(response.data);
} else if (response.status === 200 && response.data) {
if (responseForms.data && responseUser) {
setForms(responseForms.data.filter(item => item.owner_id === responseUser.data.id));
} else if (responseForms.status === 200 && response.data) {
setForms([]);
} else if (responseForms.status === 401 || responseUser.status === 401) {
// navigate("/enter")
setUser(false)
} else {
console.log(response);
console.log(responseForms);
console.log(responseUser)
}
}
@ -44,11 +50,17 @@ const Forms = () => {
const response = await createFormApi(cookies.token);
setStateLoading(false);
if (response.data) {
const token = await newFormTokenApi(cookies.token, response.data.id);
if (response.data && response.status === 200) {
const token = await newFormTokenApi(cookies.token, response.data.id, "Админ");
navigate(`/forms/${response.data.id}/edit`);
} else {
console.log(response);
} else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
@ -61,8 +73,15 @@ const Forms = () => {
if (response.status === 200) {
setForms([...forms.filter((item) => item.id !== id)]);
} else {
console.log(response);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
@ -71,8 +90,15 @@ const Forms = () => {
if (response.status === 200 && response.data.tokens) {
navigate(`/forms/${response.data.tokens[0].id}/`);
} else {
console.log(response);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
@ -83,8 +109,15 @@ const Forms = () => {
navigator.clipboard.writeText(
`${window.location.host}/forms/${response.data.tokens[0].id}/`
);
} else {
console.log(response);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}

178
src/pages/NewArticle.jsx Normal file
View File

@ -0,0 +1,178 @@
import React, { useState, useContext, useEffect } from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import { useCookies } from "react-cookie";
import classes from "../assets/styles/newArticle.module.scss";
import MyButton from "../components/MyButton.jsx";
import Loading from "../components/Loading.jsx";
import MyInput from "../components/MyInput.jsx";
import TextEditor from "../components/TextEditor.jsx";
import { UserData } from "../context/index.js";
import { getArticleApi, editTagsApi, editTitleArticleApi, editArticleApi, addArticleApi } from "../hooks/api/articleApi.js";
const NewArticle = () => {
const navigate = useNavigate();
const location = useLocation();
const { articleId } = useParams();
const {user, setUser} = useContext(UserData)
const [loading, setLoading] = useState(false);
const [title, setTitle] = useState("");
const [tags, setTags] = useState([]);
const [newTag, setNewTag] = useState("")
const [ownerId, setOwnerId] = useState("");
const [contentArticle, setContentArticle] = useState('');
const [blocks, setBlocks] = useState('');
const [cookies, _, __] = useCookies(["user"]);
useEffect(() => {
async function getArticle() {
const response = await getArticleApi(cookies.token, articleId)
if (response.status === 200) {
setTitle(response.data.article.title)
setTags(response.data.article.tags ? response.data.article.tags : [])
setOwnerId(response.data.article.owner_id)
setContentArticle(response.data.blocks ? response.data.blocks[0].data : '')
setBlocks(response.data.blocks ? response.data.blocks : false)
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
getArticle()
}, [])
async function addTag() {
if (newTag.length > 0 && !tags.find(item => item === newTag)) {
const response = await editTagsApi(cookies.token, articleId, [newTag], false)
if (response.status === 200) {
setTags([...tags, newTag])
setNewTag("")
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
}
async function removeTag(item, index) {
const response = await editTagsApi(cookies.token, articleId, [item], true)
if (response.status === 200) {
const cTags = [...tags]
cTags.splice(index, 1)
setTags(cTags)
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
async function saveArticle() {
const responseTitle = await editTitleArticleApi(cookies.token, articleId, title)
const responseContentArticle = blocks ?
await editArticleApi(cookies.token, articleId, contentArticle) :
await addArticleApi(cookies.token, articleId, contentArticle)
if (responseTitle.status === 200 && responseContentArticle.status === 200) {
navigate("/articles")
}
else if (
responseTitle.status === 401 || responseContentArticle.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(responseTitle)
console.log(responseContentArticle)
}
}
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.header}>
<div className={classes.header__listInput}>
<div className={classes.header__listInput__date}>
<span>Дата создания</span>
<MyInput type={"datetime-local"}/>
</div>
<div className={classes.header__listInput__title}>
<span>Название статьи</span>
<MyInput type={"text"} value={title} change={setTitle}/>
</div>
</div>
<div className={classes.header__listBtn}>
{/* <MyButton text={'Предпросмотр'} class={"main__white"}/> */}
<MyButton text={'Опубликовать'} class={"main__green"} click={() => saveArticle()}/>
</div>
</div>
<div className={classes.tags}>
<div className={classes.tags__wrapper}>
<div className={classes.tags__wrapper__input}>
<span className={classes.tags__wrapper__input__title}>Добавить тэг</span>
<MyInput
type={"text"}
otherMainStyle={{border: "1px solid rgb(180, 180, 180)", borderRadius: "5px"}}
otherInputStyle={{border: "0px solid rgb(180, 180, 180)", width: "85%"}}
value={newTag}
change={setNewTag}
/>
<MyButton
type={"button"}
text={<i class="fa-solid fa-arrow-right"></i>}
class={"main__transparent"}
mainStyle={
{
position: "absolute",
right: "0",
top: "0",
height: "100%",
}
}
otherStyle={{borderRadius: "0 5px 5px 0", padding: "3px 7px 0 7px"}}
click={() => addTag()}
/>
</div>
<div className={classes.tags__wrapper__list}>
{tags ? tags.map((item, i) =>
<div className={classes.tags__wrapper__list__item} key={i}>
<span>#{item}</span>
<i class="fa-solid fa-circle-xmark" onClick={() => removeTag(item, i)}></i>
</div>
) : <></>}
</div>
</div>
</div>
<div className={classes.content}>
<TextEditor data={contentArticle} setData={setContentArticle}/>
</div>
</div>
</div>
)
}
export default NewArticle;

View File

@ -8,6 +8,7 @@ import PreviewModal from "../components/PreviewModal.jsx";
import Loading from "../components/Loading.jsx";
import { FormsData, TypeAnswerData } from "../context";
import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
import { UserData } from "../context";
import {
saveFormApi,
addFormBlockApi,
@ -27,6 +28,7 @@ const NewForm = () => {
const navigate = useNavigate();
const location = useLocation();
const { formId } = useParams();
const {user, setUser} = useContext(UserData);
const [dragElem, setDragElem] = useState(null);
const [dropElem, setDropElem] = useState(null);
const [loading, setLoading] = useState(false);
@ -78,13 +80,19 @@ const NewForm = () => {
responseBlock.data &&
responseForms.status === 200
) {
console.log(responseDataToListBlock(responseBlock.data))
setListBlock(responseDataToListBlock(responseBlock.data));
const title = responseForms.data.find(
(item) => item.id === formId
).title;
setNewTitleForm(title);
setOldTitleForm(title);
} else {
}
else if (responseForms.status === 401 || responseBlock.status === 401) {
// navigate("/enter")
setUser(false)
}
else {
setListBlock([]);
setNewTitleForm("Новыя форма");
setOldTitleForm("Новыя форма");
@ -132,6 +140,7 @@ const NewForm = () => {
setOptionAnswer(obj.optionAnswer);
setMandatory(obj.mandatory);
setStateModal(obj.id);
console.log(obj.file.map(item => item.name))
}
async function updateBlock() {
@ -160,9 +169,16 @@ const NewForm = () => {
} else {
setListBlock([]);
}
} else {
console.log(response);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
cleanStates();
}
@ -172,13 +188,42 @@ const NewForm = () => {
if (response.status === 200) {
setListBlock([...listBlock.filter((item) => item.order !== order)]);
} else {
console.log(response);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
async function addFiles(newFile) {
const fileData = []
for (let item of newFile) {
let binary = ""
const buff = await item.arrayBuffer()
const bytesArray = new Uint8Array(buff)
let len = bytesArray.byteLength;
for (let i = 0; i < len; i++) {
binary += String.fromCharCode( bytesArray[ i ] );
}
fileData.push({
name: item.name,
type: item.type,
binary: btoa(binary)
})
setFile([...file, ...fileData])
}
}
async function addFormBlock() {
console.log(optionAnswer);
const newBlock = {
question: question,
@ -200,8 +245,15 @@ const NewForm = () => {
} else {
setListBlock([]);
}
} else {
console.log(response);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
cleanStates();
}
@ -237,11 +289,30 @@ const NewForm = () => {
setListBlock(numberingBlocks(tListBlock, "order"));
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
async function saveForm() {
if (oldTitleFrom !== newTitleForm) {
await updateTitleFormApi(cookies.token, formId, newTitleForm);
const response = await updateTitleFormApi(cookies.token, formId, newTitleForm);
if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
}
cleanStates();
@ -253,14 +324,14 @@ const NewForm = () => {
<div className={classes.wrapper}>
<div className={classes.header}>
<div className={classes.header__listInput}>
<div className={classes.header__listInput__date}>
{/* <div className={classes.header__listInput__date}>
<span>Дедлайн выполнения</span>
<MyInput
type={"datetime-local"}
value={datetime}
change={setDatetime}
/>
</div>
</div> */}
<div className={classes.header__listInput__title}>
<span>Название формы</span>
<MyInput
@ -327,6 +398,7 @@ const NewForm = () => {
updateBlock={updateBlock}
setCurrentTypeAnswer={setCurrentTypeAnswer}
removeOptionAnswer={removeOptionAnswer}
addFiles={addFiles}
/>
<div className={classes.content__newForm}>

View File

@ -33,6 +33,12 @@ const Profile = () => {
setFirst_name(response.data.first_name);
setLast_name(response.data.last_name);
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false)
}
else {
console.log(response)
}
@ -83,7 +89,16 @@ const Profile = () => {
is_admin: user.is_admin
})
setEdit(!edit)
}
}
else if (
response.status === 401
) {
navigate("/enter")
setUser(false);
}
else {
console.log(response)
}
}
};

View File

@ -1,125 +1,239 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useContext } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useCookies } from "react-cookie";
import classes from "../assets/styles/tokensForm.module.scss";
import { listFormsByTokenApi, newFormTokenApi, removeTokenFormApi } from "../hooks/api/listFormsApi";
import {
listFormsByTokenApi,
newFormTokenApi,
removeTokenFormApi,
editTokenFormApi,
} from "../hooks/api/listFormsApi";
import MyButton from "../components/MyButton.jsx";
import MyInput from "../components/MyInput.jsx";
import CheckModal from "../components/CheckModal.jsx";
import { UserData } from "../context/index.js";
import DefaultModal from "../components/DefaultModal.jsx";
import EditToken from "../components/bodyModal/EditToken.jsx";
import QrCodeToken from "../components/bodyModal/QrCodeToken.jsx";
import QRCode from "qrcode";
const TokensForm = () => {
const { formId } = useParams();
const [tokens, setTokens] = useState([])
const [loading, setLoading] = useState(true)
const [titleToken, setTitleToken] = useState('')
const { formId } = useParams();
const [tokens, setTokens] = useState([]);
const [currentIdToken, setCurrentIdToken] = useState(false);
const [loading, setLoading] = useState(true);
const [titleToken, setTitleToken] = useState("");
const { user, setUser } = useContext(UserData);
const [qrCodeUrl, setQrcodeUrl] = useState("");
const [cookies, _, __] = useCookies(["user"]);
const [cookies, _, __] = useCookies(["user"]);
useEffect(() => {
async function listFormsByToken() {
const response = await listFormsByTokenApi(cookies.token, formId)
console.log(response)
if (response.data.tokens) {
setTokens(response.data.tokens.filter(item => item.is_active === true))
setLoading(false)
}
else {
console.log(response)
}
}
useEffect(() => {
async function listFormsByToken() {
const response = await listFormsByTokenApi(cookies.token, formId);
listFormsByToken()
}, [])
async function newFormToken() {
const response = await newFormTokenApi(cookies.token, formId)
if (response.status === 200) {
setTokens([...tokens, response.data.token])
}
else {
console.log(response)
}
if (response.status === 200) {
setTokens(
response.data.tokens.filter(
(item, i) => item.is_active === true && i !== 0
)
);
setLoading(false);
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
async function removeTokenForm(tokenForm) {
const response = await removeTokenFormApi(cookies.token, formId, tokenForm)
listFormsByToken();
}, []);
if (response.status === 200) {
setTokens(tokens.filter(item => item.id !== tokenForm))
}
else {
console.log(response)
}
async function newFormToken() {
const response = await newFormTokenApi(cookies.token, formId, titleToken);
if (response.status === 200) {
setTokens([...tokens, response.data.token]);
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.answers}>
<div className={classes.answers__wrapper}>
<div className={classes.answers__wrapper__header}>
<h3>Токены формы</h3>
<MyButton text={"Создать"} class={"main__green"} click={newFormToken}/>
</div>
<div className={classes.answers__wrapper__body}>
<div className={classes.answers__wrapper__body__column}>
<div className={classes.answers__wrapper__body__column__wrapper}>
<div>Название</div>
<div>Токен</div>
</div>
</div>
// async function editTokenForm(tokenForm) {
// const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken)
{tokens ?
tokens.map((item, i) =>
<div className={classes.answers__wrapper__body__item} key={i}>
<div className={classes.answers__wrapper__body__item__wrapper}>
<div className={classes.answers__wrapper__body__item__wrapper__title}>
По умолчанию
</div>
<div className={classes.answers__wrapper__body__item__wrapper__token}>
{item.id}
</div>
</div>
<div className={classes.answers__wrapper__body__item__btn}>
<i
// if (response.status === 200) {
// setTokens([])
// }
// else if (
// response.status === 401
// ) {
// // navigate("/enter")
// setUser(false);
// }
// else {
// console.log(response)
// }
// }
async function removeTokenForm(tokenForm) {
const response = await removeTokenFormApi(cookies.token, formId, tokenForm);
if (response.status === 200) {
setTokens(tokens.filter((item) => item.id !== tokenForm));
} else if (response.status === 401) {
// navigate("/enter")
setUser(false);
} else {
console.log(response);
}
}
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.answers}>
<div className={classes.answers__wrapper}>
<div className={classes.answers__wrapper__header}>
<h3>Токены формы</h3>
<MyButton
text={"Создать"}
class={"main__green"}
click={() => {
setTitleToken("");
setCurrentIdToken(false);
}}
target={"#tokenModal"}
toggle={"modal"}
/>
</div>
<div className={classes.answers__wrapper__body}>
<div className={classes.answers__wrapper__body__column}>
<div
className={classes.answers__wrapper__body__column__wrapper}
>
<div>Название</div>
<div>Токен</div>
</div>
</div>
{tokens ? (
tokens.map((item, i) => (
<div className={classes.answers__wrapper__body__item} key={i}>
<div
className={classes.answers__wrapper__body__item__wrapper}
>
<div
className={
classes.answers__wrapper__body__item__wrapper__title
}
>
{item.name}
</div>
<div
className={
classes.answers__wrapper__body__item__wrapper__token
}
>
{item.id}
</div>
</div>
<div className={classes.answers__wrapper__body__item__btn}>
{/* <i
class="fa-solid fa-pen"
data-bs-toggle="modal"
data-bs-target={`#tokensModal${i}`}
onClick={() => setTitleToken("По умолчанию")}>
</i>
<i class="fa-solid fa-trash" onClick={() => removeTokenForm(item.id)}></i>
</div>
<div class="modal fade myModal" className={classes.myModal} id={`tokensModal${i}`} 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-body" className={classes.myModal__dialog__content__body}>
<MyInput type={"text"} value={titleToken} change={setTitleToken}/>
</div>
<div class="modal-footer myModal__dialog__content__footer" className={classes.myModal__dialog__content__footer}>
<MyButton text={"Сохранить"} class={"main__green"} dismiss={"modal"}/>
<MyButton text={"Отмена"} class={"main__white"} dismiss={"modal"}/>
</div>
</div>
</div>
</div>
</div>
)
:
<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>}
</div>
data-bs-target={`#tokenModal`}
onClick={() => {
setTitleToken(item.name)
setCurrentIdToken(item.id)
}}>
</i> */}
<i
class="fa-solid fa-qrcode"
onClick={() => {
QRCode.toDataURL(
`http://minerva.krbl.ru/forms/${item.id}`,
{},
(err, url) => {
setQrcodeUrl(url);
}
);
}}
data-bs-toggle="modal"
data-bs-target={`#qrModal`}
></i>
<i
class="fa-solid fa-trash"
onClick={() => removeTokenForm(item.id)}
></i>
</div>
<DefaultModal
name={"qrModal"}
btn={[
{
text: "Скачать",
class: "main__green",
dismiss: "modal",
action: () => {
const aElem = document.createElement("a");
aElem.href = qrCodeUrl;
aElem.download = `${item.name}.png`;
aElem.click();
},
},
{
text: "Отмена",
class: "main__white",
dismiss: "modal",
action: () => {},
},
]}
BodyModal={<QrCodeToken value={item.id} />}
/>
</div>
))
) : (
<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>
)}
<DefaultModal
name={"tokenModal"}
btn={[
{
text: "Сохранить",
class: "main__green",
dismiss: "modal",
action: () => newFormToken(),
},
{
text: "Отмена",
class: "main__white",
dismiss: "modal",
action: () => {},
},
]}
BodyModal={
<EditToken
titleToken={titleToken}
setTitleToken={setTitleToken}
/>
}
/>
</div>
</div>
</div>
)
}
</div>
</div>
);
};
export default TokensForm;
export default TokensForm;

87
src/pages/ViewArticle.jsx Normal file
View File

@ -0,0 +1,87 @@
import React, { useState, useContext, useEffect, useLocation } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useCookies } from "react-cookie";
import classes from "../assets/styles/viewArticle.module.scss";
import { FormsData, TypeAnswerData, answersData, UserData } from "../context";
import MyButton from "../components/MyButton.jsx";
import { getArticleApi } from "../hooks/api/articleApi.js";
import { getListUserApi } from "../hooks/api/profileApi.js";
const ViewArticle = () => {
const navigate = useNavigate();
// const location = useLocation();
const { articleId } = useParams();
const {user, setUser} = useContext(UserData)
const [title, setTitle] = useState("");
const [tags, setTags] = useState([]);
const [newTag, setNewTag] = useState("")
const [owner, setOwner] = useState("");
const [contentArticle, setContentArticle] = useState('');
const [cookies, _, __] = useCookies(["user"]);
useEffect(() => {
async function getArticle() {
const response = await getArticleApi(cookies.token, articleId)
const responseUser = await getListUserApi(cookies.token)
if (response.status === 200) {
setTitle(response.data.article.title)
setTags(response.data.article.tags ? response.data.article.tags : [])
setOwner(responseUser.status === 200 ? responseUser.data.find(item => item.id === response.data.article.owner_id).login : response.data.article.owner_id)
setContentArticle(response.data.blocks ? response.data.blocks[0].data : '')
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false);
}
else {
console.log(response)
}
}
getArticle()
}, [])
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.header}>
<div className={classes.header__wrapper}>
<div className={classes.header__wrapper__article}>
<div className={classes.header__wrapper__article__title}>
<span className={classes.header__wrapper__article__title__name}>Название</span>
<span className={classes.header__wrapper__article__title__text}>{title}</span>
</div>
<div className={classes.header__wrapper__article__tags}>
{/* <span className={classes.header__wrapper__article__tags__name}>Тэги</span> */}
{tags.map(item => <div className={classes.header__wrapper__tags__item}>
<span>#{item}</span>
</div>)}
</div>
<div className={classes.header__wrapper__article__owner}>
<span className={classes.header__wrapper__article__owner__name}>Автор</span>
<span className={classes.header__wrapper__article__owner__text}>{owner}</span>
</div>
</div>
</div>
</div>
<div className={classes.content}>
<div className={classes.content__wrapper}>
<div className="classes.content__wrapper__article" dangerouslySetInnerHTML={{__html: contentArticle}}>
</div>
</div>
</div>
</div>
</div>
)
}
export default ViewArticle

View File

@ -32,6 +32,12 @@ const ViewForm = () => {
{id: item.id, answer: []}
)));
}
else if (
responseBlocks.status === 401
) {
// navigate("/enter")
setUser(false);
}
else {
setResponseStatus(responseBlocks.status)
}
@ -52,7 +58,6 @@ const ViewForm = () => {
};
async function saveAnswers() {
console.log(answers)
const response = await saveAnswersApi(cookies.token, formId, answers);
if (response.status === 200) {
@ -65,6 +70,15 @@ const ViewForm = () => {
setAnswers([]);
navigate("/forms");
}
else if (
response.status === 401
) {
// navigate("/enter")
setUser(false);
}
else {
console.log(response)
}
}
return (

View File

@ -6,6 +6,8 @@ const protectedUrl = {
new RegExp("/forms/\\w+/answers"),
new RegExp("/tokens/\\w+"),
new RegExp("/admin"),
new RegExp("/articles"),
new RegExp("/articles/\\w+/edit"),
],
Authorized: [
"/enter"
@ -16,6 +18,8 @@ const protectedUrl = {
new RegExp("/forms/\\w+/answers"),
new RegExp("/tokens/\\w+"),
new RegExp("/admin"),
new RegExp("/articles"),
new RegExp("/articles/\\w+/edit"),
]
}

View File

@ -10,6 +10,9 @@ import ViewForm from "../pages/ViewForm.jsx";
import AdminPanel from '../pages/AdminPanel.jsx';
import AnswersForm from '../pages/AnswersForm.jsx';
import TokensForm from '../pages/TokensForm.jsx';
import Articles from '../pages/Articles.jsx';
import NewArticle from '../pages/NewArticle.jsx';
import ViewArticle from '../pages/ViewArticle.jsx';
const router = createBrowserRouter([
{
@ -50,6 +53,18 @@ const router = createBrowserRouter([
{
path: "/tokens/:formId",
element: <TokensForm/>
},
{
path: "/articles",
element: <Articles/>
},
{
path: "/articles/:articleId/edit",
element: <NewArticle/>
},
{
path: "/articles/:articleId/",
element: <ViewArticle/>
}
]
}

View File

@ -1,5 +1,6 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const Inputmask = require('inputmask');
const path = require("path");
module.exports = (env) => {