From 631ff538f57a9f4077fca315974e61a3577da1da Mon Sep 17 00:00:00 2001 From: semantics Date: Sun, 17 Dec 2023 18:15:34 +0500 Subject: [PATCH] =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B8=20=D0=B2=D1=8B=D0=B1=D0=BE=D1=80=D0=B5=20=D1=83?= =?UTF-8?q?=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D0=B8=20=D0=BC=D0=BE=D0=B4?= =?UTF-8?q?=D1=83=D0=BB=D0=B5=D0=B9,=20=D1=83=D1=80=D0=BE=D0=B2=D0=BD?= =?UTF-8?q?=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mapMenu/EmployeeMap/EmployeeMap.tsx | 2 +- frontend/src/components/mapMenu/MapMenu.tsx | 1 - .../mapMenu/SuperUserMap/SuperUserMap.tsx | 96 ++++++++++++++----- .../superUserControlPanel/CreateUnit.tsx | 14 +-- frontend/src/store/levelStore.ts | 24 ++++- frontend/src/store/mapMenuStore.ts | 7 +- frontend/src/store/moduleMenuStore.ts | 45 ++++----- 7 files changed, 127 insertions(+), 62 deletions(-) diff --git a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx index 2600bfa..3d15259 100644 --- a/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx +++ b/frontend/src/components/mapMenu/EmployeeMap/EmployeeMap.tsx @@ -40,7 +40,7 @@ const EmployeeMap: React.FC = observer(({user, formattedDate, logO return (
- +
diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx index 6158ce1..355d547 100644 --- a/frontend/src/components/mapMenu/MapMenu.tsx +++ b/frontend/src/components/mapMenu/MapMenu.tsx @@ -30,7 +30,6 @@ const MapMenu: React.FC = observer(() => { setUser(user) } }) - console.log(response.data) superUserStore.setAllUsers(response.data) if (user) { diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx index f16876d..a9ccb16 100644 --- a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx +++ b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx @@ -7,11 +7,13 @@ import CreateUnit from "./superUserControlPanel/CreateUnit.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 levelStore from "../../../store/levelStore.ts"; +import superUserStore from "../../../store/superUserStore.ts"; import {IMapType} from "../../../types/MapType.ts"; import {IModuleType} from "../../../types/ModuleType.ts"; +import {ILevelType} from "../../../types/LevelType.ts"; const SuperUserMap: React.FC = observer(() => { const [isUsersListModalOpen, setIsUserListModalOpen] = useState(false) @@ -36,17 +38,19 @@ const SuperUserMap: React.FC = observer(() => { }, []) const handleOnClickOptionMap = useCallback((map: IMapType) => { - mapMenuStore.chooseMap(map) + mapMenuStore.chooseMap(map).then(() => refreshData()) }, []) - const handleOnClickDeleteMap = useCallback((mapId: string) => { - mapMenuStore.deleteMap(mapId).then(() => mapMenuStore.fetchAvailableMaps().then()) + const handleOnClickDeleteMap = useCallback(() => { + mapMenuStore.deleteMap().then(() => refreshData()) }, []) const handleOnClickCreateMap = useCallback((mapName: string) => { mapMenuStore.createMap(mapName) - .then(() => mapMenuStore.fetchAvailableMaps() - .then(() => setMapName(""))) + .then(() => { + refreshData() + setMapName("") + }) }, []) const handleOnChangeModuleName = useCallback((e: React.FormEvent) => { @@ -57,16 +61,49 @@ const SuperUserMap: React.FC = observer(() => { moduleMenuStore.chooseModule(module) }, []) - const handleOnClickDeleteModule = useCallback((mapId: string) => { - moduleMenuStore.deleteModule(mapId).then(() => moduleMenuStore.fetchModules().then()) + const handleOnClickDeleteModule = useCallback(() => { + moduleMenuStore.deleteModule().then(() => refreshData()) }, []) const handleOnClickCreateModule = useCallback((moduleName: string) => { moduleMenuStore.createModule(moduleName) - .then(() => moduleMenuStore.fetchModules() - .then(() => setModuleName(""))) + .then(() => { + refreshData() + setModuleName("") + }) + }, []) + + const handleOnChangeLevelName = useCallback((e: React.FormEvent) => { + setLevelName(e.currentTarget.value) + }, []) + + const handleOnClickOptionLevel = useCallback((level: ILevelType) => { + levelStore.chooseLevel(level) + }, []) + + const handleOnClickDeleteLevel = useCallback(() => { + levelStore.deleteLevel().then(() => refreshData()) }, []) + const handleOnClickCreateLevel = useCallback((levelName: string) => { + levelStore.createLevel(levelName) + .then(() => { + refreshData() + setLevelName("") + }) + }, []) + + const refreshData = () => { + mapMenuStore.fetchAvailableMaps().then(() => { + if (mapMenuStore.choosedMap !== null) { + moduleMenuStore.fetchModules().then(() => { + if (moduleMenuStore.choosedModule !== null) { + levelStore.fetchLevels().then() + } + }) + } + }) + } return (
@@ -96,21 +133,36 @@ const SuperUserMap: React.FC = observer(() => { unitNameValue={mapName} handleOnChangeUnitName={handleOnChangeMapName} handleOnClickCreateUnit={handleOnClickCreateMap} - currentUnitId={mapMenuStore.choosedMap ? mapMenuStore.choosedMap.id : null} + currentUnitId={mapMenuStore.choosedMap?.id} + // @ts-ignore: Unreachable code error availableUnits={mapMenuStore.availableMaps} /> - {/**/} + + +
); }); diff --git a/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx b/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx index 31633a6..089253e 100644 --- a/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx +++ b/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/CreateUnit.tsx @@ -8,14 +8,14 @@ import {ILevelType} from "../../../../types/LevelType.ts"; interface IPropTypes { classNameSelect: string, - handleOnClickOptionUnit: (unit: IMapType & IModuleType & ILevelType, index: number) => void, + handleOnClickOptionUnit: (unit: IMapType & IModuleType, index: number) => void, handleOnClickDeleteUnit: (unitId: string) => void, unitName: string, unitNameValue: string, handleOnChangeUnitName: (e: React.FormEvent) => void, handleOnClickCreateUnit: (unitName: string) => void, currentUnitId?: string | null, - availableUnits: IMapType[] + availableUnits: IMapType[] & IModuleType[] & ILevelType[] } const CreateUnit: React.FC = @@ -44,13 +44,13 @@ const CreateUnit: React.FC =
diff --git a/frontend/src/store/levelStore.ts b/frontend/src/store/levelStore.ts index 2565cd0..3b1ad23 100644 --- a/frontend/src/store/levelStore.ts +++ b/frontend/src/store/levelStore.ts @@ -10,6 +10,7 @@ import {ILevelType} from "../types/LevelType.ts"; class levelStore { chosenTaskIndex: number = 1 availableLevels: ILevelType[] = [] + choosedLevel: ILevelType | null = null constructor() { makeAutoObservable(this) @@ -23,17 +24,38 @@ class levelStore { this.chosenTaskIndex = 1 } + chooseLevel(level: ILevelType) { + this.choosedLevel = level + } + setAvailableLevels(levels: ILevelType[]) { this.availableLevels = levels } async fetchLevels() { - await axios.get("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + moduleMenuStore.currentModuleId + "/levels") + await axios.get("http://localhost:8000/maps/" + mapMenuStore.choosedMap?.id + "/modules/" + moduleMenuStore.choosedModule?.id + "/levels") .then((response) => { this.setAvailableLevels([]) this.setAvailableLevels(response.data) }) } + + async createLevel(levelName: string) { + if (!mapMenuStore.choosedMap?.id) { + alert("Выберите карту") + return + } + + if (!moduleMenuStore.choosedModule?.id) { + alert("Выберите модуль") + return + } + await axios.post("http://localhost:8000/maps/" + mapMenuStore.choosedMap?.id + "/modules/" + moduleMenuStore.choosedModule?.id + "/levels/", {title: levelName}) + } + + async deleteLevel() { + await axios.delete("http://localhost:8000/maps/" + mapMenuStore.choosedMap?.id + "/modules/" + moduleMenuStore.choosedModule?.id + "/levels/" + this.choosedLevel?.id) + } } export default new levelStore() diff --git a/frontend/src/store/mapMenuStore.ts b/frontend/src/store/mapMenuStore.ts index 03dad51..4f4b89b 100644 --- a/frontend/src/store/mapMenuStore.ts +++ b/frontend/src/store/mapMenuStore.ts @@ -16,6 +16,7 @@ class MapMenuStore { async fetchAvailableMaps() { await axios.get("http://localhost:8000/maps/").then((response) => { + this.setMaps([]) this.setMaps(response.data) this.chooseMap(response.data[0]) }) @@ -25,7 +26,7 @@ class MapMenuStore { this.availableMaps = maps } - chooseMap(map: IMapType) { + async chooseMap(map: IMapType) { this.choosedMap = map } @@ -40,8 +41,8 @@ class MapMenuStore { await axios.post("http://localhost:8000/maps/", {title: mapName}).then() } - async deleteMap(mapId?: string) { - await axios.delete("http://localhost:8000/maps/" + mapId) + async deleteMap() { + await axios.delete("http://localhost:8000/maps/" + this.currentMapId) } } diff --git a/frontend/src/store/moduleMenuStore.ts b/frontend/src/store/moduleMenuStore.ts index 5bca4db..a7fee0e 100644 --- a/frontend/src/store/moduleMenuStore.ts +++ b/frontend/src/store/moduleMenuStore.ts @@ -2,12 +2,10 @@ import {makeAutoObservable} from "mobx"; import {IModuleType} from "../types/ModuleType.ts"; import axios from "axios"; import mapMenuStore from "./mapMenuStore.ts"; -import levelStore from "./levelStore.ts"; class ModuleMenuStore { availableModules: IModuleType[] = [] - currentModule: IModuleType | null = null - currentModuleIndex: number = 0 + choosedModule: IModuleType | null = null constructor() { makeAutoObservable(this) @@ -17,48 +15,41 @@ class ModuleMenuStore { this.availableModules = modules } - async selectModule(newModule: IModuleType) { - this.currentModule = newModule + chooseModule(newModule: IModuleType) { + this.choosedModule = newModule } async fetchModules() { await axios.get("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/") .then((response) => { this.setAvailableModules([]) - this.setAvailableModules(response.data.filter((module: IModuleType) => module.map_id === mapMenuStore.currentMapId)) + this.setAvailableModules(response.data.filter((module: IModuleType) => module.map_id === mapMenuStore.choosedMap?.id)) }) } - async createModule(title: string) { - console.log(title) - await axios.post("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/", { - map_id: mapMenuStore.currentMapId, - title: title, - previous_module_id: null, - next_module_id: null, - }) - } - async fetchModuleById(id: string) { await axios.get("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + id).then((response) => { - this.selectModule(response.data) + this.chooseModule(response.data) }) } - async deleteModule(id?: string) { - await axios.delete("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + id).catch(() => alert("Выберите модуль")) - } + async createModule(title: string) { + if (mapMenuStore.choosedMap?.id === undefined) { + alert("Выберите уровень для которого будете создавать карту") + return + } - updateModuleById(mapId: string, id: string, title?: string, previousModuleId?: string, nextModuleId?: string, levels?: string[]) { - axios.patch("http://localhost:8000/modules/" + id, { - id: id, - map_id: mapId, + await axios.post("http://localhost:8000/maps/" + mapMenuStore.choosedMap?.id + "/modules/", { + map_id: mapMenuStore.choosedMap?.id, title: title, - previous_module_id: previousModuleId, - next_module_id: nextModuleId, - levels_ids: levels + previous_module_id: null, + next_module_id: null, }) } + + async deleteModule() { + await axios.delete("http://localhost:8000/maps/" + mapMenuStore.currentMapId + "/modules/" + this.choosedModule?.id).catch(() => alert("Выберите модуль")) + } } export default new ModuleMenuStore()