Merge branch 'super-user-interface-adding-content' into frontend

codEnjoyer · Dec 14, 2023 · 6245aa9 · 6245aa9
2 parents 23200d1 + 98e3249
commit 6245aa9
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 40 deletions.
diff --git a/frontend/src/UIComponents/customAddButton/CustomAddButton.tsx b/frontend/src/UIComponents/customAddButton/CustomAddButton.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from "./customAddButton.module.scss"
+
+interface ICustomAddButton {
+    handleOnClick: () => void;
+}
+
+const CustomAddButton: React.FC<ICustomAddButton> = ({handleOnClick}) => {
+    return (
+        <div onClick={handleOnClick} className={styles.add__btn}>
+            <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="35" cy="35" r="35" fill="#00D29D"/>
+                <path d="M35 10V60M10 34.5H35H60" stroke="white" strokeWidth="4"/>
+            </svg>
+        </div>
+    );
+};
+
+export default CustomAddButton;
diff --git a/frontend/src/UIComponents/customAddButton/customAddButton.module.scss b/frontend/src/UIComponents/customAddButton/customAddButton.module.scss
@@ -0,0 +1,5 @@
+.add__btn{
+  :hover {
+    cursor: pointer
+  }
+}
diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx b/frontend/src/UIComponents/customInput/CustomInput.tsx
@@ -18,6 +18,7 @@ interface IPropTypes {
     register?: UseFormRegister<FormValues>,
     required?: boolean,
     value?: string,
+    handleOnChange?: (e: string) => void,
 }
 
 const CustomInput: React.FC<IPropTypes> =
@@ -33,6 +34,8 @@ const CustomInput: React.FC<IPropTypes> =
          defaultValue,
          register,
          validateRules,
