Liittymien VLAN/Laite/IP-kentät hakukentiksi + IP/verkko-tuki

- Korvattu select-dropdownit hakukentillä (searchable combobox)
  - Kirjoittamalla suodattaa tuloksia nimellä, IP:llä, sijainnilla jne.
  - Nuolinäppäimillä navigointi, Enter valitsee, Esc sulkee
  - Vapaan tekstin syöttö mahdollista jos IPAM:sta ei löydy
- IP-kenttä tukee nyt myös verkkoja (subnet/prefix) IP-osoitteiden lisäksi
  - Vapaat IP:t, varatut IP:t ja verkot ryhmitelty omiin osioihinsa
  - Badge-värit: vihreä (vapaa), punainen (varattu), sininen (subnet)
- Sama hakukenttä-komponentti sekä netadmin-modalissa että asiakasformissa
- API palauttaa nyt subnetit IP-listan mukana

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 00:29:05 +02:00
parent f913a87b14
commit 2cacea2a2c
4 changed files with 229 additions and 133 deletions

View File

@@ -1820,3 +1820,32 @@ span.empty {
border-radius: 3px;
font-size: 0.82rem;
}
/* Searchable combobox */
.combo-wrap { position: relative; }
.combo-wrap input {
width: 100%; box-sizing: border-box;
padding: 0.5rem 0.7rem; border: 1px solid #d1d5db; border-radius: 6px;
font-size: 0.9rem; background: #fff;
}
.combo-wrap input:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.combo-list {
display: none; position: absolute; left: 0; right: 0; top: 100%;
max-height: 220px; overflow-y: auto; z-index: 100;
background: #fff; border: 1px solid #d1d5db; border-top: none;
border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.combo-list.open { display: block; }
.combo-opt {
padding: 0.4rem 0.7rem; cursor: pointer; font-size: 0.85rem;
display: flex; align-items: center; gap: 0.4rem;
}
.combo-opt:hover, .combo-opt.active { background: #eff6ff; }
.combo-opt .combo-sub { font-size: 0.78rem; color: #888; margin-left: auto; white-space: nowrap; }
.combo-opt .combo-badge {
font-size: 0.7rem; padding: 1px 5px; border-radius: 4px; font-weight: 500;
}
.combo-badge.free { background: #dcfce7; color: #166534; }
.combo-badge.taken { background: #fee2e2; color: #991b1b; }
.combo-badge.subnet { background: #e0e7ff; color: #3730a3; }
.combo-grp { padding: 0.3rem 0.7rem; font-size: 0.75rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.03em; }