Add searchbar component

src/searchbar.rs

@@ -0,0 +1,154 @@
+use crate::search::search;
+use crate::playstatus::PlayStatus;
+use crate::song::Song;
+use crate::models::Album;
+use crate::models::Artist;
+use crate::models::Song;
+use leptos::*;
+use leptos::ev::*;
+use leptos::leptos_dom::*;
+use leptos_icons::*;
+use leptos_icons::BsIcon::*;
+
+const OPTIONS_BTN_SIZE: &str = "2.5rem";
+
+#[component]
+pub fn SearchBar(status: RwSignal<PlayStatus>) -> impl IntoView {
+    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 search_limit = 10;
+
+    let on_input = move |e: Event| {
+        search_query.set(event_target_value(&e));
+
+        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;
+            match results {
+                Ok((albums, artists, songs)) => {
+                    search_results.set((albums, artists, songs));
+                }
+                Err(err) => {
+                    log!("Error searching: {:?}", err);
+                }
+            }
+        });
+    };
+
+    let on_disabled = move |_e: FocusEvent| {
+        
+        log!("Search Bar Disabled");
+    };
+
+    let on_enabled = move |_e: FocusEvent| {
+        status.update(|status| {
+            status.search_active = true;
+        });
+        log!("Search Bar Enabled");
+    };
+
+	let prevent_focus = move |e: MouseEvent| {
+		e.prevent_default();
+	};
+
+    view! {
+		<div class="search-container">
+			<div class="search-bar">
+				<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">
+					{
+						move || search_results.with(|(albums, artists, songs)| -> Vec<_> {
+							let mut album_index = 0;
+							let mut artist_index = 0;
+							let mut song_index = 0;
+							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">
+													{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=Icon::from(BsThreeDotsVertical) />
+													</button>
+												</div>
+											</div>
+										</li>
+									});
+								}
+								else if album_score <= artist_score && album_score <= song_score {
+									let album = &albums[album_index].0;
+									album_index += 1;
+									views.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=Icon::from(BsThreeDotsVertical) />
+													</button>
+												</div>
+											</div>
+										</li>
+									});
+								}
+								else if song_score <= artist_score && song_score <= album_score {
+									let song = &songs[song_index].0;
+									song_index += 1;
+									views.push(view! {
+										<li class="search-result">
+											<div class="result-container">
+												<Song song_image_path=match song.image_path.clone() {
+													Some(path) => path,
+													None => "".to_string()
+												} song_title=song.title.clone() song_artist="".to_string() />
+												<div class="right-side-result">
+													<div class="search-item-type">
+														"(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=Icon::from(BsThreeDotsVertical) />
+													</button>
+												</div>
+											</div>
+										</li>
+									});	
+								}
+							}
+							views
+						})
+					}
+				</ul>
+			</div>
+		</div>
+	}
+}

style/main.scss

@@ -3,6 +3,8 @@
 @import 'queue.scss';
 @import 'login.scss';
 @import 'signup.scss';
+@import 'song.scss';
+@import 'searchbar.scss';
 
 body {
 	font-family: sans-serif;
@@ -11,3 +13,8 @@ body {
 	margin: 0;
 	padding: 0;
 }
+
+.home {
+	width: 100%;
+	height: 100%;
+}

style/searchbar.scss

@@ -0,0 +1,99 @@
+@import 'theme.scss';
+
+.search-container {
+	display: flex;
+	margin: 5px auto;
+	margin-left: 282px;
+	border-radius: 5px;
+	height: 100%;
+	width: calc(100% - 690px);
+	background-color: $search-background-color;
+}
+
+.search-bar {
+	background-color: transparent;
+	border-radius: 5px;
+	padding: 10px;
+	display: flex;
+	justify-content: left;
+	z-index: 10;
+}
+  
+.search-bar input[type="search"] {
+	background-color: gray;
+	border: none;
+	outline: none;
+	color: black;
+	padding: 10px;
+	border-radius: 5px;
+	font-size: 16px;
+	&::placeholder {
+		color: rgb(61, 61, 61);
+	}
+}
+  
+.search-results {
+	background-color: #212121;
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	display: flex;
+	margin-top: 55px;
+	height: calc(100% - 143px);
+	width: calc(100% - 690px);
+	position: absolute;
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+
+		li {
+			width: calc(100% - 20px);
+			padding: 10px;
+			border-bottom: 1px solid #333;
+			border-radius: 5px;
+			color: white;
+			font-size: 16px;
+			cursor: pointer;
+			&:hover {
+				background-color: #333;
+			}
+
+			&:first-child {
+				border-top: 2px solid #333;
+			}
+
+			.result-container {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+			}
+
+			.right-side-result {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			
+				.search-item-type {
+					color: #666;
+					margin-right: 10px;
+				}
+
+				.search-result-options {
+					background-color: transparent;
+					border: none;
+					
+					&:hover {
+						color: #666;
+					}
+
+					&:active {
+						color: #999;
+					}
+				}
+			}
+		}
+	}
+}

style/theme.scss

@@ -7,6 +7,7 @@ $play-bar-background-color: #212121;
 $play-grad-start: #0a0533;
 $play-grad-end: $accent-color;
 $queue-background-color: $play-bar-background-color;
+$search-background-color: $play-bar-background-color;
 
 $auth-inputs: #796dd4;
 $auth-containers: white;