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

унификацяи стилей
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 6m45s
Details

Browse Source
This commit is contained in:
denozord
2025-07-14 08:38:48 +07:00
parent 07ff184ef4
commit 9af7d1081a
1 changed files with 48 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+48 -69
View File
@@ -356,80 +356,59 @@ function FilterManager() {
)} )}
{/* Фильтры и поиск */} {/* Фильтры и поиск */}
<div className="card mb-4"> <div className="card w-100">
<div className="card-body"> <div className="card-header d-flex justify-content-between align-items-center">
<div className="row g-3"> <h3 className="card-title mb-0">Список фильтров</h3>
<div className="col-md-4"> <div className="d-flex gap-2 w-75">
<div className="input-group"> {/* Фильтры и поиск */}
<span className="input-group-text"> <select className="form-select w-auto" value={filterGateway} onChange={e => setFilterGateway(e.target.value)}>
<IconSearch /> <option value="">Все gateway</option>
</span> {uniqueGateways.map(gateway => (
<input <option key={gateway} value={gateway}>{gateway}</option>
type="text" ))}
className="form-control" </select>
placeholder="Поиск по community, gateway или описанию..." <div className="input-icon flex-grow-1">
value={searchTerm} <span className="input-icon-addon">
onChange={(e) => setSearchTerm(e.target.value)} <IconSearch size={18} />
/> </span>
</div> <input
</div> type="text"
<div className="col-md-3"> className="form-control"
<select placeholder="Поиск по фильтрам..."
className="form-select" value={searchTerm}
value={filterGateway} onChange={e => setSearchTerm(e.target.value)}
onChange={(e) => setFilterGateway(e.target.value)} />
>
<option value="">Все gateway</option>
{uniqueGateways.map(gateway => (
<option key={gateway} value={gateway}>{gateway}</option>
))}
</select>
</div>
<div className="col-md-2">
<button
className="btn btn-outline-secondary w-100"
onClick={fetchFilters}
disabled={loading}
>
<IconRefresh className="me-2" />
Обновить
</button>
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Таблица фильтров */}
<div className="card">
<div className="card-header">
<h3 className="card-title">Фильтры frouting ({filteredFilters.length})</h3>
</div>
<div className="table-responsive"> <div className="table-responsive">
<table className="table table-vcenter table-sm card-table align-middle"> <table className="table card-table table-vcenter table-nowrap mb-0">
<thead> <thead>
<tr> <tr>
<th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle" <th style={{cursor:'pointer'}} onClick={() => handleSort('community')}>
onClick={() => handleSort('community')}> COMMUNITY
Community
{sortField === 'community' && ( {sortField === 'community' && (
<IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} /> <span className="ms-1">
{sortOrder === 'asc' ? '▲' : '▼'}
</span>
)} )}
</th> </th>
<th style={{width: '180px', whiteSpace: 'nowrap', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="cursor-pointer align-middle" <th style={{cursor:'pointer'}} onClick={() => handleSort('gateway')}>
onClick={() => handleSort('gateway')}> GATEWAY
Gateway
{sortField === 'gateway' && ( {sortField === 'gateway' && (
<IconChevronDown className={`ms-1 ${sortOrder === 'desc' ? 'rotate-180' : ''}`} /> <span className="ms-1">
{sortOrder === 'asc' ? '▲' : '▼'}
</span>
)} )}
</th> </th>
<th style={{minWidth: '180px', maxWidth: '300px', verticalAlign: 'middle', fontWeight: 500, fontSize: '15px'}} className="align-middle">Описание</th> <th style={{minWidth: '180px', maxWidth: '300px'}}>DESCRIPTION</th>
<th className="w-1 align-middle text-end" style={{width: '110px'}}></th> <th className="text-end w-1" style={{ minWidth: 110 }}></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{filteredFilters.map((filter, index) => ( {filteredFilters.map((filter, index) => (
<tr key={index} style={{verticalAlign: 'middle', height: '48px'}}> <tr key={index}>
<td className="align-middle font-monospace" style={{fontSize: '15px'}}> <td className="font-monospace align-middle" style={{fontSize: '15px'}}>
{editingFilter === filter.community ? ( {editingFilter === filter.community ? (
<input <input
ref={editInputRef} ref={editInputRef}
@@ -450,7 +429,7 @@ function FilterManager() {
<span>{filter.community}</span> <span>{filter.community}</span>
)} )}
</td> </td>
<td className="align-middle" style={{fontSize: '15px'}}> <td className="align-middle text-center" style={{fontSize: '15px'}}>
{editingFilter === filter.community ? ( {editingFilter === filter.community ? (
<input <input
type="text" type="text"
@@ -490,36 +469,36 @@ function FilterManager() {
<span>{filter.description}</span> <span>{filter.description}</span>
)} )}
</td> </td>
<td className="align-middle text-end" style={{paddingRight: '0.5rem'}}> <td className="text-end w-1 align-middle" style={{ minWidth: 110 }}>
<div className="btn-list mb-0" style={{gap: '0.25rem'}}> <div className="btn-list gap-1 mb-0">
{editingFilter === filter.community ? ( {editingFilter === filter.community ? (
<> <>
<button <button
className="btn btn-sm btn-success" className="btn btn-icon btn-sm btn-success rounded"
onClick={() => handleSaveEdit(filter.community)} onClick={() => handleSaveEdit(filter.community)}
> >
<IconCheck /> <IconCheck size={18} />
</button> </button>
<button <button
className="btn btn-sm btn-secondary" className="btn btn-icon btn-sm btn-secondary rounded"
onClick={() => handleCancelEdit(filter.community)} onClick={() => handleCancelEdit(filter.community)}
> >
<IconX /> <IconX size={18} />
</button> </button>
</> </>
) : ( ) : (
<> <>
<button <button
className="btn btn-sm btn-outline-primary" className="btn btn-icon btn-sm btn-outline-primary rounded"
onClick={() => startEdit(filter)} onClick={() => startEdit(filter)}
> >
<IconEdit /> <IconEdit size={18} />
</button> </button>
<button <button
className="btn btn-sm btn-outline-danger" className="btn btn-icon btn-sm btn-outline-danger rounded"
onClick={() => handleDelete(filter)} onClick={() => handleDelete(filter)}
> >
<IconTrash /> <IconTrash size={18} />
</button> </button>
</> </>
)} )}