mirror of
https://github.com/nitnelave/lldap.git
synced 2023-04-12 14:25:13 +00:00
Initial implementation of avatar component
This commit is contained in:
parent
1e5603dce2
commit
07aa010d10
@ -1,5 +1,6 @@
|
||||
use crate::{
|
||||
components::{
|
||||
avatar::Avatar,
|
||||
change_password::ChangePasswordForm,
|
||||
create_group::CreateGroupForm,
|
||||
create_user::CreateUserForm,
|
||||
@ -87,6 +88,7 @@ impl Component for App {
|
||||
self.route_dispatcher
|
||||
.send(RouteRequest::ReplaceRoute(Route::from(AppRoute::Login)));
|
||||
}
|
||||
ConsoleService::log("update app");
|
||||
true
|
||||
}
|
||||
|
||||
@ -247,15 +249,13 @@ impl App {
|
||||
id="dropdownUser"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
fill="currentColor"
|
||||
class="bi bi-person-circle"
|
||||
viewBox="0 0 16 16">
|
||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
||||
</svg>
|
||||
{
|
||||
if let Some((user_id, _)) = &self.user_info {
|
||||
html! {
|
||||
<Avatar username=user_id.clone() width=32 height=32 />
|
||||
}
|
||||
} else { html!{} }
|
||||
}
|
||||
{
|
||||
if let Some((user_id, _)) = &self.user_info {
|
||||
html! {
|
||||
|
117
app/src/components/avatar.rs
Normal file
117
app/src/components/avatar.rs
Normal file
@ -0,0 +1,117 @@
|
||||
use crate::infra::common_component::{CommonComponent, CommonComponentParts};
|
||||
use anyhow::{bail, Result};
|
||||
use graphql_client::GraphQLQuery;
|
||||
use yew::prelude::*;
|
||||
|
||||
#[derive(GraphQLQuery)]
|
||||
#[graphql(
|
||||
schema_path = "../schema.graphql",
|
||||
query_path = "queries/get_user_details.graphql",
|
||||
response_derives = "Debug, Hash, PartialEq, Eq, Clone",
|
||||
custom_scalars_module = "crate::infra::graphql"
|
||||
)]
|
||||
pub struct GetUserDetails;
|
||||
|
||||
pub type User = get_user_details::GetUserDetailsUser;
|
||||
pub type Group = get_user_details::GetUserDetailsUserGroups;
|
||||
|
||||
pub struct Avatar {
|
||||
common: CommonComponentParts<Self>,
|
||||
/// The user info. If none, the error is in `error`. If `error` is None, then we haven't
|
||||
/// received the server response yet.
|
||||
avatar: Option<String>,
|
||||
}
|
||||
|
||||
/// State machine describing the possible transitions of the component state.
|
||||
/// It starts out by fetching the user's details from the backend when loading.
|
||||
pub enum Msg {
|
||||
/// Received the user details response, either the user data or an error.
|
||||
UserDetailsResponse(Result<get_user_details::ResponseData>),
|
||||
Update
|
||||
}
|
||||
|
||||
#[derive(yew::Properties, Clone, PartialEq, Eq)]
|
||||
pub struct Props {
|
||||
pub username: String,
|
||||
pub width: i32,
|
||||
pub height: i32,
|
||||
}
|
||||
|
||||
impl CommonComponent<Avatar> for Avatar {
|
||||
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
|
||||
match msg {
|
||||
Msg::UserDetailsResponse(response) => match response {
|
||||
Ok(user) => self.avatar = user.user.avatar,
|
||||
Err(e) => {
|
||||
self.avatar = None;
|
||||
bail!("Error getting user details: {}", e);
|
||||
}
|
||||
},
|
||||
Msg::Update => self.get_user_details(),
|
||||
}
|
||||
Ok(true)
|
||||
}
|
||||
|
||||
fn mut_common(&mut self) -> &mut CommonComponentParts<Self> {
|
||||
&mut self.common
|
||||
}
|
||||
}
|
||||
|
||||
impl Avatar {
|
||||
fn get_user_details(&mut self) {
|
||||
if self.common.username.len() > 0 {
|
||||
self.common.call_graphql::<GetUserDetails, _>(
|
||||
get_user_details::Variables {
|
||||
id: self.common.username.clone(),
|
||||
},
|
||||
Msg::UserDetailsResponse,
|
||||
"Error trying to fetch user details",
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Component for Avatar {
|
||||
type Message = Msg;
|
||||
type Properties = Props;
|
||||
|
||||
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
|
||||
let mut avatar = Self {
|
||||
common: CommonComponentParts::<Self>::create(props, link),
|
||||
avatar: None,
|
||||
};
|
||||
avatar.get_user_details();
|
||||
avatar
|
||||
}
|
||||
|
||||
fn update(&mut self, msg: Self::Message) -> ShouldRender {
|
||||
CommonComponentParts::<Self>::update(self, msg)
|
||||
}
|
||||
|
||||
fn change(&mut self, props: Self::Properties) -> ShouldRender {
|
||||
self.common.change(props)
|
||||
}
|
||||
|
||||
fn view(&self) -> Html {
|
||||
match &self.avatar {
|
||||
Some(avatar) => html! {
|
||||
<img
|
||||
id="avatarDisplay"
|
||||
src={format!("data:image/jpeg;base64, {}", avatar)}
|
||||
style={format!("max-height:{}px;max-width:{}px;height:auto;width:auto;", self.common.props.height,self.common.props.width)}
|
||||
alt="Avatar" />
|
||||
},
|
||||
None => html! {
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width={self.common.props.width.to_string()}
|
||||
height={self.common.props.height.to_string()}
|
||||
fill="currentColor"
|
||||
class="bi bi-person-circle"
|
||||
viewBox="0 0 16 16">
|
||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
||||
</svg>
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
@ -1,6 +1,7 @@
|
||||
pub mod add_group_member;
|
||||
pub mod add_user_to_group;
|
||||
pub mod app;
|
||||
pub mod avatar;
|
||||
pub mod change_password;
|
||||
pub mod create_group;
|
||||
pub mod create_user;
|
||||
|
Loading…
Reference in New Issue
Block a user