app: Extract a RemoveUserFromGroup component

This commit is contained in:
Valentin Tolmer 2021-09-19 16:01:44 +02:00 committed by nitnelave
parent 14be1170f2
commit 00efdb42af
7 changed files with 189 additions and 108 deletions

16
Cargo.lock generated
View File

@ -1770,6 +1770,7 @@ dependencies = [
"yew-router",
"yew_form",
"yew_form_derive",
"yewtil",
]
[[package]]
@ -3537,6 +3538,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8ce9b1b516211d33767048e5d47fa2a381ed8b76fc48d2ce4aa39877f9f183e0"
dependencies = [
"cfg-if 1.0.0",
"serde",
"serde_json",
"wasm-bindgen-macro",
]
@ -3757,6 +3760,19 @@ dependencies = [
"yew_form",
]
[[package]]
name = "yewtil"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "8543663ac49cd613df079282a1d8bdbdebdad6e02bac229f870fd4237b5d9aaa"
dependencies = [
"log",
"wasm-bindgen",
"wasm-bindgen-futures",
"web-sys",
"yew",
]
[[package]]
name = "zeroize"
version = "1.4.1"

View File

@ -18,6 +18,7 @@ validator = "*"
validator_derive = "*"
wasm-bindgen = "0.2"
yew = "0.18"
yewtil = "*"
yew-router = "0.15"
yew_form = "0.1.8"
yew_form_derive = "*"

View File

