From 08bfc0f99e404653c84bf2fd2932a375b34dbd53 Mon Sep 17 00:00:00 2001 From: Vinod J M Date: Sat, 31 Dec 2022 16:51:12 +0530 Subject: [PATCH] user-auth store frontend v2 --- frontend/src/main.rs | 169 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 134 insertions(+), 35 deletions(-) diff --git a/frontend/src/main.rs b/frontend/src/main.rs index 27119ea..dcb3b26 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -7,7 +7,7 @@ use serde_json; use sycamore::futures::spawn_local; use sycamore::prelude::*; //use sycamore::suspense::Suspense; -use sycamore_router::Route; +//use sycamore_router::Route; use wasm_bindgen::JsCast; use web_sys::{Event, HtmlInputElement, KeyboardEvent}; // 0.3.5 use dotenv_codegen::dotenv; @@ -80,19 +80,11 @@ pub struct AppState { pub deleterequest: RcSignal, pub userlist: RcSignal>, pub userid: RcSignal, + pub useridloggedin: RcSignal, pub userscreen: RcSignal, pub loggedin: RcSignal, pub editmode: RcSignal, -} - -#[derive(Route)] -enum AppRoutes { - #[to("/")] - Home, - #[to("/hello-server")] - HelloServer, - #[not_found] - NotFound, + pub dropdownselect: RcSignal, } /* TODO @@ -297,25 +289,15 @@ pub fn Header(cx: Scope) -> View { } }; - let click_addbulk = |_| { - - let mut task = value3.get().as_ref().clone(); - task = task.trim().to_string(); - - if !task.is_empty() { - - spawn_local(async move { - let _temp = add_books_isbns(task).await.unwrap(); - - }); - } - }; let click_logout = |_| { spawn_local(async move { logout_user().await.unwrap(); }); - }; + app_state.loggedin.set(false); + app_state.editmode.set(false); + +}; let click_userscreen = |_| { app_state.userscreen.set(true); @@ -323,8 +305,19 @@ pub fn Header(cx: Scope) -> View { let toggle_editmode = |_| { app_state.editmode.set(*editchecked.get()); + app_state.userid.set(*app_state.useridloggedin.get()); }; + let dropdown_userselect = |_| { + spawn_local(async move { + app_state.userlist.set(list_users() + .await.expect("Couldn't list user")); + }); + app_state.dropdownselect.set(true); +}; + + let users = create_memo(cx, || app_state.userlist.get().keys().cloned().collect::>()); + view! { cx, header(class="header") { div(class="header-button"){ @@ -344,7 +337,7 @@ pub fn Header(cx: Scope) -> View { } }) } - (if *app_state.loggedin.get() == false { + (if *app_state.editmode.get() == true { view!{ cx, div(class="header-column"){ input(ref=input_ref, @@ -359,6 +352,27 @@ pub fn Header(cx: Scope) -> View { }) div(class="header-column"){ + (if *app_state.editmode.get() == false { + view!{ cx, + button(on:click=dropdown_userselect) { "Select User" } + (if *app_state.dropdownselect.get() == true { + view!{ cx, + div(class="dropdown-content") { + Keyed( + iterable=users, + view=move |cx, x| view! { cx, + DropDownUser(user=x) + }, + key =|x| x ) + } + } + } else { + view!{cx, ""} + }) + }} else { + view!{cx, ""} + }) + button(on:click=click_listall) { "All books" } input(ref=input_ref2, class="new-todo", @@ -368,7 +382,7 @@ pub fn Header(cx: Scope) -> View { ) } - (if *app_state.editmode.get() == false { + (if *app_state.editmode.get() == true { view!{ cx, div(class="header-column"){ @@ -379,7 +393,6 @@ pub fn Header(cx: Scope) -> View { bind:value=value3, on:keyup=handle_submit_addbulk, ) - button(on:click=click_addbulk) { "Add bulk ISBNs" } } } } else { view!{cx, ""} @@ -392,6 +405,20 @@ pub fn Header(cx: Scope) -> View { } } +#[component(inline_props)] +pub fn DropDownUser(cx: Scope, user: String) -> View { + let app_state = use_context::(cx); + + let handle_select_user = move |_| { + app_state.userid.set( *(*app_state.userlist.get()).get(&(user).clone()).unwrap_or(&0)); + app_state.dropdownselect.set(false); + }; + + view! { cx, + button(class="delete", on:click=handle_select_user){ format!("{}",user) } + } +} + #[component] async fn ListDB(cx: Scope<'_>) -> View { let app_state = use_context::(cx); @@ -467,7 +494,18 @@ async fn ListDB(cx: Scope<'_>) -> View { let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::>()); view! {cx, p { - (if *app_state.openlibrary.get() == false { + (if *app_state.openlibrary.get() == false && *app_state.editmode.get() == false { + view!{ cx, + ul { + Keyed( + iterable=docs, + view=|cx, x| view! { cx, + BookDB_View(bookitem=x) + }, + key =|x| x.id ) + } + } + } else if *app_state.openlibrary.get() == false && *app_state.editmode.get() == true { view!{ cx, ul { Keyed( @@ -479,7 +517,7 @@ async fn ListDB(cx: Scope<'_>) -> View { } } } else { - view!{cx,""} + view!{cx, ""} } ) } @@ -536,12 +574,61 @@ pub fn BookDB(cx: Scope, bookitem: BookUIProp) -> View { div(class="column"){ div(class="card"){ - div(class="card-buttons"){ + div(class="card-buttons"){ - button(class="delete", on:click=handle_delete){ "DEL-" } - button(class="update", on:click=handle_update){ "EDIT=" } - button(class="info", on:click=handle_display){ "INFO+" } - } + button(class="delete", on:click=handle_delete){ "DEL-" } + button(class="update", on:click=handle_update){ "EDIT=" } + button(class="info", on:click=handle_display){ "INFO+" } + } + div(class="card-main"){ + img(src=coverurl,width="100") + + div(class="card-title"){ + (format!("{}",loctitle)) + } + div(class="card-authors"){ + (format!("{}",locauthors)) + } + //div(class="card-image"){ + //} + } + + div(class="card-desc"){ + (format!("{}",locloc)) + br{}br{} + (format!("{}",locdesc)) + } + + } + } + + } +} + +#[component(inline_props)] +pub fn BookDB_View(cx: Scope, bookitem: BookUIProp) -> View { + let app_state = use_context::(cx); + let bookdisplay = bookitem.bookitem.clone(); + let loctitle = bookitem.bookitem.clone().title.clone(); + let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap_or(vec!["".to_string()]).join(", "); + let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string()); + let locloc = bookitem.bookitem.clone().location.unwrap_or("".to_string()); + + let coverurl = bookdisplay.clone().cover.clone().unwrap_or("None".to_string()); + let handle_display = move |_| { + app_state.displaying.set(true); + app_state.updating.set(false); + //info!("Setting displaying book {:?}",bookdisplay); + app_state.displayingbook.set(bookdisplay.clone()); + }; + view! { cx, + div(class="column"){ + div(class="card"){ + + div(class="card-buttons"){ + + button(class="info", on:click=handle_display){ "INFO+" } + } div(class="card-main"){ img(src=coverurl,width="100") @@ -1083,6 +1170,7 @@ async fn LoginScreenUI(cx: Scope<'_>) -> View { let input_refP = create_node_ref(cx); let handle_register = move |_| { + let app_state = app_state.clone(); let user = AxumUser{ id: 0, name: (*userval.get()).clone(), @@ -1092,6 +1180,10 @@ async fn LoginScreenUI(cx: Scope<'_>) -> View { register_user(user) .await.expect("Couldn't register user"); }); + spawn_local(async move { + app_state.userlist.set(list_users() + .await.expect("Couldn't list user")); + }); app_state.userscreen.set(false); }; @@ -1105,6 +1197,9 @@ async fn LoginScreenUI(cx: Scope<'_>) -> View { login_user(user) .await.expect("Couldn't login user"); }); + app_state.loggedin.set(true); + app_state.useridloggedin.set( *(*app_state.userlist.get()).get(&(*userval.get()).clone()).unwrap_or(&0)); + app_state.userid.set( *(*app_state.userlist.get()).get(&(*userval.get()).clone()).unwrap_or(&0)); app_state.userscreen.set(false); }; @@ -1152,11 +1247,15 @@ fn App(cx: Scope) -> View { deleterequest: create_rc_signal(bool::default()), userlist: create_rc_signal(HashMap::new()), userid: create_rc_signal(0), + useridloggedin: create_rc_signal(0), userscreen: create_rc_signal(bool::default()), loggedin: create_rc_signal(bool::default()), editmode: create_rc_signal(bool::default()), + dropdownselect: create_rc_signal(bool::default()), }; provide_context(cx, app_state); + + view! { cx, div {