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() {
|
||||
Err(e) => view! {
|
||||
<p class="error">"Could not load applications: " {e.to_string()}</p>
|
||||
}.into_any(),
|
||||
|
||||
Ok(apps) if apps.is_empty() => view! {
|
||||
<p class="empty">"All applications are already linked to this host."</p>
|
||||
}.into_any(),
|
||||
// ── 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>
|
||||
}.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) => 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); }
|
||||
} else {
|
||||
v.retain(|&x| x != 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 {
|
||||
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>
|
||||
}
|
||||
/>
|
||||
{app.name}
|
||||
</label>
|
||||
}
|
||||
}).collect_view()}
|
||||
</div>
|
||||
}.into_any(),
|
||||
})}
|
||||
</div>
|
||||
}).collect_view()}
|
||||
</ul>
|
||||
}.into_any()
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
|
||||
{move || add_action.value().get()
|
||||
.and_then(|r| r.err())
|
||||
.map(|e| view! { <p class="error">{e.to_string()}</p> })
|
||||
}
|
||||
// ── 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}
|
||||
<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>
|
||||
</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() {
|
||||
|
||||
Reference in New Issue
Block a user