собрал создание карт, модулей, уровней в один компонент

codEnjoyer · Dec 15, 2023 · 78f1e18 · 78f1e18
1 parent 5fce461
commit 78f1e18
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 25 deletions.
diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
@@ -1,14 +1,17 @@
 import React, {useCallback, useEffect, useState} from 'react';
+
 import CustomButton from "../../../UIComponents/customButton/CustomButton.tsx";
-import mapMenuStore from "../../../store/mapMenuStore.ts";
 import CustomInput from "../../../UIComponents/customInput/CustomInput.tsx";
+import CustomAddButton from "../../../UIComponents/customAddButton/CustomAddButton.tsx";
+import ModalWindow from "../../../UIComponents/modalWindow/ModalWindow.tsx";
+import UsersListModalBody from "./UsersListModalBody.tsx";
+
 import {observer} from "mobx-react-lite";
+import mapMenuStore from "../../../store/mapMenuStore.ts";
 import superUserStore from "../../../store/superUserStore.ts";
 import moduleMenuStore from "../../../store/moduleMenuStore.ts";
+
 import {IMapType} from "../../../types/MapType.ts";
-import ModalWindow from "../../../UIComponents/modalWindow/ModalWindow.tsx";
-import UsersListModalBody from "./UsersListModalBody.tsx";
-import CustomAddButton from "../../../UIComponents/customAddButton/CustomAddButton.tsx";
 import {IModuleType} from "../../../types/ModuleType.ts";
 
 interface ISuperUserMap {
@@ -73,7 +76,6 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
                     : null
             }
 
-
             <CustomButton
                 className="users-list__btn"
                 handleOnClick={handleOnClickChangeIsModalOpen}
@@ -83,7 +85,7 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
             <br/>
 
             <select className="available-maps">
-                <option value="-"></option>
+                <option value="-">-</option>
                 {mapMenuStore.availableMaps?.map((map, index) =>
                     <option
                         key={map.id}
@@ -114,24 +116,25 @@ const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
 
 
             <div className="change-module">
-            <select className="available-modules">
-                {moduleMenuStore.availableModules.map((module, index) =>
-                    <option
-                        key={module.id}
-                        value={module.title}
-                        onClick={() => handleOnClickOptionModule(module, index)}
-                    >
-                        {module.title}
-                    </option>)
-                }
-            </select>
-
-
-            <CustomButton
-                text="Удалить выбранный модуль"
-                className="delete-module__btn"
-                handleOnClick={() => moduleMenuStore.deleteModule(moduleMenuStore.currentModule?.id)}
-            />
+                <select className="available-modules">
+                    <option value="-">-</option>
+                    {moduleMenuStore.availableModules.map((module, index) =>
+                        <option
+                            key={module.id}
+                            value={module.title}
+                            onClick={() => handleOnClickOptionModule(module, index)}
+                        >
+                            {module.title}
+                        </option>)
+                    }
+                </select>
+
+
+                <CustomButton
+                    text="Удалить выбранный модуль"
+                    className="delete-module__btn"
+                    handleOnClick={() => moduleMenuStore.deleteModule(moduleMenuStore.currentModule?.id)}
+                />
             </div>
 
             <div className="map-creator-item module-create">

diff --git a/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx b/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import mapMenuStore from "../../../../store/mapMenuStore.ts";
+import CustomButton from "../../../../UIComponents/customButton/CustomButton.tsx";
+import CustomInput from "../../../../UIComponents/customInput/CustomInput.tsx";
+import CustomAddButton from "../../../../UIComponents/customAddButton/CustomAddButton.tsx";
+import {IMapType} from "../../../../types/MapType.ts";
+import {IModuleType} from "../../../../types/ModuleType.ts";
+import {ILevelType} from "../../../../types/LevelType.ts";
+
+interface IPropTypes {
+    classNameSelect: string,
+    handleOnClickOptionUnit: (unit: IMapType | IModuleType | ILevelType, index: number) => void,
+    handleOnClickDeleteUnit: (unitId: string) => void,
+    unitName: string,
+    handleOnChangeUnitName: (e: React.FormEvent<HTMLInputElement>) => void,
+    handleOnClickCreateUnit: (unitName: string) => void,
+    currentUnitId: string
+}
+
+const CreateUnit: React.FC<IPropTypes> =
+    ({
+         classNameSelect,
+         handleOnClickOptionUnit,
+         handleOnClickDeleteUnit,
+         unitName,
+         handleOnChangeUnitName,
+         handleOnClickCreateUnit,
+         currentUnitId
+     }) => {
+        return (
+            <div>
+                <select className={classNameSelect}>
+                    <option value="-">-</option>
+                    {mapMenuStore.availableMaps?.map((map, index) =>
+                        <option
+                            key={map.id}
+                            value={map.title}
+                            onClick={() => handleOnClickOptionUnit(map, index)}
+                        >
+                            {map.title}
+                        </option>)
+                    }
+                </select>
+
+                <CustomButton
+                    text="Удалить выбранную карту"
+                    className={`delete-${unitName}__btn`}
+                    handleOnClick={() => handleOnClickDeleteUnit(currentUnitId)}
+                />
+
+                <div className={`map-creator-item ${unitName}-create`}>
+                    <CustomInput
+                        type="text"
+                        value={unitName}
+                        handleOnChange={(e) => handleOnChangeUnitName(e)}
+                    />
+                    <CustomAddButton
+                        handleOnClick={() => handleOnClickCreateUnit(unitName)}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+export default CreateUnit;
diff --git a/frontend/src/store/moduleMenuStore.ts b/frontend/src/store/moduleMenuStore.ts
@@ -59,7 +59,6 @@ class ModuleMenuStore {
     }
 
     async deleteModule(id?: string) {
-        console.log(id)
         axios.delete("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + id).catch(() => alert("Выберите модуль"))
     }
 

diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -117,6 +117,7 @@
   left: 35%;
   top: 50%;
   transform: translate(0, -50%);
+  word-break: break-word;
 }
 
 .user-photo {