refactor: update

This commit is contained in:
Mauricio Siu
2024-12-21 14:58:58 -06:00
parent 883459624e
commit b2661e4533

View File

@@ -49,12 +49,12 @@ interface AdditionalPort {
/**
* ManageTraefikPorts is a component that provides a modal interface for managing
* additional port mappings for Traefik in a Docker Swarm environment.
*
*
* Features:
* - Add, remove, and edit port mappings
* - Configure target port, published port, and publish mode for each mapping
* - Persist port configurations through API calls
*
*
* @component
* @example
* ```tsx
@@ -121,7 +121,10 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
</DialogHeader>
<div className="grid gap-4 py-4">
{additionalPorts.map((port, index) => (
<div key={index} className="grid grid-cols-[120px_120px_minmax(120px,1fr)_80px] gap-4 items-end">
<div
key={index}
className="grid grid-cols-[120px_120px_minmax(120px,1fr)_80px] gap-4 items-end"
>
<div className="space-y-2">
<Label htmlFor={`target-port-${index}`}>
{t("settings.server.webServer.traefik.targetPort")}
@@ -132,7 +135,9 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
value={port.targetPort}
onChange={(e) => {
const newPorts = [...additionalPorts];
newPorts[index].targetPort = Number.parseInt(
// @ts-ignore
newPorts?.[index].targetPort = Number.parseInt(
e.target.value,
);
setAdditionalPorts(newPorts);
@@ -150,7 +155,8 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
value={port.publishedPort}
onChange={(e) => {
const newPorts = [...additionalPorts];
newPorts[index].publishedPort = Number.parseInt(
// @ts-ignore
newPorts?.[index].publishedPort = Number.parseInt(
e.target.value,
);
setAdditionalPorts(newPorts);
@@ -166,11 +172,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
value={port.publishMode}
onValueChange={(value: "ingress" | "host") => {
const newPorts = [...additionalPorts];
newPorts[index].publishMode = value;
// @ts-ignore
newPorts?.[index].publishMode = value;
setAdditionalPorts(newPorts);
}}
>
<SelectTrigger id={`publish-mode-${index}`} className="w-full">
<SelectTrigger
id={`publish-mode-${index}`}
className="w-full"
>
<SelectValue />
</SelectTrigger>
<SelectContent>