diff --git a/backend/api/src/lib.rs b/backend/api/src/lib.rs index 8e057e2..7226659 100644 --- a/backend/api/src/lib.rs +++ b/backend/api/src/lib.rs @@ -668,7 +668,7 @@ async fn search_openlibrary( //resjson.set_all_descriptions().await; print!("Search token {:?}\n", search); let mut vec = Vec::with_capacity(12); - for i in 0..12 as usize { + for i in 0..resjson.docs.len() as usize { let doc = resjson.docs[i].clone(); let mut goodread = "".to_string(); if doc.id_goodreads.is_some() { diff --git a/frontend/src/main.rs b/frontend/src/main.rs index ec1d593..c7527f2 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -377,79 +377,97 @@ pub fn Header(cx: Scope) -> View { }); view! { cx, - header(class="sticky top-0 z-50 flex bg-slate-400 gap-x-4") { - div(class="w-1/10 flex mb-2"){ - (if *app_state.loggedin.get() == false { - view!{ cx, - button(on:click=click_userscreen, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-full") { i(class="fa-solid fa-user") } + header(class="sticky top-0 z-50 flex bg-slate-400 gap-x-4") { + div(class="w-1/10 flex mb-2"){ + (if *app_state.loggedin.get() == false { + view!{ cx, + button(on:click=click_userscreen, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-full") { i(class="fa-solid fa-user") } + } + } else { + view!{cx, + div(class="flex gap-x-1"){ + button(on:click=click_logout, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/2") { i(class="fa-solid fa-right-from-bracket") } + label(class="inline-flex relative items-center cursor-pointer w-1/2"){ + input( + class="sr-only peer", + type="checkbox", + on:input=toggle_editmode, + bind:checked=editchecked + ) + div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[10px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){} + //p(class="ml-3 text-sm font-medium"){"EDIT"} } - } else { - view!{cx, - div(class="flex gap-x-1"){ - button(on:click=click_logout, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/2") { i(class="fa-solid fa-right-from-bracket") } - label(class="inline-flex relative items-center cursor-pointer w-1/2"){ - input( - class="sr-only peer", - type="checkbox", - on:input=toggle_editmode, - bind:checked=editchecked - ) - div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[10px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){} - //p(class="ml-3 text-sm font-medium"){"EDIT"} - } - } } - }) - } + } + }) + } - div(class="w-4/5 md:w-1/10 flex mb-2"){ - (if *app_state.editmode.get() == false { - view!{ cx, - // button(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center ", on:click=dropdown_userselect) { - div(class="flex"){ - select(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold rounded inline-flex items-center w-max", on:click=dropdown_userselect) { - option(disabled=true, selected=true, hidden=true, value="", class="w-max"){("?")} + div(class="w-4/5 md:w-4/5 flex mb-2"){ - /* (if *app_state.userid.get() == 0 { + div(class="hidden md:inline-flex"){ - view!{ cx, ("SELECT")} - } else { - view!{cx, (*app_state.selectedusername.get())} + div(class="w-1/5 flex"){ + (if *app_state.editmode.get() == false { + view!{ cx, + div(class="flex"){ + select(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold rounded inline-flex items-center w-max", on:click=dropdown_userselect) { + option(disabled=true, selected=true, hidden=true, value="", class="w-max"){("?")} + Keyed( + iterable=users, + view=move |cx, x| view! { cx, + DropDownUser(value=x) + }, + key =|x| x.clone() ) } - )*/ - //} - // (if *app_state.dropdownselect.get() == true { - //view!{cx, - Keyed( - iterable=users, - view=move |cx, x| view! { cx, - DropDownUser(value=x) - }, - key =|x| x.clone() ) - //} - //} else { - // view!{cx, ""} - //}) } - } - } } else { view!{cx, - div(class="bg-gray-300 text-gray-800 font-bold rounded inline-flex items-center px-2"){(format!(" {} ", *app_state.selectedusername.get()))} + div(class="bg-gray-300 text-gray-800 font-bold rounded inline-flex items-center px-2"){(format!(" {} ", *app_state.selectedusername.get()))} } }) - } + } - div(class="w-1/10 md:w-4/5 flex mb-2"){ + (if *app_state.editmode.get() == true { + view!{ cx, - div(class="hidden md:inline-flex"){ - (if *app_state.editmode.get() == true { - view!{ cx, + div(class="w-1/2 flex"){ + (if *app_state.userid.get() != 0 { + view!{ cx, + button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }} + div(class="min-w-40 inline-flex"){ + input(ref=input_ref2, + class = "inline-flex h-full m-0 p-1 w-full", + placeholder="🔍 Search", + bind:value=value2, + on:keyup=handle_submit_seachall, + )} + }} else { + view!{cx, ""} + }) + } + div(class="w-1/2 flex"){ + button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") span(class="inline-block"){"Add" }} + //button(on:click=click_addbook) { "+ Add New" } + //input(ref=input_ref3, + // class="new-todo", + // placeholder="Add bulk ISBNs", + // bind:value=value3, + // on:keyup=handle_submit_addbulk, + //) + div(class="min-w-40 inline-flex"){ + input(ref=input_ref, + class = "inline-flex h-full m-0 p-1 w-full", + placeholder="🔍 Internet", + bind:value=value, + on:keyup=handle_submit, + )} + } - div(class="w-1/2 flex"){ - (if *app_state.userid.get() != 0 { + }} else { + view!{cx, + (if *app_state.userid.get() != 0 { view!{ cx, button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }} div(class="min-w-40 inline-flex"){ @@ -463,52 +481,18 @@ pub fn Header(cx: Scope) -> View { view!{cx, ""} }) } - div(class="w-1/2 flex"){ - button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") span(class="inline-block"){"Add" }} - //button(on:click=click_addbook) { "+ Add New" } - //input(ref=input_ref3, - // class="new-todo", - // placeholder="Add bulk ISBNs", - // bind:value=value3, - // on:keyup=handle_submit_addbulk, - //) - div(class="min-w-40 inline-flex"){ - input(ref=input_ref, - class = "inline-flex h-full m-0 p-1 w-full", - placeholder="🔍 Internet", - bind:value=value, - on:keyup=handle_submit, - )} - } + }) + } + div(class="inline-flex md:hidden w-full"){ + button(on:click=click_menu_expand, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-bars") } + } + } - }} else { - view!{cx, - (if *app_state.userid.get() != 0 { - view!{ cx, - button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }} - div(class="min-w-40 inline-flex"){ - input(ref=input_ref2, - class = "inline-flex h-full m-0 p-1 w-full", - placeholder="🔍 Search", - bind:value=value2, - on:keyup=handle_submit_seachall, - )} - }} else { - view!{cx, ""} - }) - } - }) - } - div(class="inline-flex md:hidden w-full"){ - button(on:click=click_menu_expand, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-bars") } - } - } - - div(class="grow flex mb-2 gap-x-1 ml-auto") { - PageBar{} - } + div(class="grow flex mb-2 gap-x-1 ml-auto") { + PageBar{} } } + } } #[component] @@ -520,6 +504,15 @@ pub fn MenuExpanded(cx: Scope) -> View { let value2 = create_signal(cx, String::new()); let input_ref2 = create_node_ref(cx); + let users = create_memo(cx, || { + app_state + .userlist + .get() + .keys() + .cloned() + .collect::>() + }); + let handle_submit = |event: Event| { let event: KeyboardEvent = event.unchecked_into(); @@ -577,13 +570,47 @@ pub fn MenuExpanded(cx: Scope) -> View { app_state.menuexpand.set(!(*app_state.menuexpand.get())); }; + let dropdown_userselect = |_| { + let app_state = app_state.clone(); + spawn_local(async move { + app_state + .userlist + .set(list_users().await.expect("Couldn't list user")); + }); + app_state.dropdownselect.set(true); + }; + view! { cx, (if *app_state.menuexpand.get() == true { view!{cx, header(class="sticky top-50 z-50 flex flex-col bg-slate-400 gap-x-4") { + div(class="w-full flex flex-row mb-4"){ + (if *app_state.editmode.get() == false { + view!{ cx, + div(class="inline-flex"){ + select(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold rounded inline-flex items-center w-40", on:click=dropdown_userselect) { + option(disabled=true, selected=true, hidden=true, value="", class="w-max"){("?")} + Keyed( + iterable=users, + view=move |cx, x| view! { cx, + DropDownUser(value=x) + }, + key =|x| x.clone() ) + } + } + + } } + else { + view!{cx, + div(class="bg-gray-300 text-gray-800 font-bold rounded inline-flex items-center px-2"){(format!(" {} ", *app_state.selectedusername.get()))} + } + }) + } (if *app_state.editmode.get() == true { view!{ cx, + + div(class="w-full flex flex-row mb-4"){ (if *app_state.userid.get() != 0 { view!{ cx, @@ -652,6 +679,7 @@ pub fn DropDownUser(cx: Scope, value: StringProp) -> View { ); app_state.selectedusername.set(valueclosure.value.clone()); app_state.dropdownselect.set(false); + app_state.menuexpand.set(false); }; view! { cx,