pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-03-07 11:16:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

major ui tweaks and refactoring

Browse Source
This commit is contained in:
Milo Schwartz
2025-01-04 20:22:01 -05:00
parent 51bf5c1408
commit 64158a823b
91 changed files with 1791 additions and 1246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/[orgId]/settings/access/users/InviteUserForm.tsx
View File

@@ -67,7 +67,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
const [roles, setRoles] = useState<{ roleId: number; name: string }[]>([]);
const [sendEmail, setSendEmail] = useState(env.EMAIL_ENABLED === "true");
const [sendEmail, setSendEmail] = useState(env.email.emailEnabled);
const validFor = [
{ hours: 24, name: "1 day" },
@@ -205,7 +205,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
)}
/>
{env.EMAIL_ENABLED === "true" && (
{env.email.emailEnabled && (
<div className="flex items-center space-x-2">
<Checkbox
id="send-email"

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

@@ -15,6 +15,7 @@ import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableHeader,
TableRow,
@@ -88,7 +89,7 @@ export function UsersDataTable<TData, TValue>({
<Plus className="mr-2 h-4 w-4" /> Invite User
</Button>
</div>
<div className="border rounded-md">
<TableContainer>
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
@@ -141,7 +142,7 @@ export function UsersDataTable<TData, TValue>({
)}
</TableBody>
</Table>
</div>
</TableContainer>
<div className="mt-4">
<DataTablePagination table={table} />
</div>

4
src/app/[orgId]/settings/access/users/UsersTable.tsx
View File

@@ -159,7 +159,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
const userRow = row.original;
return (
<div className="flex flex-row items-center gap-1">
<div className="flex flex-row items-center gap-2">
{userRow.isOwner && (
<Crown className="w-4 h-4 text-yellow-600" />
)}
@@ -186,7 +186,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
<Link
href={`/${org?.org.orgId}/settings/access/users/${userRow.id}`}
>
<Button variant={"gray"} className="ml-2">
<Button variant={"outline"} className="ml-2">
Manage
<ArrowRight className="ml-2 w-4 h-4" />
</Button>

150
src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx
View File

@@ -6,7 +6,7 @@ import {
FormField,
FormItem,
FormLabel,
FormMessage,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import {
@@ -14,7 +14,7 @@ import {
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
SelectValue
} from "@app/components/ui/select";
import { useToast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -27,14 +27,23 @@ import { ListRolesResponse } from "@server/routers/role";
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
import { useParams } from "next/navigation";
import { Button } from "@app/components/ui/button";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { formatAxiosError } from "@app/lib/api";;
import {
SettingsContainer,
SettingsSection,
SettingsSectionHeader,
SettingsSectionTitle,
SettingsSectionDescription,
SettingsSectionBody,
SettingsSectionForm,
SettingsSectionFooter
} from "@app/components/Settings";
import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
const formSchema = z.object({
email: z.string().email({ message: "Please enter a valid email" }),
roleId: z.string().min(1, { message: "Please select a role" }),
roleId: z.string().min(1, { message: "Please select a role" })
});
export default function AccessControlsPage() {
@@ -52,8 +61,8 @@ export default function AccessControlsPage() {
resolver: zodResolver(formSchema),
defaultValues: {
email: user.email!,
roleId: user.roleId?.toString(),
},
roleId: user.roleId?.toString()
}
});
useEffect(() => {
@@ -68,7 +77,7 @@ export default function AccessControlsPage() {
description: formatAxiosError(
e,
"An error occurred while fetching the roles"
),
)
});
});
@@ -86,9 +95,9 @@ export default function AccessControlsPage() {
setLoading(true);
const res = await api
.post<AxiosResponse<InviteUserResponse>>(
`/role/${values.roleId}/add/${user.userId}`
)
.post<
AxiosResponse<InviteUserResponse>
>(`/role/${values.roleId}/add/${user.userId}`)
.catch((e) => {
toast({
variant: "destructive",
@@ -96,7 +105,7 @@ export default function AccessControlsPage() {
description: formatAxiosError(
e,
"An error occurred while adding user to the role."
),
)
});
});
@@ -104,7 +113,7 @@ export default function AccessControlsPage() {
toast({
variant: "default",
title: "User saved",
description: "The user has been updated.",
description: "The user has been updated."
});
}
@@ -112,59 +121,70 @@ export default function AccessControlsPage() {
}
return (
<>
<div className="space-y-8">
<SettingsSectionTitle
title="Access Controls"
description="Manage what this user can access and do in the organization"
size="1xl"
/>
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>Access Controls</SettingsSectionTitle>
<SettingsSectionDescription>
Manage what this user can access and do in the
organization
</SettingsSectionDescription>
</SettingsSectionHeader>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
<SettingsSectionBody>
<SettingsSectionForm>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
id="access-controls-form"
>
<FormField
control={form.control}
name="roleId"
render={({ field }) => (
<FormItem>
<FormLabel>Role</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select role" />
</SelectTrigger>
</FormControl>
<SelectContent>
{roles.map((role) => (
<SelectItem
key={role.roleId}
value={role.roleId.toString()}
>
{role.name}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
loading={loading}
disabled={loading}
form="access-controls-form"
>
<FormField
control={form.control}
name="roleId"
render={({ field }) => (
<FormItem>
<FormLabel>Role</FormLabel>
<Select
onValueChange={field.onChange}
value={field.value}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select role" />
</SelectTrigger>
</FormControl>
<SelectContent>
{roles.map((role) => (
<SelectItem
key={role.roleId}
value={role.roleId.toString()}
>
{role.name}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
loading={loading}
disabled={loading}
>
Save Changes
</Button>
</form>
</Form>
</div>
</>
Save Access Controls
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}