Implement basic upload dialog

src/app.rs

@@ -46,18 +46,20 @@ use crate::components::sidebar::*;
 use crate::components::dashboard::*;
 use crate::components::search::*;
 use crate::components::personal::*;
+use crate::components::upload::*;
 
 /// Renders the home page of your application.
 #[component]
 fn HomePage() -> impl IntoView {
     let play_status = PlayStatus::default();
     let play_status = create_rw_signal(play_status);
-    
+    let upload_open = create_rw_signal(false);
     let (dashboard_open, set_dashboard_open) = create_signal(true);
 
     view! {
         <div class="home-container">
-            <Sidebar setter=set_dashboard_open active=dashboard_open />
+            <Upload open=upload_open/>
+            <Sidebar setter=set_dashboard_open active=dashboard_open upload_open=upload_open />
             <Show 
                 when=move || {dashboard_open() == true}
                 fallback=move || view! { <Search /> }

src/components.rs

@@ -2,3 +2,4 @@ pub mod sidebar;
 pub mod dashboard;
 pub mod search;
 pub mod personal;
+pub mod upload;

src/components/sidebar.rs

@@ -1,9 +1,10 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
+use crate::components::upload::*;
 
 #[component]
-pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
+pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, upload_open: RwSignal<bool>) -> impl IntoView {
     let open_dashboard = move |_| {
         setter.update(|value| *value = true);
         log!("open dashboard");
@@ -16,7 +17,10 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
     view! {
         <div class="sidebar-container">
             <div class="sidebar-top-container">
-                <h2 class="header">LibreTunes</h2>
+                <div class="sidebar-top-header-container">
+                    <h2 class="header">LibreTunes</h2>
+                    <UploadBtn dialog_open=upload_open />
+                </div>
                 <div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
                     <Icon icon=icondata::OcHomeFillLg />
                     <h1>Dashboard</h1>

src/components/upload.rs

@@ -0,0 +1,86 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_icons::*;
+use leptos_router::Form;
+
+#[component]
+pub fn UploadBtn(dialog_open: RwSignal<bool>) -> impl IntoView {
+	let open_dialog = move |_| {
+		dialog_open.set(true);
+	};
+
+	view! {
+		<button class="upload-btn" on:click=open_dialog>
+			<div class="add-sign">
+				<Icon icon=icondata::IoAddSharp />
+			</div>
+			Upload
+		</button>
+	}
+}
+
+#[component]
+pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
+	let close_dialog = move |ev: leptos::ev::MouseEvent| {
+		ev.prevent_default();
+		open.set(false);
+	};
+
+	let click_cancel_bubble = move |ev: leptos::ev::MouseEvent| {
+		ev.prevent_default();
+		ev.stop_propagation();
+	};
+
+	view! {
+		<Show when=open fallback=move || view! {}>
+			<div class="dialog-container" on:click=close_dialog>
+				<dialog open=open on:click=click_cancel_bubble>
+					<div class="dialog-header">
+						<button class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></button>
+						<h1>Upload Song</h1>
+					</div>
+
+					<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")>
+						<div class="input-box">
+							<input class="info" type="text" name="title" required/>
+							<span>Title</span>
+							<i></i>
+						</div>
+
+						<div class="input-box">
+							<input class="info" type="text" name="artist"/>
+							<span>Artist</span>
+							<i></i>
+						</div>
+
+						<div class="input-box">
+							<input class="info" type="text" name="album_id"/>
+							<span>Album</span>
+							<i></i>
+						</div>
+
+						<div class="input-box">
+							<input class="info" type="number" name="track_number"/>
+							<span>Track Number</span>
+							<i></i>
+						</div>
+
+						<div>
+							<input class="info" type="date" name="release_date"/>
+							<span>Release Date</span>
+							<i></i>
+						</div>
+
+						<div>
+							<input class="info" type="file" name="file"/>
+							<span>File</span>
+							<i></i>
+						</div>
+
+						<button type="submit">Upload</button>
+					</Form>
+				</dialog>
+			</div>
+		</Show>
+	}
+}