+         value,
+         handleOnChange,
          ...inputProps
      }) => {
         return (
@@ -49,6 +52,8 @@ const CustomInput: React.FC<IPropTypes> =
                     defaultValue={defaultValue}
                     {...register !== undefined && name !== undefined ? {...register(name, validateRules)} : ""}
                     {...inputProps}
+                    value={value}
+                    onChange={(e) => handleOnChange ? (e.target.value) : undefined}
                 />
                 {/*{error.message && <span className="custom-input__error">{error.message}</span>}*/}
             </div>

diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -1,15 +1,15 @@
 import React, {useCallback, useState} from 'react';
 
-import CustomInput from "../../UIComponents/customInput/CustomInput.tsx";
-import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox.tsx";
+import CustomInput from "../../UIComponents/customInput/CustomInput";
+import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox";
 
 import {useNavigate} from "react-router-dom"
 import {useForm} from "react-hook-form";
 
 import {observer} from "mobx-react-lite";
 
-import authStore from "../../store/authStore.ts";
-import auth from "../../utils/auth.ts";
+import authStore from "../../store/authStore";
+import auth from "../../utils/auth";
 import Starfield from "react-starfield";
 
 export type FormValues = {
@@ -29,7 +29,6 @@ const AuthForm: React.FC = observer(() => {
 
     const onHandleSubmit = useCallback((data: { login: string, password: string }) => {
         authStore.signIn(data.login, data.password).then(() => navigateTo('/map'))
-        console.log(data.login, data.password)
     }, [navigateTo])
 
     return (

diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -54,7 +54,7 @@ const MapMenu: React.FC = observer(() => {
                 speedFactor={0.05}
                 backgroundColor="black"
             />
-            {user?.is_superuser
+            {!user?.is_superuser
                 ? <SuperUserMap/>
                 : <EmployeeMap user={user} formattedDate={formattedDate}/>
             }

diff --git a/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx b/frontend/src/components/mapMenu/SuperUserMap/SuperUserMap.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+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";
@@ -8,6 +8,7 @@ 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";
 
 interface ISuperUserMap {
 
@@ -16,55 +17,74 @@ interface ISuperUserMap {
 const SuperUserMap: React.FC<ISuperUserMap> = observer(() => {
     const [isUsersListModalOpen, setIsUserListModalOpen] = useState<boolean>(false)
 
+    const [mapName, setMapName] = useState<string>("")
+    const [moduleName, setModuleName] = useState<string>("")
+    const [levelName, setLevelName] = useState<string>("")
+
     useEffect(() => {
         mapMenuStore.fetchAvailableMaps()
             .then(() => mapMenuStore.fetchMapById(mapMenuStore.availableMaps[mapMenuStore.currentMapIndex].id)
                 .then(() => moduleMenuStore.fetchModules()))
     }, []);
 
-    function handleOnClickOptionMap(map: IMapType, indexMap: number) {
+    const handleOnClickOptionMap = useCallback((map: IMapType, indexMap: number) => {
         mapMenuStore.selectMap(map).then(() => mapMenuStore.changeCurrentMapIndex(indexMap))
-    }
+    }, [])
 
-    function handleOnClickChangeIsModalOpen() {
+    const handleOnClickChangeIsModalOpen = useCallback(() => {
         setIsUserListModalOpen(!isUsersListModalOpen)
-    }
-
+    }, [isUsersListModalOpen])
 
     return (
         <div>
-            {isUsersListModalOpen
-                ? <ModalWindow
-                    onClose={handleOnClickChangeIsModalOpen}
-                    body={<UsersListModalBody users={superUserStore.allUsers}/>}
-                    windowContentStyles=""
-                />
-                : ""}
-            <CustomButton handleOnClick={handleOnClickChangeIsModalOpen} text="Открыть список сотрудников"/>
-            <select>
-                {superUserStore.allUsers.map((user) =>
-                    <option key={user.username} value={user.username}>{user.username}</option>)}
-            </select>
+            {
+                isUsersListModalOpen
+                    ? <ModalWindow
+                        onClose={handleOnClickChangeIsModalOpen}
+                        body={<UsersListModalBody users={superUserStore.allUsers}/>}
+                        windowContentStyles=""
+                    />
+                    : null
+            }
+
+
+            <CustomButton additionalClassName="users-list__btn" handleOnClick={handleOnClickChangeIsModalOpen}
+                          text="Открыть список сотрудников"/>
+
+            {/*<select>*/}
+            {/*    {superUserStore.allUsers.map((user) =>*/}
+            {/*        <option key={user.username} value={user.username}>{user.username}</option>)}*/}
+            {/*</select>*/}
 
             <div className="map-create">
+                <CustomInput
+                    type="text" value={mapMenuStore.newNameMap}
+                    handleOnChange={(e) => mapMenuStore.changeNewMapName(e)}
+                />
+                <CustomAddButton
+                    handleOnClick={() => mapMenuStore.createMap(mapMenuStore.newNameMap)}
+                />
+            </div>
+
+            <div className="module-create">
+                <CustomButton text="Создать новый модуль"
+                              handleOnClick={() => mapMenuStore.createMap(mapMenuStore.newNameMap)}/>
                 <CustomInput type="text" value={mapMenuStore.newNameMap}
                              handleOnChange={(e) => mapMenuStore.changeNewMapName(e)}/>
-                <CustomButton text="Создать новую карту"
-                              handleOnClick={() => mapMenuStore.createMap(mapMenuStore.newNameMap)}/>
             </div>
 
             <select className="available-maps">
                 {mapMenuStore.availableMaps?.map((map, index) =>
                     <option key={map.id} value={map.title}
                             onClick={() => handleOnClickOptionMap(map, index)}>{map.title}</option>)}
-                <CustomButton text="Удалить выбранную карту" additionalClassName="delete-map__btn"
-                              handleOnClick={() => mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)}/>
             </select>
+            <CustomButton text="Удалить выбранную карту" additionalClassName="delete-map__btn"
+                          handleOnClick={() => mapMenuStore.deleteMap(mapMenuStore.mapMenu?.id)}/>
 
-            <select className="available-modules">
-                {moduleMenuStore.availableModules.map((module) =>
-                    <option key={module.id} value={module.title}>{module.title}</option>)}
-            </select>
+            {/*<select className="available-modules">*/}
+            {/*    {moduleMenuStore.availableModules.map((module) =>*/}
+            {/*        <option key={module.id} value={module.title}>{module.title}</option>)}*/}
+            {/*</select>*/}
         </div>
     );
 });

diff --git a/frontend/src/store/mapMenuStore.ts b/frontend/src/store/mapMenuStore.ts
@@ -48,8 +48,8 @@ class MapMenuStore {
                 id: level.id,
                 title: level.title,
                 body: level.body,
-                theoryUnits: level.theory_units,
-                taskUnits: level.task_units
+                theoryUnits: level.theoryUnits,
+                taskUnits: level.taskUnits,
             }
         })
     }
@@ -107,7 +107,7 @@ class MapMenuStore {
     // Для суперпользователя
 
     createMap(mapName: string) {
-        axios.post("http://localhost:8000/maps/", {title: mapName}).then()
+        axios.post("http://localhost:8000/maps/", {title: mapName}).then(() => this.fetchAvailableMaps())
         this.newNameMap = ""
     }
 
@@ -127,7 +127,7 @@ class MapMenuStore {
 
     deleteMap(mapId?: string) {
         axios.delete("http://localhost:8000/maps/" + mapId)
-            .then()
+            .then(() => this.fetchAvailableMaps())
             .catch(() => alert("Выбрана несуществующая карта"))
     }
 }

diff --git a/frontend/src/styles/mapMenu.scss b/frontend/src/styles/mapMenu.scss
@@ -157,3 +157,14 @@
   right: 10%;
   top: 5%;
 }
+
+.users-list__btn {
+  margin-bottom: 10px;
+}
+
+.map-create {
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  gap: 10px;
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -2,18 +2,21 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
+    "esModuleInterop": true,
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -24,5 +27,9 @@
   "include": [
     "src"
   ],
-  "references": [{ "path": "./tsconfig.node.json"}]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }