Implemented user menu. Replaced favicon with app logo.
This commit is contained in:
@@ -1,8 +1,18 @@
|
||||
use leptos::*;
|
||||
use crate::backend::data::User;
|
||||
use crate::components::modal_box::DialogOpener;
|
||||
use crate::components::user_menu::{MenuOpener, UserMenu};
|
||||
use crate::locales::trl;
|
||||
use crate::pages::change_pwd::ChangePassword;
|
||||
use crate::pages::profile_edit::ProfileEdit;
|
||||
|
||||
#[component]
|
||||
pub fn AdminPortal(children: Children) -> impl IntoView {
|
||||
let user_menu = MenuOpener::new();
|
||||
let (user, set_user) = create_signal(User::default());
|
||||
let editor = DialogOpener::new();
|
||||
let pw_changer = DialogOpener::new();
|
||||
|
||||
view! {
|
||||
<div class="layout-wrapper layout-content-navbar">
|
||||
<div class="layout-container">
|
||||
@@ -13,6 +23,7 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
|
||||
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
|
||||
<i class="bx bx-chevron-left bx-sm align-middle"></i>
|
||||
</a>
|
||||
<img src="/rezervovator_l.svg" width="180"/>
|
||||
</div>
|
||||
<div class="menu-inner-shadow"></div>
|
||||
|
||||
@@ -73,53 +84,14 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
|
||||
</li>
|
||||
//<!-- User -->
|
||||
<li class="nav-item navbar-dropdown dropdown-user dropdown">
|
||||
<a class="nav-link dropdown-toggle hide-arrow" href="#" data-bs-toggle="dropdown">
|
||||
<a class="nav-link dropdown-toggle hide-arrow" href="#"
|
||||
on:click=move |_| user_menu.toggle()>
|
||||
//<div class="avatar avatar-online">
|
||||
// <img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
|
||||
//</div>
|
||||
<i class="bx bx-user fs-3 lh-0"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar avatar-online">
|
||||
<img src="/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<span class="fw-semibold d-block">"John Doe"</span>
|
||||
<small class="text-muted">"Admin"</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-divider"></div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="bx bx-user me-2"></i>
|
||||
<span class="align-middle">"My Profile"</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#">
|
||||
<i class="bx bx-cog me-2"></i>
|
||||
<span class="align-middle">"Settings"</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-divider"></div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="auth-login-basic.html">
|
||||
<i class="bx bx-power-off me-2"></i>
|
||||
<span class="align-middle">"Log Out"</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<UserMenu opener=user_menu editor=editor pw_dialog=pw_changer user_profile=set_user/>
|
||||
</li>
|
||||
//<!--/ User -->
|
||||
</ul>
|
||||
@@ -130,6 +102,8 @@ pub fn AdminPortal(children: Children) -> impl IntoView {
|
||||
<div class="content-wrapper">
|
||||
//<!-- Content -->
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<ProfileEdit user={user} opener=editor/>
|
||||
<ChangePassword user={user} opener=pw_changer/>
|
||||
{children()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,7 @@ pub fn Header() -> impl IntoView {
|
||||
("data-template", "vertical-menu-template-free"),
|
||||
("data-assets-path", "/")])
|
||||
/>
|
||||
<Title text="Rezervovator"/>
|
||||
<Meta charset="utf-8"/>
|
||||
<Meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
|
||||
|
||||
|
||||
@@ -3,4 +3,5 @@ pub mod server_err;
|
||||
pub mod validation_err;
|
||||
pub mod header;
|
||||
pub mod admin_portal;
|
||||
pub mod user_menu;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
use crate::components::modal_box::DialogOpener;
|
||||
use leptos::*;
|
||||
use crate::backend::data::ApiResponse;
|
||||
use crate::locales::trl;
|
||||
|
||||
#[component]
|
||||
pub fn ServerErr(
|
||||
@@ -9,7 +10,27 @@ pub fn ServerErr(
|
||||
) -> impl IntoView {
|
||||
view! {{move || {
|
||||
if let Some(val) = result.get() {
|
||||
if let Err(e) = val {
|
||||
match val {
|
||||
Ok(resp) => if let ApiResponse::Error(err) = resp {
|
||||
view! {
|
||||
<div class="alert alert-danger">
|
||||
{trl(&err)}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
else {
|
||||
opener.hide();
|
||||
view! {<div></div>}
|
||||
}
|
||||
Err(e) => {
|
||||
view! {
|
||||
<div class="alert alert-danger">
|
||||
"Server error: " {e.to_string()}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
/*if let Err(e) = val {
|
||||
view! {
|
||||
<div class="alert alert-danger">
|
||||
"Server error: " {e.to_string()}
|
||||
@@ -18,7 +39,7 @@ pub fn ServerErr(
|
||||
} else {
|
||||
opener.hide();
|
||||
view! {<div></div>}
|
||||
}
|
||||
}*/
|
||||
} else {
|
||||
view! {<div></div>}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
use leptos::*;
|
||||
use crate::backend::data::User;
|
||||
use crate::backend::user::{get_user, logout};
|
||||
use crate::components::modal_box::DialogOpener;
|
||||
use crate::locales::trl;
|
||||
|
||||
#[derive(Copy, Clone)]
|
||||
pub struct MenuOpener {
|
||||
visible: ReadSignal<bool>,
|
||||
set_visible: WriteSignal<bool>,
|
||||
}
|
||||
|
||||
impl MenuOpener {
|
||||
pub fn new() -> Self {
|
||||
let (visible, set_visible) = create_signal(false);
|
||||
MenuOpener {
|
||||
visible,
|
||||
set_visible,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn visible(&self) -> bool {
|
||||
self.visible.get()
|
||||
}
|
||||
|
||||
pub fn toggle(&self) {
|
||||
let visible = self.visible.get();
|
||||
self.set_visible.update(|v| *v = !visible)
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn UserMenu(
|
||||
opener: MenuOpener,
|
||||
editor: DialogOpener,
|
||||
pw_dialog: DialogOpener,
|
||||
user_profile: WriteSignal<User>) -> impl IntoView {
|
||||
let user = create_resource(move || opener.visible(), move |_| get_user());
|
||||
|
||||
view! {
|
||||
<ul class={move || if opener.visible() {"dropdown-menu dropdown-menu-end show"} else
|
||||
{"dropdown-menu dropdown-menu-end"}}
|
||||
data-bs-popper="none">
|
||||
<li>
|
||||
<a class="dropdown-item" href="#" on:click=move |_| {editor.show(); opener.toggle()}>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<i class="bx bxs-user-account" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<Suspense fallback=move || view! {<span>"Loading..."</span>}>
|
||||
{move || {
|
||||
user.get().map(|u| match u {
|
||||
Ok(user) => {
|
||||
let usr = user.unwrap_or(User::default());
|
||||
user_profile.update(|u| *u = usr.clone());
|
||||
view! {
|
||||
<span class="fw-semibold d-block">
|
||||
{usr.full_name.unwrap_or("".to_string())}
|
||||
</span>
|
||||
//<small class="text-muted">"Admin"</small>
|
||||
}},
|
||||
Err(_) => view! {<span>"Error loading user"</span>}
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#" on:click=move |_| {pw_dialog.show(); opener.toggle()}>
|
||||
<i class="bx bx-lock me-2"></i>
|
||||
<span class="align-middle">{trl("Change password")}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-divider"></div>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="/login" on:click=move |_| {
|
||||
spawn_local(async move {
|
||||
let _ = logout().await;
|
||||
});
|
||||
}>
|
||||
<i class="bx bx-power-off me-2"></i>
|
||||
<span class="align-middle">{trl("Log Out")}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
}
|
||||
@@ -24,7 +24,7 @@ pub fn ValidationErr(
|
||||
} else {
|
||||
view! {
|
||||
<div class="alert alert-danger">
|
||||
"Validation error"
|
||||
{trl("Validation error")}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user