eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

added album search feature for upload

Browse Source
This commit is contained in:
Danny Zou 2024-05-16 18:59:16 -04:00
parent 955fc84412
commit caefc46fcc
3 changed files with 74 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/upload.rs
View File

@ -3,7 +3,9 @@ use leptos::*;
use leptos_icons::*;
use leptos_router::Form;
use crate::search::search_artists;
use crate::search::search_albums;
use crate::models::Artist;
use crate::models::Album;
#[component]
pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
@ -27,12 +29,16 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
let (artists, set_artists) = create_signal("".to_string());
let (filtered_artists, set_filtered_artists) = create_signal(vec![]);
let (albums, set_albums) = create_signal("".to_string());
let (filtered_albums, set_filtered_albums) = create_signal(vec![]);
let close_dialog = move |ev: leptos::ev::MouseEvent| {
ev.prevent_default();
open.set(false);
};
// Create a filter function to handle filtering artists
let handle_filter = move |ev: leptos::ev::Event| {
// Allow users to search for artists by name, converts the artist name to artist id to be handed off to backend
let handle_filter_artists = move |ev: leptos::ev::Event| {
ev.prevent_default();
let artist_input: String = event_target_value(&ev);
@ -55,6 +61,26 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
}
})
};
// Create a filter function to handle filtering albums
// Allow users to search for albums by title, converts the album title to album id to be handed off to backend
let handle_filter_albums = move |ev: leptos::ev::Event| {
ev.prevent_default();
let album_input: String = event_target_value(&ev);
//Update the album signal with the input
set_albums.update(|value: &mut String| *value = album_input);
spawn_local(async move {
let filter_results = search_albums(albums.get_untracked(), 3).await;
if let Err(err) = filter_results {
log!("Error filtering albums: {:?}", err);
} else if let Ok(albums) = filter_results {
log!("Filtered albums: {:?}", albums);
set_filtered_albums.update(|value| *value = albums);
}
})
};
view! {
<Show when=open fallback=move || view! {}>
<div class="upload-container" open=open>
@ -67,16 +93,16 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
<input type="text" name="title" required class="text-input" required/>
<span>Title</span>
</div>
<div class="artists">
<div class="artists has-search">
<div class="input-bx">
<input type="text" name="artist_ids" class="text-input" prop:value=artists required on:input=handle_filter/>
<input type="text" name="artist_ids" class="text-input" prop:value=artists required on:input=handle_filter_artists/>
<span>Artists</span>
</div>
<Show
when=move || {filtered_artists.get().len() > 0}
fallback=move || view! {}
>
<ul class="artist_results">
<ul class="artist_results search-results">
{
move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
<Artist artist=filtered_artist.clone() artists=artists set_artists=set_artists set_filtered=set_filtered_artists/>
@ -85,10 +111,25 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
</ul>
</Show>
</div>
<div class="albums has-search">
<div class="input-bx">
<input type="text" name="album_id" class="text-input" required/>
<input type="text" name="album_id" class="text-input" required prop:value=albums on:input=handle_filter_albums/>
<span>Album ID</span>
</div>
<Show
when=move || {filtered_albums.get().len() > 0}
fallback=move || view! {}
>
<ul class="album_results search-results">
{
move || filtered_albums.get().iter().enumerate().map(|(_index,filtered_album)| view! {
<Album album=filtered_album.clone() _albums=albums set_albums=set_albums set_filtered=set_filtered_albums/>
}).collect::<Vec<_>>()
}
</ul>
</Show>
</div>
<div class="input-bx">
<input type="number" name="track_number" class="text-input" required/>
<span>Track Number</span>
@ -113,12 +154,11 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
#[component]
pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSignal<String>, set_filtered: WriteSignal<Vec<Artist>>) -> impl IntoView {
// Create a function to add an artist to the artist input
// Converts artist name to artist id and adds it to the artist input
let add_artist = move |_| {
//Create an empty string to hold the artist ids
//Create an empty string to hold previous artist ids
let mut s: String = String::from("");
//Get the current value of the artist input
//Get the current artist input
let all_artirts: String = artists.get();
//Split the input into a vector of artists separated by commas
let mut ids: Vec<&str> = all_artirts.split(",").collect();
@ -152,8 +192,25 @@ pub fn Artist(artist: Artist, artists: ReadSignal<String>, set_artists: WriteSig
};
view! {
<div class="artist" on:click=add_artist>
<div class="artist result" on:click=add_artist>
{artist.name.clone()}
</div>
}
}
#[component]
pub fn Album(album: Album, _albums: ReadSignal<String>, set_albums: WriteSignal<String>, set_filtered: WriteSignal<Vec<Album>>) -> impl IntoView {
//Converts album title to album id to upload a song
let add_album = move |_| {
let value_str = match album.id.clone() {
Some(v) => v.to_string(),
None => String::from("None"),
};
set_albums.update(|value| *value = value_str);
set_filtered.update(|value| *value = vec![]);
};
view! {
<div class="album result" on:click=add_album>
{album.title.clone()}
</div>
}
}

2
src/models.rs
View File

@ -168,7 +168,7 @@ impl Artist {
#[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable, Identifiable))]
#[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::albums))]
#[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
#[derive(Serialize, Deserialize)]
#[derive(Serialize, Deserialize, Clone, Debug)]
pub struct Album {
/// A unique id for the album
#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]

11
style/upload.scss
View File

@ -141,13 +141,10 @@
color: #7f8fa6;
}
}
.artists {
.has-search {
position: relative;
width: 325px;
.input-bx {
}
.artist_results {
.search-results {
display: flex;
flex-direction: column;
border: 1px solid white;
@ -158,7 +155,7 @@
z-index: 2;
border-radius: 5px;
padding: 0;
.artist {
.result {
border-bottom: 1px solid white;
padding: 10px;
cursor: pointer;
@ -167,7 +164,7 @@
background-color: #7f8fa6;
}
}
.artist:last-child {
.result:last-child {
border-bottom: none;
}
}