External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Correcting some bugs and working on responsive.

Browse Source
This commit is contained in:
charles-gauthereau
2024-11-23 18:54:47 +01:00
parent 761b4401fc
commit e770fcd1a9
7 changed files with 81 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/Dashboard/Settings/SettingsTabs/SettingsTabs.tsx
+8 -6
View File
@@ -17,12 +17,13 @@ export type SettingsTabsProps = {
export const SettingsTabs = (props: SettingsTabsProps) => {
return(
<Tabs defaultValue="informations" >
<TabsList className="w-full" >
<TabsTrigger className="w-full" value="informations">Informations</TabsTrigger>
<TabsTrigger className="w-full" value="users">Users</TabsTrigger>
<TabsTrigger className="w-full" value="email">Email</TabsTrigger>
<TabsTrigger className="w-full" value="storage">Storage</TabsTrigger>
<TabsList className="w-full">
<TabsTrigger className="w-full " value="informations">Info</TabsTrigger>
<TabsTrigger className="w-full " value="users">Users</TabsTrigger>
<TabsTrigger className="w-full " value="email">Email</TabsTrigger>
<TabsTrigger className="w-full " value="storage">Storage</TabsTrigger>
</TabsList>
<TabsContent value="informations">
<div className="flex flex-1 flex-col gap-4 py-4">
@@ -34,7 +35,7 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min"/>
</div>
</TabsContent>
<TabsContent value="users" className="h-full justify-between">
<TabsContent value="users" >
<SettingsUsersTab users={props.users}/>
</TabsContent>
<TabsContent value="email">
@@ -44,5 +45,6 @@ export const SettingsTabs = (props: SettingsTabsProps) => {
<SettingsStorageTab settings={props.settings}/>
</TabsContent>
</Tabs>
)
}
src/components/wrappers/Dashboard/Settings/SettingsUsersTab/SettingsUsersTab.tsx
+1
View File
@@ -9,6 +9,7 @@ export type SettingsUsersTabProps = {
export const SettingsUsersTab = (props: SettingsUsersTabProps) => {
return (
<div className="flex flex-col h-full py-4">
<div className="flex gap-4 h-fit justify-between">
<h1>List of Portabase users</h1>
src/components/wrappers/table/data-table.tsx
+44 -41
View File
@@ -7,47 +7,50 @@ export type dataTableProps = {
export const DataTable = ({table}: dataTableProps) => {
return (
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
)
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
<div className="rounded-md border w-full ">
<Table className="w-full">
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
)
})}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={table.getAllColumns().length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
)
}
src/components/wrappers/table/table-pagination-size.tsx
+7 -10
View File
@@ -8,26 +8,24 @@ export type tablePaginationSizeProps = {
pageSizeOptions?: number[]
}
export const TablePaginationSize = (props: tablePaginationSizeProps) => {
const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
const { className, table, pageSizeOptions = [10, 20, 30, 40, 50] } = props;
useEffect(() => {
table.setPageSize(Number(pageSizeOptions[0]))
table.setPageSize(Number(pageSizeOptions[0]));
}, []);
return (
<div className={cn("flex items-center justify-center space-x-2", className)}>
<div className={cn("flex items-center justify-end sm:justify-center space-x-2", className)}>
<p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
<Select
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value))
table.setPageSize(Number(value));
}}
>
<SelectTrigger className="h-8 w-[4.5rem]">
<SelectValue placeholder={table.getState().pagination.pageSize}/>
<SelectValue placeholder={table.getState().pagination.pageSize} />
</SelectTrigger>
<SelectContent side="top">
{pageSizeOptions.map((pageSize) => (
@@ -38,6 +36,5 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
</SelectContent>
</Select>
</div>
)
}
);
};
src/components/wrappers/table/table-pagination.tsx
+4 -4
View File
@@ -16,9 +16,9 @@ export function TablePagination(props: tablePaginationProps) {
const {className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50]} = props
return (
<div className={cn("flex mt-6", className)}>
<TablePaginationSize table={table} pageSizeOptions={pageSizeOptions}/>
<TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end"/>
<div className={cn("flex flex-col sm:flex-row mt-6", className)}>
<TablePaginationSize table={table} pageSizeOptions={pageSizeOptions} />
<TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-5 sm:mt-0" />
</div>
)
);
}