From e4dba30177c6df4725d5e5814e8d6bde436d5705 Mon Sep 17 00:00:00 2001
From: kuwsh1n <senya.bogachev@mail.ru>
Date: Wed, 8 May 2024 22:08:25 +0300
Subject: [PATCH] fix ticket 6, 10, 15

---
 .../styles/components/loading.module.scss     | 13 +++
 src/assets/styles/newForm.module.scss         |  3 +-
 src/components/AnswerModal.jsx                |  5 +-
 src/components/Loading.jsx                    | 15 +++
 src/components/typeAnswer/DropDownList.jsx    |  2 +-
 src/hooks/api/formApi.js                      | 20 +++-
 src/hooks/sundry/parseListBlock.js            | 11 ++-
 src/pages/AnswersForm.jsx                     | 17 ++--
 src/pages/Forms.jsx                           |  7 +-
 src/pages/NewForm.jsx                         | 94 ++++++++++---------
 src/pages/ViewForm.jsx                        |  1 -
 11 files changed, 120 insertions(+), 68 deletions(-)
 create mode 100644 src/assets/styles/components/loading.module.scss
 create mode 100644 src/components/Loading.jsx

diff --git a/src/assets/styles/components/loading.module.scss b/src/assets/styles/components/loading.module.scss
new file mode 100644
index 0000000..eab817f
--- /dev/null
+++ b/src/assets/styles/components/loading.module.scss
@@ -0,0 +1,13 @@
+.loading__wrapper {
+    width: 100%;
+    height: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &__body {
+        // margin-top: 100px;
+        span {
+
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/styles/newForm.module.scss b/src/assets/styles/newForm.module.scss
index afd128c..e18c9bd 100644
--- a/src/assets/styles/newForm.module.scss
+++ b/src/assets/styles/newForm.module.scss
@@ -171,5 +171,4 @@
             }
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/src/components/AnswerModal.jsx b/src/components/AnswerModal.jsx
index f565d6c..0d79fb8 100644
--- a/src/components/AnswerModal.jsx
+++ b/src/components/AnswerModal.jsx
@@ -25,7 +25,8 @@ const AnswerModal = ({
     setQuestion,
     setComment,
     setCurrentTypeAnswer,
-    setFile
+    setFile,
+    removeOptionAnswer
     }) => {
 
     return (
@@ -67,7 +68,7 @@ const AnswerModal = ({
                                 {optionAnswer.map((item, i) => 
                                     <span key={i} className={classes.myModal__dialog__content__body__answerOptions__list__answer}>
                                         {item.id}) {item.text} 
-                                        <i class="fa-solid fa-xmark" onClick={() => setOptionAnswer([...optionAnswer].filter(answer => answer.id !== item.id))}></i>
+                                        <i class="fa-solid fa-xmark" onClick={() => removeOptionAnswer(item.id)}></i>
                                     </span>
                                 )}
                             </div>
diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
new file mode 100644
index 0000000..bc33479
--- /dev/null
+++ b/src/components/Loading.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import classes from "../assets/styles/components/loading.module.scss";
+
+const Loading = () => {
+
+    return (
+        <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>
+    )
+}
+
+export default Loading;
\ No newline at end of file
diff --git a/src/components/typeAnswer/DropDownList.jsx b/src/components/typeAnswer/DropDownList.jsx
index 89cba66..621a9dd 100644
--- a/src/components/typeAnswer/DropDownList.jsx
+++ b/src/components/typeAnswer/DropDownList.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import classes from "../../assets/styles/components/typeAnswer/dropDownList.module.scss"
 
 const DropDownList = ({postfix, optionAnswer, answers, updateAnswersForm}) => {
-    console.log(optionAnswer)
+    // console.log(optionAnswer)
     return (
         <div className={classes.main}>
             <select 
diff --git a/src/hooks/api/formApi.js b/src/hooks/api/formApi.js
index fc4b09e..90127b1 100644
--- a/src/hooks/api/formApi.js
+++ b/src/hooks/api/formApi.js
@@ -153,4 +153,22 @@ async function getAnswersApi(token, formToken) {
     }
 };
 
-export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi, updateOrderBlockApi, listFormBlockByTokenApi, saveAnswersApi, getAnswersApi, removeBlockApi }
\ No newline at end of file
+async function getBlockApi(token, formId, order) {
+    try {
+        const response = await axios.post(`https://api.minerva.krbl.ru/formBuilder/edit/${formId}/get`,
+        {
+            "order": order
+        },
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e
+    }
+};
+
+export { addFormBlockApi, listFormBlockApi, saveFormApi, updateBlockApi, updateOrderBlockApi, listFormBlockByTokenApi, saveAnswersApi, getAnswersApi, removeBlockApi, getBlockApi }
\ No newline at end of file
diff --git a/src/hooks/sundry/parseListBlock.js b/src/hooks/sundry/parseListBlock.js
index 70acbcd..f5cc997 100644
--- a/src/hooks/sundry/parseListBlock.js
+++ b/src/hooks/sundry/parseListBlock.js
@@ -16,8 +16,8 @@ function responseDataToListBlock(data) {
 
             if (Array.isArray(param.Value) && param.Value.length) {
                 newParam[param.Key] = param.Value.map(item => ({
-                    id: item[0].Value,
-                    text: item[1].Value
+                    id: item.find(obj => obj.Key === "id").Value,
+                    text: item.find(obj => obj.Key === "text").Value
                 }))
             }
             else {
@@ -47,6 +47,11 @@ function dateTimeParse(date) {
     }
 
     return newDate
+};
+
+function numberingBlocks(list, key, increase = 0) {
+    list.forEach((value, i) => list[i][key] = i + increase)
+    return list
 }
 
-export { responseDataToListBlock, dateTimeParse }
\ No newline at end of file
+export { responseDataToListBlock, dateTimeParse, numberingBlocks }
\ No newline at end of file
diff --git a/src/pages/AnswersForm.jsx b/src/pages/AnswersForm.jsx
index eae3169..ab2133e 100644
--- a/src/pages/AnswersForm.jsx
+++ b/src/pages/AnswersForm.jsx
@@ -6,6 +6,7 @@ import classes from "../assets/styles/answersForm.module.scss";
 import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock";
 import { listFormBlockApi, getAnswersApi } from "../hooks/api/formApi";
 import { listUsersApi } from "../hooks/api/adminApi";
+import Loading from "../components/Loading.jsx";
 
 const AnswersForm = () => {
     const { formId } = useParams();
@@ -19,8 +20,6 @@ const AnswersForm = () => {
             const responseBlocks = await listFormBlockApi(cookies.token, formId);
             const responseAnswers = await getAnswersApi(cookies.token, formId);
             const listUsers = await listUsersApi(cookies.token);
-            console.log("responseBlocks", responseBlocks)
-            console.log("responseAnswers", responseAnswers)
 
             if (responseBlocks.status === 200 && responseBlocks.data) {
                 const listBlocks = responseDataToListBlock(responseBlocks.data);
@@ -35,7 +34,10 @@ const AnswersForm = () => {
 
                         if (item.data) {
                             for (let i = 0; i < item.data.length; i++) {
-                                blocks.block.push({answers: {id: item.data[i][0].Value, answer: item.data[i][1].Value}, question: listBlocks[i]})
+                                blocks.block.push({
+                                    answers: {id: item.data[i].find(obj => obj.Key === "id").Value, answer: item.data[i].find(obj => obj.Key === "answer").Value}, 
+                                    question: listBlocks[i]
+                                })
                             }
                         }
                         else {
@@ -45,8 +47,7 @@ const AnswersForm = () => {
                         }
 
                         result.push(blocks)
-                    }   
-                    console.log("result", result)
+                    }
                 }
 
                 setData(result)
@@ -111,11 +112,7 @@ const AnswersForm = () => {
                                     </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>}
+                            <Loading/>}
                         </div>                        
                     </div>
                 </div>
diff --git a/src/pages/Forms.jsx b/src/pages/Forms.jsx
index 236ee7e..0d636f4 100644
--- a/src/pages/Forms.jsx
+++ b/src/pages/Forms.jsx
@@ -34,7 +34,7 @@ const Forms = () => {
         };
 
         listForms();
-    }, [])
+    }, []);
 
     async function createForm() {
         setStateLoading(true);
@@ -43,7 +43,6 @@ const Forms = () => {
 
         if (response.data) {
             const token = await newFormTokenApi(cookies.token, response.data.id)
-
             navigate(`/forms/${response.data.id}/edit`)
         }
         else {
@@ -64,8 +63,6 @@ const Forms = () => {
         else {
             console.log(response);
         }
-
-        setRemoveIdForm(false);
     };
 
     async function openFormView(formId) {
@@ -90,7 +87,7 @@ const Forms = () => {
         }
     };
 
-    const filterFormsBySearch = () => [...forms].filter(item => item.title.toLowerCase().includes(searchForm))
+    const filterFormsBySearch = () => [...forms].filter(item => item.title.toLowerCase().includes(searchForm));
 
     return (
         <div className={classes.main}>
diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx
index 41015bd..cba1e00 100644
--- a/src/pages/NewForm.jsx
+++ b/src/pages/NewForm.jsx
@@ -4,11 +4,12 @@ import { useCookies } from "react-cookie";
 import classes from "../assets/styles/newForm.module.scss";
 import MyButton from "../components/MyButton.jsx";
 import AnswerModal from "../components/AnswerModal.jsx";
-import PreviewModal from "../components/PreviewModal.jsx"
+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 { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi, removeBlockApi } from "../hooks/api/formApi.js";
-import { responseDataToListBlock } from "../hooks/sundry/parseListBlock.js";
+import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi, removeBlockApi, getBlockApi } from "../hooks/api/formApi.js";
+import { responseDataToListBlock, numberingBlocks } from "../hooks/sundry/parseListBlock.js";
 import MyInput from "../components/MyInput.jsx";
 
 const NewForm = () => {
@@ -17,6 +18,7 @@ const NewForm = () => {
     const { formId } = useParams();
     const [dragElem, setDragElem] = useState(null);
     const [dropElem, setDropElem] = useState(null);
+    const [loading, setLoading] = useState(false);
 
     const [cookies, _, __] = useCookies(["user"]);
     
@@ -43,10 +45,6 @@ const NewForm = () => {
 
     const [stateModal, setStateModal] = useState(false);
 
-    function removeAnswerByForm(id) {
-        setListBlock([...listBlock.filter(item => item.id !== id)]); 
-    };
-
     function cleanStates() {
         setStateModal(false)
         setQuestion("");
@@ -65,7 +63,6 @@ const NewForm = () => {
             const responseBlock = await listFormBlockApi(cookies.token, formId);
 
             if (responseBlock.status === 200 && 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);
@@ -76,20 +73,33 @@ const NewForm = () => {
                 setNewTitleForm("Новыя форма");
                 setOldTitleForm("Новыя форма");
             }
+            setLoading(true);
         };
 
         totalData();
     }, []);
 
-    function addOptionAnswer(text) {
-        setOptionAnswer([...optionAnswer, {
-            id: nextID(optionAnswer, "id"),
-            text: currentOptionAnswer
-        }]);
+    function addOptionAnswer() {
+        setOptionAnswer(numberingBlocks(
+            [...optionAnswer, {
+                id: nextID(optionAnswer, "id"),
+                text: currentOptionAnswer
+            }],
+            "id",
+            1
+        ));
         setCurrentOptionAnswer("");
     };
 
-    function editAnswerByForm(id, order) {       
+    function removeOptionAnswer(id) {
+        setOptionAnswer(numberingBlocks(
+            [...optionAnswer].filter(answer => answer.id !== id),
+            "id",
+            1
+        ));
+    };
+
+    function editAnswerByForm(id) {     
         const obj = listBlock.find(item => item.id === id);
         setQuestion(obj.question);
         setComment(obj.comment);
@@ -102,6 +112,8 @@ const NewForm = () => {
     };
 
     async function updateBlock() {
+        console.log(optionAnswer)
+
         const data = {
             question: question,
             comment: comment,
@@ -118,15 +130,16 @@ const NewForm = () => {
             data, 
             listBlock.find(item => item.id === stateModal).order
         );
-        console.log(response)
 
         if (response.status === 200) {
-            setListBlock(listBlock.map(item => {
-                if (item.id === stateModal) {
-                    item = data
-                }
-                return item
-            }))
+            const responseBlock = await listFormBlockApi(cookies.token, formId);
+
+            if (responseBlock.status === 200) {
+                setListBlock(responseDataToListBlock(responseBlock.data));
+            }
+            else {
+                setListBlock([])
+            }
         }
         else {
             console.log(response)
@@ -144,9 +157,11 @@ const NewForm = () => {
         else {
             console.log(response)
         }
-    }
+    };
 
     async function addFormBlock() {
+        console.log(optionAnswer)
+
         const newBlock = {
             question: question,
             typeAnswer: currentTypeAnswer,
@@ -160,7 +175,14 @@ const NewForm = () => {
         const response = await addFormBlockApi(cookies.token, formId, newBlock)
 
         if (response.status === 200) {
-            setListBlock([...listBlock, {...newBlock, order: nextID(listBlock, "order")}]);
+            const responseBlock = await listFormBlockApi(cookies.token, formId);
+
+            if (responseBlock.status === 200) {
+                setListBlock(responseDataToListBlock(responseBlock.data));
+            }
+            else {
+                setListBlock([])
+            }
         }
         else {
             console.log(response)
@@ -198,26 +220,10 @@ const NewForm = () => {
                 tListBlock.splice(dragElem, 1);
             };
 
+            tListBlock.forEach((value, i) => tListBlock[i].order = i)
+
             setListBlock(tListBlock);
         }
-    }
-
-    function updateFormByForms() {
-        updateFormByFormsApi(location.state.id, "Новая форма", listBlock)
-            .then((resolve, _) => {
-                console.log(resolve);
-                setForms(
-                    forms.map(item => {
-                        if (item.id === location.state.id) {
-                            item.title = "Новая форма",
-                            item.questions = listBlock                
-                        }
-                        return item
-                    })
-                );
-                cleanStates();
-                navigate("/forms");
-            })
     };
 
     async function saveForm() {
@@ -284,6 +290,7 @@ const NewForm = () => {
                         addOptionAnswer={addOptionAnswer}
                         updateBlock={updateBlock}
                         setCurrentTypeAnswer={setCurrentTypeAnswer}
+                        removeOptionAnswer={removeOptionAnswer}
                     />
 
                     <div className={classes.content__newForm}>
@@ -291,7 +298,7 @@ const NewForm = () => {
                             <h3>Новая форма</h3>
                         </div>                        
                         <div className={classes.content__newForm__list}>
-                            {listBlock.map((item, i) => 
+                            {loading ? listBlock.map((item, i) => 
                                 <div 
                                     className={classes.content__newForm__list__item} 
                                     key={i} 
@@ -323,7 +330,8 @@ const NewForm = () => {
                                         <i class="fa-solid fa-trash" onClick={() => removeBlock(item.order)}></i>
                                     </div>
                                 </div>
-                            )}
+                            ) : 
+                            <Loading/>}
                         </div>
                     </div>
                 </div>                  
diff --git a/src/pages/ViewForm.jsx b/src/pages/ViewForm.jsx
index d81d972..4d85568 100644
--- a/src/pages/ViewForm.jsx
+++ b/src/pages/ViewForm.jsx
@@ -41,7 +41,6 @@ const ViewForm = () => {
     }, []);
 
     function updateAnswersForm(value, id) {
-        console.log(value)
         setAnswers(
             answers.map((item, i) => {
                 if (id === i) {