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