denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Managers): replace modal implementation with FormModal for community editing in ASNs, Domains, and IPRanges managers to enhance code maintainability and user experience
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 54s
Details

Browse Source
This commit is contained in:
denozord
2026-02-16 18:07:48 +07:00
parent 59082aa0d0
commit 1c953ed9d8
3 changed files with 102 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ASNsNewManager.jsx
+34 -49
View File
@@ -40,6 +40,7 @@ import BulkActionsBar from './components/BulkActionsBar.jsx';
import Tooltip from './components/Tooltip.jsx';
import Pagination from './components/Pagination.jsx';
import AddItemModal from './components/AddItemModal.jsx';
import FormModal from './components/FormModal.jsx';
import { getAsnName, getAsnNameSync } from './lib/asn.js';
import LastSaved from './components/LastSaved.jsx';
@@ -847,57 +848,41 @@ function ASNsNewManager() {
placeholder={'12345 65000:100'}
/>
{/* Модальное окно редактирования 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">
ASN: <span className="font-monospace">{itemBeingEdited.asn}</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>
)}
<FormModal
show={editModalOpen && !!itemBeingEdited}
onClose={handleCancelEdit}
onSubmit={handleSaveEdit}
title="Редактировать community"
submitLabel="Сохранить"
submitIcon={IconCheck}
size="md"
centered
disabled={!isValidCommunity(editingValue)}
>
{itemBeingEdited && (
<>
<p className="text-muted mb-2">
ASN: <span className="font-monospace">{itemBeingEdited.asn}</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 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>
)}
</>
)}
</FormModal>
<HistoryModal
resource="asns"
show={historyOpen}
frontend/src/DomainsNewManager.jsx
+34 -49
View File
@@ -47,6 +47,7 @@ import Tooltip from './components/Tooltip.jsx';
import Pagination from './components/Pagination.jsx';
import AddItemModal from './components/AddItemModal.jsx';
import LastSaved from './components/LastSaved.jsx';
import FormModal from './components/FormModal.jsx';
import { useToast } from './components/ToastContainer.jsx';
const API_URL = '/api';
@@ -870,57 +871,41 @@ function DomainsNewManager() {
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>
)}
<FormModal
show={editModalOpen && !!itemBeingEdited}
onClose={handleCancelEdit}
onSubmit={handleSaveEdit}
title="Редактировать community"
submitLabel="Сохранить"
submitIcon={IconCheck}
size="md"
centered
disabled={!isValidCommunity(editingValue)}
>
{itemBeingEdited && (
<>
<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 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>
)}
</>
)}
</FormModal>
<ConfirmModal
show={clearCommunitiesOpen}
onClose={() => setClearCommunitiesOpen(false)}
frontend/src/IPRangesManager.jsx
+34 -49
View File
@@ -43,6 +43,7 @@ import Tooltip from './components/Tooltip.jsx';
import Pagination from './components/Pagination.jsx';
import AddItemModal from './components/AddItemModal.jsx';
import LastSaved from './components/LastSaved.jsx';
import FormModal from './components/FormModal.jsx';
const API_URL = '/api';
@@ -1084,57 +1085,41 @@ function IPRangesManager() {
placeholder={'192.168.1.0/24 65000:100'}
/>
{/* Модальное окно редактирования 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">
IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</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>
)}
<FormModal
show={editModalOpen && !!itemBeingEdited}
onClose={handleCancelEdit}
onSubmit={handleSaveEdit}
title="Редактировать community"
submitLabel="Сохранить"
submitIcon={IconCheck}
size="md"
centered
disabled={!isValidCommunity(editingValue)}
>
{itemBeingEdited && (
<>
<p className="text-muted mb-2">
IP-диапазон: <span className="font-monospace">{itemBeingEdited.ipRange}</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 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>
)}
</>
)}
</FormModal>
<HistoryModal
resource="ip-ranges"
show={historyOpen}