-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat/admin tabs layout improvements (#125)
* feat: add skeleton, table layout, fix bucket creation bug * Fix: manual alert dialog control * feat: improve selector, general layout fixes
- Loading branch information
1 parent
effb140
commit 76980fc
Showing
14 changed files
with
300 additions
and
193 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
apps/frontend/src/modules/admin/components/AdminTabSelector.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import { useNavigate } from "@tanstack/react-router"; | ||
import { TrashIcon, UserIcon } from '@heroicons/react/24/solid'; | ||
import { cn } from "../../../../@/lib/utils"; | ||
import { FC, useMemo } from "react"; | ||
|
||
interface AdminTabSelectorProps { | ||
currentlySelected: 'bucket' | 'user' | 'none'; | ||
} | ||
|
||
export const AdminTabSelector: FC<AdminTabSelectorProps> = ({ currentlySelected }) => { | ||
const navigate = useNavigate(); | ||
|
||
const bucketSelected = useMemo(() => currentlySelected === 'bucket', [currentlySelected]); | ||
|
||
const userSelected = useMemo(() => currentlySelected === 'user', [currentlySelected]); | ||
|
||
return ( | ||
<div className="flex justify-center items-center gap-4"> | ||
<div | ||
onClick={() => | ||
navigate({ | ||
to: '/admin/user', | ||
}) | ||
} | ||
className={cn("flex flex-col items-center gap-2 p-4 bg-primary-foreground rounded-md border border-primary cursor-pointer", userSelected && 'bg-muted border-accent pointer-events-none')} | ||
> | ||
<UserIcon className={cn("w-7 h-7 pointer-events-none", userSelected && "text-secondary-foreground")}></UserIcon> | ||
<p className="text-primary pointer-events-none">Users</p> | ||
</div> | ||
<div | ||
onClick={() => | ||
navigate({ | ||
to: '/admin/bucket', | ||
}) | ||
} | ||
className={cn("flex flex-col items-center gap-2 p-4 bg-primary-foreground rounded-md border border-primary cursor-pointer", bucketSelected && 'bg-muted border-accent pointer-events-none')} | ||
> | ||
<TrashIcon className={cn("w-7 h-7 pointer-events-none", bucketSelected && "text-secondary-foreground")}></TrashIcon> | ||
<p className="text-primary pointer-events-none">Buckets</p> | ||
</div> | ||
</div> | ||
) | ||
} |
66 changes: 66 additions & 0 deletions
66
apps/frontend/src/modules/admin/components/BucketTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { useQuery } from "@tanstack/react-query"; | ||
import { bucketTableColumns } from "../../bucket/components/bucketTableColumns/bucketTableColumns" | ||
import { DataTable } from "../../common/components/dataTable/dataTable" | ||
import { adminFindBucketsQueryOptions } from "../../bucket/api/admin/queries/adminFindBuckets/adminFindBucketsQueryOptions"; | ||
import { useMemo, useState } from "react"; | ||
import { userAccessTokenSelector, useUserTokensStore } from "../../core/stores/userTokens/userTokens"; | ||
import { DataSkeletonTable } from "../../common/components/dataTable/dataTableSkeleton"; | ||
|
||
|
||
|
||
export const BucketTable = () => { | ||
const accessToken = useUserTokensStore(userAccessTokenSelector); | ||
const [page, setPage] = useState(0); | ||
const [pageSize] = useState(10); | ||
|
||
const { data: buckets, isFetching } = useQuery({ | ||
...adminFindBucketsQueryOptions({ | ||
accessToken, | ||
page, | ||
pageSize, | ||
}), | ||
}); | ||
|
||
const pageCount = useMemo(() => { | ||
return buckets?.metadata.totalPages; | ||
}, [buckets?.metadata.totalPages]); | ||
|
||
const skeletonSizes = [{ | ||
width: '8', | ||
height: '8' | ||
}, { | ||
width: 'full', | ||
height: '10', | ||
}, { | ||
width: 'full', | ||
height: '10' | ||
}]; | ||
|
||
return ( | ||
<> | ||
{ isFetching && | ||
<DataSkeletonTable | ||
columns={bucketTableColumns} | ||
skeletonSizes={skeletonSizes} | ||
pageIndex={page} | ||
pageCount={pageCount} | ||
pageSize={pageSize} | ||
onPreviousPage={() => setPage(page - 1)} | ||
onNextPage={() => setPage(page + 1)} | ||
/> | ||
} | ||
{ !isFetching && | ||
<DataTable | ||
columns={bucketTableColumns} | ||
data={buckets?.data ?? []} | ||
pageIndex={page} | ||
pageCount={pageCount} | ||
pageSize={pageSize} | ||
filterLabel="Filter bucket name..." | ||
onPreviousPage={() => setPage(page - 1)} | ||
onNextPage={() => setPage(page + 1)} | ||
/> | ||
} | ||
</> | ||
) | ||
} |
19 changes: 19 additions & 0 deletions
19
apps/frontend/src/modules/admin/components/BucketTopBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { useState } from "react"; | ||
import { CreateBucketDialog } from "../../bucket/components/createBucketDialog/createBucketDialog" | ||
import { AdminTabSelector } from "./AdminTabSelector" | ||
|
||
export const BucketTopBar = () => { | ||
const [createBucketDialogOpen, setCreateBucketDialogOpen] = useState(false); | ||
|
||
return ( | ||
<div className="max-w-[40rem] md:max-w-screen-xl md:min-w-[50rem] flex flex-col w-full justify-center items-center px-4"> | ||
<AdminTabSelector currentlySelected="bucket" /> | ||
<div className="pt-4 w-full"> | ||
<CreateBucketDialog | ||
dialogOpen={createBucketDialogOpen} | ||
onOpenChange={setCreateBucketDialogOpen} | ||
/> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { useQuery } from "@tanstack/react-query"; | ||
import { DataTable } from "../../common/components/dataTable/dataTable" | ||
import { userTableColumns } from "../../user/components/userTableColumns/userTableColumns" | ||
import { adminFindUsersQueryOptions } from "../../user/api/admin/queries/findUsersQuery/findUsersQueryOptions"; | ||
import { userAccessTokenSelector, useUserTokensStore } from "../../core/stores/userTokens/userTokens"; | ||
import { useState } from "react"; | ||
import { DataSkeletonTable } from "../../common/components/dataTable/dataTableSkeleton"; | ||
|
||
export const UserTable = () => { | ||
const [page, setPage] = useState(0); | ||
const [pageSize] = useState(10); | ||
|
||
const accessToken = useUserTokensStore(userAccessTokenSelector); | ||
const { data: users, isFetching } = useQuery({ | ||
...adminFindUsersQueryOptions({ | ||
accessToken: accessToken as string, | ||
}), | ||
}); | ||
|
||
const skeletonSizes = [{ | ||
width: '8', | ||
height: '8' | ||
}, { | ||
width: 'full', | ||
height: '10', | ||
}, { | ||
width: 'full', | ||
height: '10' | ||
}, { | ||
width: 'full', | ||
height: '10' | ||
}]; | ||
|
||
return ( | ||
<> | ||
{!isFetching && <DataTable | ||
columns={userTableColumns} | ||
data={users?.data ?? []} | ||
pageCount={1} | ||
pageIndex={page} | ||
pageSize={pageSize} | ||
onPreviousPage={() => setPage(page - 1)} | ||
onNextPage={() => setPage(page + 1)} | ||
/>} | ||
{isFetching && <DataSkeletonTable | ||
columns={userTableColumns} | ||
pageSize={pageSize} | ||
skeletonSizes={skeletonSizes} | ||
/>} | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { useState } from "react"; | ||
import { CreateUserDialog } from "../../user/components/createUserDialog/createUserDialog" | ||
import { AdminTabSelector } from "./AdminTabSelector" | ||
|
||
|
||
export const UserTopBar = () => { | ||
const [createUserDialogOpen, setCreateUserDialogOpen] = useState(false); | ||
|
||
return ( | ||
<div className="max-w-[40rem] md:max-w-screen-xl md:min-w-[50rem] flex flex-col w-full justify-center items-center px-4"> | ||
<AdminTabSelector currentlySelected="user" /> | ||
<div className="pt-4 w-full"> | ||
<CreateUserDialog | ||
onOpenChange={setCreateUserDialogOpen} | ||
open={createUserDialogOpen} | ||
/> | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.