finished upload design

src/components/upload.rs

@@ -2,6 +2,7 @@ use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
 use leptos_router::Form;
+use crate::search::search_artists;
 
 #[component]
 pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
@@ -21,16 +22,34 @@ 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());
+	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| {
-	let click_cancel_bubble = move |ev: leptos::ev::MouseEvent| {
+	// 	ev.prevent_default();
+	// 	ev.stop_propagation();	
+	// };
+	let handle_filter = move |ev: leptos::ev::Event| {
 		ev.prevent_default();
-		ev.stop_propagation();
+		let searchArtist = event_target_value(&ev);
-	};
+		log!("searchArtist: {:?}", searchArtist);
+		set_artists_search.update(|value| *value = searchArtist);
 
+		spawn_local(async move {
+			let filter_results = search_artists(artists_search.get_untracked(), 3).await;
+			if let Err(err) = filter_results {
+				log!("Error filtering artists: {:?}", err);
+			} else if let Ok(artists) = filter_results {
+				log!("Filtered artists: {:?}", artists);
+
+				set_filtered_artists.update(|value| *value = artists);
+			}
+		})
+
+	};
 	view! {
 		<Show when=open fallback=move || view! {}>
 			<div class="upload-container" open=open>
@@ -44,10 +63,30 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
 						<input type="text" name="title" required class="text-input" required/>
 						<span>Title</span>
 					</div>
-					<div class="input-bx">
+
-						<input type="text" name="artist_ids" class="text-input" required/>
+					<div class="artists">
-						<span>Artists</span>
+						<div class="input-bx">
+							<input type="text" name="artist_ids" class="text-input" required on:input=handle_filter/>
+							<span>Artists</span>
+						</div>
+						<Show
+							when=move || {filtered_artists.get().len() > 0}
+							fallback=move || view! {}						
+						>
+							<ul class="artist_results">
+								{
+									move || filtered_artists.get().iter().enumerate().map(|(_index,filtered_artist)| view! {
+										<div class="artist">
+											{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>

src/models.rs

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

style/upload.scss

@@ -141,5 +141,31 @@
                 color: #7f8fa6;
             }
         }
+        .artists {
+            position: relative;
+            width: 325px;
+            .input-bx {
+                
+            }
+            .artist_results {
+                display: flex;
+                flex-direction: column;
+                border: 1px solid white;
+                width: 100%;
+                position: absolute;
+                top: 75%;
+                background-color: #1c1c1c;
+                z-index: 2;
+                border-radius: 5px;
+                padding: 0;
+                .artist {
+                    border-bottom: 1px solid white; 
+                    padding: 10px;
+                }
+                .artist:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
     }
 }