qrcode temporary fix
All checks were successful
publish-main / release-image (push) Successful in 10m12s
All checks were successful
publish-main / release-image (push) Successful in 10m12s
This commit is contained in:
Ivan
parent
2b50f7c332
commit
7bccb29aa6
GPG Key ID:
0C191B86D9582583
@ -2,13 +2,12 @@ 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>
|
||||
);
|
||||
};
|
||||
|
||||
const QrCodeToken = ({value}) => {
|
||||
return (
|
||||
<div className={classes.main}>
|
||||
<MyQrCode value={`http://localhost:3000/forms/${value}`}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default QrCodeToken
|
||||
export default QrCodeToken;
|
||||
|
||||
@ -2,7 +2,12 @@ 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, editTokenFormApi} from "../hooks/api/listFormsApi";
|
||||
import {
|
||||
listFormsByTokenApi,
|
||||
newFormTokenApi,
|
||||
removeTokenFormApi,
|
||||
editTokenFormApi,
|
||||
} from "../hooks/api/listFormsApi";
|
||||
import MyButton from "../components/MyButton.jsx";
|
||||
import { UserData } from "../context/index.js";
|
||||
import DefaultModal from "../components/DefaultModal.jsx";
|
||||
@ -10,130 +15,133 @@ 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 [currentIdToken, setCurrentIdToken] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [titleToken, setTitleToken] = useState("");
|
||||
const {user, setUser} = useContext(UserData);
|
||||
const [qrCodeUrl, setQrcodeUrl] = 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)
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
async function listFormsByToken() {
|
||||
const response = await listFormsByTokenApi(cookies.token, formId);
|
||||
|
||||
listFormsByToken()
|
||||
}, [])
|
||||
|
||||
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)
|
||||
}
|
||||
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 editTokenForm(tokenForm) {
|
||||
// const response = await editTokenFormApi(cookies.token, formId, tokenForm, titleToken)
|
||||
listFormsByToken();
|
||||
}, []);
|
||||
|
||||
// if (response.status === 200) {
|
||||
// setTokens([])
|
||||
// }
|
||||
// else if (
|
||||
// response.status === 401
|
||||
// ) {
|
||||
// // navigate("/enter")
|
||||
// setUser(false);
|
||||
// }
|
||||
// else {
|
||||
// console.log(response)
|
||||
// }
|
||||
// }
|
||||
async function newFormToken() {
|
||||
const response = await newFormTokenApi(cookies.token, formId, titleToken);
|
||||
|
||||
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)
|
||||
}
|
||||
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={() => {
|
||||
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>
|
||||
// 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}>
|
||||
{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
|
||||
// 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={`#tokenModal`}
|
||||
@ -142,64 +150,90 @@ const TokensForm = () => {
|
||||
setCurrentIdToken(item.id)
|
||||
}}>
|
||||
</i> */}
|
||||
<i
|
||||
class="fa-solid fa-qrcode"
|
||||
onClick={() => {
|
||||
QRCode.toDataURL(
|
||||
`http://localhost:3000/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>
|
||||
<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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user