feat: Add server editing functionality in FilterManager with modal for improved server management and user experience

frontend/src/FilterManager.jsx

@@ -50,6 +50,11 @@ function FilterManager() {
   const [deleteFilterModalOpen, setDeleteFilterModalOpen] = useState(false);
   const [filterToDelete, setFilterToDelete] = useState(null);
 
+  // Новое состояние для редактирования сервера
+  const [editServerModalOpen, setEditServerModalOpen] = useState(false);
+  const [editingServer, setEditingServer] = useState(null);
+  const [editServerError, setEditServerError] = useState('');
+
   useEffect(() => {
     fetchServers();
   }, []);
@@ -403,6 +408,37 @@ function FilterManager() {
     }
   };
 
+  // Открыть модалку редактирования
+  const handleEditServer = (server) => {
+    setEditingServer({ ...server });
+    setEditServerError('');
+    setEditServerModalOpen(true);
+  };
+
+  // Сохранить изменения сервера
+  const handleSaveEditServer = async () => {
+    if (!editingServer.name.trim()) {
+      setEditServerError('Имя сервера обязательно для заполнения.');
+      return;
+    }
+    try {
+      const updatedServers = servers.map(s =>
+        s.id === editingServer.id ? { ...s, name: editingServer.name, description: editingServer.description } : s
+      );
+      await axios.post(`${API_URL}/server-configs`, { servers: updatedServers });
+      setServers(updatedServers);
+      // Если редактируемый сервер выбран — обновить его
+      if (selectedServer?.id === editingServer.id) {
+        setSelectedServer({ ...selectedServer, name: editingServer.name, description: editingServer.description });
+      }
+      setEditServerModalOpen(false);
+      setSuccess('Сервер успешно обновлён!');
+      setTimeout(() => setSuccess(''), 3000);
+    } catch (error) {
+      setEditServerError('Не удалось сохранить изменения.');
+    }
+  };
+
   // Удаляем старые функции редактирования
 
   // Удаляем старые функции, которые больше не нужны
@@ -712,7 +748,7 @@ function FilterManager() {
                               <h4 className="card-title mb-1 d-flex align-items-center">
                                 {server.name}
                                 {selectedServer?.id === server.id && (
-                                  <span className="badge bg-primary ms-2">Выбран</span>
+                                  <span className="badge bg-blue-lt text-blue ms-2">Выбран</span>
                                 )}
                               </h4>
                               <div className="d-flex align-items-center gap-2">
@@ -758,6 +794,14 @@ function FilterManager() {
                               <IconFilter className="me-1" />
                               {selectedServer?.id === server.id ? 'Выбран' : 'Выбрать'}
                             </button>
+                            <button
+                              className="btn btn-outline-secondary btn-sm"
+                              onClick={() => handleEditServer(server)}
+                              title="Редактировать сервер"
+                            >
+                              <IconEdit className="me-1" />
+                              Редактировать
+                            </button>
                             <button 
                               className="btn btn-outline-warning btn-sm"
                               onClick={() => handleCopyConfigToAllServers(server.id)}
@@ -1004,6 +1048,56 @@ function FilterManager() {
         }}
         error={error}
       />
+
+      {/* Модальное окно редактирования сервера */}
+      {editServerModalOpen && (
+        <div className="modal show d-block" tabIndex="-1" role="dialog">
+          <div className="modal-dialog" role="document">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title">Редактировать сервер</h5>
+                <button type="button" className="btn-close" onClick={() => setEditServerModalOpen(false)}></button>
+              </div>
+              <div className="modal-body">
+                <div className="mb-3">
+                  <label className="form-label">Имя сервера</label>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={editingServer?.name || ''}
+                    onChange={e => setEditingServer({ ...editingServer, name: e.target.value })}
+                    maxLength={64}
+                    autoFocus
+                  />
+                </div>
+                <div className="mb-3">
+                  <label className="form-label">Описание</label>
+                  <textarea
+                    className="form-control"
+                    value={editingServer?.description || ''}
+                    onChange={e => setEditingServer({ ...editingServer, description: e.target.value })}
+                    maxLength={256}
+                    rows={2}
+                  />
+                </div>
+                {editServerError && (
+                  <div className="alert alert-danger py-2" role="alert">
+                    {editServerError}
+                  </div>
+                )}
+              </div>
+              <div className="modal-footer">
+                <button type="button" className="btn btn-secondary" onClick={() => setEditServerModalOpen(false)}>
+                  Отмена
+                </button>
+                <button type="button" className="btn btn-primary" onClick={handleSaveEditServer}>
+                  Сохранить
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }