From caefc46fcc0db8b1732cb7fa352f5cf17e82d905 Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Thu, 16 May 2024 18:59:16 -0400 Subject: [PATCH] added album search feature for upload --- src/components/upload.rs | 81 ++++++++++++++++++++++++++++++++++------ src/models.rs | 2 +- style/upload.scss | 11 ++---- 3 files changed, 74 insertions(+), 20 deletions(-) diff --git a/src/components/upload.rs b/src/components/upload.rs index 8e35c4b..88612d5 100644 --- a/src/components/upload.rs +++ b/src/components/upload.rs @@ -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) -> impl IntoView { @@ -27,12 +29,16 @@ pub fn Upload(open: RwSignal) -> 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) -> 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! {
@@ -67,16 +93,16 @@ pub fn Upload(open: RwSignal) -> impl IntoView { Title
-
+
- + Artists
0} fallback=move || view! {} > -
    +
      { move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! { @@ -85,10 +111,25 @@ pub fn Upload(open: RwSignal) -> impl IntoView {
-
- - Album ID +
+
+ + Album ID +
+ 0} + fallback=move || view! {} + > +
    + { + move || filtered_albums.get().iter().enumerate().map(|(_index,filtered_album)| view! { + + }).collect::>() + } +
+
+
Track Number @@ -113,12 +154,11 @@ pub fn Upload(open: RwSignal) -> impl IntoView { #[component] pub fn Artist(artist: Artist, artists: ReadSignal, set_artists: WriteSignal, set_filtered: WriteSignal>) -> 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, set_artists: WriteSig }; view! { -
+
{artist.name.clone()}
} +} +#[component] +pub fn Album(album: Album, _albums: ReadSignal, set_albums: WriteSignal, set_filtered: WriteSignal>) -> 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! { +
+ {album.title.clone()} +
+ } } \ No newline at end of file diff --git a/src/models.rs b/src/models.rs index ad5cc6c..e9aa7b7 100644 --- a/src/models.rs +++ b/src/models.rs @@ -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))] diff --git a/style/upload.scss b/style/upload.scss index b84920b..8da99e2 100644 --- a/style/upload.scss +++ b/style/upload.scss @@ -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; } }