refactor(Managers): implement modal editing for community fields in ASNs, Domains, and IPRanges managers to enhance user experience and streamline editing process

frontend/src/DomainsNewManager.jsx

@@ -65,8 +65,9 @@ function DomainsNewManager() {
   const [searchTerm, setSearchTerm] = useState('');
   const searchTimer = useRef(null);
   const didInit = useRef(false);
-  const [editingDomain, setEditingDomain] = useState(null);
   const [editingValue, setEditingValue] = useState('');
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [itemBeingEdited, setItemBeingEdited] = useState(null);
   const [loading, setLoading] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [itemToDelete, setItemToDelete] = useState(null);
@@ -76,7 +77,6 @@ function DomainsNewManager() {
   const [sortField, setSortField] = useState('domain');
   const [sortOrder, setSortOrder] = useState('asc');
   const [filterCommunity, setFilterCommunity] = useState('');
-  const editInputRef = useRef(null);
   const pageSize = 10;
 
   // Bulk operations
@@ -159,24 +159,28 @@ function DomainsNewManager() {
   };
 
   const handleEdit = (item) => {
-    setEditingDomain(item.domain);
+    setItemBeingEdited(item);
     setEditingValue(item.community);
+    setEditModalOpen(true);
   };
 
-  const handleSaveEdit = (domainName) => {
+  const handleSaveEdit = () => {
+    if (!itemBeingEdited) return;
     if (!isValidCommunity(editingValue)) {
       setError('Community должен быть числом.');
       return;
     }
     const updatedItems = items.map(i =>
-      i.domain === domainName ? { ...i, community: String(editingValue).trim() } : i
+      i.domain === itemBeingEdited.domain ? { ...i, community: String(editingValue).trim() } : i
     );
     setItems(updatedItems);
-    setEditingDomain(null);
+    setEditModalOpen(false);
+    setItemBeingEdited(null);
   };
 
   const handleCancelEdit = () => {
-    setEditingDomain(null);
+    setEditModalOpen(false);
+    setItemBeingEdited(null);
   };
 
   const handleDeleteItem = (domainNameToDelete) => {
@@ -426,13 +430,6 @@ function DomainsNewManager() {
     }
   };
 
-  // Улучшенный инлайн-редакт
-  useEffect(() => {
-    if (editingDomain && editInputRef.current) {
-      editInputRef.current.focus();
-    }
-  }, [editingDomain]);
-
   // Глобальные хоткеи: Ctrl+S — сохранить изменения
   useEffect(() => {
     const onKey = (e) => {
@@ -445,9 +442,15 @@ function DomainsNewManager() {
     return () => window.removeEventListener('keydown', onKey);
   }, [loading, items, originalItems, etag, sortField, sortOrder, filterCommunity]);
 
-  const handleEditKeyDown = (e, domainName) => {
-    if (e.key === 'Enter') handleSaveEdit(domainName);
-    if (e.key === 'Escape') handleCancelEdit();
+  const handleEditKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSaveEdit();
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      handleCancelEdit();
+    }
   };
 
   // Bulk operations handlers
@@ -734,7 +737,7 @@ function DomainsNewManager() {
                       {paginatedItems.map((item, idx) => (
                         <tr 
                           key={item.domain} 
-                          className={editingDomain === item.domain ? 'table-active' : (selectedDomains.has(item.domain) ? 'table-selected' : '')}
+                          className={selectedDomains.has(item.domain) ? 'table-selected' : ''}
                           style={{
                             animation: `fadeIn 0.3s ease ${idx * 0.02}s both`
                           }}
@@ -772,61 +775,26 @@ function DomainsNewManager() {
                           </td>
                           <td className="text-end">
                             <div className="btn-group btn-group-sm" role="group" aria-label={`Действия с доменом ${item.domain}`}>
-                              {editingDomain === item.domain ? (
-                                <>
-                                  <CommunityAutocompleteInput
-                                    value={editingValue}
-                                    onChange={setEditingValue}
-                                    communities={communities}
-                                    onKeyDown={(e) => handleEditKeyDown(e, item.domain)}
-                                    className={`form-control d-inline-block me-2${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
-                                    style={{ width: '150px' }}
-                                    useShortValue={true}
-                                  />
-                                  <Tooltip content="Сохранить (Enter)">
-                                    <button 
-                                      className="btn btn-icon btn-success" 
-                                      onClick={() => handleSaveEdit(item.domain)} 
-                                      disabled={!isValidCommunity(editingValue)}
-                                      aria-label="Сохранить"
-                                    >
-                                      <IconCheck size={16} />
-                                    </button>
-                                  </Tooltip>
-                                  <Tooltip content="Отмена (Esc)">
-                                    <button 
-                                      className="btn btn-icon btn-secondary" 
-                                      onClick={handleCancelEdit}
-                                      aria-label="Отмена"
-                                    >
-                                      <IconX size={16} />
-                                    </button>
-                                  </Tooltip>
-                                </>
-                              ) : (
-                                <>
-                                  <Tooltip content="Редактировать" position="top">
-                                    <button 
-                                      className="btn btn-icon btn-outline-primary" 
-                                      aria-label="Редактировать" 
-                                      onClick={() => handleEdit(item)}
-                                      title="Редактировать"
-                                    >
-                                      <IconEdit size={16} />
-                                    </button>
-                                  </Tooltip>
-                                  <Tooltip content="Удалить" position="top">
-                                    <button 
-                                      className="btn btn-icon btn-outline-danger" 
-                                      aria-label="Удалить" 
-                                      onClick={() => confirmDelete(item)}
-                                      title="Удалить"
-                                    >
-                                      <IconTrash size={16} />
-                                    </button>
-                                  </Tooltip>
-                                </>
-                              )}
+                              <Tooltip content="Редактировать" position="top">
+                                <button 
+                                  className="btn btn-icon btn-outline-primary" 
+                                  aria-label="Редактировать" 
+                                  onClick={() => handleEdit(item)}
+                                  title="Редактировать"
+                                >
+                                  <IconEdit size={16} />
+                                </button>
+                              </Tooltip>
+                              <Tooltip content="Удалить" position="top">
+                                <button 
+                                  className="btn btn-icon btn-outline-danger" 
+                                  aria-label="Удалить" 
+                                  onClick={() => confirmDelete(item)}
+                                  title="Удалить"
+                                >
+                                  <IconTrash size={16} />
+                                </button>
+                              </Tooltip>
                             </div>
                           </td>
                         </tr>
@@ -895,6 +863,58 @@ function DomainsNewManager() {
         url={wsUrl}
         onClose={() => setWsOpen(false)}
       />
+      {/* Модальное окно редактирования community */}
+      {editModalOpen && itemBeingEdited && (
+        <div className="modal modal-blur fade show" style={{ display: 'block' }} tabIndex="-1">
+          <div className="modal-dialog modal-dialog-centered" role="document">
+            <div className="modal-content">
+              <button
+                type="button"
+                className="btn-close"
+                onClick={handleCancelEdit}
+                aria-label="Закрыть"
+              ></button>
+              <div className="modal-header">
+                <h3 className="modal-title">Редактировать community</h3>
+              </div>
+              <div className="modal-body">
+                <p className="text-muted mb-2">
+                  Домен: <span className="font-monospace">{itemBeingEdited.domain}</span>
+                </p>
+                <div className="mb-3">
+                  <label className="form-label">Community</label>
+                  <CommunityAutocompleteInput
+                    value={editingValue}
+                    onChange={setEditingValue}
+                    communities={communities}
+                    onKeyDown={handleEditKeyDown}
+                    className={`form-control${isValidCommunity(editingValue) ? '' : ' is-invalid'}`}
+                    useShortValue={true}
+                  />
+                  {!isValidCommunity(editingValue) && (
+                    <div className="invalid-feedback d-block">
+                      Введите корректное значение community (число или N:N).
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="modal-footer">
+                <button className="btn" onClick={handleCancelEdit}>
+                  Отмена
+                </button>
+                <button
+                  className="btn btn-primary"
+                  onClick={handleSaveEdit}
+                  disabled={!isValidCommunity(editingValue)}
+                >
+                  <IconCheck className="icon me-1" size={18} />
+                  Сохранить
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       <ConfirmModal
         show={clearCommunitiesOpen}
         onClose={() => setClearCommunitiesOpen(false)}