user-auth store frontend css v7

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() {

frontend/src/main.rs

@@ -377,79 +377,97 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
     });
 
     view! { cx,
-            header(class="sticky top-0 z-50 flex bg-slate-400 gap-x-4") {
+        header(class="sticky top-0 z-50 flex bg-slate-400 gap-x-4") {
-            div(class="w-1/10 flex mb-2"){
+        div(class="w-1/10 flex mb-2"){
-                (if *app_state.loggedin.get() == false {
+            (if *app_state.loggedin.get() == false {
-                  view!{ cx,
+              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") }
+                    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"){
+        div(class="w-4/5 md:w-4/5 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"){("?")}
 
-    /*                     (if *app_state.userid.get() == 0 {
+        div(class="hidden md:inline-flex"){
 
-                            view!{ cx, ("SELECT")}
+            div(class="w-1/5 flex"){
-                        } else {
+                (if *app_state.editmode.get() == false {
-                                view!{cx, (*app_state.selectedusername.get())}
+                    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"){
+            div(class="w-1/2 flex"){
-                (if *app_state.editmode.get() == true {
+              (if *app_state.userid.get() != 0 {
-                  view!{ cx,
+                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"){
+            }} else {
-                  (if *app_state.userid.get() != 0 {
+                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<G: Html>(cx: Scope) -> View<G> {
                     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" }
+        div(class="inline-flex md:hidden w-full"){
-                //input(ref=input_ref3,
+            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") }
-                //    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,
-                    )}
-                }
 
-                }} else {
+            div(class="grow flex mb-2 gap-x-1 ml-auto") {
-                    view!{cx,
+            PageBar{}
-                    (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{}
-                }
             }
         }
+    }
 }
 
 #[component]
@@ -520,6 +504,15 @@ pub fn MenuExpanded<G: Html>(cx: Scope) -> View<G> {
     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::<Vec<String>>()
+    });
+
     let handle_submit = |event: Event| {
         let event: KeyboardEvent = event.unchecked_into();
 
@@ -577,13 +570,47 @@ pub fn MenuExpanded<G: Html>(cx: Scope) -> View<G> {
         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<G: Html>(cx: Scope, value: StringProp) -> View<G> {
         );
         app_state.selectedusername.set(valueclosure.value.clone());
         app_state.dropdownselect.set(false);
+        app_state.menuexpand.set(false);
     };
 
     view! { cx,