diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx index 5b285e031..fa759a8bb 100644 --- a/src/frontend/src/components/PaginatorComponent/index.tsx +++ b/src/frontend/src/components/PaginatorComponent/index.tsx @@ -12,17 +12,15 @@ import { Button } from "../ui/button"; export default function PaginatorComponent({ pageSize = 10, - pageIndex = 0, + pageIndex = 1, rowsCount = [10, 20, 50, 100], totalRowsCount = 0, paginate, }: PaginatorComponentType) { const [size, setPageSize] = useState(pageSize); - const [index, setPageIndex] = useState(pageIndex); const [maxIndex, setMaxPageIndex] = useState( Math.ceil(totalRowsCount / pageSize) ); - const [currentPage, setCurrentPage] = useState(1); useEffect(() => { setMaxPageIndex(Math.ceil(totalRowsCount / size)); @@ -39,8 +37,9 @@ export default function PaginatorComponent({ onValueChange={(pageSize: string) => { setPageSize(Number(pageSize)); setMaxPageIndex(Math.ceil(totalRowsCount / Number(pageSize))); - paginate(Number(pageSize), 0); + paginate(Number(pageSize), 1); }} + value={pageSize.toString()} > @@ -55,30 +54,25 @@ export default function PaginatorComponent({
- Page {currentPage} of {maxIndex} + Page {pageIndex} of {maxIndex}
- )} -
-
- { - handleNewUser(user); - }} - > - - -
- - {loadingUsers && ( -
- Loading... -
- )} -
- - - - Id - Username - Active - Superuser - Created At - Updated At - - - - {!loadingUsers && ( - - {filterUserList.map( - (user: UserInputType, index) => ( - - - - - {user.id} - - - - - - - {user.username} - - - - - { - handleDisableUser( - user.is_active, - user.id, - user - ); - }} - > - - - - - { - handleSuperUserEdit( - user.is_superuser, - user.id, - user - ); - }} - > - - - - - { - new Date(user.create_at!) - .toISOString() - .split("T")[0] - } - - - { - new Date(user.updated_at!) - .toISOString() - .split("T")[0] - } - - -
- { - handleEditUser(user.id, editUser); - }} - > - - - - - - { - handleDeleteUser(user); - }} - > - - - - -
- - - ) - )} - - )} -
-
- - { - handleChangePagination(pageSize, pageIndex); - }} - > - +
+ {userData && ( +
+
+ + + {ADMIN_HEADER_TITLE} + +
+ + {ADMIN_HEADER_DESCRIPTION} + +
+
+ handleFilterUsers(e.target.value)} + /> + {inputValue.length > 0 ? ( +
{ + setInputValue(""); + setFilterUserList(userList.current); + }} + > +
-
+ ) : ( +
+ +
+ )} +
+
+ { + handleNewUser(user); + }} + asChild + > + +
- )} - + {loadingUsers ? ( +
+ +
+ ) : userList.current.length === 0 ? ( + <> +
+ No users registered. +
+ + ) : ( + <> +
+ + + + Id + Username + Active + Superuser + Created At + Updated At + + + + {!loadingUsers && ( + + {filterUserList.map((user: UserInputType, index) => ( + + + + {user.id} + + + + + + {user.username} + + + + + { + handleDisableUser( + user.is_active, + user.id, + user + ); + }} + > + + + + + { + handleSuperUserEdit( + user.is_superuser, + user.id, + user + ); + }} + > + + + + + { + new Date(user.create_at!) + .toISOString() + .split("T")[0] + } + + + { + new Date(user.updated_at!) + .toISOString() + .split("T")[0] + } + + +
+ { + handleEditUser(user.id, editUser); + }} + > + + + + + + { + handleDeleteUser(user); + }} + > + + + + +
+ + + ))} + + )} +
+
+ + { + handleChangePagination(pageIndex, pageSize); + }} + > + + )} + + )} ); } diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index 685d81b05..9396cdc38 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -212,6 +212,10 @@ @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16; } + .admin-page-panel { + @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16; + } + .main-page-nav-arrangement { @apply flex-max-width justify-between px-6 py-12 pb-2; } @@ -228,6 +232,10 @@ @apply flex w-[60%] px-6 pb-14 text-muted-foreground; } + .admin-page-description-text { + @apply flex w-[80%] px-6 pb-8 text-muted-foreground; + } + .main-page-flows-display { @apply grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4; } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index b61ddf07d..511586de0 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -253,6 +253,7 @@ export type UserManagementType = { icon: string; data?: any; index?: number; + asChild?: boolean; onConfirm: (index, data) => void; }; @@ -548,5 +549,5 @@ export type fetchErrorComponentType = { export type dropdownButtonPropsType = { firstButtonName: string; onFirstBtnClick: () => void; - options: Array<{ name: string; onBtnClick: () => void; }>; + options: Array<{ name: string; onBtnClick: () => void }>; }; diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 87971ef9b..9d06de64c 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -255,7 +255,9 @@ export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) { } export function handleKeyDown( - e: React.KeyboardEvent, + e: + | React.KeyboardEvent + | React.KeyboardEvent, inputValue: string | string[] | null, block: string ) { diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index e74bb0e34..bea021dfc 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -58,6 +58,7 @@ import { Scissors, Search, Settings2, + Shield, Sparkles, SunIcon, TerminalSquare, @@ -260,6 +261,7 @@ export const nodeIconsLucide: iconsType = { Bell, ChevronLeft, ChevronDown, + Shield, Plus, Redo, Settings2,