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

feat(GatewayAutocomplete): enhance UI layout and improve gateway card display for better user interaction
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 2m19s
Details

Browse Source
This commit is contained in:
denozord
2026-02-10 18:22:34 +07:00
parent 5e0397f667
commit 5dfe76f1df
1 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/FilterManager.jsx
+29 -36
View File
@@ -431,7 +431,7 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
return (
<div className="mb-3" ref={containerRef}>
<label className={`form-label ${required ? 'required' : ''}`}>{label}</label>
<div className="position-relative">
<div className="position-relative mb-2">
<div className="input-icon">
<span className="input-icon-addon">
<IconServer size={16} />
@@ -443,24 +443,17 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
value={inputValue}
onChange={handleInputChange}
onFocus={() => setIsOpen(true)}
onBlur={() => setIsOpen(false)}
onKeyDown={handleKeyDown}
placeholder={placeholder}
required={required && !value}
autoComplete="off"
/>
<span
className="input-icon-addon cursor-pointer"
style={{ right: 0, left: 'auto' }}
onClick={() => setIsOpen(!isOpen)}
>
<IconChevronDown size={16} className={isOpen ? 'rotate-180' : ''} style={{ transition: 'transform 0.2s' }} />
</span>
</div>
</div>
{/* Карточки gateway вместо выпадающего списка */}
{isOpen && (
<div className="mt-3">
{/* Карточки gateway под полем, ВСЕГДА видимы */}
<div className="mt-1">
{gateways.length === 0 ? (
<div className="text-muted small d-flex align-items-center">
<IconAlertTriangle size={14} className="me-2 text-warning" />
@@ -471,7 +464,7 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
Ничего не найдено. Уточните запрос по IP, имени или описанию.
</div>
) : (
<div className="row row-cols-1 row-cols-md-2 g-2">
<div className="row row-cols-1 row-cols-md-3 g-2">
{filteredGateways.map((gw, idx) => {
const isSelected = gw.name === value;
const isHighlighted = highlightedIndex === idx;
@@ -486,35 +479,35 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
<div
className={
'card h-100 gateway-card ' +
(isSelected ? 'border-primary shadow-sm ' : '') +
(isHighlighted ? 'border-2 ' : '')
(isSelected ? 'bg-primary text-white border-primary shadow-sm ' : 'bg-white ') +
(!isSelected && isHighlighted ? 'border-primary ' : '')
}
style={{ borderRadius: '10px', transition: 'all 0.12s ease' }}
>
<div className="card-body py-2 px-3 d-flex align-items-start gap-2">
<span className="avatar avatar-sm bg-primary-lt">
{gw.country ? countryToFlag(gw.country) : <IconServer size={16} />}
</span>
<div className="flex-grow-1 min-w-0">
<div className="d-flex align-items-center gap-2 mb-1">
<code className="fw-bold">{gw.name}</code>
{gw.comment && (
<span className="text-muted small text-truncate" style={{ maxWidth: '180px' }}>
{gw.comment}
</span>
<div className="card-body py-2 px-3">
<div className="d-flex align-items-start gap-2 mb-1">
<span className={`avatar avatar-sm ${isSelected ? 'bg-white text-primary' : 'bg-primary-lt'}`}>
{gw.country ? countryToFlag(gw.country) : <IconServer size={16} />}
</span>
<div className="flex-grow-1 min-w-0">
<div className="fw-bold text-truncate">
{gw.ip || gw.name}
</div>
<div className={`small text-truncate ${isSelected ? 'text-white-75' : 'text-muted'}`}>
{gw.comment || gw.name}
</div>
{gw.serverDns && (
<div className={`small text-truncate ${isSelected ? 'text-white-75' : 'text-muted'}`}>
{gw.serverDns}
</div>
)}
</div>
<div className="text-muted small">
{gw.ip && <span>IP: {gw.ip}</span>}
{gw.ip && gw.serverDns && <span className="mx-1">•</span>}
{gw.serverDns && <span>{gw.serverDns}</span>}
</div>
{gw.primary && (
<span className={`badge ${isSelected ? 'bg-white text-primary' : 'bg-green-lt text-green'}`}>
Основной
</span>
)}
</div>
{gw.primary && (
<span className="badge bg-green-lt text-green align-self-start">
Основной
</span>
)}
</div>
</div>
</button>
@@ -524,7 +517,7 @@ function GatewayAutocomplete({ label, value, onChange, gateways = [], required =
</div>
)}
</div>
)}
</div>
{/* Показываем выбранный gateway отдельной карточкой под полем */}
{value && selectedGateway && !isOpen && (