diff --git a/client-app/src/components/AdminLayout/.module.css b/client-app/src/components/AdminLayout/.module.css index 86822be..8c03002 100644 --- a/client-app/src/components/AdminLayout/.module.css +++ b/client-app/src/components/AdminLayout/.module.css @@ -1,8 +1,12 @@ -.main { - position: relative; - background-color: rgba(70, 78, 120, 0.16); - height: 10vh; - z-index: 1; +.admin_space { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: grid; + grid-template-columns: 73px 1fr; + transition: 0.5s; } .log_out_panel { @@ -54,101 +58,277 @@ background-color: rgb(224, 224, 162); } -.logo { +.navigation { + position: absolute; + top: 0; + bottom: 0; + left: 0; + background-color: rgb(120, 120, 255); + width: 73px; + overflow-y: auto; + z-index: 1; + transition: 0.5s; +} + +.navigation_opened { + width: 230px; +} + +.navigation::-webkit-scrollbar { + display: none; +} + +.top_nav_panel { + position: relative; + width: 100%; + height: 90px; +} + +.menu_img { cursor: pointer; position: absolute; + left: 19px; top: 50%; - left: 1vw; - transform: translateY(-60%); - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 2.445vw; - font-weight: bold; - color: blue; + transform: translateY(-50%); + width: 35px; + border-radius: 50px; + content: url(./img/menu.png); + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + transition: 0.5s; } -.logo:hover { - color: rgb(97, 115, 255); +.menu_img_rotated { + transform: translateY(-50%) rotate(180deg); } -.page_list { +.app_name { + cursor: default; position: absolute; - display: flex; + left: 68px; top: 50%; - left: 17vw; transform: translateY(-50%); + color: white; + background-color: rgb(0, 26, 141); + border-radius: 10px; + padding-inline: 5px; + padding-block: 5px; + font-size: 33px; + font-weight: 600; + white-space: nowrap; + opacity: 0; + transition: 0.5s; + } -.menu_container { +.app_name_visible { + opacity: 1; +} + +.page_collection { position: relative; + width: 100%; } -.var { - user-select: none; - border: 0.5vh solid rgba(0, 0, 0, 0); - border-radius: 5px; - cursor: pointer; - font-family: sans-serif; - font-size: 2vw; - font-weight: 600; - color: rgb(128, 0, 255); +.theme_separate_line_cont { + position: relative; + width: 100%; +} + +.theme_separate_line_cont:first-child { + padding-bottom: 14px; +} + +.theme_separate_line_cont:not(:first-child) { + padding-block: 14px; } -.var:hover { - border-color: rgb(128, 0, 255); +.theme_separate_line { + position: absolute; + left: 8px; + right: 8px; + height: 1px; + background-color: white; } -.items { +.sep_theme_text { position: absolute; - top: 5vh; - text-align: center; - background-color: rgb(255, 242, 224); - border-radius: 1vh; - -webkit-box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.75); - -moz-box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.75); - box-shadow: 0px 0px 21px -5px rgba(0,0,0,0.75); + display: none; } -.items .comp { - border: 0.5vh solid rgba(0, 0, 0, 0); +.pages { + width: 100%; +} + +.page { cursor: pointer; - color: rgb(122, 42, 165); - font-family: sans-serif; + position: relative; + width: 100%; + height: 70px; +} + +.page:hover { + background-color: rgb(0, 51, 255); +} + +.page_img { + position: absolute; + left: 16px; + top: 50%; + transform: translateY(-50%); + width: 40px; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.sys_info_img { + content: url(./img/system-info.png); +} + +.objects_img { + content: url(./img/objects.png); +} + +.devices_img { + content: url(./img/devices.png); +} + +.rooms_img { + content: url(./img/rooms.png); +} + +.schedules_img { + content: url(./img/schedules.png); +} + +.scripts_img { + content: url(./img/scripts.png); +} + +.triggers_img { + content: url(./img/triggers.png); +} + +.repositories_img { + content: url(./img/repositories.png); +} + +.installed_ext_img { + content: url(./img/installed-ext.png); +} + +.users_img { + content: url(./img/users.png); +} + +.page_name { + position: absolute; + left: 68px; + top: 50%; + transform: translateY(-50%); + color: white; + font-size: 25px; font-weight: 600; - font-size: 3vh; - padding-left: 1vw; - padding-right: 1vw; - border-radius: 0.6vh; - text-decoration: none; + white-space: nowrap; + opacity: 0; + transition: 0.5s; +} + +.page_name_visible { + opacity: 1; } -.items .comp:hover { - border-color: rgb(122, 42, 165); +.top_menu { + position: absolute; + left: 0; + right: 0; + background-color: rgba(70, 78, 120, 0.16); + height: 90px; } -.page_list .menu_container:not(:last-child) { - margin-right: 4vw; +.content { + position: relative; + overflow-y: auto; + overflow-x: hidden; } -.log_out { +.content::-webkit-scrollbar { + width: 7px; +} + +.content::-webkit-scrollbar-track { + background-color: aquamarine; +} + +.content::-webkit-scrollbar-thumb { + background-color: #0036a3; + border-radius: 10px; +} + +.page_header { + cursor: default; + position: absolute; + top: 50%; + transform: translateY(-58%); + margin-left: 20px; + color: #0036a3; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 40px; + width: fit-content; +} + +.logo { + cursor: default; + position: absolute; + top: 50%; + transform: translateY(-55%); + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 40px; + font-weight: bold; + padding: 0; + color: rgb(34, 34, 255); +} + +.go_to_home_page_button { cursor: pointer; position: absolute; - border: 0.5vh solid blue; - border-radius: 1vh; - padding: 0.8vh; - height: 5.5vh; - width: 2.75vw; - top: 1.2vh; - background-color: rgb(207, 238, 207); - right: 2.5vw; + right: 120px; + top: 50%; + transform: translateY(-50%); + content: url(./img/home-page.png); + background-color: rgb(206, 238, 194); + border: 4px solid blue; + border-radius: 10px; + padding: 5px; + width: 50px; -moz-user-select: none; -webkit-user-select: none; user-select: none; } -.log_out:hover { +.go_to_home_page_button:hover { background-color: aquamarine; } -.active_link { - background-color: rgb(242, 255, 56); +.log_out_button { + cursor: pointer; + position: absolute; + right: 30px; + top: 50%; + transform: translateY(-50%); + content: url(./img/log-out.png); + background-color: rgb(223, 207, 238); + border: 4px solid blue; + border-radius: 10px; + padding: 5px; + width: 50px; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.log_out_button:hover { + background-color: aquamarine; } \ No newline at end of file diff --git a/client-app/src/components/AdminLayout/AdminLayout.tsx b/client-app/src/components/AdminLayout/AdminLayout.tsx index 78fb058..702daf6 100644 --- a/client-app/src/components/AdminLayout/AdminLayout.tsx +++ b/client-app/src/components/AdminLayout/AdminLayout.tsx @@ -1,16 +1,27 @@ import React from "react"; import { Outlet, useNavigate } from "react-router-dom"; +import { ApiExtensions } from "../../services/api/extensions"; import { ApiAuth } from "../../services/api/auth"; import cl from './.module.css'; import Space from "../Space/Space"; import ModalWindow from "../ModalWindow/ModalWindow"; -import logOutPng from './img/log-out.png'; + +type ShortExtensionInfo = { + id: string, + name: string, + url: string +} const AdminLayout = () => { + const [chosenMenu, openMenu] = React.useState(undefined); - const [isModWinVisible, setModWinVisibility] = React.useState(false); + const [isInstalledExtMenuOpened, installedExtMenuState] = React.useState(false); + const [isNavMenuOpened, setNavMenuState] = React.useState(false); + const [isModWinVisible, setModWinVisibility] = React.useState(false); + const [extensionList, setExtensionList] = React.useState>([]); const navigate = useNavigate(); + const authPageNavigate = () => { ApiAuth.signOut().then(() => { navigate('/auth'); @@ -21,84 +32,177 @@ const AdminLayout = () => { openMenu(undefined); navigate(path); } - - function WindowClickEvent(event: any) { - var elements = document.getElementsByClassName(cl.var) - - if (chosenMenu !== undefined) { - for (var i = 0; i < elements.length; i++) { - if (elements[i].contains(event.target)) { - return; - } + + function GetTitle() { + var path = window.location.pathname; + + if (path === "/admin") { + return "System information"; + } + + if (path === "/admin/objects") { + return "Objects"; + } + if (path.includes("/admin/objects/")) { + if (path.includes("/add")) { + return "Objects - new object"; + } + else { + return "Objects - editing object"; } + } + + if (path === "/admin/scripts") { + return "Scripts"; + } + if (path.includes("/admin/scripts/")) { + if (path.includes("/add")) { + return "Scripts - new script"; + } + else { + return "Scripts - editing script"; + } + } - openMenu(undefined); + if (path === "/admin/users") { + return "Users"; } + if (path.includes("/admin/users/")) { + if (path.includes("/add")) { + return "Users - new user"; + } + else { + return "Users - editing user"; + } + } + + return "UNDEFINED LOCATION"; } - React.useEffect(() => { - window.addEventListener("click", WindowClickEvent); + function RenderInstalledExtensions() { + var result: Array = []; + + extensionList.map((el) => { + result.push( +
+

{ if (el.url) { window.location.href = el.url } }}>{el.name}

+
+ ); + }); + + return result; + } - return () => { - window.removeEventListener("click", WindowClickEvent); - }; + React.useEffect(() => { + ApiExtensions.getExtensions().then((res) => { + setExtensionList([...res]); + }); }); return ( - <> -
- -
-

Do you want to log out?

- -
- - -
+
+
+
- - + + +
+
+ +
+

Do you want to log out?

+ +
+ + +
+
+ +

{GetTitle()}

+ navigate("/")} /> + setModWinVisibility(true)} title="Log out" alt="log out" /> +
+ + +
+ ); } diff --git a/client-app/src/components/AdminLayout/img/devices.png b/client-app/src/components/AdminLayout/img/devices.png new file mode 100644 index 0000000..27cd31a Binary files /dev/null and b/client-app/src/components/AdminLayout/img/devices.png differ diff --git a/client-app/src/components/AdminLayout/img/home-page.png b/client-app/src/components/AdminLayout/img/home-page.png new file mode 100644 index 0000000..97dabfe Binary files /dev/null and b/client-app/src/components/AdminLayout/img/home-page.png differ diff --git a/client-app/src/components/AdminLayout/img/installed-ext.png b/client-app/src/components/AdminLayout/img/installed-ext.png new file mode 100644 index 0000000..911daeb Binary files /dev/null and b/client-app/src/components/AdminLayout/img/installed-ext.png differ diff --git a/client-app/src/components/AdminLayout/img/menu.png b/client-app/src/components/AdminLayout/img/menu.png new file mode 100644 index 0000000..588093b Binary files /dev/null and b/client-app/src/components/AdminLayout/img/menu.png differ diff --git a/client-app/src/components/AdminLayout/img/objects.png b/client-app/src/components/AdminLayout/img/objects.png new file mode 100644 index 0000000..f33eeb0 Binary files /dev/null and b/client-app/src/components/AdminLayout/img/objects.png differ diff --git a/client-app/src/components/AdminLayout/img/repositories.png b/client-app/src/components/AdminLayout/img/repositories.png new file mode 100644 index 0000000..e099027 Binary files /dev/null and b/client-app/src/components/AdminLayout/img/repositories.png differ diff --git a/client-app/src/components/AdminLayout/img/rooms.png b/client-app/src/components/AdminLayout/img/rooms.png new file mode 100644 index 0000000..c842dda Binary files /dev/null and b/client-app/src/components/AdminLayout/img/rooms.png differ diff --git a/client-app/src/components/AdminLayout/img/schedules.png b/client-app/src/components/AdminLayout/img/schedules.png new file mode 100644 index 0000000..c27bfa0 Binary files /dev/null and b/client-app/src/components/AdminLayout/img/schedules.png differ diff --git a/client-app/src/components/AdminLayout/img/scripts.png b/client-app/src/components/AdminLayout/img/scripts.png new file mode 100644 index 0000000..66d0039 Binary files /dev/null and b/client-app/src/components/AdminLayout/img/scripts.png differ diff --git a/client-app/src/components/AdminLayout/img/settings.png b/client-app/src/components/AdminLayout/img/settings.png deleted file mode 100644 index 871978b..0000000 Binary files a/client-app/src/components/AdminLayout/img/settings.png and /dev/null differ diff --git a/client-app/src/components/AdminLayout/img/system-info.png b/client-app/src/components/AdminLayout/img/system-info.png new file mode 100644 index 0000000..7d67663 Binary files /dev/null and b/client-app/src/components/AdminLayout/img/system-info.png differ diff --git a/client-app/src/components/AdminLayout/img/triggers.png b/client-app/src/components/AdminLayout/img/triggers.png new file mode 100644 index 0000000..f11430d Binary files /dev/null and b/client-app/src/components/AdminLayout/img/triggers.png differ diff --git a/client-app/src/components/AdminLayout/img/users.png b/client-app/src/components/AdminLayout/img/users.png new file mode 100644 index 0000000..f972200 Binary files /dev/null and b/client-app/src/components/AdminLayout/img/users.png differ diff --git a/client-app/src/pages/AuthorizationPage/AuthorizationPage.tsx b/client-app/src/pages/AuthorizationPage/AuthorizationPage.tsx index e9807dd..a2923d2 100644 --- a/client-app/src/pages/AuthorizationPage/AuthorizationPage.tsx +++ b/client-app/src/pages/AuthorizationPage/AuthorizationPage.tsx @@ -24,6 +24,7 @@ const AuthorizationPage = () => { break; default: setLogInErr("authorization failed"); + (document.getElementsByClassName(cl.password)[0] as HTMLInputElement).value = ""; break; } }); @@ -51,8 +52,23 @@ const AuthorizationPage = () => { return null; } + function WindowKeyPressEvent(event: KeyboardEvent) { + var userInput = document.getElementsByClassName(cl.user)[0] as HTMLInputElement; + var passwordInput = document.getElementsByClassName(cl.password)[0] as HTMLInputElement; + + if (event.key === "Enter" && (document.activeElement === userInput || document.activeElement === passwordInput)) { + SignInRequest(userInput.value, passwordInput.value); + } + } + React.useEffect(() => { document.body.style.backgroundColor = 'white'; + + window.addEventListener("keypress", WindowKeyPressEvent); + + return () => { + window.removeEventListener("keypress", WindowKeyPressEvent); + }; }, []); return ( diff --git a/client-app/src/pages/HomePage/.module.css b/client-app/src/pages/HomePage/.module.css index 61778b3..cb3b42a 100644 --- a/client-app/src/pages/HomePage/.module.css +++ b/client-app/src/pages/HomePage/.module.css @@ -49,7 +49,7 @@ .top_menu { background-color: rgba(70, 78, 120, 0.16); - height: 10vh; + height: 90px; -moz-user-select: none; -webkit-user-select: none; user-select: none; diff --git a/client-app/src/pages/ObjectEditPage/.module.css b/client-app/src/pages/ObjectEditPage/.module.css index 8432220..64c187d 100644 --- a/client-app/src/pages/ObjectEditPage/.module.css +++ b/client-app/src/pages/ObjectEditPage/.module.css @@ -1,10 +1,3 @@ -.page_header { - color: #0036a3; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 45px; - text-align: center; -} - .add_prop_button { border: 1px solid black; border-radius: 5px; diff --git a/client-app/src/pages/ObjectEditPage/ObjectEditPage.tsx b/client-app/src/pages/ObjectEditPage/ObjectEditPage.tsx index 6663530..d408c3f 100644 --- a/client-app/src/pages/ObjectEditPage/ObjectEditPage.tsx +++ b/client-app/src/pages/ObjectEditPage/ObjectEditPage.tsx @@ -258,7 +258,6 @@ const ObjectEditPage = () => { return (
-

{id === 'add' ? 'New object' : 'Object editing'}

diff --git a/client-app/src/pages/ObjectListPage/.module.css b/client-app/src/pages/ObjectListPage/.module.css index ce2224f..c645057 100644 --- a/client-app/src/pages/ObjectListPage/.module.css +++ b/client-app/src/pages/ObjectListPage/.module.css @@ -57,11 +57,10 @@ outline: none; } -.page_header { - color: #0036a3; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 45px; - text-align: center; +.list_control_panel { + position: relative; + display: flex; + padding-left: 1.5%; } .sort_objects_button { @@ -75,6 +74,25 @@ padding: 1px; } -.adder:hover { - background-color: cyan; +.add_object_button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 130px; + background-color: rgb(214, 214, 214); + border: 2px solid black; + border-radius: 10px; + font-size: 22px; +} + +.add_object_button:hover { + border: 2px solid blue; + background-color: aquamarine; +} + +.start_object_line { + position: absolute; + left: 0; + right: 0; } \ No newline at end of file diff --git a/client-app/src/pages/ObjectListPage/ObjectListPage.tsx b/client-app/src/pages/ObjectListPage/ObjectListPage.tsx index f63c65f..9449cc8 100644 --- a/client-app/src/pages/ObjectListPage/ObjectListPage.tsx +++ b/client-app/src/pages/ObjectListPage/ObjectListPage.tsx @@ -3,7 +3,6 @@ import { ApiObjects } from "../../services/api/objects"; import { useNavigate } from "react-router-dom"; import cl from "./.module.css"; import ObjectSection from "../../components/ObjectSection/ObjectSection"; -import ItemsContainer from "../../components/ItemsContainer/ItemsContainer"; import CustomTextarea from "../../components/CustomTextarea/CustomTextarea"; import ModalWindow from "../../components/ModalWindow/ModalWindow"; import Space from "../../components/Space/Space"; @@ -141,21 +140,6 @@ const ObjectListPage = () => { onRemoveClick={() => DeleteObjectRequest(fixedObjects[i].id)} />); } - rendered.push(
  • navToEditObject('add', '')}> - Add new object
    • - ); - return rendered; } @@ -186,16 +170,19 @@ const ObjectListPage = () => {
    -

    Object list

    - - + +

    setSortMode(prev => { return !prev; })}>{`A ${sortByAsc ? '⇧' : '⇩'}`}

    ) => ChangeSearchValue(e.target.value)} /> - -
      -
      - + +
      navToEditObject('add', '')}> +

      Add object

      +
      +
    + +
      +
      {RenderObjects()}
    diff --git a/client-app/src/pages/ScriptEditPage/.module.css b/client-app/src/pages/ScriptEditPage/.module.css index e0f8352..2858094 100644 --- a/client-app/src/pages/ScriptEditPage/.module.css +++ b/client-app/src/pages/ScriptEditPage/.module.css @@ -1,10 +1,3 @@ -.page_header { - color: #0036a3; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 45px; - text-align: center; -} - .select_list_header { font-size: 16px; } diff --git a/client-app/src/pages/ScriptEditPage/ScriptEditPage.tsx b/client-app/src/pages/ScriptEditPage/ScriptEditPage.tsx index effcf13..1fc483c 100644 --- a/client-app/src/pages/ScriptEditPage/ScriptEditPage.tsx +++ b/client-app/src/pages/ScriptEditPage/ScriptEditPage.tsx @@ -358,7 +358,6 @@ const ScriptEditPage = () => { return (
    -

    {id === 'add' ? 'New script' : 'Script editing'}

    diff --git a/client-app/src/pages/ScriptListPage/.module.css b/client-app/src/pages/ScriptListPage/.module.css index 667f033..f8b7a81 100644 --- a/client-app/src/pages/ScriptListPage/.module.css +++ b/client-app/src/pages/ScriptListPage/.module.css @@ -103,11 +103,27 @@ background-color: rgb(158, 11, 11); } -.page_header { - color: #0036a3; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 45px; - text-align: center; +.list_control_panel { + position: relative; + display: flex; + padding-left: 2%; +} + +.add_script_button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 130px; + background-color: rgb(214, 214, 214); + border: 2px solid black; + border-radius: 10px; + font-size: 22px; +} + +.add_script_button:hover { + border: 2px solid blue; + background-color: aquamarine; } .script_record { diff --git a/client-app/src/pages/ScriptListPage/ScriptListPage.tsx b/client-app/src/pages/ScriptListPage/ScriptListPage.tsx index 7b90cee..9cbbd5a 100644 --- a/client-app/src/pages/ScriptListPage/ScriptListPage.tsx +++ b/client-app/src/pages/ScriptListPage/ScriptListPage.tsx @@ -2,12 +2,11 @@ import React from "react"; import { useNavigate } from "react-router-dom"; import { ApiScripts } from "../../services/api/scripts"; import cl from "./.module.css"; -import InputBox from "../../components/InputBox/InputBox"; -import ItemsContainer from "../../components/ItemsContainer/ItemsContainer"; import ModalWindow from "../../components/ModalWindow/ModalWindow"; import Space from "../../components/Space/Space"; import TableHeader from "../../components/TableHeader/TableHeader"; import LoadingAnimation from "../../components/LoadingAnimation/LoadingAnimation"; +import CustomTextarea from "../../components/CustomTextarea/CustomTextarea"; type SortMode = { parameter: string, @@ -208,15 +207,15 @@ const ScriptListPage = () => {
    -

    Script list

    - - setSearch(e.value)} placeholder="Search" /> -
    - - navToAddScript()} /> + +
    + ) => setSearch(e.target.value)} /> + +
    navToAddScript()}> +

    Add script

    - - +
    +
    { return (
    -

    System information

    ); } diff --git a/client-app/src/pages/UserEditPage/.module.css b/client-app/src/pages/UserEditPage/.module.css index 8c744ff..e69de29 100644 --- a/client-app/src/pages/UserEditPage/.module.css +++ b/client-app/src/pages/UserEditPage/.module.css @@ -1,6 +0,0 @@ -.page_header { - color: #0036a3; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 45px; - text-align: center; -} \ No newline at end of file diff --git a/client-app/src/pages/UserEditPage/UserEditPage.tsx b/client-app/src/pages/UserEditPage/UserEditPage.tsx index 08e4542..1dac295 100644 --- a/client-app/src/pages/UserEditPage/UserEditPage.tsx +++ b/client-app/src/pages/UserEditPage/UserEditPage.tsx @@ -213,7 +213,6 @@ const UserEditPage = () => { return ( -

    {username === 'add' ? 'New user' : 'User editing'}

    diff --git a/client-app/src/pages/UserListPage/.module.css b/client-app/src/pages/UserListPage/.module.css index 060203a..be5adc2 100644 --- a/client-app/src/pages/UserListPage/.module.css +++ b/client-app/src/pages/UserListPage/.module.css @@ -57,11 +57,27 @@ outline: none; } -.page_header { - color: #0036a3; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 45px; - text-align: center; +.list_control_panel { + position: relative; + display: flex; + padding-left: 2%; +} + +.add_user_button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 130px; + background-color: rgb(214, 214, 214); + border: 2px solid black; + border-radius: 10px; + font-size: 22px; +} + +.add_user_button:hover { + border: 2px solid blue; + background-color: aquamarine; } .user_record { diff --git a/client-app/src/pages/UserListPage/UserListPage.tsx b/client-app/src/pages/UserListPage/UserListPage.tsx index 1ca9e1a..8dc5caf 100644 --- a/client-app/src/pages/UserListPage/UserListPage.tsx +++ b/client-app/src/pages/UserListPage/UserListPage.tsx @@ -2,12 +2,11 @@ import React from "react"; import { useNavigate } from 'react-router-dom'; import { ApiUsers } from "../../services/api/users"; import cl from "./.module.css"; -import ItemsContainer from "../../components/ItemsContainer/ItemsContainer"; -import InputBox from "../../components/InputBox/InputBox"; import TableHeader from "../../components/TableHeader/TableHeader"; import Space from "../../components/Space/Space"; import ModalWindow from "../../components/ModalWindow/ModalWindow"; import LoadingAnimation from "../../components/LoadingAnimation/LoadingAnimation"; +import CustomTextarea from "../../components/CustomTextarea/CustomTextarea"; type SortMode = { parameter: string, @@ -219,17 +218,15 @@ const UserListPage = () => {
    -

    User list

    - - setSearch(e.value)} placeholder="Search" /> - {(selfPermission?.user?.create ? -
    - - navToAddUser()} /> -
    - : "")} -     - + +
    + ) => setSearch(e.target.value)} /> + +
    navToAddUser()}> +

    Add user

    +
    +
    +