feat(navigation): link app names on host detail to app detail with back button
- Host detail: application names are now clickable links to
/applications/:id?back=/hosts/:host_id
- Application detail: back button reads the ?back query param and
returns to the originating host page (label "← Host") or falls
back to /applications ("← Applications")
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
|||||||
// - Delete button : confirmation modal, then navigates back to /applications
|
// - Delete button : confirmation modal, then navigates back to /applications
|
||||||
|
|
||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
use leptos_router::hooks::{use_navigate, use_params_map};
|
use leptos_router::hooks::{use_navigate, use_params_map, use_query_map};
|
||||||
|
|
||||||
use crate::api::applications::{
|
use crate::api::applications::{
|
||||||
AddPortToApplication, DeleteApplication, RemovePortFromApplication,
|
AddPortToApplication, DeleteApplication, RemovePortFromApplication,
|
||||||
@@ -66,6 +66,16 @@ pub fn ApplicationDetailPage() -> impl IntoView {
|
|||||||
.unwrap_or(0)
|
.unwrap_or(0)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let query = use_query_map();
|
||||||
|
let back_url = move || {
|
||||||
|
query.read().get("back")
|
||||||
|
.map(|s| s.to_string())
|
||||||
|
.unwrap_or_else(|| "/applications".to_string())
|
||||||
|
};
|
||||||
|
let back_label = move || {
|
||||||
|
if back_url().starts_with("/hosts/") { "← Host" } else { "← Applications" }
|
||||||
|
};
|
||||||
|
|
||||||
let update_action = ServerAction::<UpdateApplication>::new();
|
let update_action = ServerAction::<UpdateApplication>::new();
|
||||||
let add_port_action = ServerAction::<AddPortToApplication>::new();
|
let add_port_action = ServerAction::<AddPortToApplication>::new();
|
||||||
let remove_port_action = ServerAction::<RemovePortFromApplication>::new();
|
let remove_port_action = ServerAction::<RemovePortFromApplication>::new();
|
||||||
@@ -182,7 +192,9 @@ pub fn ApplicationDetailPage() -> impl IntoView {
|
|||||||
view! {
|
view! {
|
||||||
// ── Page header ───────────────────────────────────
|
// ── Page header ───────────────────────────────────
|
||||||
<div class="page-header detail-page-header">
|
<div class="page-header detail-page-header">
|
||||||
<a class="back-btn" href="/applications">"← Applications"</a>
|
<a class="back-btn" href=move || back_url()>
|
||||||
|
{move || back_label()}
|
||||||
|
</a>
|
||||||
<h1 class="detail-page-title">{move || name_sig.get()}</h1>
|
<h1 class="detail-page-title">{move || name_sig.get()}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -385,7 +385,10 @@ pub fn HostDetailPage() -> impl IntoView {
|
|||||||
let app_id = app.id;
|
let app_id = app.id;
|
||||||
view! {
|
view! {
|
||||||
<div class="app-row">
|
<div class="app-row">
|
||||||
<span class="app-row__name">{app.name}</span>
|
<a class="table-link"
|
||||||
|
href=format!("/applications/{}?back=/hosts/{}", app_id, id)>
|
||||||
|
{app.name}
|
||||||
|
</a>
|
||||||
<button
|
<button
|
||||||
class="btn-danger"
|
class="btn-danger"
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
Reference in New Issue
Block a user