From 5775d3148bba35728dd4a1204e7c2cc42cea3967 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Thu, 16 May 2024 15:44:13 -0400
Subject: [PATCH] finished upload design

---
 src/components/upload.rs | 53 ++++++++++++++++++++++++++++++++++------
 src/models.rs            |  2 +-
 style/upload.scss        | 26 ++++++++++++++++++++
 3 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/src/components/upload.rs b/src/components/upload.rs
index 71c1a61..40c74e1 100644
--- a/src/components/upload.rs
+++ b/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/>
-						<span>Artists</span>
+
+					<div class="artists">
+						<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>
diff --git a/src/models.rs b/src/models.rs
index 73dbc62..ad5cc6c 100644
--- a/src/models.rs
+++ b/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))]
diff --git a/style/upload.scss b/style/upload.scss
index eeab46a..65f8d6c 100644
--- a/style/upload.scss
+++ b/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;
+                }
+            }
+        }
     }
 }
\ No newline at end of file