133 lines
5.5 KiB
Rust
133 lines
5.5 KiB
Rust
use yew::prelude::*;
|
|
use yew_router::prelude::*;
|
|
|
|
use crate::api;
|
|
use crate::pages::Route;
|
|
use crate::types::ArtistListItem;
|
|
|
|
#[function_component(LibraryPage)]
|
|
pub fn library_page() -> Html {
|
|
let artists = use_state(|| None::<Vec<ArtistListItem>>);
|
|
let error = use_state(|| None::<String>);
|
|
|
|
let fetch_artists = {
|
|
let artists = artists.clone();
|
|
let error = error.clone();
|
|
Callback::from(move |_: ()| {
|
|
let artists = artists.clone();
|
|
let error = error.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::list_artists(200, 0).await {
|
|
Ok(a) => artists.set(Some(a)),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
})
|
|
};
|
|
|
|
{
|
|
let fetch = fetch_artists.clone();
|
|
use_effect_with((), move |_| {
|
|
fetch.emit(());
|
|
});
|
|
}
|
|
|
|
if let Some(ref err) = *error {
|
|
return html! { <div class="error">{ format!("Error: {err}") }</div> };
|
|
}
|
|
|
|
let Some(ref artists) = *artists else {
|
|
return html! { <p class="loading">{ "Loading..." }</p> };
|
|
};
|
|
|
|
html! {
|
|
<div>
|
|
<div class="page-header">
|
|
<h2>{ "Library" }</h2>
|
|
<p>{ format!("{} artists", artists.len()) }</p>
|
|
</div>
|
|
|
|
if artists.is_empty() {
|
|
<p class="text-muted">{ "No artists in library. Use Search to add some!" }</p>
|
|
} else {
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{ "Name" }</th>
|
|
<th>{ "Monitored" }</th>
|
|
<th>{ "Owned" }</th>
|
|
<th>{ "Watched" }</th>
|
|
<th>{ "Tracks" }</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ for artists.iter().map(|a| {
|
|
let artist_id = a.id;
|
|
let error = error.clone();
|
|
let fetch = fetch_artists.clone();
|
|
let on_remove = Callback::from(move |_: MouseEvent| {
|
|
let error = error.clone();
|
|
let fetch = fetch.clone();
|
|
wasm_bindgen_futures::spawn_local(async move {
|
|
match api::delete_artist(artist_id).await {
|
|
Ok(_) => fetch.emit(()),
|
|
Err(e) => error.set(Some(e.0)),
|
|
}
|
|
});
|
|
});
|
|
html! {
|
|
<tr>
|
|
<td>
|
|
<Link<Route> to={Route::Artist { id: a.id.to_string() }}>
|
|
{ &a.name }
|
|
</Link<Route>>
|
|
</td>
|
|
<td style="text-align: center;">
|
|
if a.monitored {
|
|
<span style="color: var(--success);" title="Monitored">{ "\u{2713}" }</span>
|
|
}
|
|
</td>
|
|
if a.enriched {
|
|
<td>
|
|
<span class="text-sm" style={
|
|
if a.total_owned >= a.total_watched && a.total_watched > 0 { "color: var(--success);" }
|
|
else if a.total_owned > 0 { "color: var(--warning);" }
|
|
else { "color: var(--text-muted);" }
|
|
}>
|
|
{ format!("{}/{}", a.total_owned, a.total_watched) }
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-sm" style={
|
|
if a.total_watched > 0 { "color: var(--accent);" }
|
|
else { "color: var(--text-muted);" }
|
|
}>
|
|
{ format!("{}/{}", a.total_watched, a.total_items) }
|
|
</span>
|
|
</td>
|
|
} else {
|
|
<td colspan="2" class="text-sm text-muted loading">
|
|
{ "Awaiting artist enrichment..." }
|
|
</td>
|
|
}
|
|
<td class="text-muted text-sm">
|
|
if a.enriched && a.total_items > 0 {
|
|
{ a.total_items }
|
|
}
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-danger" onclick={on_remove}>
|
|
{ "Remove" }
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</div>
|
|
}
|
|
}
|