pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-21 12:26:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve formatting in data tables

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-25 23:07:21 -05:00
parent 2312258468
commit 7c9e57ef12
12 changed files with 154 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/[orgId]/settings/access/components/AccessPageHeaderAndNav.tsx
View File

@@ -24,7 +24,7 @@ export default function AccessPageHeaderAndNav({
return (
<>
<SettingsSectionTitle
title="Users & Roles"
title="Manage Users & Roles"
description="Invite users and add them to roles to manage access to your
organization"
/>

32
src/app/[orgId]/settings/access/roles/components/RolesDataTable.tsx
View File

@@ -22,7 +22,7 @@ import {
import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
import { DataTablePagination } from "@app/components/DataTablePagination";
interface DataTableProps<TData, TValue> {
@@ -61,19 +61,23 @@ export function RolesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search roles"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search roles"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addRole) {

37
src/app/[orgId]/settings/access/users/components/UsersDataTable.tsx
View File

@@ -23,7 +23,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../../components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -61,20 +61,23 @@ export function UsersDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search users"
value={
(table
.getColumn("email")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("email")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search users"
value={
(table
.getColumn("email")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("email")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (inviteUser) {
@@ -98,7 +101,7 @@ export function UsersDataTable<TData, TValue>({
: flexRender(
header.column.columnDef
.header,
header.getContext()
header.getContext(),
)}
</TableHead>
);
@@ -119,7 +122,7 @@ export function UsersDataTable<TData, TValue>({
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</TableCell>
))}

2
src/app/[orgId]/settings/components/Header.tsx
View File

@@ -149,7 +149,7 @@ export default function Header({ email, orgId, name, orgs }: HeaderProps) {
size="lg"
role="combobox"
aria-expanded={open}
className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral"
className="w-full md:w-[200px] h-12 px-3 py-4 bg-neutral hover:bg-muted"
>
<div className="flex items-center justify-between w-full">
<div className="flex flex-col items-start">

8
src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx
View File

@@ -309,7 +309,7 @@ export default function ResourceAuthenticationPage() {
<section className="space-y-8">
<SettingsSectionTitle
title="Users & Roles"
description="Configure which users can access this resource (only applicable if SSO enabled)"
description="Configure which users and roles can visit this resource"
size="1xl"
/>
@@ -320,11 +320,13 @@ export default function ResourceAuthenticationPage() {
defaultChecked={resource.sso}
onCheckedChange={(val) => setSsoEnabled(val)}
/>
<Label htmlFor="sso-toggle">Allow SSO</Label>
<Label htmlFor="sso-toggle">
Allow Unified Login
</Label>
</div>
<span className="text-muted-foreground text-sm">
Existing users will only have to login once for all
resources that have SSO enabled.
resources that have this enabled.
</span>
</div>

32
src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx
View File

@@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface ResourcesDataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -62,19 +62,23 @@ export function ResourcesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search resources"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search resources"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addResource) {

17
src/app/[orgId]/settings/resources/components/ResourcesTable.tsx
View File

@@ -35,6 +35,7 @@ export type ResourceRow = {
orgId: string;
domain: string;
site: string;
siteId: string;
hasAuth: boolean;
};
@@ -106,7 +107,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
return (
<Button variant="outline">
<Link
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.site}`}
href={`/${resourceRow.orgId}/settings/sites/${resourceRow.siteId}`}
>
{resourceRow.site}
</Link>
@@ -175,7 +176,19 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
},
{
accessorKey: "hasAuth",
header: "Authentication",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Authentication
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const resourceRow = row.original;
return (

1
src/app/[orgId]/settings/resources/page.tsx
View File

@@ -51,6 +51,7 @@ export default async function ResourcesPage(props: ResourcesPageProps) {
orgId: params.orgId,
domain: `${resource.ssl ? "https://" : "http://"}${resource.fullDomain}`,
site: resource.siteName || "None",
siteId: resource.siteId || "Unknown",
hasAuth:
resource.sso ||
resource.pincodeId !== null ||

36
src/app/[orgId]/settings/sites/components/SitesDataTable.tsx
View File

@@ -24,7 +24,7 @@ import { Button } from "@app/components/ui/button";
import { useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "../../../../../components/DataTablePagination";
import { Plus } from "lucide-react";
import { Plus, Search } from "lucide-react";
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
@@ -62,19 +62,23 @@ export function SitesDataTable<TData, TValue>({
return (
<div>
<div className="flex items-center justify-between pb-4">
<Input
placeholder="Search sites"
value={
(table.getColumn("name")?.getFilterValue() as string) ??
""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="max-w-sm mr-2"
/>
<div className="flex items-center max-w-sm mr-2 w-full relative">
<Input
placeholder="Search sites"
value={
(table
.getColumn("name")
?.getFilterValue() as string) ?? ""
}
onChange={(event) =>
table
.getColumn("name")
?.setFilterValue(event.target.value)
}
className="w-full pl-8"
/>
<Search className="h-5 w-5 absolute left-2 top-1/2 transform -translate-y-1/2" />
</div>
<Button
onClick={() => {
if (addSite) {
@@ -98,7 +102,7 @@ export function SitesDataTable<TData, TValue>({
: flexRender(
header.column.columnDef
.header,
header.getContext()
header.getContext(),
)}
</TableHead>
);
@@ -119,7 +123,7 @@ export function SitesDataTable<TData, TValue>({
<TableCell key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</TableCell>
))}

42
src/app/[orgId]/settings/sites/components/SitesTable.tsx
View File

@@ -100,15 +100,51 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
},
{
accessorKey: "mbIn",
header: "MB In",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Data In
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "mbOut",
header: "MB Out",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Data Out
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
},
{
accessorKey: "type",
header: "Connection Type",
header: ({ column }) => {
return (
<Button
variant="ghost"
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Connection Type
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
);
},
cell: ({ row }) => {
const originalRow = row.original;