feat(host-detail): replace checkboxes with pick list + selected tags in add-app modal
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,9 +20,15 @@ use crate::models::Application;
|
||||
|
||||
// ─── Add applications modal ───────────────────────────────────────────────────
|
||||
|
||||
// Multi-select modal: shows every application not yet linked to the host.
|
||||
// The auto-close Effect lives in the PARENT so that reopening the modal
|
||||
// after a previous success does not immediately dismiss it again.
|
||||
// Scrollable pick list + selected tags:
|
||||
// - Top: scrollable list of available apps; clicking one moves it to the
|
||||
// selected section and removes it from the list.
|
||||
// - Bottom: selected apps shown as removable tags; clicking × puts the app
|
||||
// back in the list.
|
||||
//
|
||||
// The auto-close Effect lives in the PARENT to avoid the re-trigger bug
|
||||
// (an Effect inside a conditionally-rendered component fires on mount and
|
||||
// would immediately close the modal if the action already held a past Ok value).
|
||||
#[component]
|
||||
fn AddAppModal(
|
||||
host_id: i64,
|
||||
@@ -30,8 +36,8 @@ fn AddAppModal(
|
||||
add_action: ServerAction<AddHostApplications>,
|
||||
show_modal: RwSignal<bool>,
|
||||
) -> impl IntoView {
|
||||
// Tracks which application IDs the user has checked.
|
||||
let selected: RwSignal<Vec<i64>> = RwSignal::new(vec![]);
|
||||
// Full Application structs so names are available in the selected tag list.
|
||||
let selected: RwSignal<Vec<Application>> = RwSignal::new(vec![]);
|
||||
|
||||
view! {
|
||||
<div class="modal-backdrop" on:click=move |_| show_modal.set(false)>
|
||||
@@ -45,47 +51,96 @@ fn AddAppModal(
|
||||
</div>
|
||||
|
||||
<div class="modal__body">
|
||||
{move || available_apps_res.get().map(|res| match (*res).clone() {
|
||||
|
||||
// ── Scrollable pick list ──────────────────────────────────
|
||||
{move || match available_apps_res.get() {
|
||||
None => view! { <p class="empty">"Loading…"</p> }.into_any(),
|
||||
Some(r) => match (*r).clone() {
|
||||
Err(e) => view! {
|
||||
<p class="error">"Could not load applications: " {e.to_string()}</p>
|
||||
<p class="error">
|
||||
"Could not load applications: " {e.to_string()}
|
||||
</p>
|
||||
}.into_any(),
|
||||
Ok(apps) => {
|
||||
// Exclude already-selected apps from the displayed list.
|
||||
let sel_ids: Vec<i64> = selected.get()
|
||||
.iter().map(|a| a.id).collect();
|
||||
let displayed: Vec<Application> = apps.into_iter()
|
||||
.filter(|a| !sel_ids.contains(&a.id))
|
||||
.collect();
|
||||
|
||||
Ok(apps) if apps.is_empty() => view! {
|
||||
<p class="empty">"All applications are already linked to this host."</p>
|
||||
}.into_any(),
|
||||
|
||||
Ok(apps) => view! {
|
||||
<div class="app-select-list">
|
||||
{apps.into_iter().map(|app| {
|
||||
let app_id = app.id;
|
||||
if displayed.is_empty() && sel_ids.is_empty() {
|
||||
view! {
|
||||
<label class="app-select-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
on:change=move |e| {
|
||||
let checked = event_target_checked(&e);
|
||||
selected.update(|v| {
|
||||
if checked {
|
||||
if !v.contains(&app_id) { v.push(app_id); }
|
||||
<p class="empty">
|
||||
"All applications are already linked to this host."
|
||||
</p>
|
||||
}.into_any()
|
||||
} else if displayed.is_empty() {
|
||||
view! {
|
||||
<p class="empty">
|
||||
"All available applications have been selected."
|
||||
</p>
|
||||
}.into_any()
|
||||
} else {
|
||||
v.retain(|&x| x != app_id);
|
||||
}
|
||||
view! {
|
||||
<ul class="app-pick-list">
|
||||
{displayed.into_iter().map(|app| {
|
||||
let app_clone = app.clone();
|
||||
view! {
|
||||
<li class="app-pick-item"
|
||||
on:click=move |_| {
|
||||
selected.update(|v| {
|
||||
v.push(app_clone.clone());
|
||||
});
|
||||
}
|
||||
/>
|
||||
>
|
||||
<span>{app.name}</span>
|
||||
<span class="app-pick-item__add">"+"</span>
|
||||
</li>
|
||||
}
|
||||
}).collect_view()}
|
||||
</ul>
|
||||
}.into_any()
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
||||
// ── Selected tags (shown once at least one app is chosen) ─
|
||||
{move || (!selected.get().is_empty()).then(|| {
|
||||
let sel = selected.get();
|
||||
view! {
|
||||
<div class="app-selected-section">
|
||||
<span class="app-selected-label">"Selected:"</span>
|
||||
<div class="app-selected-list">
|
||||
{sel.into_iter().map(|app| {
|
||||
let app_id = app.id;
|
||||
view! {
|
||||
<span class="app-selected-tag">
|
||||
{app.name}
|
||||
</label>
|
||||
<button
|
||||
class="app-selected-tag__remove"
|
||||
type="button"
|
||||
aria-label="Remove"
|
||||
on:click=move |_| {
|
||||
selected.update(|v| {
|
||||
v.retain(|x| x.id != app_id);
|
||||
});
|
||||
}
|
||||
>"×"</button>
|
||||
</span>
|
||||
}
|
||||
}).collect_view()}
|
||||
</div>
|
||||
}.into_any(),
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
})}
|
||||
|
||||
{move || add_action.value().get()
|
||||
.and_then(|r| r.err())
|
||||
.map(|e| view! { <p class="error">{e.to_string()}</p> })
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="modal__actions">
|
||||
<button class="btn-secondary" type="button"
|
||||
@@ -99,7 +154,7 @@ fn AddAppModal(
|
||||
on:click=move |_| {
|
||||
let ids_str = selected.get_untracked()
|
||||
.iter()
|
||||
.map(|id| id.to_string())
|
||||
.map(|a| a.id.to_string())
|
||||
.collect::<Vec<_>>()
|
||||
.join(",");
|
||||
if !ids_str.is_empty() {
|
||||
|
||||
@@ -1249,33 +1249,99 @@ td.col-actions {
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
/* Checkbox list inside the "Add applications" modal */
|
||||
.app-select-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
max-height: 320px;
|
||||
/* ── Pick list (scrollable, click to select) ── */
|
||||
.app-pick-list {
|
||||
list-style: none;
|
||||
margin: 0 0 var(--size-sm);
|
||||
padding: 0;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.app-select-item {
|
||||
.app-pick-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--size-sm);
|
||||
padding: var(--size-sm) var(--size-xs);
|
||||
border-radius: 4px;
|
||||
justify-content: space-between;
|
||||
padding: var(--size-sm) var(--size-md);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-sm);
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.app-select-item:hover {
|
||||
background: var(--bg-surface);
|
||||
.app-pick-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.app-select-item input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
.app-pick-item:hover {
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.app-pick-item__add {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.app-pick-item:hover .app-pick-item__add {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Selected tags (shown below the pick list) ── */
|
||||
.app-selected-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-xs);
|
||||
padding-top: var(--size-sm);
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: var(--size-xs);
|
||||
}
|
||||
|
||||
.app-selected-label {
|
||||
font-size: var(--font-xs, 0.75rem);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.app-selected-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-xs);
|
||||
}
|
||||
|
||||
.app-selected-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
color: var(--accent);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-selected-tag__remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 2px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent);
|
||||
font-size: 0.9rem;
|
||||
color: var(--accent);
|
||||
opacity: 0.7;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.app-selected-tag__remove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user