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

added move block api and set title api

Browse Source
This commit is contained in:
kuwsh1n
2024-04-09 01:47:20 +03:00
parent 33f27d2efc
commit b4e73b4630
6 changed files with 156 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/assets/styles/newForm.module.scss
View File

@@ -10,15 +10,43 @@
}
.header {
text-align: right;
// text-align: right;
display: flex;
justify-content: space-between;
width: 100%;
height: 8%;
&__date {
width: 30%;
&__listInput {
width: 40%;
height: 100%;
&__item {
display: flex;
justify-content: space-between;
align-items: center;
&__date {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
span {
position: absolute;
height: 100%;
font-size: 8px;
font-family: "Montserrat", sans-serif;
top: -40%;
left: 2%;
}
input {
display: block;
height: 100%;
font-size: 15px;
font-family: "Montserrat", sans-serif;
border: 1px solid rgb(200, 200, 200);
padding: 1%;
border-radius: 5px;
}
}
&__title {
width: 100%;
height: 100%;
display: flex;

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

@@ -64,6 +64,25 @@ async function updateBlockApi(token, blockId, data) {
catch (e) {
return e
}
};
async function updateOrderBlockApi(token, formId, data) {
try {
const response = await axios.post(`http://localhost:8080/formBuilder/edit/${formId}/moveTo`,
{
"new_order": data.new,
"old_order": data.old
},
{
headers: {
"Authorization": `Token ${token}`,
}
})
return response
}
catch (e) {
return e
}
}
async function saveFormApi(token) {
@@ -84,4 +103,4 @@ async function saveFormApi(token) {
}
};
export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi }
export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi, updateOrderBlockApi }

20
src/hooks/api/listFormsApi.js
View File

@@ -47,4 +47,22 @@ async function removeFormApi(token, formId) {
}
};
export { listFormsApi, createFormApi, removeFormApi };
async function updateTitleFormApi(token, formId, title) {
try {
const response = await axios.post(`http://localhost:8080/formBuilder/edit/${formId}/setTitle`,
{
title: title
},
{
headers: {
"Authorization": `Token ${token}`,
},
})
return response
}
catch (e) {
return e
}
};
export { listFormsApi, createFormApi, removeFormApi, updateTitleFormApi };

8
src/hooks/sundry/parseListBlock.js
View File

@@ -1,3 +1,7 @@
// function sortListBlock(data) {
// return data.sort((itemOne, itemTwo) => itemOne.order - itemTwo.order)
// };
function responseDataToListBlock(data) {
const result = []
@@ -24,7 +28,7 @@ function responseDataToListBlock(data) {
result.push(newParam)
}
return result
}
return result.sort((itemOne, itemTwo) => itemOne.order - itemTwo.order)
};
export { responseDataToListBlock }

117
src/pages/NewForm.jsx
View File

@@ -6,7 +6,8 @@ import MyButton from "../components/MyButton.jsx";
import AnswerModal from "../components/AnswerModal.jsx";
import PreviewModal from "../components/PreviewModal.jsx"
import { FormsData, TypeAnswerData } from "../context";
import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi } from "../hooks/api/formApi.js";
import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js";
import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi } from "../hooks/api/formApi.js";
import { responseDataToListBlock } from "../hooks/sundry/parseListBlock.js";
const NewForm = () => {
@@ -21,8 +22,8 @@ const NewForm = () => {
const {forms, setForms} = useContext(FormsData);
const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData);
const nextID = (list) => {
return list.length ? list.at(-1).id + 1 : 1
const nextID = (list, param) => {
return list.length ? list.at(-1)[param] + 1 : 1
};
const [question, setQuestion] = useState("");
const [comment, setComment] = useState("");
@@ -33,6 +34,7 @@ const NewForm = () => {
const [currentOptionAnswer, setCurrentOptionAnswer] = useState("");
const [datetime, setDatetime] = useState("");
const [titleForm, setTitleForm] = useState("");
const [listBlock, setListBlock] = useState([]);
@@ -54,23 +56,26 @@ const NewForm = () => {
};
useEffect(() => {
async function listFormBlock() {
const response = await listFormBlockApi(cookies.token, formId);
async function totalData() {
const responseForms = await listFormsApi(cookies.token);
const responseBlock = await listFormBlockApi(cookies.token, formId);
if (response.status === 200 && response.data) {
setListBlock(responseDataToListBlock(response.data));
if (responseBlock.status === 200 && responseBlock.data && responseForms.status === 200) {
setListBlock(responseDataToListBlock(responseBlock.data));
setTitleForm(responseForms.data.find(item => item.id === formId).title);
}
else {
console.log(response);
console.log(responseBlock);
console.log(responseForms);
}
};
listFormBlock();
totalData();
}, []);
function addOptionAnswer(text) {
setOptionAnswer([...optionAnswer, {
id: nextID(optionAnswer),
id: nextID(optionAnswer, "id"),
text: currentOptionAnswer
}]);
setCurrentOptionAnswer("");
@@ -135,7 +140,7 @@ const NewForm = () => {
const response = await addFormBlockApi(cookies.token, formId, newBlock)
if (response.status === 200) {
setListBlock([...listBlock, newBlock]);
setListBlock([...listBlock, {...newBlock, order: nextID(listBlock, "order")}]);
}
else {
console.log(response)
@@ -143,6 +148,40 @@ const NewForm = () => {
cleanStates();
};
async function updateTitleForm() {
const response = await updateTitleFormApi(cookies.token, formId, titleForm);
if (response.status === 200) {
console.log(response)
}
else {
console.log(response)
}
};
async function updateOrderBlock() {
const response = await updateOrderBlockApi(cookies.token, formId, {
new: dropElem,
old: dragElem
})
if (response.status === 200) {
const currentElem = listBlock[dragElem];
const tListBlock = [...listBlock];
if (dragElem > dropElem) {
tListBlock.splice(dropElem, 0, currentElem);
tListBlock.splice(dragElem + 1, 1);
}
else {
tListBlock.splice(dropElem + 1, 0, currentElem);
tListBlock.splice(dragElem, 1);
};
setListBlock(tListBlock);
}
}
function updateFormByForms() {
updateFormByFormsApi(location.state.id, "Новая форма", listBlock)
.then((resolve, _) => {
@@ -162,32 +201,41 @@ const NewForm = () => {
};
function saveForm() {
saveFormApi("Новая форма", listBlock)
.then((resolve, reject) => {
console.log(resolve);
setForms(
[...forms, {
id: nextID(forms),
title: "Новая форма",
questions: listBlock,
answers: []
}]
);
// saveFormApi("Новая форма", listBlock)
// .then((resolve, reject) => {
// console.log(resolve);
// setForms(
// [...forms, {
// id: nextID(forms),
// title: "Новая форма",
// questions: listBlock,
// answers: []
// }]
// );
cleanStates();
navigate("/forms");
})
.catch(error => console.log(error));
// })
// .catch(error => console.log(error));
};
return (
<div className={classes.main}>
<div className={classes.wrapper}>
<div className={classes.header}>
<div className={classes.header__date}>
<div className={classes.header__date__item}>
<div className={classes.header__listInput}>
<div className={classes.header__listInput__date}>
<span>Дедлайн выполнения</span>
<input type="datetime-local" value={datetime} onChange={event => setDatetime(event.target.value)}/>
</div>
<div className={classes.header__listInput__title}>
<span>Название формы</span>
<input type="text" value={titleForm} onChange={event => setTitleForm(event.target.value)}/>
</div>
<MyButton
text={<i class="fa-solid fa-floppy-disk"></i>}
click={() => updateTitleForm()}
otherStyle={{paddingLeft: "0.9rem", paddingRight: "0.9rem"}}>
</MyButton>
</div>
<div className={classes.header__listBtn}>
<MyButton text={'Предпросмотр'} backgroundColor={'rgb(225, 225, 225)'} toggle={"modal"} target={"#previewModal"}/>
@@ -238,7 +286,7 @@ const NewForm = () => {
<div
className={classes.content__newForm__list__item}
key={i}
id={i}
id={item.order}
draggable="true"
onDragOver={(event) => {event.preventDefault()}}
onDragStart={(event) => {
@@ -251,19 +299,7 @@ const NewForm = () => {
setDropElem(Number(event.target.id))
}
}}
onDrop={() => {
const currentElem = listBlock[dragElem]
const tNewForm = [...listBlock]
if (dragElem > dropElem) {
tNewForm.splice(dropElem, 0, currentElem)
tNewForm.splice(dragElem + 1, 1)
}
else {
tNewForm.splice(dropElem + 1, 0, currentElem)
tNewForm.splice(dragElem, 1)
}
setListBlock(tNewForm)
}}
onDrop={() => updateOrderBlock()}
>
<div className={classes.content__newForm__list__item__answer}>
<span>{item.question}</span>
@@ -272,6 +308,7 @@ const NewForm = () => {
return typeItem.text
}
})}</span>
<span>{item.order}</span>
</div>
<div className={classes.content__newForm__list__item__btn}>
<i class="fa-solid fa-pen" data-bs-toggle="modal" data-bs-target="#answerModal" onClick={() => {editAnswerByForm(item.id)}}></i>

20
src/pages/ViewForm.jsx
View File

@@ -26,26 +26,6 @@ const ViewForm = () => {
const responseBlocks = await listFormBlockApi(cookies.token, formId);
if (responseBlocks.status === 200 && responseForms.status === 200 && responseBlocks.data) {
// let responseToNewForm = {};
// const result = {
// title: responseForms.data.find(item => item.id === formId).title,
// questions: [],
// answers: []
// }
// for (let item of responseBlocks.data) {
// responseToNewForm["id"] = item.id;
// for (let block of item.data) {
// responseToNewForm[block.Key] = block.Value
// };
// result.questions.push(responseToNewForm);
// result.answers.push(
// {id: item.id, answer: []}
// )
// responseToNewForm = {};
// };
const listBlocks = responseDataToListBlock(responseBlocks.data);
setQuestions(listBlocks)