allow choosing artists by searching for upload

src/components/upload.rs

@@ -3,6 +3,7 @@ use leptos::*;
 use leptos_icons::*;
 use leptos_router::Form;
 use crate::search::search_artists;
+use crate::models::Artist;
 
 #[component]
 pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
@@ -22,24 +23,29 @@ pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
 
 #[component]
 pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
-	let (artists_search, set_artists_search) = create_signal("".to_string());
+	// Create signals for the artist input and the filtered artists
+	let (artists, set_artists) = create_signal("".to_string());
 	let (filtered_artists, set_filtered_artists)  = create_signal(vec![]);
+
 	let close_dialog = move |ev: leptos::ev::MouseEvent| {
 		ev.prevent_default();
 		open.set(false);
 	};
-	// let click_cancel_bubble = move |ev: leptos::ev::MouseEvent| {
+	// Create a filter function to handle filtering artists
-	// 	ev.prevent_default();
-	// 	ev.stop_propagation();	
-	// };
 	let handle_filter = move |ev: leptos::ev::Event| {
 		ev.prevent_default();
-		let searchArtist = event_target_value(&ev);
+
-		log!("searchArtist: {:?}", searchArtist);
+		let artist_input: String = event_target_value(&ev);
-		set_artists_search.update(|value| *value = searchArtist);
+
+		//Get the artist that we are currently searching for
+		let mut all_artists: Vec<&str> = artist_input.split(",").collect();
+		let search = all_artists.pop().unwrap().to_string();
+		
+		//Update the artist signal with the input
+		set_artists.update(|value: &mut String| *value = artist_input);
 
 		spawn_local(async move {
-			let filter_results = search_artists(artists_search.get_untracked(), 3).await;
+			let filter_results = search_artists(search, 3).await;
 			if let Err(err) = filter_results {
 				log!("Error filtering artists: {:?}", err);
 			} else if let Ok(artists) = filter_results {
@@ -48,7 +54,6 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 				set_filtered_artists.update(|value| *value = artists);
 			}
 		})
-
 	};
 	view! {
 		<Show when=open fallback=move || view! {}>
@@ -58,15 +63,13 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 					<h1>Upload Song</h1>
 				</div>
 				<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data") class="upload-form">
-
 					<div class="input-bx">
 						<input type="text" name="title" required class="text-input" required/>
 						<span>Title</span>
 					</div>
-
 					<div class="artists">
 						<div class="input-bx">
-							<input type="text" name="artist_ids" class="text-input" required on:input=handle_filter/>
+							<input type="text" name="artist_ids" class="text-input" prop:value=artists required on:input=handle_filter/>
 							<span>Artists</span>
 						</div>
 						<Show
@@ -76,17 +79,12 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 							<ul class="artist_results">
 								{
 									move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
-										<div class="artist">
+										<Artist artist=filtered_artist.clone() artists=artists set_artists=set_artists set_filtered=set_filtered_artists/>
-											{filtered_artist.clone().name}
-										</div>
 									}).collect::<Vec<_>>()
 								}
 							</ul>
-		
-		
 						</Show>
 					</div>
-					
 					<div class="input-bx">
 						<input type="text" name="album_id" class="text-input" required/>
 						<span>Album ID</span>
@@ -95,7 +93,6 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 						<input type="number" name="track_number" class="text-input" required/>
 						<span>Track Number</span>
 					</div>
-
 					<div class="release-date">
 						<div class="left">
 							<span>Release</span>
@@ -103,15 +100,60 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 						</div>
 						<input class="info" type="date" name="release_date"/>
 					</div>
-
 					<div class="file">
 						<span>File</span>
 						<input class="info" type="file" name="file"/>
 					</div>
-
 					<button type="submit" class="upload-button">Upload</button>
 				</Form>
 			</div>
 		</Show>
 	}
 }
+
+#[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
+	let add_artist = move |_| {
+		//Create an empty string to hold the artist ids
+		let mut s: String = String::from("");
+		//Get the current value of the 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();
+		//If there is only one artist in the input, get their id equivalent and add it to the string
+		if ids.len() == 1 {
+			let value_str = match artist.id.clone() {
+				Some(v) => v.to_string(),
+				None => String::from("None"),
+			};
+			s.push_str(&value_str);
+			s.push_str(",");
+			set_artists.update(|value| *value = s);
+		//If there are multiple artists in the input, pop the last artist by string off the vector, 
+		//get their id equivalent, and add it to the string
+		} else {
+			ids.pop();
+			for id in ids {
+				s.push_str(id);
+				s.push_str(",");
+			}
+			let value_str = match artist.id.clone() {
+				Some(v) => v.to_string(),
+				None => String::from("None"),
+			};
+			s.push_str(&value_str);
+			s.push_str(",");
+			set_artists.update(|value| *value = s);
+		}
+		//Clear the search results
+		set_filtered.update(|value| *value = vec![]);
+	};
+
+	view! {
+		<div class="artist" on:click=add_artist>
+			{artist.name.clone()}
+		</div>
+	}
+}

style/upload.scss

@@ -161,6 +161,11 @@
                 .artist {
                     border-bottom: 1px solid white; 
                     padding: 10px;
+                    cursor: pointer;
+                    transition: 0.3s;
+                    &:hover {
+                        background-color: #7f8fa6;
+                    }
                 }
                 .artist:last-child {
                     border-bottom: none;