actions by users

src/assets/styles/components/bodyModal/editUserAdminPanel.module.scss

@@ -0,0 +1,42 @@
+.main {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 3%;
+    &__status {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin-top: 5%;
+        &__admin {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            font-family: "Montserrat", sans-serif;
+            color: rgb(40, 40, 40);
+            font-size: 15px;
+            width: 50%;
+            border: 1px solid rgb(180, 180, 180);
+            border-radius: 5px 0 0 5px;
+            border-right: none
+            &__checkbox {
+
+            }
+        }
+        &__teacher {
+            display: flex;
+            justify-content: space-around;
+            font-family: "Montserrat", sans-serif;
+            color: rgb(40, 40, 40);
+            font-size: 15px;
+            align-items: center;
+            width: 50%;
+            border: 1px solid rgb(180, 180, 180);
+            border-radius: 0 5px 5px 0;
+            &__checkbox {
+                
+            }
+        }
+    }
+}

src/assets/styles/components/defaultModal.module.scss

@@ -0,0 +1,7 @@
+.main {
+    &__dialog {
+        &__content {
+            
+        }
+    }
+}

src/components/DefaultModal.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect, useContext } from "react";
+import classes from "../assets/styles/components/defaultModal.module.scss";
+import MyButton from "./MyButton.jsx";
+
+
+const DefaultModal = ({
+    name,
+    postfix,
+    btn,
+    BodyModal
+}) => {
+
+    return (
+        <div class="modal fade myModal" className={classes.main} id={`${name}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
+            <div class="modal-dialog myModal__dialog" className={classes.main__dialog}>
+                <div class="modal-content" className={classes.main__dialog__content}>
+                    {BodyModal}
+                    <div class="modal-footer myModal__dialog__content__footer" className={classes.myModal__dialog__content__footer}>
+                        {btn.map(((item, i) => 
+                            <MyButton text={item.text} dismiss={item.dismiss} class={item.class} click={item.action} key={i}/>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DefaultModal;

src/components/MyInput.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import classes from "../assets/styles/components/myInput.module.scss"
+import classes from "../assets/styles/components/myInput.module.scss";
 
 const MyInput = (props) => {
     return (

src/components/bodyModal/EditUserAdminPanel.jsx

@@ -0,0 +1,133 @@
+import React, {useState} from "react";
+import classes from "../../assets/styles/components/bodyModal/editUserAdminPanel.module.scss";
+import MyInput from "../../components/MyInput.jsx";
+
+
+const EditUserAdminPanel = ({
+    id,
+    email,
+    firstName,
+    isAdmin,
+    isTeacher,
+    lastName,
+    login,
+    phone,
+    setEmail,
+    setFirstName,
+    setIsAdmin,
+    setIsTeacher,
+    setLastName,
+    setLogin,
+    setPhone,
+}) => {
+
+    console.log('228', id, isAdmin, isAdmin)
+
+    return (
+        <div className={classes.main}>
+            <MyInput 
+                type={"text"} 
+                value={login} 
+                placeholder={"Логин"}
+                change={setLogin} 
+                otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
+                otherInputStyle={{width: "100%", height: "10%"}}
+            />
+            <MyInput 
+                type={"text"} 
+                value={phone} 
+                placeholder={"Телефон"}
+                change={setPhone}
+                otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
+                otherInputStyle={{width: "100%", height: "10%"}}
+            />
+            <MyInput 
+                type={"text"} 
+                value={firstName} 
+                placeholder={"Имя"}
+                change={setFirstName}
+                otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
+                otherInputStyle={{width: "100%", height: "10%"}}
+            />
+            <MyInput 
+                type={"text"} 
+                value={lastName} 
+                placeholder={"Фамилия"}
+                change={setLastName}
+                otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
+                otherInputStyle={{width: "100%", height: "10%"}}
+            />
+            <MyInput 
+                type={"text"} 
+                value={email} 
+                placeholder={"email"}
+                change={setEmail}
+                otherMainStyle={{width: "100%", height: "100%", marginTop: "1%"}} 
+                otherInputStyle={{width: "100%", height: "10%"}}
+            />
+            <div className={classes.main__status}>
+                <div className={classes.main__status__admin}>
+                    <div className={classes.main__status__admin__text}>Администратор</div>
+                    <div className={classes.main__status__admin__checkbox}>
+                        <div class="form-check">
+                            <input 
+                                class="form-check-input" 
+                                type="radio" 
+                                name="admin"
+                                id="choiceYes"
+                                value="1" 
+                                checked={isAdmin}
+                                onChange={() => setIsAdmin(true)}
+                            />
+                            <label class="form-check-label" for="choiceYes">Да</label>
+                        </div>
+                        <div class="form-check">
+                            <input 
+                                class="form-check-input" 
+                                type="radio" 
+                                name="admin"
+                                id="choiceNo"
+                                value="2" 
+                                checked={!isAdmin}
+                                onChange={() => setIsAdmin(false)}
+                            />
+                            <label class="form-check-label" for="choiceNo">Нет</label>
+                        </div>
+                    </div>
+                </div>
+                <div className={classes.main__status__teacher}>
+                    <div className={classes.main__status__admin__text}>Учитель</div>
+                    <div className={classes.main__status__admin__checkbox}>
+                        <div class="form-check">
+                            <input 
+                                class="form-check-input" 
+                                type="radio" 
+                                name="teacher"
+                                id="choiceYes"
+                                value="1" 
+                                checked={isTeacher}
+                                onChange={() => setIsTeacher(true)}
+                            />
+                            <label class="form-check-label" for="choiceYes">Да</label>
+                        </div>
+                        <div class="form-check">
+                            <input 
+                                class="form-check-input" 
+                                type="radio" 
+                                name="teacher"
+                                id="choiceNo"
+                                value="2" 
+                                checked={!isTeacher}
+                                onChange={() => setIsTeacher(false)}
+                            />
+                            <label class="form-check-label" for="choiceNo">Нет</label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    )
+}
+
+export default EditUserAdminPanel;

src/hooks/api/adminApi.js

@@ -15,4 +15,28 @@ async function listUsersApi(token) {
     }
 };
 
-export {listUsersApi}
+async function editUserApi(token, data) {
+    try {
+        const response = await axios.post(`https://api.minerva.krbl.ru/auth/manage/edit`,
+        {
+            "email": data.email,
+            "first_name": data.first_name,
+            "id": data.id,
+            "is_admin": data.is_admin,
+            "last_name": data.last_name,
+            "login": data.login,
+            "phone": data.phone
+        },
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e
+    }
+};
+
+export {listUsersApi, editUserApi}

src/hooks/api/listFormsApi.js

@@ -88,6 +88,7 @@ async function listFormsByTokenApi(token, formId) {
                 "Authorization": `Token ${token}`
             }
         })
