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

@@ -402,38 +402,25 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
             })
         }
 
-            div(class="w-4/5 md:w-1/10 flex mb-2"){
+        div(class="w-4/5 md:w-4/5 flex mb-2"){
+
+        div(class="hidden md:inline-flex"){
+
+            div(class="w-1/5 flex"){
                 (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 {
-
-                            view!{ cx, ("SELECT")}
-                        } else {
-                                view!{cx, (*app_state.selectedusername.get())}
-                            }
-                        )*/
-                        //}
-                          //  (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,
@@ -442,9 +429,6 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                     })
             }
 
-            div(class="w-1/10 md:w-4/5 flex mb-2"){
-
-            div(class="hidden md:inline-flex"){
             (if *app_state.editmode.get() == true {
               view!{ cx,
 
@@ -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,