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

add delete confirm modal to resources and sites

Browse Source
This commit is contained in:
Milo Schwartz
2024-11-11 23:00:51 -05:00
parent 36bbb412dd
commit 93ea7e4620
6 changed files with 379 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx
View File

@@ -96,99 +96,113 @@ export default function GeneralForm() {
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
This is the display name of the resource.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="siteId"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Site</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[350px] justify-between",
!field.value &&
"text-muted-foreground"
)}
>
{field.value
? sites.find(
(site) =>
site.siteId ===
field.value
)?.name
: "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[350px] p-0">
<Command>
<CommandInput placeholder="Search site..." />
<CommandList>
<CommandEmpty>
No site found.
</CommandEmpty>
<CommandGroup>
{sites.map((site) => (
<CommandItem
value={site.name}
key={site.siteId}
onSelect={() => {
form.setValue(
"siteId",
site.siteId
);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
site.siteId ===
field.value
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This is the site that will be used in the
dashboard.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Update Resource</Button>
</form>
</Form>
<>
<div className="space-y-0.5 select-none mb-6">
<h2 className="text-2xl font-bold tracking-tight">
General Settings
</h2>
<p className="text-muted-foreground">
Configure the general settings for this resource
</p>
</div>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormDescription>
This is the display name of the resource.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="siteId"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel>Site</FormLabel>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<Button
variant="outline"
role="combobox"
className={cn(
"w-[350px] justify-between",
!field.value &&
"text-muted-foreground"
)}
>
{field.value
? sites.find(
(site) =>
site.siteId ===
field.value
)?.name
: "Select site"}
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-[350px] p-0">
<Command>
<CommandInput placeholder="Search site..." />
<CommandList>
<CommandEmpty>
No site found.
</CommandEmpty>
<CommandGroup>
{sites.map((site) => (
<CommandItem
value={site.name}
key={site.siteId}
onSelect={() => {
form.setValue(
"siteId",
site.siteId
);
}}
>
<CheckIcon
className={cn(
"mr-2 h-4 w-4",
site.siteId ===
field.value
? "opacity-100"
: "opacity-0"
)}
/>
{site.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<FormDescription>
This is the site that will be used in the
dashboard.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Update Resource</Button>
</form>
</Form>
</>
);
}

29
src/app/[orgId]/settings/resources/[resourceId]/targets/page.tsx
View File

@@ -25,11 +25,9 @@ const isValidIPAddress = (ip: string) => {
return ipv4Regex.test(ip);
};
export default function ReverseProxyTargets(
props: {
params: Promise<{ resourceId: number }>;
}
) {
export default function ReverseProxyTargets(props: {
params: Promise<{ resourceId: number }>;
}) {
const params = use(props.params);
const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([]);
const [nextId, setNextId] = useState(1);
@@ -39,7 +37,7 @@ export default function ReverseProxyTargets(
if (typeof window !== "undefined") {
const fetchSites = async () => {
const res = await api.get<AxiosResponse<ListTargetsResponse>>(
`/resource/${params.resourceId}/targets`,
`/resource/${params.resourceId}/targets`
);
setTargets(res.data.data.targets);
};
@@ -93,7 +91,7 @@ export default function ReverseProxyTargets(
})
.then((res) => {
setTargets(
targets.filter((target) => target.targetId !== targetId),
targets.filter((target) => target.targetId !== targetId)
);
});
};
@@ -103,8 +101,8 @@ export default function ReverseProxyTargets(
targets.map((target) =>
target.targetId === targetId
? { ...target, enabled: !target.enabled }
: target,
),
: target
)
);
api.post(`/target/${targetId}`, {
enabled: !targets.find((target) => target.targetId === targetId)
@@ -115,7 +113,14 @@ export default function ReverseProxyTargets(
};
return (
<div className="space-y-6">
<div>
<div className="space-y-0.5 select-none mb-6">
<h2 className="text-2xl font-bold tracking-tight">Targets</h2>
<p className="text-muted-foreground">
Setup the targets for the reverse proxy
</p>
</div>
<form
onSubmit={(e) => {
e.preventDefault();
@@ -192,9 +197,7 @@ export default function ReverseProxyTargets(
</Select>
</div>
</div>
<Button type="submit">
<PlusCircle className="mr-2 h-4 w-4" /> Add Target
</Button>
<Button type="submit">Add Target</Button>
</form>
<div className="space-y-4">