mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-18 07:56:57 +00:00
Application Grid View UI Bug Fix
This commit is contained in:
headlessdev
parent
2f61974f6e
commit
58f70ad1d9
@ -642,7 +642,7 @@ export default function Dashboard() {
|
|||||||
<div className="absolute top-2 right-2">
|
<div className="absolute top-2 right-2">
|
||||||
<StatusIndicator isOnline={app.online} />
|
<StatusIndicator isOnline={app.online} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between w-full mt-4 mb-4">
|
<div className={`flex ${isGridLayout ? 'flex-col' : 'items-center justify-between'} w-full mt-4 mb-4`}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
|
<div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
|
||||||
{app.icon ? (
|
{app.icon ? (
|
||||||
@ -668,177 +668,348 @@ export default function Dashboard() {
|
|||||||
</CardDescription>
|
</CardDescription>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-end justify-start space-y-2 w-[190px]">
|
|
||||||
<div className="flex items-center gap-2 w-full">
|
{!isGridLayout && (
|
||||||
<div className="flex flex-col space-y-2 flex-grow">
|
<div className="flex flex-col items-end justify-start space-y-2 w-[190px]">
|
||||||
<Button
|
<div className="flex items-center gap-2 w-full">
|
||||||
variant="outline"
|
<div className="flex flex-col space-y-2 flex-grow">
|
||||||
className="gap-2 w-full"
|
|
||||||
onClick={() =>
|
|
||||||
window.open(app.publicURL, "_blank")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Link className="h-4 w-4" />
|
|
||||||
Public URL
|
|
||||||
</Button>
|
|
||||||
{app.localURL && (
|
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="gap-2 w-full"
|
className="gap-2 w-full"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
window.open(app.localURL, "_blank")
|
window.open(app.publicURL, "_blank")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Home className="h-4 w-4" />
|
<Link className="h-4 w-4" />
|
||||||
Local URL
|
Public URL
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
{app.localURL && (
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2">
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
size="icon"
|
|
||||||
className="h-9 w-9"
|
|
||||||
onClick={() => deleteApplication(app.id)}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<AlertDialog>
|
|
||||||
<AlertDialogTrigger asChild>
|
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
variant="outline"
|
||||||
className="h-9 w-9"
|
className="gap-2 w-full"
|
||||||
onClick={() => openEditDialog(app)}
|
onClick={() =>
|
||||||
|
window.open(app.localURL, "_blank")
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<Pencil className="h-4 w-4" />
|
<Home className="h-4 w-4" />
|
||||||
|
Local URL
|
||||||
</Button>
|
</Button>
|
||||||
</AlertDialogTrigger>
|
)}
|
||||||
<AlertDialogContent>
|
</div>
|
||||||
<AlertDialogHeader>
|
<div className="flex flex-col gap-2">
|
||||||
<AlertDialogTitle>
|
<Button
|
||||||
Edit Application
|
variant="destructive"
|
||||||
</AlertDialogTitle>
|
size="icon"
|
||||||
<AlertDialogDescription>
|
className="h-9 w-9"
|
||||||
<div className="space-y-4 pt-4">
|
onClick={() => deleteApplication(app.id)}
|
||||||
<div className="grid w-full items-center gap-1.5">
|
>
|
||||||
<Label>Name</Label>
|
<Trash2 className="h-4 w-4" />
|
||||||
<Input
|
</Button>
|
||||||
placeholder="e.g. Portainer"
|
<AlertDialog>
|
||||||
value={editName}
|
<AlertDialogTrigger asChild>
|
||||||
onChange={(e) =>
|
<Button
|
||||||
setEditName(e.target.value)
|
size="icon"
|
||||||
}
|
className="h-9 w-9"
|
||||||
/>
|
onClick={() => openEditDialog(app)}
|
||||||
</div>
|
>
|
||||||
<div className="grid w-full items-center gap-1.5">
|
<Pencil className="h-4 w-4" />
|
||||||
<Label>Server</Label>
|
</Button>
|
||||||
<Select
|
</AlertDialogTrigger>
|
||||||
value={
|
<AlertDialogContent>
|
||||||
editServerId !== null
|
<AlertDialogHeader>
|
||||||
? String(editServerId)
|
<AlertDialogTitle>
|
||||||
: undefined
|
Edit Application
|
||||||
}
|
</AlertDialogTitle>
|
||||||
onValueChange={(v) =>
|
<AlertDialogDescription>
|
||||||
setEditServerId(Number(v))
|
<div className="space-y-4 pt-4">
|
||||||
}
|
<div className="grid w-full items-center gap-1.5">
|
||||||
required
|
<Label>Name</Label>
|
||||||
>
|
|
||||||
<SelectTrigger className="w-full">
|
|
||||||
<SelectValue placeholder="Select server" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{servers.map((server) => (
|
|
||||||
<SelectItem
|
|
||||||
key={server.id}
|
|
||||||
value={String(server.id)}
|
|
||||||
>
|
|
||||||
{server.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div className="grid w-full items-center gap-1.5">
|
|
||||||
<Label>
|
|
||||||
Description{" "}
|
|
||||||
<span className="text-stone-600">
|
|
||||||
(optional)
|
|
||||||
</span>
|
|
||||||
</Label>
|
|
||||||
<Textarea
|
|
||||||
placeholder="Application description"
|
|
||||||
value={editDescription}
|
|
||||||
onChange={(e) =>
|
|
||||||
setEditDescription(e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="grid w-full items-center gap-1.5">
|
|
||||||
<Label>
|
|
||||||
Icon URL{" "}
|
|
||||||
<span className="text-stone-600">
|
|
||||||
(optional)
|
|
||||||
</span>
|
|
||||||
</Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
<Input
|
||||||
placeholder="https://example.com/icon.png"
|
placeholder="e.g. Portainer"
|
||||||
value={editIcon}
|
value={editName}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setEditIcon(e.target.value)
|
setEditName(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>Server</Label>
|
||||||
|
<Select
|
||||||
|
value={
|
||||||
|
editServerId !== null
|
||||||
|
? String(editServerId)
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
onValueChange={(v) =>
|
||||||
|
setEditServerId(Number(v))
|
||||||
|
}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select server" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{servers.map((server) => (
|
||||||
|
<SelectItem
|
||||||
|
key={server.id}
|
||||||
|
value={String(server.id)}
|
||||||
|
>
|
||||||
|
{server.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>
|
||||||
|
Description{" "}
|
||||||
|
<span className="text-stone-600">
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Application description"
|
||||||
|
value={editDescription}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditDescription(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>
|
||||||
|
Icon URL{" "}
|
||||||
|
<span className="text-stone-600">
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="https://example.com/icon.png"
|
||||||
|
value={editIcon}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditIcon(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Button variant="outline" size="icon" onClick={generateEditIconURL}>
|
||||||
|
<Zap />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>Public URL</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="https://example.com"
|
||||||
|
value={editPublicURL}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditPublicURL(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>
|
||||||
|
Local URL{" "}
|
||||||
|
<span className="text-stone-600">
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="http://localhost:3000"
|
||||||
|
value={editLocalURL}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditLocalURL(e.target.value)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Button variant="outline" size="icon" onClick={generateEditIconURL}>
|
|
||||||
<Zap />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid w-full items-center gap-1.5">
|
</AlertDialogDescription>
|
||||||
<Label>Public URL</Label>
|
</AlertDialogHeader>
|
||||||
<Input
|
<AlertDialogFooter>
|
||||||
placeholder="https://example.com"
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
value={editPublicURL}
|
<AlertDialogAction
|
||||||
onChange={(e) =>
|
onClick={edit}
|
||||||
setEditPublicURL(e.target.value)
|
disabled={
|
||||||
}
|
!editName || !editPublicURL || !editServerId
|
||||||
/>
|
}
|
||||||
</div>
|
>
|
||||||
<div className="grid w-full items-center gap-1.5">
|
Save Changes
|
||||||
<Label>
|
</AlertDialogAction>
|
||||||
Local URL{" "}
|
</AlertDialogFooter>
|
||||||
<span className="text-stone-600">
|
</AlertDialogContent>
|
||||||
(optional)
|
</AlertDialog>
|
||||||
</span>
|
</div>
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
placeholder="http://localhost:3000"
|
|
||||||
value={editLocalURL}
|
|
||||||
onChange={(e) =>
|
|
||||||
setEditLocalURL(e.target.value)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction
|
|
||||||
onClick={edit}
|
|
||||||
disabled={
|
|
||||||
!editName || !editPublicURL || !editServerId
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Save Changes
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
|
||||||
|
{isGridLayout && (
|
||||||
|
<CardFooter className="mt-auto">
|
||||||
|
<div className="flex items-center gap-2 w-full">
|
||||||
|
<div className={`grid ${app.localURL ? 'grid-cols-2' : 'grid-cols-1'} gap-2 flex-grow`}>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="gap-2 w-full"
|
||||||
|
onClick={() => window.open(app.publicURL, "_blank")}
|
||||||
|
>
|
||||||
|
<Link className="h-4 w-4" />
|
||||||
|
Public URL
|
||||||
|
</Button>
|
||||||
|
{app.localURL && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="gap-2 w-full"
|
||||||
|
onClick={() => window.open(app.localURL, "_blank")}
|
||||||
|
>
|
||||||
|
<Home className="h-4 w-4" />
|
||||||
|
Local URL
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="icon"
|
||||||
|
className="h-9 w-9"
|
||||||
|
onClick={() => deleteApplication(app.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
className="h-9 w-9"
|
||||||
|
onClick={() => openEditDialog(app)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>
|
||||||
|
Edit Application
|
||||||
|
</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
<div className="space-y-4 pt-4">
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>Name</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. Portainer"
|
||||||
|
value={editName}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditName(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>Server</Label>
|
||||||
|
<Select
|
||||||
|
value={
|
||||||
|
editServerId !== null
|
||||||
|
? String(editServerId)
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
onValueChange={(v) =>
|
||||||
|
setEditServerId(Number(v))
|
||||||
|
}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-full">
|
||||||
|
<SelectValue placeholder="Select server" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{servers.map((server) => (
|
||||||
|
<SelectItem
|
||||||
|
key={server.id}
|
||||||
|
value={String(server.id)}
|
||||||
|
>
|
||||||
|
{server.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>
|
||||||
|
Description{" "}
|
||||||
|
<span className="text-stone-600">
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Application description"
|
||||||
|
value={editDescription}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditDescription(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>
|
||||||
|
Icon URL{" "}
|
||||||
|
<span className="text-stone-600">
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="https://example.com/icon.png"
|
||||||
|
value={editIcon}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditIcon(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Button variant="outline" size="icon" onClick={generateEditIconURL}>
|
||||||
|
<Zap />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>Public URL</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="https://example.com"
|
||||||
|
value={editPublicURL}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditPublicURL(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid w-full items-center gap-1.5">
|
||||||
|
<Label>
|
||||||
|
Local URL{" "}
|
||||||
|
<span className="text-stone-600">
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="http://localhost:3000"
|
||||||
|
value={editLocalURL}
|
||||||
|
onChange={(e) =>
|
||||||
|
setEditLocalURL(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={edit}
|
||||||
|
disabled={
|
||||||
|
!editName || !editPublicURL || !editServerId
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Save Changes
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
))}
|
))}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user