diff --git a/src/assets/styles/newForm.module.scss b/src/assets/styles/newForm.module.scss index 3562399..62c3ec7 100644 --- a/src/assets/styles/newForm.module.scss +++ b/src/assets/styles/newForm.module.scss @@ -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; diff --git a/src/hooks/api/formApi.js b/src/hooks/api/formApi.js index f8b0238..cb6ec4a 100644 --- a/src/hooks/api/formApi.js +++ b/src/hooks/api/formApi.js @@ -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 } \ No newline at end of file +export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi, updateOrderBlockApi } \ No newline at end of file diff --git a/src/hooks/api/listFormsApi.js b/src/hooks/api/listFormsApi.js index 183c0f2..e27912f 100644 --- a/src/hooks/api/listFormsApi.js +++ b/src/hooks/api/listFormsApi.js @@ -47,4 +47,22 @@ async function removeFormApi(token, formId) { } }; -export { listFormsApi, createFormApi, removeFormApi }; \ No newline at end of file +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 }; \ No newline at end of file diff --git a/src/hooks/sundry/parseListBlock.js b/src/hooks/sundry/parseListBlock.js index 8753ea4..197c3fb 100644 --- a/src/hooks/sundry/parseListBlock.js +++ b/src/hooks/sundry/parseListBlock.js @@ -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 } \ No newline at end of file diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx index a765bcb..2515c9c 100644 --- a/src/pages/NewForm.jsx +++ b/src/pages/NewForm.jsx @@ -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: [] - }] - ); - cleanStates(); - navigate("/forms"); - }) - .catch(error => console.log(error)); + // 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)); }; return (
-
-
+
+
Дедлайн выполнения setDatetime(event.target.value)}/>
+
+ Название формы + setTitleForm(event.target.value)}/> +
+ } + click={() => updateTitleForm()} + otherStyle={{paddingLeft: "0.9rem", paddingRight: "0.9rem"}}> +
@@ -238,7 +286,7 @@ const NewForm = () => {
{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()} >
{item.question} @@ -272,6 +308,7 @@ const NewForm = () => { return typeItem.text } })} + {item.order}
{editAnswerByForm(item.id)}}> diff --git a/src/pages/ViewForm.jsx b/src/pages/ViewForm.jsx index 8af3e33..a97e75b 100644 --- a/src/pages/ViewForm.jsx +++ b/src/pages/ViewForm.jsx @@ -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)