From 90aec8fad016213674d323f8fcf8ab308f00150e Mon Sep 17 00:00:00 2001 From: kuwsh1n Date: Tue, 12 Mar 2024 01:11:28 +0300 Subject: [PATCH] create ViewForm page --- src/App.jsx | 38 +++++++++++---- src/assets/styles/forms.module.scss | 8 ++++ .../styles/generatingFormFields.module.scss | 19 ++++++++ src/assets/styles/viewForm.module.scss | 27 +++++++++++ src/components/GeneratingFormFields.jsx | 22 +++++++++ src/components/PreviewModal.jsx | 18 +------- src/context/index.js | 4 +- src/pages/Forms.jsx | 9 +++- src/pages/NewForm.jsx | 22 +-------- src/pages/Profile.jsx | 46 ++++++++++++++++--- src/pages/ViewForm.jsx | 41 +++++++++++++++++ src/router/router.js | 5 ++ 12 files changed, 204 insertions(+), 55 deletions(-) create mode 100644 src/assets/styles/generatingFormFields.module.scss create mode 100644 src/assets/styles/viewForm.module.scss create mode 100644 src/components/GeneratingFormFields.jsx create mode 100644 src/pages/ViewForm.jsx diff --git a/src/App.jsx b/src/App.jsx index 0bca5ca..12d68bb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,28 +1,48 @@ import React, { useState } from "react"; import { Outlet, useNavigate } from "react-router-dom"; -import { FormsData, UserData } from "./context"; +import { FormsData, UserData, TypeAnswerData } from "./context"; import classes from "./assets/styles/app.module.scss" import NavBar from "./components/NavBar.jsx"; import 'bootstrap/dist/css/bootstrap.min.css'; +import InputText from "./components/typeAnswer/InputText.jsx"; +import TextArea from "./components/typeAnswer/TextArea.jsx"; +import YesNo from "./components/typeAnswer/YesNo.jsx" +import InputDate from "./components/typeAnswer/InputDate.jsx"; +import InputMultipleRadio from "./components/typeAnswer/InputMultipleRadio.jsx"; +import InputRadio from "./components/typeAnswer/InputRadio.jsx"; +import DropDownList from "./components/typeAnswer/DropDownList.jsx"; +import InputFile from "./components/typeAnswer/InputFile.jsx"; const App = () => { const navigate = useNavigate(); const [forms, setForms] = useState([]); const [user, setUser] = useState(false); + const [listTypeAnswer, setListTypeAnswer] = useState([ + {id: 1, text: 'Краткий ответ', typeTag: InputText}, + {id: 2, text: 'Расширенный ответ', typeTag: TextArea}, + {id: 3, text: 'Выбор из вариантов', typeTag: InputRadio}, + {id: 4, text: 'Множественный выбор', typeTag: InputMultipleRadio}, + {id: 5, text: 'Выпадающий список', typeTag: DropDownList}, + {id: 6, text: 'Да/Нет', typeTag: YesNo}, + {id: 7, text: 'Файл', typeTag: InputFile}, + {id: 8, text: 'Дата', typeTag: InputDate} + ]); return ( -
-
-
- -
-
- + +
+
+
+ +
+
+ +
-
+ ) diff --git a/src/assets/styles/forms.module.scss b/src/assets/styles/forms.module.scss index f8fee76..208859e 100644 --- a/src/assets/styles/forms.module.scss +++ b/src/assets/styles/forms.module.scss @@ -53,6 +53,7 @@ height: 25%; width: 100%; font-family: "Montserrat", sans-serif; + position: relative; &:hover { background-color: rgba(240, 240, 240, 0.8); } @@ -72,6 +73,13 @@ width: 33.3%; text-align: center; } + i { + position: absolute; + font-size: 15px; + right: 30px; + top: calc(50% - 7px); + cursor: pointer; + } } } } \ No newline at end of file diff --git a/src/assets/styles/generatingFormFields.module.scss b/src/assets/styles/generatingFormFields.module.scss new file mode 100644 index 0000000..f69cd75 --- /dev/null +++ b/src/assets/styles/generatingFormFields.module.scss @@ -0,0 +1,19 @@ +.item { + padding: 10px 20px; + border-top: 1px solid rgb(200, 200, 200); + &__question { + &__text { + font-size: 15px; + font-family: "Montserrat", sans-serif; + } + &__comment { + font-size: 11px; + font-family: "Montserrat", sans-serif; + font-style: italic; + color: rgb(200, 200, 200); + } + } + &__answer { + + } +} \ No newline at end of file diff --git a/src/assets/styles/viewForm.module.scss b/src/assets/styles/viewForm.module.scss new file mode 100644 index 0000000..1fadb76 --- /dev/null +++ b/src/assets/styles/viewForm.module.scss @@ -0,0 +1,27 @@ +.main { + width: 100%; + height: 100%; +} + +.wrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.form { + width: 70%; + min-height: 80%; + box-shadow: 0 0 5px 1px rgb(200, 200, 200); + &__header { + + } + &__content { + + } + &__footer { + + } +} diff --git a/src/components/GeneratingFormFields.jsx b/src/components/GeneratingFormFields.jsx new file mode 100644 index 0000000..1fafc47 --- /dev/null +++ b/src/components/GeneratingFormFields.jsx @@ -0,0 +1,22 @@ +import React, { useState } from "react"; +import classes from "../assets/styles/generatingFormFields.module.scss"; + +const GeneratingFormFields = ({newForm, listTypeAnswer}) => { + return ( + newForm.map((item, i) => +
+
+

{i + 1}) {item.question}

+

{item.comment}

+
+
+ { + listTypeAnswer.find(type => type.id === item.typeAnswer).typeTag({postfix: i, answers: item.optionAnswer}) + } +
+
+ ) + ) +} + +export default GeneratingFormFields; \ No newline at end of file diff --git a/src/components/PreviewModal.jsx b/src/components/PreviewModal.jsx index 41c0a31..30e8026 100644 --- a/src/components/PreviewModal.jsx +++ b/src/components/PreviewModal.jsx @@ -1,10 +1,8 @@ import React from "react"; import classes from "../assets/styles/components/previewModal.module.scss"; +import GeneratingFormFields from "./GeneratingFormFields.jsx"; const PreviewModal = ({newForm, listTypeAnswer}) => { - // const [file, setFile] = useState(''); - // const [value, setValue] = useState(''); - return ( diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx index a01977b..b016b9f 100644 --- a/src/pages/NewForm.jsx +++ b/src/pages/NewForm.jsx @@ -4,15 +4,7 @@ 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 { FormsData } from "../context"; -import InputText from "../components/typeAnswer/InputText.jsx" -import TextArea from "../components/typeAnswer/TextArea.jsx"; -import YesNo from "../components/typeAnswer/YesNo.jsx" -import InputDate from "../components/typeAnswer/InputDate.jsx"; -import InputMultipleRadio from "../components/typeAnswer/InputMultipleRadio.jsx"; -import InputRadio from "../components/typeAnswer/InputRadio.jsx"; -import DropDownList from "../components/typeAnswer/DropDownList.jsx"; -import InputFile from "../components/typeAnswer/InputFile.jsx"; +import { FormsData, TypeAnswerData } from "../context"; const NewForm = () => { const navigate = useNavigate(); @@ -21,6 +13,7 @@ const NewForm = () => { const [dropElem, setDropElem] = useState(null); const {forms, setForms} = useContext(FormsData); + const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData); const nextID = (list) => { return list.length ? list.at(-1).id + 1 : 1 @@ -38,17 +31,6 @@ const NewForm = () => { const [stateModal, setStateModal] = useState(false) - const [listTypeAnswer, setListTypeAnswer] = useState([ - {id: 1, text: 'Краткий ответ', typeTag: InputText}, - {id: 2, text: 'Расширенный ответ', typeTag: TextArea}, - {id: 3, text: 'Выбор из вариантов', typeTag: InputRadio}, - {id: 4, text: 'Множественный выбор', typeTag: InputMultipleRadio}, - {id: 5, text: 'Выпадающий список', typeTag: DropDownList}, - {id: 6, text: 'Да/Нет', typeTag: YesNo}, - {id: 7, text: 'Файл', typeTag: InputFile}, - {id: 8, text: 'Дата', typeTag: InputDate} - ]); - function removeAnswerByForm(id) { setNewForm([...newForm.filter(item => item.id !== id)]); } diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx index e4e189c..d20a3dd 100644 --- a/src/pages/Profile.jsx +++ b/src/pages/Profile.jsx @@ -7,11 +7,42 @@ const Profile = () => { const [edit, setEdit] = useState(true); const {user, setUser} = useContext(UserData); - const [email, setEmail] = useState(""); - const [phone, setPhone] = useState(""); - const [name, setName] = useState(""); - const [surname, setSurname] = useState(""); - const [patronymic, setPatronymic] = useState(""); + const [email, setEmail] = useState(user.email); + const [phone, setPhone] = useState(user.phone); + const [name, setName] = useState(user.name); + const [surname, setSurname] = useState(user.surname); + const [patronymic, setPatronymic] = useState(user.patronymic); + + function choiceInput(key) { + switch (key) { + case "email": + return {get: email, set: setEmail} + case "phone": + return {get: phone, set: setPhone} + case "name": + return {get: name, set: setName} + case "surname": + return {get: surname, set: setSurname} + case "patronymic": + return {get: patronymic, set: setPatronymic} + } + } + + function editUser() { + if (edit) { + setEdit(!edit) + } + else { + setUser({ + email: email, + phone: phone, + name: name, + surname: surname, + patronymic: patronymic + }) + setEdit(!edit) + } + } return (
@@ -27,7 +58,7 @@ const Profile = () => { Сохранить } backgroundColor={edit ? "rgb(200, 200, 200)" : ""} - click={() => setEdit(!edit)}/> + click={() => editUser()}/>
{Object.keys(user).map(key => key !== "password" ?
@@ -36,9 +67,10 @@ const Profile = () => { choiceInput(key).set(e.target.value)} required={key !== "patronymic" ? true : false}/>
:
)} diff --git a/src/pages/ViewForm.jsx b/src/pages/ViewForm.jsx new file mode 100644 index 0000000..8e2fc64 --- /dev/null +++ b/src/pages/ViewForm.jsx @@ -0,0 +1,41 @@ +import React, { useState, useContext } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import classes from "../assets/styles/viewForm.module.scss"; +import { FormsData, TypeAnswerData } from "../context"; +import GeneratingFormFields from "../components/GeneratingFormFields.jsx"; + +const ViewForm = () => { + const navigate = useNavigate(); + const { formId } = useParams(); + const {forms, setForms} = useContext(FormsData); + const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData); + + function newForm() { + const searchForm = forms.find(item => item.id === Number(formId)) + + if (searchForm) { + return searchForm.listAnswer + } + return [] + } + + return ( +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ ) +} + +export default ViewForm; \ No newline at end of file diff --git a/src/router/router.js b/src/router/router.js index a3ce383..eaa76a8 100644 --- a/src/router/router.js +++ b/src/router/router.js @@ -6,6 +6,7 @@ import NewForm from '../pages/NewForm.jsx'; import Home from "../pages/Home.jsx"; import App from "../App.jsx"; import Profile from "../pages/Profile.jsx"; +import ViewForm from "../pages/ViewForm.jsx"; const router = createBrowserRouter([ { @@ -30,6 +31,10 @@ const router = createBrowserRouter([ { path: '/profile', element: + }, + { + path: '/forms/:formId', + element: } ] }