добавляет карточки карт

codEnjoyer · Dec 19, 2023 · ad566d3 · ad566d3
1 parent ed9aad3
commit ad566d3
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 27 deletions.
diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
@@ -15,6 +15,7 @@ import {IMapType} from "../../../types/MapType.ts";
 import {IModuleType} from "../../../types/ModuleType.ts";
 import {ILevelType} from "../../../types/LevelType.ts";
 import axios from "axios";
+import MapsListModalBody from "./superUserControlPanel/MapsListModalBody.tsx";
 
 interface ISuperUserMapProps {
     logOut: () => void
@@ -23,6 +24,10 @@ interface ISuperUserMapProps {
 const SuperUserMap: React.FC<ISuperUserMapProps> = observer(({logOut}) => {
     const [isUsersListModalOpen, setIsUserListModalOpen] = useState<boolean>(false)
 
+    const [isUsersMapsModalOpen, setIsUsersMapsModalOpen] = useState<boolean>(false)
+    const [isUsersModulesModalOpen, setIsUsersModulesModalOpen] = useState<boolean>(false)
+    const [isUsersLevelsModalOpen, setIsUsersLevelsModalOpen] = useState<boolean>(false)
+
     const [mapName, setMapName] = useState<string>("")
     const [moduleName, setModuleName] = useState<string>("")
     const [levelName, setLevelName] = useState<string>("")
@@ -41,10 +46,14 @@ const SuperUserMap: React.FC<ISuperUserMapProps> = observer(({logOut}) => {
         })
     }, []);
 
-    const handleOnClickChangeIsModalOpen = useCallback(() => {
+    const handleOnClickChangeIsModalEmployeesOpen = useCallback(() => {
         setIsUserListModalOpen(!isUsersListModalOpen)
     }, [isUsersListModalOpen])
 
+    const handleOnClickChangeIsModalMapsOpen = useCallback(() => {
+        setIsUsersMapsModalOpen(!isUsersMapsModalOpen)
+    }, [isUsersMapsModalOpen])
+
     const handleOnChangeMapName = useCallback((e: React.FormEvent<HTMLInputElement>) => {
         setMapName(e.currentTarget.value)
     }, [])
@@ -126,21 +135,31 @@ const SuperUserMap: React.FC<ISuperUserMapProps> = observer(({logOut}) => {
             {
                 isUsersListModalOpen
                     ? <ModalWindow
-                        onClose={handleOnClickChangeIsModalOpen}
+                        onClose={handleOnClickChangeIsModalEmployeesOpen}
                         body={<UsersListModalBody employees={superUserStore.allEmployees}/>}
-                        windowContentStyles=""
                     />
                     : null
             }
 
+            {isUsersMapsModalOpen
+                ? <ModalWindow
+                    onClose={handleOnClickChangeIsModalMapsOpen}
+                    body={<MapsListModalBody maps={mapMenuStore.availableMaps} chooseMap={mapMenuStore.chooseMap}/>}
+                />
+                : null
+            }
+
+            <CustomButton text="Открыть список карт" handleOnClick={handleOnClickChangeIsModalMapsOpen}/>
+
             <CustomButton
                 className="users-list__btn"
-                handleOnClick={handleOnClickChangeIsModalOpen}
+                handleOnClick={handleOnClickChangeIsModalEmployeesOpen}
                 text="Открыть список сотрудников"
             />
 
             <br/>
 
+
             <CreateUnit
                 classNameSelect="available-maps"
                 handleOnClickOptionUnit={handleOnClickOptionMap}

diff --git a/frontend/src/components/mapMenu/SuperUserMap/UsersListModalBody.tsx b/frontend/src/components/mapMenu/SuperUserMap/UsersListModalBody.tsx
@@ -26,30 +26,28 @@ const UsersListModalBody: React.FC<IUsersListModalBody> = ({employees}) => {
     }, [])
 
     return (
-        <div>
-            <div className="users-list">
-                {employees.map((employee) => (
-                    isUsersCardModalOpen
-                        ? <ModalWindow
-                            body={userProfileModalBody}
-                            onClose={handleOnCloseUserCard}
-                            key={employee.id}
-                        />
-                        : (
-                            <div key={employee.name} className="users-list-user"
-                                 onClick={() => handleOnClickUserCard(employee)}>
-                                <div className="users-list-user-info">
-                                    <div className="users-list-user-lastname">{employee.last_name}</div>
-                                    <div className="users-list-user-name">{employee.name}</div>
-                                    <div className="users-list-user-patronymic">{employee.patronymic}</div>
-                                </div>
-                                <img src="https://clck.ru/37AFXb" alt="Employee Photo"
-                                     className="user-photo"
-                                />
+        <div className="users-list">
+            {employees.map((employee) => (
+                isUsersCardModalOpen
+                    ? <ModalWindow
+                        body={userProfileModalBody}
+                        onClose={handleOnCloseUserCard}
+                        key={employee.id}
+                    />
+                    : (
+                        <div key={employee.name} className="users-list-user"
+                             onClick={() => handleOnClickUserCard(employee)}>
+                            <div className="users-list-user-info">
+                                <div className="users-list-user-lastname">{employee.last_name}</div>
+                                <div className="users-list-user-name">{employee.name}</div>
+                                <div className="users-list-user-patronymic">{employee.patronymic}</div>
                             </div>
-                        )
-                ))}
-            </div>
+                            <img src="https://clck.ru/37AFXb" alt="Employee Photo"
+                                 className="user-photo"
+                            />
+                        </div>
+                    )
+            ))}
         </div>
     );
 };

diff --git a/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/MapsListModalBody.tsx b/frontend/src/components/mapMenu/SuperUserMap/superUserControlPanel/MapsListModalBody.tsx
@@ -0,0 +1,47 @@
+import React, {ReactNode, useCallback, useState} from 'react';
+
+import ModalWindow from "../../../../UIComponents/modalWindow/ModalWindow.tsx";
+
+import {IMapType} from "../../../../types/MapType.ts";
+
+interface IMapsList {
+    maps: IMapType[],
+    chooseMap: (map: IMapType) => void
+}
+
+const MapsListModalBody: React.FC<IMapsList> = ({maps, chooseMap}) => {
+    const [isUsersCardModalOpen, setIsUserCardModalOpen] = useState<boolean>(false)
+    const [userProfileModalBody, setUserProfileModalBody] = useState<ReactNode>()
+
+    const handleOnClickUserCard = (map: IMapType) => {
+        setIsUserCardModalOpen(true)
+        chooseMap(map)
+    }
+
+    const handleOnCloseUserCard = useCallback(() => {
+        setIsUserCardModalOpen(false)
+    }, [])
+
+    return (
+        <div className="users-list">
+            {maps.map((map) => (
+                isUsersCardModalOpen
+                    ? <ModalWindow
+                        body={userProfileModalBody}
+                        onClose={handleOnCloseUserCard}
+                        key={map.id}
+                    />
+                    : (
+                        <div key={map.id} className="users-list-user"
+                             onClick={() => handleOnClickUserCard(map)}>
+                            <div className="map-info">
+                                {map.title.toUpperCase()}
+                            </div>
+                        </div>
+                    )
+            ))}
+        </div>
+    );
+};
+
+export default MapsListModalBody;
diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -198,3 +198,10 @@
   font-size: 20px;
   letter-spacing: 1px;
 }
+
+.map-info {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}