app: Add a way to manage a user's group memberships

This commit is contained in:
Valentin Tolmer 2021-09-16 23:22:11 +02:00 committed by nitnelave
parent 480f48f820
commit 7aab9e8cf5
8 changed files with 447 additions and 175 deletions

View File

@ -22,6 +22,8 @@ features = [
"Document", "Document",
"Element", "Element",
"HtmlDocument", "HtmlDocument",
"HtmlInputElement",
"HtmlOptionElement",
"console", "console",
] ]

View File

@ -0,0 +1,5 @@
mutation AddUserToGroup($user: String!, $group: Int!) {
addUserToGroup(userId: $user, groupId: $group) {
ok
}
}

View File

@ -0,0 +1,6 @@
query GetGroupList {
groups {
id
displayName
}
}

View File

@ -7,6 +7,7 @@ query GetUserDetails($id: String!) {
lastName lastName
creationDate creationDate
groups { groups {
id
displayName displayName
} }
} }

View File

@ -0,0 +1,5 @@
mutation RemoveUserFromGroup($user: String!, $group: Int!) {
removeUserFromGroup(userId: $user, groupId: $group) {
ok
}
}

View File

@ -117,7 +117,7 @@ impl Component for App {
AppRoute::UserDetails(username) => html! { AppRoute::UserDetails(username) => html! {
<div> <div>
<LogoutButton on_logged_out=link.callback(|_| Msg::Logout) /> <LogoutButton on_logged_out=link.callback(|_| Msg::Logout) />
<UserDetails username=username.clone() /> <UserDetails username=username.clone() is_admin=is_admin />
</div> </div>
}, },
AppRoute::ChangePassword(username) => html! { AppRoute::ChangePassword(username) => html! {

View File

@ -65,7 +65,7 @@ impl Component for LogoutButton {
fn view(&self) -> Html { fn view(&self) -> Html {
html! { html! {
<button onclick=self.link.callback(|_| { Msg::LogoutRequested })>{"Logout"}</button> <button onclick=self.link.callback(|_| Msg::LogoutRequested)>{"Logout"}</button>
} }
} }
} }

View File

@ -2,8 +2,9 @@ use crate::{
components::router::{AppRoute, NavButton}, components::router::{AppRoute, NavButton},
infra::api::HostService, infra::api::HostService,
}; };
use anyhow::{anyhow, Result}; use anyhow::{anyhow, bail, Error, Result};
use graphql_client::GraphQLQuery; use graphql_client::GraphQLQuery;
use std::collections::HashSet;
use yew::{ use yew::{
prelude::*, prelude::*,
services::{fetch::FetchTask, ConsoleService}, services::{fetch::FetchTask, ConsoleService},
@ -13,12 +14,23 @@ use yew::{
#[graphql( #[graphql(
schema_path = "../schema.graphql", schema_path = "../schema.graphql",
query_path = "queries/get_user_details.graphql", query_path = "queries/get_user_details.graphql",
response_derives = "Debug", response_derives = "Debug, Hash, PartialEq, Eq",
custom_scalars_module = "crate::infra::graphql" custom_scalars_module = "crate::infra::graphql"
)] )]
pub struct GetUserDetails; pub struct GetUserDetails;
type User = get_user_details::GetUserDetailsUser; type User = get_user_details::GetUserDetailsUser;
type Group = get_user_details::GetUserDetailsUserGroups;
type GroupListGroup = get_group_list::GetGroupListGroups;
impl From<GroupListGroup> for Group {
fn from(group: GroupListGroup) -> Self {
Self {
id: group.id,
display_name: group.display_name,
}
}
}
#[derive(GraphQLQuery)] #[derive(GraphQLQuery)]
#[graphql( #[graphql(
@ -30,31 +42,83 @@ type User = get_user_details::GetUserDetailsUser;
)] )]
pub struct UpdateUser; pub struct UpdateUser;
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/add_user_to_group.graphql",
response_derives = "Debug",
variables_derives = "Clone",
custom_scalars_module = "crate::infra::graphql"
)]
pub struct AddUserToGroup;
#[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;
#[derive(GraphQLQuery)]
#[graphql(
schema_path = "../schema.graphql",
query_path = "queries/get_group_list.graphql",
response_derives = "Debug",
variables_derives = "Clone",
custom_scalars_module = "crate::infra::graphql"
)]
pub struct GetGroupList;
pub struct UserDetails { pub struct UserDetails {
link: ComponentLink<Self>, link: ComponentLink<Self>,
/// Which user this is about.
username: String, username: String,
/// 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>, user: Option<User>,
// Needed for the form. // Needed for the form.
node_ref: NodeRef, node_ref: NodeRef,
// Error message displayed to the user. /// Error message displayed to the user.
error: Option<anyhow::Error>, error: Option<Error>,
// The request, while we're waiting for the server to reply. /// The request, while we're waiting for the server to reply.
update_request: Option<update_user::UpdateUserInput>, update_request: Option<update_user::UpdateUserInput>,
// True iff we just finished updating the user, to display a successful message. /// True iff we just finished updating the user, to display a successful message.
update_successful: bool, update_successful: bool,
/// Whether the "+" button has been clicked.
add_group: bool,
is_admin: bool,
/// The list of existing groups, initially not loaded.
group_list: Option<Vec<Group>>,
/// The group that we're requesting to remove, if any.
group_to_remove: Option<Group>,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, _task: Option<FetchTask>,
} }
/// 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 { pub enum Msg {
/// Received the user details response, either the user data or an error.
UserDetailsResponse(Result<get_user_details::ResponseData>), UserDetailsResponse(Result<get_user_details::ResponseData>),
SubmitForm, /// The user changed some fields and submitted the form for update.
SubmitUserUpdateForm,
/// Response after updating the user's details.
UpdateFinished(Result<update_user::ResponseData>), UpdateFinished(Result<update_user::ResponseData>),
AddGroupButtonClicked,
GroupListResponse(Result<get_group_list::ResponseData>),
SubmitAddGroup,
AddGroupResponse(Result<add_user_to_group::ResponseData>),
SubmitRemoveGroup(Group),
RemoveGroupResponse(Result<remove_user_from_group::ResponseData>),
} }
#[derive(yew::Properties, Clone, PartialEq)] #[derive(yew::Properties, Clone, PartialEq)]
pub struct Props { pub struct Props {
pub username: String, pub username: String,
pub is_admin: bool,
} }
#[allow(clippy::ptr_arg)] #[allow(clippy::ptr_arg)]
@ -77,17 +141,8 @@ impl UserDetails {
}) })
.ok(); .ok();
} }
fn handle_msg(&mut self, msg: <Self as Component>::Message) -> Result<bool> {
self.update_successful = false; fn submit_user_update_form(&mut self) -> Result<bool> {
match msg {
Msg::UserDetailsResponse(Ok(user)) => {
self.user = Some(user.user);
}
Msg::UserDetailsResponse(Err(e)) => {
self.error = Some(anyhow!("Error getting user details: {}", e));
self.user = None;
}
Msg::SubmitForm => {
let base_user = self.user.as_ref().unwrap(); let base_user = self.user.as_ref().unwrap();
let mut user_input = update_user::UpdateUserInput { let mut user_input = update_user::UpdateUserInput {
id: self.username.clone(), id: self.username.clone(),
@ -126,9 +181,10 @@ impl UserDetails {
self.link.callback(Msg::UpdateFinished), self.link.callback(Msg::UpdateFinished),
"Error trying to update user", "Error trying to update user",
)?); )?);
return Ok(false); Ok(false)
} }
Msg::UpdateFinished(r) => {
fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
match r { match r {
Err(e) => return Err(e), Err(e) => return Err(e),
Ok(_) => { Ok(_) => {
@ -155,80 +211,126 @@ impl UserDetails {
}); });
} }
}; };
Ok(true)
}
fn get_group_list(&mut self) {
self._task = HostService::graphql_query::<GetGroupList>(
get_group_list::Variables,
self.link.callback(Msg::GroupListResponse),
"Error trying to fetch group list",
)
.map_err(|e| {
ConsoleService::log(&e.to_string());
e
})
.ok();
}
fn submit_add_group(&mut self) -> Result<bool> {
if self.group_list.is_none() {
return Ok(false);
}
let group_id = get_selected_group()
.expect("could not get selected group")
.id;
self._task = HostService::graphql_query::<AddUserToGroup>(
add_user_to_group::Variables {
user: self.username.clone(),
group: group_id,
},
self.link.callback(Msg::AddGroupResponse),
"Error trying to initiate adding the user to a group",
)
.map_err(|e| {
ConsoleService::log(&e.to_string());
e
})
.ok();
Ok(true)
}
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),
Err(e) => {
self.user = None;
bail!("Error getting user details: {}", e);
}
},
Msg::SubmitUserUpdateForm => return self.submit_user_update_form(),
Msg::UpdateFinished(r) => return self.user_update_finished(r),
Msg::AddGroupButtonClicked => {
if self.group_list.is_none() {
self.get_group_list();
}
self.add_group = true;
}
Msg::GroupListResponse(response) => {
let user_groups = self
.user
.as_ref()
.unwrap()
.groups
.iter()
.collect::<HashSet<_>>();
self.group_list = Some(
response?
.groups
.into_iter()
.map(Into::into)
.filter(|g| !user_groups.contains(g))
.collect(),
);
}
Msg::SubmitAddGroup => return self.submit_add_group(),
Msg::AddGroupResponse(response) => {
response?;
// Adding the user to the group succeeded, we're not in the process of adding a
// group anymore.
self.add_group = false;
let group = get_selected_group().expect("Could not get selected group");
// Remove the group from the dropdown.
self.group_list.as_mut().unwrap().retain(|g| g != &group);
self.user.as_mut().unwrap().groups.push(group);
}
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);
if let Some(groups) = self.group_list.as_mut() {
groups.push(group);
}
} }
} }
Ok(true) Ok(true)
} }
}
fn get_element(name: &str) -> Option<String> { fn view_form(&self, u: &User) -> Html {
use wasm_bindgen::JsCast;
Some(
web_sys::window()?
.document()?
.get_element_by_id(name)?
.dyn_into::<web_sys::HtmlInputElement>()
.ok()?
.value(),
)
}
fn get_element_or_empty(name: &str) -> String {
get_element(name).unwrap_or_default()
}
impl Component for UserDetails {
type Message = Msg;
// The username.
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
let mut table = UserDetails {
link,
username: props.username,
node_ref: NodeRef::default(),
_task: None,
user: None,
error: None,
update_request: None,
update_successful: false,
};
table.get_user_details();
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.error = None;
match self.handle_msg(msg) {
Err(e) => {
ConsoleService::error(&e.to_string());
self.error = Some(e);
true
}
Ok(b) => b,
}
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
type Group = get_user_details::GetUserDetailsUserGroups;
let make_group_row = |group: &Group| {
html! { html! {
<tr> <form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitUserUpdateForm })>
<td><button>{"-"}</button></td>
<td>{&group.display_name}</td>
</tr>
}
};
match (&self.user, &self.error) {
(None, None) => html! {{"Loading..."}},
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
(Some(u), error) => {
html! {
<form ref=self.node_ref.clone() onsubmit=self.link.callback(|e: FocusEvent| { e.prevent_default(); Msg::SubmitForm })>
<div> <div>
<span>{"User ID: "}</span> <span>{"User ID: "}</span>
<span>{&u.id}</span> <span>{&u.id}</span>
@ -256,7 +358,11 @@ impl Component for UserDetails {
<div> <div>
<button type="submit">{"Update"}</button> <button type="submit">{"Update"}</button>
</div> </div>
{ if self.update_successful { </form>
}
}
fn view_messages(&self, error: &Option<Error>) -> Html {
if self.update_successful {
html! { html! {
<span>{"Update successful!"}</span> <span>{"Update successful!"}</span>
} }
@ -266,24 +372,171 @@ impl Component for UserDetails {
<span>{"Error: "}{e.to_string()}</span> <span>{"Error: "}{e.to_string()}</span>
</div> </div>
} }
} else { html! {} }} } else {
html! {}
}
}
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>
<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!{} }
}
</tr>
}
};
html! {
<div> <div>
<span>{"Group memberships"}</span> <span>{"Group memberships"}</span>
<table> <table>
<tr> <tr>
<th></th>
<th>{"Group"}</th> <th>{"Group"}</th>
{ if self.is_admin { html!{ <th></th> }} else { html!{} }}
</tr> </tr>
{u.groups.iter().map(make_group_row).collect::<Vec<_>>()} {u.groups.iter().map(make_group_row).collect::<Vec<_>>()}
<tr> {self.view_add_group_button()}
<td><button>{"+"}</button></td>
</tr>
</table> </table>
</div> </div>
}
}
fn view_add_group_button(&self) -> Html {
let make_select_option = |group: &Group| {
html! {
<option value={group.id.to_string()}>{&group.display_name}</option>
}
};
if self.add_group {
html! {
<tr>
<td>
{ if let Some(groups) = self.group_list.as_ref() {
html! {
<select name="groupToAdd" id="groupToAdd">
{groups.iter().map(make_select_option).collect::<Vec<_>>()}
</select>
}
} else {
html! { <span>{"Loading groups"} </span> } }
}
</td>
{ if self.is_admin { html!{
<td>
<button onclick=self.link.callback(
|_| Msg::SubmitAddGroup)>
{"Add"}
</button>
</td>
}} else { html! {} }
}
</tr>
}
} else {
html! {
<tr>
<td></td>
<td>
<button onclick=self.link.callback(
|_| Msg::AddGroupButtonClicked)>
{"+"}
</button>
</td>
</tr>
}
}
}
}
fn get_html_element<T: wasm_bindgen::JsCast>(name: &str) -> Option<T> {
use wasm_bindgen::JsCast;
web_sys::window()?
.document()?
.get_element_by_id(name)?
.dyn_into::<T>()
.ok()
}
fn get_element(name: &str) -> Option<String> {
Some(get_html_element::<web_sys::HtmlInputElement>(name)?.value())
}
fn get_selected_group() -> Option<Group> {
use wasm_bindgen::JsCast;
let select = get_html_element::<web_sys::HtmlSelectElement>("groupToAdd")?;
let id = select.value().parse::<i64>().expect("invalid group id");
let display_name = select
.get(select.selected_index() as u32)
.unwrap()
.dyn_into::<web_sys::HtmlOptionElement>()
.unwrap()
.text();
Some(Group { id, display_name })
}
fn get_element_or_empty(name: &str) -> String {
get_element(name).unwrap_or_default()
}
impl Component for UserDetails {
type Message = Msg;
// The username.
type Properties = Props;
fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
let mut table = Self {
link,
username: props.username,
node_ref: NodeRef::default(),
_task: None,
user: None,
group_list: None,
error: None,
update_request: None,
update_successful: false,
add_group: false,
is_admin: props.is_admin,
group_to_remove: None,
};
table.get_user_details();
table
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
self.error = None;
match self.handle_msg(msg) {
Err(e) => {
ConsoleService::error(&e.to_string());
self.error = Some(e);
true
}
Ok(b) => b,
}
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
match (&self.user, &self.error) {
(None, None) => html! {{"Loading..."}},
(None, Some(e)) => html! {<div>{"Error: "}{e.to_string()}</div>},
(Some(u), error) => {
html! {
<div>
{self.view_form(u)}
{self.view_messages(error)}
{self.view_group_memberships(u)}
<div> <div>
<NavButton route=AppRoute::ChangePassword(self.username.clone())>{"Change password"}</NavButton> <NavButton route=AppRoute::ChangePassword(self.username.clone())>{"Change password"}</NavButton>
</div> </div>
</form> </div>
} }
} }
} }