mathieu/rust-ipam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(applications): replace inline add form with modal and add name filter

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mathieu
2026-05-16 02:53:40 +02:00
parent 4d0be98160
commit 1b55b13541
1 changed files with 127 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/client/applications.rs
View File

@@ -1,7 +1,8 @@
// client/applications.rs — Applications list page
//
// Displays all applications with:
// - Add form : inline form to create an application by name
// - Add button : opens a modal to create an application by name
// - Filter bar : name substring filter (client-side)
// - Table : application name + number of associated hosts
// - Delete : confirmation modal before deletion
@@ -13,6 +14,61 @@ use crate::api::applications::{
get_applications_with_counts,
};
// ─── Add application modal ────────────────────────────────────────────────────
#[component]
fn AddApplicationModal(
create_action: ServerAction<CreateApplication>,
show_modal: RwSignal<bool>,
) -> impl IntoView {
Effect::new(move |_| {
if let Some(Ok(_)) = create_action.value().get() {
show_modal.set(false);
}
});
view! {
<div class="modal-backdrop" on:click=move |_| show_modal.set(false)>
<div class="modal" on:click=move |e| e.stop_propagation()>
<div class="modal__header">
<h2>"Add an application"</h2>
<button class="modal__close" type="button" aria-label="Close"
on:click=move |_| show_modal.set(false)>
"×"
</button>
</div>
<ActionForm action=create_action>
<div class="add-form__fields">
<label>
"Name"
<input
type="text"
name="name"
placeholder="e.g. Nginx, PostgreSQL, Prometheus"
required
/>
</label>
</div>
<div class="modal__actions">
<button class="btn-secondary" type="button"
on:click=move |_| show_modal.set(false)>
"Cancel"
</button>
<button type="submit">"Add application"</button>
</div>
</ActionForm>
{move || create_action.value().get()
.and_then(|r| r.err())
.map(|e| view! { <p class="error">{e.to_string()}</p> })
}
</div>
</div>
}.into_any()
}
// ─── Delete confirmation modal ────────────────────────────────────────────────
#[component]
@@ -68,10 +124,15 @@ pub fn ApplicationsPage() -> impl IntoView {
let create_action = ServerAction::<CreateApplication>::new();
let delete_action = ServerAction::<DeleteApplication>::new();
let show_modal = RwSignal::new(false);
// Some(app) = delete modal open for that app; None = closed.
let pending_delete: RwSignal<Option<ApplicationWithCounts>> = RwSignal::new(None);
// Close the modal automatically after a successful deletion.
// Name filter (client-side — list is typically small)
let name_filter = RwSignal::new(String::new());
// Close the delete modal automatically after a successful deletion.
Effect::new(move |_| {
if let Some(Ok(_)) = delete_action.value().get() {
pending_delete.set(None);
@@ -85,7 +146,22 @@ pub fn ApplicationsPage() -> impl IntoView {
view! {
<div class="applications-page">
// ── Page header ───────────────────────────────────────────────────
<div class="page-header">
<h1>"Applications"</h1>
<button class="btn-primary" on:click=move |_| show_modal.set(true)>
"+ Add application"
</button>
</div>
// ── Add modal ─────────────────────────────────────────────────────
{move || show_modal.get().then(|| view! {
<AddApplicationModal
create_action=create_action
show_modal=show_modal
/>
})}
// ── Delete modal ──────────────────────────────────────────────────
{move || pending_delete.get().map(|app| view! {
@@ -96,31 +172,22 @@ pub fn ApplicationsPage() -> impl IntoView {
/>
})}
// ── Add form ──────────────────────────────────────────────────────
<section class="add-form">
<h2>"Add an application"</h2>
<ActionForm action=create_action>
<label>
// ── Filter bar ────────────────────────────────────────────────────
<section class="filter-bar">
<div class="filter-bar__fields">
<label class="filter-field">
"Name"
<input
type="text"
name="name"
placeholder="e.g. Nginx, PostgreSQL, Prometheus"
required
placeholder="Search…"
on:input=move |e| name_filter.set(event_target_value(&e))
/>
</label>
<button type="submit">"Add"</button>
</ActionForm>
{move || create_action.value().get()
.and_then(|r| r.err())
.map(|e| view! { <p class="error">{e.to_string()}</p> })
}
</div>
</section>
// ── Application list ──────────────────────────────────────────────
<section class="list">
<h2>"All applications"</h2>
{move || delete_action.value().get()
.and_then(|r| r.err())
.map(|e| view! { <p class="error">"Delete failed: " {e.to_string()}</p> })
@@ -132,11 +199,18 @@ pub fn ApplicationsPage() -> impl IntoView {
<p class="error">"Could not load applications: " {e.to_string()}</p>
}.into_any(),
Ok(list) if list.is_empty() => view! {
<p class="empty">"No applications yet. Add one above."</p>
}.into_any(),
Ok(list) => {
let filter = name_filter.get().to_lowercase();
let filtered: Vec<_> = list.into_iter()
.filter(|app| filter.is_empty() || app.name.to_lowercase().contains(&filter))
.collect();
Ok(list) => view! {
if filtered.is_empty() {
view! {
<p class="empty">"No applications match the current filter."</p>
}.into_any()
} else {
view! {
<div class="table-container">
<table>
<thead>
@@ -147,7 +221,7 @@ pub fn ApplicationsPage() -> impl IntoView {
</tr>
</thead>
<tbody>
{list.into_iter().map(|app| {
{filtered.into_iter().map(|app| {
let app_clone = app.clone();
view! {
<tr>
@@ -166,7 +240,9 @@ pub fn ApplicationsPage() -> impl IntoView {
</tbody>
</table>
</div>
}.into_any(),
}.into_any()
}
}
})}
</Suspense>
</section>