Refactor search bar to be in column format (testing)

src/components/search.rs

@@ -1,5 +1,8 @@
+use html::Li;
 use leptos::*;
-use crate::search::search;
+use crate::search::search_albums;
+use crate::search::search_artists;
+use crate::search::search_songs;
 use crate::song::Song;
 use crate::models::Album;
 use crate::models::Artist;
@@ -17,7 +20,9 @@ pub fn Search() -> impl IntoView {
 	let status = GlobalState::play_status();
 
     let search_query = create_rw_signal(String::new());
-    let search_results = create_rw_signal((Vec::<(Album, f32)>::new(), Vec::<(Artist, f32)>::new(), Vec::<(Song, f32)>::new()));
+    let album_search_results = create_rw_signal(Vec::<(Album, f32)>::new());
+	let artist_search_results = create_rw_signal(Vec::<(Artist, f32)>::new());
+	let song_search_results = create_rw_signal(Vec::<(Song, f32)>::new());
     let search_limit = 10;
 
     let on_input = move |e: Event| {
@@ -25,26 +30,54 @@ pub fn Search() -> impl IntoView {
 
         log!("Search Query: {:?}", search_query.get_untracked());
 
-        if search_query.get_untracked().len() < 3 {
-            search_results.set((Vec::<(Album, f32)>::new(), Vec::<(Artist, f32)>::new(), Vec::<(Song, f32)>::new()));
-            return;
-        }
         spawn_local(async move {
             log!("Searching for: {:?}", search_query.get_untracked());
-            let results = search(search_query.get_untracked(), search_limit).await;
+            // let results = search(search_query.get_untracked(), search_limit).await;
-            match results {
+            // match results {
-                Ok((albums, artists, songs)) => {
+            //     Ok((albums, artists, songs)) => {
-                    search_results.set((albums, artists, songs));
+            //         search_results.set((albums, artists, songs));
+            //     }
+            //     Err(err) => {
+            //         log!("Error searching: {:?}", err);
+            //     }
+            // }
+			let albums = search_albums(search_query.get_untracked(), search_limit).await;
+			let artists = search_artists(search_query.get_untracked(), search_limit).await;
+			let songs = search_songs(search_query.get_untracked(), search_limit).await;
+
+			match albums {
+				Ok(albums) => {
+					album_search_results.set(albums);
 				}
 				Err(err) => {
-                    log!("Error searching: {:?}", err);
+					log!("Error searching albums: {:?}", err);
+				}
+			}
+
+			match artists {
+				Ok(artists) => {
+					artist_search_results.set(artists);
+				}
+				Err(err) => {
+					log!("Error searching artists: {:?}", err);
+				}
+			}
+
+			match songs {
+				Ok(songs) => {
+					song_search_results.set(songs);
+				}
+				Err(err) => {
+					log!("Error searching songs: {:?}", err);
 				}
 			}
         });
     };
 
     let on_disabled = move |_e: FocusEvent| {
-        
+		status.update(|status| {
+			status.search_active = false;
+		});
         log!("Search Bar Disabled");
     };
 
@@ -65,30 +98,21 @@ pub fn Search() -> impl IntoView {
 				<input type="search" placeholder="Search" on:input=on_input on:blur=on_disabled on:focus=on_enabled/>
 			</div>
 			<div class="search-results">
-				<ul class="search-results-list">
+				<ul class="search-result-list">
-					{
+					{song_search_results.with(|songs| -> Vec<leptos::HtmlElement<Li>> {
-						move || search_results.with(|(albums, artists, songs)| -> Vec<_> {
+						let mut song_list = Vec::new();
-							let mut album_index = 0;
+						log!("Songs: {:?}", songs);
-							let mut artist_index = 0;
+						for (song, _) in songs {
-							let mut song_index = 0;
+							song_list.push(view! {
-							let mut views = Vec::new();
-							while album_index < albums.len() || artist_index < artists.len() || song_index < songs.len() {
-								const RM_BTN_SIZE: &str = "2.5rem";
-								let album_score = if album_index < albums.len() { albums[album_index].1 } else { f32::MAX };
-								let artist_score = if artist_index < artists.len() { artists[artist_index].1 } else { f32::MAX };
-								let song_score = if song_index < songs.len() { songs[song_index].1 } else { f32::MAX };
-								if artist_score <= album_score && artist_score <= song_score {
-									let artist = &artists[artist_index].0;
-									artist_index += 1;
-									views.push(view! {
 								<li class="search-result">
 									<div class="result-container">
-												<div class="search-result-artist">
+										<Song song_image_path=match song.image_path.clone() {
-													{artist.name.clone()}
+											Some(path) => path,
-												</div>
+											None => "".to_string()
+										} song_title=song.title.clone() song_artist="".to_string() />
 										<div class="right-side-result">
 											<div class="search-item-type">
-														"(Artist)"
+												"(Song)"
 											</div>
 											<button class="search-result-options" on:mousedown=prevent_focus>
 												<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
@@ -98,10 +122,16 @@ pub fn Search() -> impl IntoView {
 								</li>
 							});
 						}
-								else if album_score <= artist_score && album_score <= song_score {
+
-									let album = &albums[album_index].0;
+						song_list
-									album_index += 1;
+					})}
-									views.push(view! {
+				</ul>
+				<ul class="search-result-list">
+					{album_search_results.with(|albums| -> Vec<leptos::HtmlElement<Li>> {
+						let mut album_list = Vec::new();
+						log!("Albums: {:?}", albums);
+						for (album, _) in albums {
+							album_list.push(view! {
 								<li class="search-result">
 									<div class="result-container">
 										<div class="search-result-album">
@@ -123,10 +153,49 @@ pub fn Search() -> impl IntoView {
 								</li>
 							});
 						}
-								else if song_score <= artist_score && song_score <= album_score {
+
-									let song = &songs[song_index].0;
+						album_list
-									song_index += 1;
+					})}
-									views.push(view! {
+				</ul>
+				<ul class="search-result-list">
+					{artist_search_results.with(|artists| -> Vec<leptos::HtmlElement<Li>> {
+						let mut artist_list = Vec::new();
+						log!("Artists: {:?}", artists);
+						for (artist, _) in artists {
+							artist_list.push(view! {
+								<li class="search-result">
+									<div class="result-container">
+										<div class="search-result-artist">
+											{artist.name.clone()}
+										</div>
+										<div class="right-side-result">
+											<div class="search-item-type">
+												"(Artist)"
+											</div>
+											<button class="search-result-options" on:mousedown=prevent_focus>
+												<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
+											</button>
+										</div>
+									</div>
+								</li>
+							});
+						}
+
+						artist_list
+					})}
+				</ul>
+				/* {
+					move || search_results.with(|(albums, artists, songs)| -> (leptos::HtmlElement<Ul>, leptos::HtmlElement<Ul>, leptos::HtmlElement<Ul>) {
+						// log the search results
+						log!("Albums: {:?}", albums);
+						log!("Artists: {:?}", artists);
+						log!("Songs: {:?}", songs);
+						
+						// We need 3 uls, one for songs, one for albums, and one for artists, each in ascending order of score (distance)
+						let mut song_list = Vec::new();
+
+						for (song, score) in songs {
+							song_list.push(view! {
 								<li class="search-result">
 									<div class="result-container">
 										<Song song_image_path=match song.image_path.clone() {
@@ -145,11 +214,70 @@ pub fn Search() -> impl IntoView {
 								</li>
 							});
 						}
+
+						let mut album_list = Vec::new();
+
+						for (album, score) in albums {
+							album_list.push(view! {
+								<li class="search-result">
+								<div class="result-container">
+									<div class="search-result-album">
+										{album.title.clone()}
+										{match album.release_date {
+											Some(date) => format!(" ({})", date),
+											None => "".to_string()
+										}}
+									</div>
+									<div class="right-side-result">
+										<div class="search-item-type">
+											"(Album)"
+										</div>
+										<button class="search-result-options" on:mousedown=prevent_focus>
+											<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
+										</button>
+									</div>
+								</div>
+							</li>
+							});
 						}
-							views
+
-						})
+						let mut artist_list = Vec::new();
+
+						for (artist, score) in artists {
+							artist_list.push(view! {
+								<li class="search-result">
+									<div class="result-container">
+										<div class="search-result-artist">
+											{artist.name.clone()}
+										</div>
+										<div class="right-side-result">
+											<div class="search-item-type">
+												"(Artist)"
+											</div>
+											<button class="search-result-options" on:mousedown=prevent_focus>
+												<Icon class="search-result-options-icon" width=OPTIONS_BTN_SIZE height=OPTIONS_BTN_SIZE icon=icondata::BsThreeDotsVertical />
+											</button>
+										</div>
+									</div>
+								</li>
+							});
 						}
+
+						(view! {
+							<ul class="search-result-list">
+								{song_list}
 							</ul>
+						}, view! {
+							<ul class="search-result-list">
+								{album_list}
+							</ul>
+						}, view! {
+							<ul class="search-result-list">
+								{artist_list}
+							</ul>
+						})
+					}) */
+				// }
 			</div>
 		</div>
 	}