@ -1,7 +1,7 @@
use crate::{
components::{
select::{Select, SelectOption, SelectOptionProps},
user_details::{Group, User},
user_details::Group,
},
infra::api::HostService,
};
@ -12,6 +12,7 @@ use yew::{
prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
use yewtil::NeqAssign;
#[derive(GraphQLQuery)]
#[graphql(
@ -63,7 +64,8 @@ pub enum Msg {
#[derive(yew::Properties, Clone, PartialEq)]
pub struct Props {
pub user: User,
pub username: String,
pub groups: Vec<Group>,
pub on_user_added_to_group: Callback<Group>,
pub on_error: Callback<Error>,
}
@ -89,7 +91,7 @@ impl AddUserToGroupComponent {
};
self._task = HostService::graphql_query::<AddUserToGroup>(
add_user_to_group::Variables {
user: self.props.user.id.clone(),
user: self.props.username.clone(),
group: group_id,
},
self.link.callback(Msg::AddGroupResponse),
@ -133,7 +135,7 @@ impl AddUserToGroupComponent {
}
fn get_selectable_group_list(&self, group_list: &[Group]) -> Vec<Group> {
let user_groups = self.props.user.groups.iter().collect::<HashSet<_>>();
let user_groups = self.props.groups.iter().collect::<HashSet<_>>();
group_list
.iter()
.filter(|g| !user_groups.contains(g))
@ -168,12 +170,7 @@ impl Component for AddUserToGroupComponent {
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if props.user.groups != self.props.user.groups {
self.props.user = props.user;
true
} else {
false
}
self.props.neq_assign(props)
}
fn view(&self) -> Html {

View File

@ -4,6 +4,7 @@ pub mod change_password;
pub mod create_user;
pub mod login;
pub mod logout;
pub mod remove_user_from_group;
pub mod router;
pub mod select;
pub mod user_details;

View File

@ -0,0 +1,111 @@
use crate::{components::user_details::Group, infra::api::HostService};
use anyhow::{Error, Result};
use graphql_client::GraphQLQuery;
use yew::{
prelude::*,
services::{fetch::FetchTask, ConsoleService},
};
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/remove_user_from_group.graphql",
response_derives = "Debug",
variables_derives = "Clone",
custom_scalars_module = "crate::infra::graphql"
)]
pub struct RemoveUserFromGroup;
pub struct RemoveUserFromGroupComponent {
link: ComponentLink<Self>,
props: Props,
// Used to keep the request alive long enough.
_task: Option<FetchTask>,
}
#[derive(yew::Properties, Clone, PartialEq)]
pub struct Props {
pub username: String,
pub group: Group,
pub is_admin: bool,
pub on_user_removed_from_group: Callback<Group>,
pub on_error: Callback<Error>,
}
pub enum Msg {
SubmitRemoveGroup,
RemoveGroupResponse(Result<remove_user_from_group::ResponseData>),
}
impl RemoveUserFromGroupComponent {
fn submit_remove_group(&mut self) -> Result<bool> {
let group = self.props.group.id;
self._task = HostService::graphql_query::<RemoveUserFromGroup>(
remove_user_from_group::Variables {
user: self.props.username.clone(),
group,
},
self.link.callback(Msg::RemoveGroupResponse),
"Error trying to initiate removing the user from a group",
)
.map_err(|e| {
ConsoleService::log(&e.to_string());
e
})
.ok();
Ok(true)
}
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
match msg {
Msg::SubmitRemoveGroup => return self.submit_remove_group(),
Msg::RemoveGroupResponse(response) => {
response?;
self.props
.on_user_removed_from_group
.emit(self.props.group.clone());
}
}
Ok(true)
}
}
impl Component for RemoveUserFromGroupComponent {
type Message = Msg;
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
Self {
link,
props,
_task: None,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match self.handle_msg(msg) {
Err(e) => {
self.props.on_error.emit(e);
true
}
Ok(b) => b,
}
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
let group = &self.props.group;
html! {
<>
<td>{&group.display_name}</td>
{ if self.props.is_admin { html! {
<td><button onclick=self.link.callback(|_| Msg::SubmitRemoveGroup)>{"-"}</button></td>
}} else { html!{} }
}
</>
}
}
}

View File

@ -1,8 +1,10 @@
use yew::{html::ChangeData, prelude::*};
use yewtil::NeqAssign;
pub struct Select {
link: ComponentLink<Self>,
props: SelectProps,
node_ref: NodeRef,
}
#[derive(yew::Properties, Clone, PartialEq, Debug)]
@ -26,49 +28,48 @@ impl Select {
.nth(nth as usize)
.map(|child| child.props)
}
fn send_selection_update(&self) {
let select_node = self.node_ref.cast::<web_sys::HtmlSelectElement>().unwrap();
self.props
.on_selection_change
.emit(self.get_nth_child_props(select_node.selected_index()))
}
}
impl Component for Select {
type Message = SelectMsg;
type Properties = SelectProps;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
let res = Self { link, props };
res.props
.on_selection_change
.emit(res.get_nth_child_props(0));
res
Self {
link,
props,
node_ref: NodeRef::default(),
}
}
fn rendered(&mut self, _first_render: bool) {
self.send_selection_update();
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
SelectMsg::OnSelectChange(data) => match data {
ChangeData::Select(e) => {
self.props
.on_selection_change
.emit(self.get_nth_child_props(e.selected_index()));
}
_ => unreachable!(),
},
let SelectMsg::OnSelectChange(data) = msg;
match data {
ChangeData::Select(_) => self.send_selection_update(),
_ => unreachable!(),
}
false
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if self.props.children.len() != props.children.len() {
let was_empty = self.props.children.is_empty();
self.props = props;
if self.props.children.is_empty() || was_empty {
self.props
.on_selection_change
.emit(self.get_nth_child_props(0));
}
true
} else {
false
}
self.props.children.neq_assign(props.children)
}
fn view(&self) -> Html {
html! {
<select
onchange=self.link.callback(SelectMsg::OnSelectChange)>
ref=self.node_ref.clone()
onchange=self.link.callback(SelectMsg::OnSelectChange)>
{ self.props.children.clone() }
</select>
}
@ -79,7 +80,7 @@ pub struct SelectOption {
props: SelectOptionProps,
}
#[derive(yew::Properties, Clone, PartialEq)]
#[derive(yew::Properties, Clone, PartialEq, Debug)]
pub struct SelectOptionProps {
pub value: String,
pub text: String,
@ -88,20 +89,19 @@ pub struct SelectOptionProps {
impl Component for SelectOption {
type Message = ();
type Properties = SelectOptionProps;
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
Self { props }
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
false
}
fn change(&mut self, props: Self::Properties) -> ShouldRender {
if self.props != props {
self.props = props;
true
} else {
false
}
self.props.neq_assign(props)
}
fn view(&self) -> Html {
html! {
<option value=self.props.value.clone()>

View File

@ -1,6 +1,7 @@
use crate::{
components::{
add_user_to_group::AddUserToGroupComponent,
remove_user_from_group::RemoveUserFromGroupComponent,
router::{AppRoute, NavButton},
user_details_form::UserDetailsForm,
},
@ -25,30 +26,14 @@ pub struct GetUserDetails;
pub type User = get_user_details::GetUserDetailsUser;
pub type Group = get_user_details::GetUserDetailsUserGroups;
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/remove_user_from_group.graphql",
response_derives = "Debug",
variables_derives = "Clone",
custom_scalars_module = "crate::infra::graphql"
)]
pub struct RemoveUserFromGroup;
pub struct UserDetails {
link: ComponentLink<Self>,
/// Which user this is about.
username: String,
props: Props,
/// The user info. If none, the error is in `error`. If `error` is None, then we haven't
/// received the server response yet.
user: Option<User>,
/// Error message displayed to the user.
error: Option<Error>,
/// True iff we just finished updating the user, to display a successful message.
update_successful: bool,
is_admin: bool,
/// The group that we're requesting to remove, if any.
group_to_remove: Option<Group>,
// Used to keep the request alive long enough.
_task: Option<FetchTask>,
}
@ -58,10 +43,9 @@ pub struct UserDetails {
pub enum Msg {
/// Received the user details response, either the user data or an error.
UserDetailsResponse(Result<get_user_details::ResponseData>),
SubmitRemoveGroup(Group),
RemoveGroupResponse(Result<remove_user_from_group::ResponseData>),
OnError(Error),
OnUserAddedToGroup(Group),
OnUserRemovedFromGroup(Group),
}
#[derive(yew::Properties, Clone, PartialEq)]
@ -74,7 +58,7 @@ impl UserDetails {
fn get_user_details(&mut self) {
self._task = HostService::graphql_query::<GetUserDetails>(
get_user_details::Variables {
id: self.username.clone(),
id: self.props.username.clone(),
},
self.link.callback(Msg::UserDetailsResponse),
"Error trying to fetch user details",
@ -86,26 +70,7 @@ impl UserDetails {
.ok();
}
fn submit_remove_group(&mut self, group: Group) -> Result<bool> {
self._task = HostService::graphql_query::<RemoveUserFromGroup>(
remove_user_from_group::Variables {
user: self.username.clone(),
group: group.id,
},
self.link.callback(Msg::RemoveGroupResponse),
"Error trying to initiate removing the user from a group",
)
.map_err(|e| {
ConsoleService::log(&e.to_string());
e
})
.ok();
self.group_to_remove = Some(group);
Ok(true)
}
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
self.update_successful = false;
match msg {
Msg::UserDetailsResponse(response) => match response {
Ok(user) => self.user = Some(user.user),
@ -114,27 +79,19 @@ impl UserDetails {
bail!("Error getting user details: {}", e);
}
},
Msg::SubmitRemoveGroup(group) => return self.submit_remove_group(group),
Msg::RemoveGroupResponse(response) => {
response?;
let group = self.group_to_remove.take().unwrap();
// Remove the group from the user and add it to the dropdown.
self.user.as_mut().unwrap().groups.retain(|g| g != &group);
}
Msg::OnError(e) => return Err(e),
Msg::OnUserAddedToGroup(group) => {
self.user.as_mut().unwrap().groups.push(group);
}
Msg::OnUserRemovedFromGroup(group) => {
self.user.as_mut().unwrap().groups.retain(|g| g != &group);
}
}
Ok(true)
}
fn view_messages(&self, error: &Option<Error>) -> Html {
if self.update_successful {
html! {
<span>{"Update successful!"}</span>
}
} else if let Some(e) = error {
if let Some(e) = error {
html! {
<div>
<span>{"Error: "}{e.to_string()}</span>
@ -147,15 +104,15 @@ impl UserDetails {
fn view_group_memberships(&self, u: &User) -> Html {
let make_group_row = |group: &Group| {
let id = group.id;
let display_name = group.display_name.clone();
html! {
<tr key="groupRow_".to_string() + &display_name>
<td>{&group.display_name}</td>
{ if self.is_admin { html! {
<td><button onclick=self.link.callback(move |_| Msg::SubmitRemoveGroup(Group{id, display_name: display_name.clone()}))>{"-"}</button></td>
}} else { html!{} }
}
<RemoveUserFromGroupComponent
username=u.id.clone()
group=group.clone()
is_admin=self.props.is_admin
on_user_removed_from_group=self.link.callback(Msg::OnUserRemovedFromGroup)
on_error=self.link.callback(Msg::OnError)/>
</tr>
}
};
@ -165,7 +122,7 @@ impl UserDetails {
<table>
<tr key="headerRow">
<th>{"Group"}</th>
{ if self.is_admin { html!{ <th></th> }} else { html!{} }}
{ if self.props.is_admin { html!{ <th></th> }} else { html!{} }}
</tr>
{u.groups.iter().map(make_group_row).collect::<Vec<_>>()}
<tr key="groupToAddRow">
@ -177,10 +134,11 @@ impl UserDetails {
}
fn view_add_group_button(&self, u: &User) -> Html {
if self.is_admin {
if self.props.is_admin {
html! {
<AddUserToGroupComponent
user=u.clone()
username=u.id.clone()
groups=u.groups.clone()
on_error=self.link.callback(Msg::OnError)
on_user_added_to_group=self.link.callback(Msg::OnUserAddedToGroup)/>
}
@ -197,13 +155,10 @@ impl Component for UserDetails {
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
let mut table = Self {
link,
username: props.username,
props,
_task: None,
user: None,
error: None,
update_successful: false,
is_admin: props.is_admin,
group_to_remove: None,
};
table.get_user_details();
table