eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

finished upload design

Browse Source
This commit is contained in:
Danny Zou 2024-05-16 15:44:13 -04:00
parent 714fbc596a
commit 5775d3148b
3 changed files with 73 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/upload.rs
View File

@ -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>

2
src/models.rs
View File

@ -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))]

26
style/upload.scss
View File

@ -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;
}
}
}
}
}