+        console.log(response)
         return response
     }
     catch (e) {
@@ -113,4 +114,12 @@ async function removeTokenFormApi(token, formId, formToken) {
     }
 }
 
-export { listFormsApi, createFormApi, removeFormApi, updateTitleFormApi, newFormTokenApi, listFormsByTokenApi, removeTokenFormApi };
+export { 
+    listFormsApi, 
+    createFormApi, 
+    removeFormApi, 
+    updateTitleFormApi, 
+    newFormTokenApi, 
+    listFormsByTokenApi, 
+    removeTokenFormApi 
+};

src/hooks/api/profileApi.js

@@ -6,8 +6,9 @@ async function editUserApi(token, data) {
         {
             "email": data.email,
             "first_name": data.first_name,
-            "id": "6617fec3f603c43e1719d3c8",
+            "id": data.id,
             "is_admin": data.is_admin,
+            "is_teacher": data.is_teacher,
             "last_name": data.last_name,
             "login": data.login,
             "phone": data.phone
@@ -25,7 +26,67 @@ async function editUserApi(token, data) {
         console.log(e)
         return e
     }
-    // return false
+};
+
+
+// async function getListUserApi(token) {
+//     try {
+//         const response = await axios.get(`https://api.minerva.krbl.ru/auth/manage/users`,
+//         {
+//             headers: {
+//                 "Authorization": `Token ${token}`
+//             }
+//         })
+//         return response
+//     }
+//     catch (e) {
+//         return e
+//     }
+// };
+
+
+async function getListUserApi(token) {
+    try {
+        const response = await axios.get(`https://api.minerva.krbl.ru/auth/manage/users`,
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e
+    }
+};
+
+async function addUserApi(token, data) {
+    try {
+        const response = await axios.post(`https://api.minerva.krbl.ru/auth/manage/add`,
+        {
+            "email": data.email,
+            "first_name": data.first_name,
+            // "id": data.id,
+            "is_admin": data.is_admin,
+            "is_teacher": data.is_teacher,
+            "last_name": data.last_name,
+            "login": data.login,
+            "phone": data.phone
+        },
+        {
+            headers: {
+                "Authorization": `Token ${token}`
+            }
+        })
+        return response
+    }
+    catch (e) {
+        return e
+    }
 }
 
-export {editUserApi}
+export {
+    editUserApi,
+    getListUserApi,
+    addUserApi
+}

src/hooks/services/profile.js

@@ -0,0 +1,20 @@
+import { verifyUserApi } from "../api/enterAccountApi";
+
+
+async function verifyUser(cookies, user, setUser) {
+    const response = await verifyUserApi(cookies.token);
+
+    if (response) {
+        if (response.status === 200) {
+            setUser(response.data);
+            return response
+        }
+        else {
+            console.log(response)
+        }
+    }
+}
+
+export {
+    verifyUser
+}

src/pages/AdminPanel.jsx

@@ -1,40 +1,110 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useContext } from "react";
+import { useCookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import classes from "../assets/styles/adminPanel.module.scss";
+import { UserData } from "../context";
+import { getListUserApi, editUserApi, addUserApi } from "../hooks/api/profileApi.js";
+import { verifyUser } from "../hooks/services/profile.js";
+import DefaultModal from "../components/DefaultModal.jsx";
+import EditUserAdminPanel from "../components/bodyModal/EditUserAdminPanel.jsx";
+import MyButton from "../components/MyButton.jsx";
+
 
 const AdminPanel = () => {
-    const [token, setToken] = useState("");
     const navigate = useNavigate();
+    const [cookies, setCookies] = useCookies(["user"]);
+    const {user, setUser} = useContext(UserData);
+    const [listUser, setListUser] = useState([]);
 
-    const [users, setUsers] = useState([
-        {
-          "email": "senya.bogachev@mail.ru",
-          "first_name": "Арсений",
-          "id": "1",
-          "is_admin": false,
-          "last_name": "Богачев",
-          "login": "Ars",
-          "phone": "89110128244"
-        },
-        {
-            "email": "dasha@mail.ru",
-            "first_name": "Дарья",
-            "id": "1",
-            "is_admin": false,
-            "last_name": "Утешева",
-            "login": "dasha",
-            "phone": "89111032339"
-        },
-        {
-            "email": "kirik@mail.ru",
-            "first_name": "Кирилл",
-            "id": "string",
-            "is_admin": false,
-            "last_name": "Жердев",
-            "login": "Kirik",
-            "phone": "89110045673"
+    const [email, setEmail] = useState("")
+    const [firstName, setFirstName] = useState("")
+    const [id, setId] = useState(false)
+    const [isAdmin, setIsAdmin] = useState(false)
+    const [isTeacher, setIsTeacher] = useState(false)
+    const [lastName, setLastName] = useState("")
+    const [login, setLogin] = useState("")
+    const [phone, setPhone] = useState("")
+
+    useEffect(() => {
+        async function getListUser() {
+            const responseListUser = await getListUserApi(cookies.token);
+            const responseCurrentUser = await verifyUser(cookies, user, setUser)
+
+            if (
+                responseListUser.status === 200 && 
+                responseCurrentUser.status === 200 && 
+                responseCurrentUser.data.is_admin
+            ) {
+                setListUser([...responseListUser.data].filter(item => item.id !== responseCurrentUser.data.id))
+            }
+            else {
+                console.log('responseListUser', responseListUser)
+                console.log('responseCurrentUser', responseCurrentUser)
+            }
+        }
+
+        getListUser()
+    }, []);
+
+    function clearState() {
+        setEmail("")
+        setFirstName("")
+        setId("")
+        setIsAdmin("")
+        setIsTeacher("")
+        setLastName("")
+        setLogin("")
+        setPhone("")
+    }
+
+    async function addUser() {
+        const currentState = {
+            email: email,
+            first_name: firstName,
+            id: id,
+            is_admin: isAdmin,
+            is_teacher: isTeacher,
+            last_name: lastName,
+            login: login,
+            phone: phone
+        }
+        const response = await addUserApi(cookies.token, currentState)
+        
+        if (response.status === 200) {
+            setListUser([...listUser, currentState])
+        }
+        clearState()
+    }
+
+    async function editUser() {
+        const currentState = {
+            email: email,
+            first_name: firstName,
+            id: id,
+            is_admin: isAdmin,
+            is_teacher: isTeacher,
+            last_name: lastName,
+            login: login,
+            phone: phone
+        }
+        const response = await editUserApi(cookies.token, currentState)
+
+        if (response.status === 200) {
+            setListUser(listUser.map(item => item.id === id ? currentState : item))
+        }
+        clearState()
+    }
+
+    function openUser(user) {
+        setEmail(user.email)
+        setFirstName(user.first_name)
+        setId(user.id)
+        setIsAdmin(user.is_admin)
+        setIsTeacher(user.is_teacher)
+        setLastName(user.last_name)
+        setLogin(user.login)
+        setPhone(user.phone)
     }
-      ])
 
     return (
         <div className={classes.main}>
@@ -46,22 +116,71 @@ const AdminPanel = () => {
                     <div className={classes.admin__wrapper}>
                         <div className={classes.admin__wrapper__header}>
                             <h3>Пользователи</h3>
-                            
+                            <MyButton 
+                                text={"Создать пользователя"} 
+                                class={"main__green"} 
+                                toggle={"modal"} 
+                                target={"#adminModal"}
+                            />
                         </div>
                         <div className={classes.admin__wrapper__body}>
                             <div className={classes.admin__wrapper__body__columns}>
                                 <div className={classes.admin__wrapper__body__columns__item}>Логин</div>
                                 <div className={classes.admin__wrapper__body__columns__item}>Фамилия</div>
                                 <div className={classes.admin__wrapper__body__columns__item}>Email</div>
+                                <div className={classes.admin__wrapper__body__columns__item}>Учитель</div>
+                                <div className={classes.admin__wrapper__body__columns__item}>Администратор</div>
                             </div>
                             <div className={classes.admin__wrapper__body__users}>
-                                {users.map(item => 
-                                    <div className={classes.admin__wrapper__body__users__item}>
-                                        <div className={classes.admin__wrapper__body__users__item__link}>{item.login}</div>
-                                        <div className={classes.admin__wrapper__body__users__item__info}>{item.last_name}</div>
-                                        <div className={classes.admin__wrapper__body__users__item__info}>{item.email}</div>
+                                {listUser.map(item => 
+                                    <div className={classes.admin__wrapper__body__users__item} key={item.id}>
+                                        <div 
+                                            className={classes.admin__wrapper__body__users__item__link} 
+                                            data-bs-toggle="modal" data-bs-target={`#adminModal`}
+                                            onClick={() => openUser(item)}
+                                        >
+                                            {item.login}
+                                        </div>
+                                        <div className={classes.admin__wrapper__body__users__item__info}>
+                                            {item.last_name ? item.last_name : '-'}
+                                        </div>
+                                        <div className={classes.admin__wrapper__body__users__item__info}>
+                                            {item.email ? item.email : '-'}
+                                        </div>
+                                        <div className={classes.admin__wrapper__body__users__item__info}>
+                                            {item.is_teacher ? 'Да' : 'Нет'}
+                                        </div>
+                                        <div className={classes.admin__wrapper__body__users__item__info}>
+                                            {item.admin ? 'Да' : 'Нет'}
+                                        </div>
                                     </div>
                                 )}
+                                <DefaultModal 
+                                    name={"adminModal"}
+                                    BodyModal={
+                                        <EditUserAdminPanel
+                                            id={id}
+                                            email={email}
+                                            firstName={firstName}
+                                            isAdmin={isAdmin}
+                                            isTeacher={isTeacher}
+                                            lastName={lastName}
+                                            login={login}
+                                            phone={phone}
+                                            setEmail={setEmail}
+                                            setFirstName={setFirstName}
+                                            setIsAdmin={setIsAdmin}
+                                            setIsTeacher={setIsTeacher}
+                                            setLastName={setLastName}
+                                            setLogin={setLogin}
+                                            setPhone={setPhone} 
+                                        />
+                                    } 
+                                    btn={[
+                                        {text: id ? "Изменить" : "Сохранить", dismiss: "modal", class: "main__green", action: id ? () => editUser() : () => addUser()},
+                                        {text: "Отмена", dismiss: "modal", class: "main__white", action: () => clearState()}
+                                    ]}
+                                />
                             </div>
                         </div>
                     </div>

src/pages/NewForm.jsx

@@ -112,8 +112,6 @@ const NewForm = () => {
     };
 
     async function updateBlock() {
-        console.log(optionAnswer)
-
         const data = {
             question: question,
             comment: comment,

src/pages/Profile.jsx

@@ -68,7 +68,9 @@ const Profile = () => {
                 last_name: last_name,
                 email: email,
                 phone: phone,
-                is_admin: user.is_admin
+                is_admin: user.is_admin,
+                is_teacher: user.is_teacher,
+                id: user.id
             })
 
             if (response.status === 200) {
@@ -95,9 +97,9 @@ const Profile = () => {
         <div className={classes.main}>
             <div className={classes.wrapper}>
                 <div className={classes.profile}>
-                    {/* {user.is_admin ? <div className={classes.profile__linkAdmin}>
+                    {user.is_admin ? <div className={classes.profile__linkAdmin}>
                         <span onClick={() => navigate("/admin")}>Админ панель</span>
-                    </div> : <div></div>} */}
+                    </div> : <div></div>}
                     <div className={classes.profile__wrapper}>
                         <div className={classes.profile__wrapper__header}>
                             <h3>Ваши данные</h3>