user-auth store frontend css v7
This commit is contained in:
@@ -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() {
|
||||
|
||||
@@ -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") {
|
||||
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<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" }
|
||||
//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<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,
|
||||
|
||||
Reference in New Issue
Block a user