Enhance domain management: Add editing and bulk update features for domain types

frontend/src/App.jsx

@@ -12,6 +12,10 @@ function App() {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
+  const [editingIndex, setEditingIndex] = useState(null)
+  const [editingValue, setEditingValue] = useState('')
+  const [bulkFrom, setBulkFrom] = useState('SharkFIN')
+  const [bulkTo, setBulkTo] = useState('SharkAM')
 
   useEffect(() => {
     fetchDomains()
@@ -37,6 +41,22 @@ function App() {
     setNewDomain({ domain: '', type: 'SharkFIN' })
   }
 
+  const handleEdit = (index) => {
+    setEditingIndex(index)
+    setEditingValue(domains[index].type)
+  }
+
+  const handleSaveEdit = (index) => {
+    const updatedDomains = [...domains]
+    updatedDomains[index].type = editingValue
+    setDomains(updatedDomains)
+    setEditingIndex(null)
+  }
+
+  const handleCancelEdit = () => {
+    setEditingIndex(null)
+  }
+
   const handleDeleteDomain = (index) => {
     setDomains(domains.filter((_, i) => i !== index))
   }
@@ -52,6 +72,21 @@ function App() {
     }
   }
 
+  const handleBulkUpdate = () => {
+    if (!bulkFrom || !bulkTo) {
+      setError('Оба поля для массового обновления должны быть заполнены.')
+      return
+    }
+    const confirm = window.confirm(`Вы уверены, что хотите заменить все шлюзы "${bulkFrom}" на "${bulkTo}"? Это действие необратимо.`)
+    if (confirm) {
+      const updatedDomains = domains.map(d => 
+        d.type === bulkFrom ? { ...d, type: bulkTo } : d
+      )
+      setDomains(updatedDomains)
+      setSuccess(`Шлюзы "${bulkFrom}" были успешно заменены на "${bulkTo}". Не забудьте сохранить изменения.`)
+    }
+  }
+
   const filteredDomains = domains.filter(d =>
     d.domain.toLowerCase().includes(searchTerm.toLowerCase())
   )
@@ -108,6 +143,29 @@ function App() {
           </Card.Body>
         </Card>
 
+        <Card className="mb-4">
+          <Card.Header as="h5">Массовое обновление шлюзов</Card.Header>
+          <Card.Body>
+            <Row className="align-items-end">
+              <Col>
+                <Form.Group>
+                  <Form.Label>Заменить с</Form.Label>
+                  <Form.Control type="text" value={bulkFrom} onChange={e => setBulkFrom(e.target.value)} />
+                </Form.Group>
+              </Col>
+              <Col>
+                <Form.Group>
+                  <Form.Label>Заменить на</Form.Label>
+                  <Form.Control type="text" value={bulkTo} onChange={e => setBulkTo(e.target.value)} />
+                </Form.Group>
+              </Col>
+              <Col md={3}>
+                <Button variant="warning" onClick={handleBulkUpdate} className="w-100">Выполнить замену</Button>
+              </Col>
+            </Row>
+          </Card.Body>
+        </Card>
+
         <Card>
           <Card.Header>
             <div className="d-flex justify-content-between align-items-center">
@@ -139,11 +197,38 @@ function App() {
                   <tr key={index}>
                     <td>{index + 1}</td>
                     <td>{d.domain}</td>
-                    <td>{d.type}</td>
+                    <td>
+                      {editingIndex === index ? (
+                        <Form.Control 
+                          type="text" 
+                          value={editingValue} 
+                          onChange={(e) => setEditingValue(e.target.value)}
+                          autoFocus
+                        />
+                      ) : (
+                        d.type
+                      )}
+                    </td>
                     <td className="text-center">
-                      <Button variant="danger" size="sm" onClick={() => handleDeleteDomain(index)}>
+                      {editingIndex === index ? (
-                        Удалить
+                        <>
-                      </Button>
+                          <Button variant="success" size="sm" className="me-2" onClick={() => handleSaveEdit(index)}>
+                            Сохранить
+                          </Button>
+                          <Button variant="secondary" size="sm" onClick={handleCancelEdit}>
+                            Отмена
+                          </Button>
+                        </>
+                      ) : (
+                        <>
+                          <Button variant="info" size="sm" className="me-2" onClick={() => handleEdit(index)}>
+                            Изменить
+                          </Button>
+                          <Button variant="danger" size="sm" onClick={() => handleDeleteDomain(index)}>
+                            Удалить
+                          </Button>
+                        </>
+                      )}
                     </td>
                   </tr>
                 ))}