feat: Refactor EditServerModal to enhance gateway management with improved state handling, including dedicated functions for updating, adding, and removing gateways, ensuring robust server configuration management.

2025-12-07 01:35:10 +07:00
parent 15dc034088
commit 62ceb95233
1 changed files with 109 additions and 74 deletions
@@ -1446,24 +1446,30 @@ function ServerManager() {
 function EditServerModal({ show, server, onChange, onSave, onClose }) {
  const modalRef = useRef(null);
  // Локальное состояние для формы
-  const [localServer, setLocalServer] = useState(server || {});
+  const [localServer, setLocalServer] = useState({});

+  // Функция для создания сервера с гарантированными gateways
  const ensureGateways = (srv) => {
-    if (!srv) return {};
+    if (!srv) return { gateways: [] };
    const needs = NEEDS_GATEWAYS(srv.type);
-    let gateways = needs ? normalizeGateways(srv.gateways, srv.gateway || srv.dns || srv.ip) : [];
-    if (needs && gateways.length === 0) {
-      gateways = [makeGateway({ primary: true })];
+    let gateways = [];
+    if (needs) {
+      gateways = normalizeGateways(srv.gateways, srv.gateway || srv.dns || srv.ip);
+      if (gateways.length === 0) {
+        gateways = [makeGateway({ primary: true })];
+      }
    }
    return { ...srv, gateways };
  };

-  // Синхронизируем локальное состояние с пропсами
+  // Синхронизируем локальное состояние с пропсами при открытии модалки
  useEffect(() => {
-    setLocalServer(ensureGateways(server || {}));
-  }, [server]);
-
-  const gateways = Array.isArray(localServer?.gateways) ? localServer.gateways : [];
+    if (show && server) {
+      const prepared = ensureGateways(server);
+      console.log('[EditServerModal] Инициализация с сервером:', prepared);
+      setLocalServer(prepared);
+    }
+  }, [show, server]);

  useEffect(() => {
    if (window.Tabler && window.Tabler.Modal && modalRef.current) {
@@ -1484,12 +1490,80 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
    }
  }, [show, onClose]);

-  const handleChange = (field, value) => {
-    const updated = { ...localServer, [field]: value };
-    setLocalServer(updated);
-    onChange && onChange(updated);
+  // Универсальная функция обновления поля
+  const handleFieldChange = (field, value) => {
+    setLocalServer(prev => {
+      const updated = { ...prev, [field]: value };
+      onChange && onChange(updated);
+      return updated;
+    });
  };

+  // Функция обновления шлюза по индексу
+  const handleGatewayChange = (idx, field, value) => {
+    setLocalServer(prev => {
+      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
+      const updatedGateways = currentGateways.map((gw, i) => 
+        i === idx ? { ...gw, [field]: value } : gw
+      );
+      const updated = { ...prev, gateways: updatedGateways };
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+
+  // Функция переключения primary шлюза
+  const handlePrimaryChange = (idx, checked) => {
+    setLocalServer(prev => {
+      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
+      const updatedGateways = currentGateways.map((gw, i) => ({
+        ...gw,
+        primary: i === idx ? checked : false
+      }));
+      // Убедимся, что хотя бы один primary
+      if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
+        updatedGateways[idx].primary = true;
+      }
+      const updated = { ...prev, gateways: updatedGateways };
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+
+  // Функция добавления нового шлюза
+  const handleAddGateway = () => {
+    console.log('[EditServerModal] handleAddGateway вызвана, текущий localServer:', localServer);
+    setLocalServer(prev => {
+      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
+      const newGw = makeGateway({ primary: currentGateways.length === 0 });
+      const updatedGateways = [...currentGateways, newGw];
+      const updated = { ...prev, gateways: updatedGateways };
+      console.log('[EditServerModal] Новый localServer после добавления шлюза:', updated);
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+
+  // Функция удаления шлюза
+  const handleRemoveGateway = (idx) => {
+    setLocalServer(prev => {
+      const currentGateways = Array.isArray(prev.gateways) ? prev.gateways : [];
+      if (currentGateways.length <= 1) return prev; // Не удаляем последний
+      const updatedGateways = currentGateways.filter((_, i) => i !== idx);
+      // Убедимся, что есть primary
+      if (!updatedGateways.some(g => g.primary) && updatedGateways.length > 0) {
+        updatedGateways[0].primary = true;
+      }
+      const updated = { ...prev, gateways: updatedGateways };
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+
+  // Получаем текущие шлюзы для рендера
+  const currentGateways = Array.isArray(localServer.gateways) ? localServer.gateways : [];
+  const showGateways = NEEDS_GATEWAYS(localServer.type);
+
  return (
    <div className="modal" tabIndex="-1" ref={modalRef}>
      <div className="modal-dialog">
@@ -1502,35 +1576,35 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
            <form onSubmit={e => { e.preventDefault(); onSave && onSave(localServer); }}>
              <div className="mb-3">
                <label className="form-label">ID (опционально)</label>
-                <input type="text" className="form-control" value={localServer.id || ''} onChange={e => handleChange('id', e.target.value)} placeholder="srv-1" />
+                <input type="text" className="form-control" value={localServer.id || ''} onChange={e => handleFieldChange('id', e.target.value)} placeholder="srv-1" />
              </div>
              <div className="mb-3">
                <label className="form-label">IP адрес</label>
-                <input type="text" className="form-control" value={localServer.ip || ''} onChange={e => handleChange('ip', e.target.value)} />
+                <input type="text" className="form-control" value={localServer.ip || ''} onChange={e => handleFieldChange('ip', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Внешний IP (опционально)</label>
-                <input type="text" className="form-control" value={localServer.extIp || ''} onChange={e => handleChange('extIp', e.target.value)} placeholder="публичный IP, если отличается" />
+                <input type="text" className="form-control" value={localServer.extIp || ''} onChange={e => handleFieldChange('extIp', e.target.value)} placeholder="публичный IP, если отличается" />
              </div>
              <div className="mb-3">
                <label className="form-label">Внутренний IP (опционально)</label>
-                <input type="text" className="form-control" value={localServer.internalIp || ''} onChange={e => handleChange('internalIp', e.target.value)} placeholder="10.x.x.x / 192.168.x.x" />
+                <input type="text" className="form-control" value={localServer.internalIp || ''} onChange={e => handleFieldChange('internalIp', e.target.value)} placeholder="10.x.x.x / 192.168.x.x" />
              </div>
              <div className="mb-3">
                <label className="form-label">DNS имя</label>
-                <input type="text" className="form-control" value={localServer.dns || ''} onChange={e => handleChange('dns', e.target.value)} />
+                <input type="text" className="form-control" value={localServer.dns || ''} onChange={e => handleFieldChange('dns', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Страна</label>
-                <input type="text" className="form-control" value={localServer.country || ''} onChange={e => handleChange('country', e.target.value)} />
+                <input type="text" className="form-control" value={localServer.country || ''} onChange={e => handleFieldChange('country', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Провайдер</label>
-                <input type="text" className="form-control" value={localServer.provider || ''} onChange={e => handleChange('provider', e.target.value)} />
+                <input type="text" className="form-control" value={localServer.provider || ''} onChange={e => handleFieldChange('provider', e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="form-label">Тип сервера</label>
-                <select className="form-select" value={localServer.type || 'jumphost'} onChange={e => handleChange('type', e.target.value)}>
+                <select className="form-select" value={localServer.type || 'jumphost'} onChange={e => handleFieldChange('type', e.target.value)}>
                  {SERVER_TYPE_OPTIONS.map((opt) => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
@@ -1538,14 +1612,14 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
              </div>
              <div className="mb-3">
                <label className="form-label">Тип туннеля</label>
-                <input type="text" className="form-control" value={localServer.tunnel || ''} onChange={e => handleChange('tunnel', e.target.value)} />
+                <input type="text" className="form-control" value={localServer.tunnel || ''} onChange={e => handleFieldChange('tunnel', e.target.value)} />
              </div>
-              {NEEDS_GATEWAYS(localServer.type) && (
+              {showGateways && (
                <>
-                  <div className="form-label">Шлюзы</div>
+                  <div className="form-label">Шлюзы ({currentGateways.length})</div>
                  <div className="list-group list-group-flush border rounded mb-2">
-                    {(localServer.gateways || []).map((gw, idx) => (
-                      <div key={gw.id || idx} className="list-group-item">
+                    {currentGateways.map((gw, idx) => (
+                      <div key={gw.id || `gw-${idx}`} className="list-group-item">
                        <div className="row g-2 align-items-end">
                          <div className="col-12 col-md-4">
                            <label className="form-label small mb-1">Имя *</label>
@@ -1553,12 +1627,7 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                              type="text"
                              className="form-control"
                              value={gw.name || ''}
-                              onChange={(e) => {
-                                const list = (localServer.gateways || []).map((g, i) => i === idx ? { ...g, name: e.target.value } : g);
-                                const next = { ...localServer, gateways: list };
-                                setLocalServer(next);
-                                onChange && onChange(next);
-                              }}
+                              onChange={(e) => handleGatewayChange(idx, 'name', e.target.value)}
                              placeholder="GW-MSK"
                              required
                            />
@@ -1569,12 +1638,7 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                              type="text"
                              className="form-control"
                              value={gw.ip || ''}
-                              onChange={(e) => {
-                                const list = (localServer.gateways || []).map((g, i) => i === idx ? { ...g, ip: e.target.value } : g);
-                                const next = { ...localServer, gateways: list };
-                                setLocalServer(next);
-                                onChange && onChange(next);
-                              }}
+                              onChange={(e) => handleGatewayChange(idx, 'ip', e.target.value)}
                              placeholder="10.0.0.1"
                            />
                          </div>
@@ -1584,12 +1648,7 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                              type="text"
                              className="form-control"
                              value={gw.comment || ''}
-                              onChange={(e) => {
-                                const list = (localServer.gateways || []).map((g, i) => i === idx ? { ...g, comment: e.target.value } : g);
-                                const next = { ...localServer, gateways: list };
-                                setLocalServer(next);
-                                onChange && onChange(next);
-                              }}
+                              onChange={(e) => handleGatewayChange(idx, 'comment', e.target.value)}
                              placeholder="Основной шлюз"
                            />
                          </div>
@@ -1598,14 +1657,8 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                              <input
                                className="form-check-input"
                                type="checkbox"
-                                checked={gw.primary}
-                                onChange={(e) => {
-                                  const list = (localServer.gateways || []).map((g, i) => ({ ...g, primary: i === idx ? e.target.checked : false }));
-                                  if (!list.some(g => g.primary)) list[idx].primary = true;
-                                  const next = { ...localServer, gateways: list };
-                                  setLocalServer(next);
-                                  onChange && onChange(next);
-                                }}
+                                checked={!!gw.primary}
+                                onChange={(e) => handlePrimaryChange(idx, e.target.checked)}
                                title="Основной шлюз"
                              />
                            </div>
@@ -1613,17 +1666,11 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                        </div>
                        <div className="d-flex justify-content-between align-items-center mt-2">
                          <div className="text-muted small">{gw.primary ? 'Основной шлюз' : 'Резервный шлюз'}</div>
-                          {(localServer.gateways || []).length > 1 && (
+                          {currentGateways.length > 1 && (
                            <button
                              type="button"
                              className="btn btn-link text-danger px-0"
-                              onClick={() => {
-                                const list = (localServer.gateways || []).filter((_, i) => i !== idx);
-                                if (!list.some(g => g.primary) && list.length > 0) list[0].primary = true;
-                                const next = { ...localServer, gateways: list };
-                                setLocalServer(next);
-                                onChange && onChange(next);
-                              }}
+                              onClick={() => handleRemoveGateway(idx)}
                            >
                              Удалить
                            </button>
@@ -1635,19 +1682,7 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
                  <button
                    type="button"
                    className="btn btn-outline-primary btn-sm"
-                  onClick={() => {
-                      try {
-                        setLocalServer((prev) => {
-                          const list = Array.isArray(prev?.gateways) ? prev.gateways : [];
-                          const nextList = [...list, makeGateway({ primary: list.length === 0 })];
-                          const next = { ...(prev || {}), gateways: nextList };
-                          onChange && onChange(next);
-                          return next;
-                        });
-                      } catch (e) {
-                        console.error('Ошибка при добавлении шлюза в модалке редактирования', e);
-                      }
-                    }}
+                    onClick={handleAddGateway}
                  >
                    <IconPlus className="icon" />
                    Добавить шлюз