отображение ФИО в списке сотрудников

codEnjoyer · Dec 17, 2023 · bc19fbb · bc19fbb
1 parent f2835ea
commit bc19fbb
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 29 deletions.
diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -13,7 +13,6 @@ import SuperUserMap from "./SuperUserMap/SuperUserMap.tsx";
 import {observer} from "mobx-react-lite";
 
 import authStore from "../../store/authStore.ts";
-import superUserStore from "../../store/superUserStore.ts";
 
 import Starfield from "react-starfield";
 
@@ -30,7 +29,6 @@ const MapMenu: React.FC = observer(() => {
                     setUser(user)
                 }
             })
-            superUserStore.setAllUsers(response.data)
             setIsLoading(false)
         })
     }, [])
@@ -57,7 +55,9 @@ const MapMenu: React.FC = observer(() => {
                 />
                 : (
                     user?.is_superuser
-                        ? <SuperUserMap/>
+                        ? <SuperUserMap
+                            logOut={handleOnLogOut}
+                        />
                         : <EmployeeMap
                             logOut={handleOnLogOut}
                             user={user}

diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
@@ -14,8 +14,13 @@ import superUserStore from "../../../store/superUserStore.ts";
 import {IMapType} from "../../../types/MapType.ts";
 import {IModuleType} from "../../../types/ModuleType.ts";
 import {ILevelType} from "../../../types/LevelType.ts";
+import axios from "axios";
 
-const SuperUserMap: React.FC = observer(() => {
+interface ISuperUserMapProps {
+    logOut: () => void
+}
+
+const SuperUserMap: React.FC<ISuperUserMapProps> = observer(({logOut}) => {
     const [isUsersListModalOpen, setIsUserListModalOpen] = useState<boolean>(false)
 
     const [mapName, setMapName] = useState<string>("")
@@ -29,6 +34,13 @@ const SuperUserMap: React.FC = observer(() => {
                 .then(() => moduleMenuStore.fetchModules()))
     }, []);
 
+    // Загрузка списка сотрудников
+    useEffect(() => {
+        axios.get("http://localhost:8000/employees/").then((response) => {
+            superUserStore.setAllEmployees(response.data)
+        })
+    }, []);
+
     const handleOnClickChangeIsModalOpen = useCallback(() => {
         setIsUserListModalOpen(!isUsersListModalOpen)
     }, [isUsersListModalOpen])
@@ -115,7 +127,7 @@ const SuperUserMap: React.FC = observer(() => {
                 isUsersListModalOpen
                     ? <ModalWindow
                         onClose={handleOnClickChangeIsModalOpen}
-                        body={<UsersListModalBody users={superUserStore.allUsers}/>}
+                        body={<UsersListModalBody employees={superUserStore.allEmployees}/>}
                         windowContentStyles=""
                     />
                     : null
@@ -167,6 +179,10 @@ const SuperUserMap: React.FC = observer(() => {
                 // @ts-ignore: Unreachable code error
                 availableUnits={levelStore.availableLevels}
             />
+
+            <br/>
+
+            <CustomButton text="ВЫЙТИ" handleOnClick={logOut}/>
         </div>
     );
 });

diff --git a/frontend/src/components/mapMenu/SuperUserMap/UsersListModalBody.tsx b/frontend/src/components/mapMenu/SuperUserMap/UsersListModalBody.tsx
@@ -4,21 +4,20 @@ import ModalWindow from "../../../UIComponents/modalWindow/ModalWindow.tsx";
 import UserProfileModalBody from "../UIMapMenu/UserProfile/UserProfileModalBody.tsx";
 
 import superUserStore from "../../../store/superUserStore.ts";
-
-import {IUserType} from "../../../types/UserType.ts";
+import {IEmployeeType} from "../../../types/EmployeeType.ts";
 
 interface IUsersListModalBody {
-    users: IUserType[]
+    employees: IEmployeeType[]
 }
 
-const UsersListModalBody: React.FC<IUsersListModalBody> = ({users}) => {
+const UsersListModalBody: React.FC<IUsersListModalBody> = ({employees}) => {
     const [isUsersCardModalOpen, setIsUserCardModalOpen] = useState<boolean>(false)
     const [userProfileModalBody, setUserProfileModalBody] = useState<ReactNode>()
 
-    const handleOnClickUserCard = (user: IUserType) => {
+    const handleOnClickUserCard = (employee: IEmployeeType) => {
         setIsUserCardModalOpen(true)
-        superUserStore.selectUser(user)
-        setUserProfileModalBody(<UserProfileModalBody user={user} formattedDate=""/>)
+        superUserStore.selectUser(employee)
+        setUserProfileModalBody(<UserProfileModalBody employee={employee}/>)
     }
 
     const handleOnCloseUserCard = useCallback(() => {
@@ -29,19 +28,23 @@ const UsersListModalBody: React.FC<IUsersListModalBody> = ({users}) => {
     return (
         <div>
             <div className="users-list">
-                {users.map((user) => (
+                {employees.map((employee) => (
                     isUsersCardModalOpen
                         ? <ModalWindow
                             body={userProfileModalBody}
                             onClose={handleOnCloseUserCard}
                         />
                         : (
-                            <div key={user.email} className="users-list-user" onClick={() => handleOnClickUserCard(user)}>
-                                <div className="users-list-user-name">
-                                    {user.email}
+                            <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://i.ibb.co/GQzwW82/Qf-EKp-Mlf-Xfw.jpg" alt="Employee Photo"
-                                     className="user-photo"/>
+                                     className="user-photo"
+                                />
                             </div>
                         )
                 ))}

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -19,7 +19,7 @@ interface IModalLevelProps {
 
 const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
     const bodyHeader = renderBodyHeader()
-    const [levelIndex, setLevelIndex] = useState(0)
+    const [levelIndex, setLevelIndex] = useState(1)
 
     const menuItems: IMenuItemType[] = [
         {
@@ -81,7 +81,6 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
     }
 
     const renderTest = (unit: ITaskType | null) => {
-        console.log(unit)
         return (
             <div className="task-info">
                 <form className="level-body">
@@ -116,10 +115,10 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({level}) => {
 
     function renderTasks(menuItems?: IMenuItemType[], theoryUnits?: ITheoryUnitType[], taskUnits?: ITaskType[]) {
         if (menuItems && levelIndex <= menuItems[0].length) {
-            return renderTheory(theoryUnits ? theoryUnits[levelIndex] : null)
+            return renderTheory(theoryUnits ? theoryUnits[levelIndex - menuItems[0].length] : null)
         }
         if (menuItems && levelIndex <= menuItems[0].length + menuItems[1].length) {
-            return renderTest(taskUnits ? taskUnits[levelIndex] : null)
+            return renderTest(taskUnits ? taskUnits[levelIndex - menuItems[0].length - menuItems[1].length] : null)
         }
     }
 

diff --git a/frontend/src/store/superUserStore.ts b/frontend/src/store/superUserStore.ts
@@ -1,21 +1,21 @@
 import {makeAutoObservable} from "mobx";
-import {IUserType} from "../types/UserType.ts";
+import {IEmployeeType} from "../types/EmployeeType.ts";
 
 
 class SuperUserStore {
-    allUsers: IUserType[] = []
-    currentUser: IUserType | null = null
+    allEmployees: IEmployeeType[] = []
+    currentEmployee: IEmployeeType | null = null
 
     constructor() {
         makeAutoObservable(this)
     }
 
-    setAllUsers(fetchedUsers: IUserType[]) {
-        this.allUsers = fetchedUsers
+    setAllEmployees(fetchedEmployees: IEmployeeType[]) {
+        this.allEmployees = fetchedEmployees
     }
 
-    selectUser(newUser: IUserType | null) {
-        this.currentUser = newUser
+    selectUser(newUser: IEmployeeType | null) {
+        this.currentEmployee = newUser
     }
 }
 

diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -112,7 +112,7 @@
   filter: drop-shadow(10px 10px 4px #aeaeae);
 }
 
-.users-list-user-name {
+.users-list-user-info {
   position: absolute;
   left: 35%;
   top: 50%;