app: Disable buttons while the task is running

This commit is contained in:
Valentin Tolmer 2021-10-12 05:18:20 +02:00 committed by nitnelave
parent ead501158d
commit 3912d62623
8 changed files with 62 additions and 45 deletions

View File

@ -40,7 +40,7 @@ pub struct AddGroupMemberComponent {
/// The currently selected user. /// The currently selected user.
selected_user: Option<User>, selected_user: Option<User>,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
pub enum Msg { pub enum Msg {
@ -60,7 +60,7 @@ pub struct Props {
impl AddGroupMemberComponent { impl AddGroupMemberComponent {
fn get_user_list(&mut self) { fn get_user_list(&mut self) {
self._task = HostService::graphql_query::<ListUserNames>( self.task = HostService::graphql_query::<ListUserNames>(
list_user_names::Variables { filters: None }, list_user_names::Variables { filters: None },
self.link.callback(Msg::UserListResponse), self.link.callback(Msg::UserListResponse),
"Error trying to fetch user list", "Error trying to fetch user list",
@ -77,7 +77,7 @@ impl AddGroupMemberComponent {
None => return Ok(false), None => return Ok(false),
Some(user) => user.id, Some(user) => user.id,
}; };
self._task = HostService::graphql_query::<AddUserToGroup>( self.task = HostService::graphql_query::<AddUserToGroup>(
add_user_to_group::Variables { add_user_to_group::Variables {
user: user_id, user: user_id,
group: self.props.group_id, group: self.props.group_id,
@ -97,10 +97,12 @@ impl AddGroupMemberComponent {
match msg { match msg {
Msg::UserListResponse(response) => { Msg::UserListResponse(response) => {
self.user_list = Some(response?.users); self.user_list = Some(response?.users);
self.task = None;
} }
Msg::SubmitAddMember => return self.submit_add_member(), Msg::SubmitAddMember => return self.submit_add_member(),
Msg::AddMemberResponse(response) => { Msg::AddMemberResponse(response) => {
response?; response?;
self.task = None;
let user = self let user = self
.selected_user .selected_user
.as_ref() .as_ref()
@ -140,7 +142,7 @@ impl Component for AddGroupMemberComponent {
props, props,
user_list: None, user_list: None,
selected_user: None, selected_user: None,
_task: None, task: None,
}; };
res.get_user_list(); res.get_user_list();
res res
@ -151,6 +153,7 @@ impl Component for AddGroupMemberComponent {
Err(e) => { Err(e) => {
ConsoleService::error(&e.to_string()); ConsoleService::error(&e.to_string());
self.props.on_error.emit(e); self.props.on_error.emit(e);
self.task = None;
true true
} }
Ok(b) => b, Ok(b) => b,
@ -185,7 +188,7 @@ impl Component for AddGroupMemberComponent {
<div class="col-sm-1"> <div class="col-sm-1">
<button <button
class="btn btn-success" class="btn btn-success"
disabled=self.selected_user.is_none() disabled=self.selected_user.is_none() || self.task.is_some()
onclick=self.link.callback(|_| Msg::SubmitAddMember)> onclick=self.link.callback(|_| Msg::SubmitAddMember)>
{"Add"} {"Add"}
</button> </button>

View File

@ -52,7 +52,7 @@ pub struct AddUserToGroupComponent {
/// The currently selected group. /// The currently selected group.
selected_group: Option<Group>, selected_group: Option<Group>,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
pub enum Msg { pub enum Msg {
@ -72,7 +72,7 @@ pub struct Props {
impl AddUserToGroupComponent { impl AddUserToGroupComponent {
fn get_group_list(&mut self) { fn get_group_list(&mut self) {
self._task = HostService::graphql_query::<GetGroupList>( self.task = HostService::graphql_query::<GetGroupList>(
get_group_list::Variables, get_group_list::Variables,
self.link.callback(Msg::GroupListResponse), self.link.callback(Msg::GroupListResponse),
"Error trying to fetch group list", "Error trying to fetch group list",
@ -89,7 +89,7 @@ impl AddUserToGroupComponent {
None => return Ok(false), None => return Ok(false),
Some(group) => group.id, Some(group) => group.id,
}; };
self._task = HostService::graphql_query::<AddUserToGroup>( self.task = HostService::graphql_query::<AddUserToGroup>(
add_user_to_group::Variables { add_user_to_group::Variables {
user: self.props.username.clone(), user: self.props.username.clone(),
group: group_id, group: group_id,
@ -109,10 +109,12 @@ impl AddUserToGroupComponent {
match msg { match msg {
Msg::GroupListResponse(response) => { Msg::GroupListResponse(response) => {
self.group_list = Some(response?.groups.into_iter().map(Into::into).collect()); self.group_list = Some(response?.groups.into_iter().map(Into::into).collect());
self.task = None;
} }
Msg::SubmitAddGroup => return self.submit_add_group(), Msg::SubmitAddGroup => return self.submit_add_group(),
Msg::AddGroupResponse(response) => { Msg::AddGroupResponse(response) => {
response?; response?;
self.task = None;
// Adding the user to the group succeeded, we're not in the process of adding a // Adding the user to the group succeeded, we're not in the process of adding a
// group anymore. // group anymore.
let group = self let group = self
@ -154,7 +156,7 @@ impl Component for AddUserToGroupComponent {
props, props,
group_list: None, group_list: None,
selected_group: None, selected_group: None,
_task: None, task: None,
}; };
res.get_group_list(); res.get_group_list();
res res
@ -164,6 +166,7 @@ impl Component for AddUserToGroupComponent {
Err(e) => { Err(e) => {
ConsoleService::error(&e.to_string()); ConsoleService::error(&e.to_string());
self.props.on_error.emit(e); self.props.on_error.emit(e);
self.task = None;
true true
} }
Ok(b) => b, Ok(b) => b,
@ -198,7 +201,7 @@ impl Component for AddUserToGroupComponent {
<div class="col-sm-1"> <div class="col-sm-1">
<button <button
class="btn btn-success" class="btn btn-success"
disabled=self.selected_group.is_none() disabled=self.selected_group.is_none() || self.task.is_some()
onclick=self.link.callback(|_| Msg::SubmitAddGroup)> onclick=self.link.callback(|_| Msg::SubmitAddGroup)>
{"Add"} {"Add"}
</button> </button>

View File

@ -25,7 +25,7 @@ pub struct CreateGroupForm {
form: yew_form::Form<CreateGroupModel>, form: yew_form::Form<CreateGroupModel>,
error: Option<anyhow::Error>, error: Option<anyhow::Error>,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
#[derive(Model, Validate, PartialEq, Clone, Default)] #[derive(Model, Validate, PartialEq, Clone, Default)]
@ -52,21 +52,18 @@ impl CreateGroupForm {
let req = create_group::Variables { let req = create_group::Variables {
name: model.groupname, name: model.groupname,
}; };
self._task = Some(HostService::graphql_query::<CreateGroup>( self.task = Some(HostService::graphql_query::<CreateGroup>(
req, req,
self.link.callback(Msg::CreateGroupResponse), self.link.callback(Msg::CreateGroupResponse),
"Error trying to create group", "Error trying to create group",
)?); )?);
Ok(true) Ok(true)
} }
Msg::CreateGroupResponse(r) => { Msg::CreateGroupResponse(response) => {
match r { ConsoleService::log(&format!(
Err(e) => return Err(e), "Created group '{}'",
Ok(r) => ConsoleService::log(&format!( &response?.create_group.display_name
"Created group '{}'", ));
&r.create_group.display_name
)),
};
self.route_dispatcher self.route_dispatcher
.send(RouteRequest::ChangeRoute(Route::from(AppRoute::ListGroups))); .send(RouteRequest::ChangeRoute(Route::from(AppRoute::ListGroups)));
Ok(true) Ok(true)
@ -85,7 +82,7 @@ impl Component for CreateGroupForm {
route_dispatcher: RouteAgentDispatcher::new(), route_dispatcher: RouteAgentDispatcher::new(),
form: yew_form::Form::<CreateGroupModel>::new(CreateGroupModel::default()), form: yew_form::Form::<CreateGroupModel>::new(CreateGroupModel::default()),
error: None, error: None,
_task: None, task: None,
} }
} }
@ -95,6 +92,7 @@ impl Component for CreateGroupForm {
Err(e) => { Err(e) => {
ConsoleService::error(&e.to_string()); ConsoleService::error(&e.to_string());
self.error = Some(e); self.error = Some(e);
self.task = None;
true true
} }
Ok(b) => b, Ok(b) => b,
@ -134,6 +132,7 @@ impl Component for CreateGroupForm {
<button <button
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-sm-1 col-form-label"
type="button" type="button"
disabled=self.task.is_some()
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
{"Submit"} {"Submit"}
</button> </button>

View File

@ -26,7 +26,7 @@ pub struct CreateUserForm {
form: yew_form::Form<CreateUserModel>, form: yew_form::Form<CreateUserModel>,
error: Option<anyhow::Error>, error: Option<anyhow::Error>,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
#[derive(Model, Validate, PartialEq, Clone, Default)] #[derive(Model, Validate, PartialEq, Clone, Default)]
@ -89,7 +89,7 @@ impl CreateUserForm {
lastName: to_option(model.last_name), lastName: to_option(model.last_name),
}, },
}; };
self._task = Some(HostService::graphql_query::<CreateUser>( self.task = Some(HostService::graphql_query::<CreateUser>(
req, req,
self.link.callback(Msg::CreateUserResponse), self.link.callback(Msg::CreateUserResponse),
"Error trying to create user", "Error trying to create user",
@ -118,7 +118,7 @@ impl CreateUserForm {
username: user_id, username: user_id,
registration_start_request: message, registration_start_request: message,
}; };
self._task = Some( self.task = Some(
HostService::register_start( HostService::register_start(
req, req,
self.link self.link
@ -143,7 +143,7 @@ impl CreateUserForm {
server_data: response.server_data, server_data: response.server_data,
registration_upload: registration_upload.message, registration_upload: registration_upload.message,
}; };
self._task = Some( self.task = Some(
HostService::register_finish( HostService::register_finish(
req, req,
self.link.callback(Msg::RegistrationFinishResponse), self.link.callback(Msg::RegistrationFinishResponse),
@ -175,7 +175,7 @@ impl Component for CreateUserForm {
route_dispatcher: RouteAgentDispatcher::new(), route_dispatcher: RouteAgentDispatcher::new(),
form: yew_form::Form::<CreateUserModel>::new(CreateUserModel::default()), form: yew_form::Form::<CreateUserModel>::new(CreateUserModel::default()),
error: None, error: None,
_task: None, task: None,
} }
} }
@ -185,6 +185,7 @@ impl Component for CreateUserForm {
Err(e) => { Err(e) => {
ConsoleService::error(&e.to_string()); ConsoleService::error(&e.to_string());
self.error = Some(e); self.error = Some(e);
self.task = None;
true true
} }
Ok(b) => b, Ok(b) => b,
@ -340,6 +341,7 @@ impl Component for CreateUserForm {
<div class="form-group row"> <div class="form-group row">
<button <button
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-sm-1 col-form-label"
disabled=self.task.is_some()
type="submit" type="submit"
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitForm})>
{"Submit"} {"Submit"}

View File

@ -22,7 +22,7 @@ pub struct DeleteGroup {
props: DeleteGroupProps, props: DeleteGroupProps,
node_ref: NodeRef, node_ref: NodeRef,
modal: Option<Modal>, modal: Option<Modal>,
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
#[derive(yew::Properties, Clone, PartialEq, Debug)] #[derive(yew::Properties, Clone, PartialEq, Debug)]
@ -49,7 +49,7 @@ impl Component for DeleteGroup {
props, props,
node_ref: NodeRef::default(), node_ref: NodeRef::default(),
modal: None, modal: None,
_task: None, task: None,
} }
} }
@ -70,7 +70,7 @@ impl Component for DeleteGroup {
} }
Msg::ConfirmDeleteGroup => { Msg::ConfirmDeleteGroup => {
self.update(Msg::DismissModal); self.update(Msg::DismissModal);
self._task = HostService::graphql_query::<DeleteGroupQuery>( self.task = HostService::graphql_query::<DeleteGroupQuery>(
delete_group_query::Variables { delete_group_query::Variables {
group_id: self.props.group.id, group_id: self.props.group.id,
}, },
@ -84,6 +84,7 @@ impl Component for DeleteGroup {
self.modal.as_ref().expect("modal not initialized").hide(); self.modal.as_ref().expect("modal not initialized").hide();
} }
Msg::DeleteGroupResponse(response) => { Msg::DeleteGroupResponse(response) => {
self.task = None;
if let Err(e) = response { if let Err(e) = response {
self.props.on_error.emit(e); self.props.on_error.emit(e);
} else { } else {
@ -103,6 +104,7 @@ impl Component for DeleteGroup {
<> <>
<button <button
class="btn btn-danger" class="btn btn-danger"
disabled=self.task.is_some()
onclick=self.link.callback(|_| Msg::ClickedDeleteGroup)> onclick=self.link.callback(|_| Msg::ClickedDeleteGroup)>
<i class="bi-x-circle-fill" aria-label="Delete group" /> <i class="bi-x-circle-fill" aria-label="Delete group" />
</button> </button>
@ -117,15 +119,15 @@ impl DeleteGroup {
html! { html! {
<div <div
class="modal fade" class="modal fade"
id="exampleModal".to_string() + &self.props.group.id.to_string() id="deleteGroupModal".to_string() + &self.props.group.id.to_string()
tabindex="-1" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-labelledby="deleteGroupModalLabel"
aria-hidden="true" aria-hidden="true"
ref=self.node_ref.clone()> ref=self.node_ref.clone()>
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{"Delete group?"}</h5> <h5 class="modal-title" id="deleteGroupModalLabel">{"Delete group?"}</h5>
<button <button
type="button" type="button"
class="btn-close" class="btn-close"

View File

@ -19,7 +19,7 @@ pub struct DeleteUser {
props: DeleteUserProps, props: DeleteUserProps,
node_ref: NodeRef, node_ref: NodeRef,
modal: Option<Modal>, modal: Option<Modal>,
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
#[derive(yew::Properties, Clone, PartialEq, Debug)] #[derive(yew::Properties, Clone, PartialEq, Debug)]
@ -46,7 +46,7 @@ impl Component for DeleteUser {
props, props,
node_ref: NodeRef::default(), node_ref: NodeRef::default(),
modal: None, modal: None,
_task: None, task: None,
} }
} }
@ -67,7 +67,7 @@ impl Component for DeleteUser {
} }
Msg::ConfirmDeleteUser => { Msg::ConfirmDeleteUser => {
self.update(Msg::DismissModal); self.update(Msg::DismissModal);
self._task = HostService::graphql_query::<DeleteUserQuery>( self.task = HostService::graphql_query::<DeleteUserQuery>(
delete_user_query::Variables { delete_user_query::Variables {
user: self.props.username.clone(), user: self.props.username.clone(),
}, },
@ -81,6 +81,7 @@ impl Component for DeleteUser {
self.modal.as_ref().expect("modal not initialized").hide(); self.modal.as_ref().expect("modal not initialized").hide();
} }
Msg::DeleteUserResponse(response) => { Msg::DeleteUserResponse(response) => {
self.task = None;
if let Err(e) = response { if let Err(e) = response {
self.props.on_error.emit(e); self.props.on_error.emit(e);
} else { } else {
@ -100,6 +101,7 @@ impl Component for DeleteUser {
<> <>
<button <button
class="btn btn-danger" class="btn btn-danger"
disabled=self.task.is_some()
onclick=self.link.callback(|_| Msg::ClickedDeleteUser)> onclick=self.link.callback(|_| Msg::ClickedDeleteUser)>
<i class="bi-x-circle-fill" aria-label="Delete user" /> <i class="bi-x-circle-fill" aria-label="Delete user" />
</button> </button>
@ -114,16 +116,16 @@ impl DeleteUser {
html! { html! {
<div <div
class="modal fade" class="modal fade"
id="exampleModal".to_string() + &self.props.username id="deleteUserModal".to_string() + &self.props.username
tabindex="-1" tabindex="-1"
//role="dialog" //role="dialog"
aria-labelledby="exampleModalLabel" aria-labelledby="deleteUserModalLabel"
aria-hidden="true" aria-hidden="true"
ref=self.node_ref.clone()> ref=self.node_ref.clone()>
<div class="modal-dialog" /*role="document"*/> <div class="modal-dialog" /*role="document"*/>
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{"Delete user?"}</h5> <h5 class="modal-title" id="deleteUserModalLabel">{"Delete user?"}</h5>
<button <button
type="button" type="button"
class="btn-close" class="btn-close"

View File

@ -20,7 +20,7 @@ pub struct RemoveUserFromGroupComponent {
link: ComponentLink<Self>, link: ComponentLink<Self>,
props: Props, props: Props,
// Used to keep the request alive long enough. // Used to keep the request alive long enough.
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
#[derive(yew::Properties, Clone, PartialEq)] #[derive(yew::Properties, Clone, PartialEq)]
@ -39,7 +39,7 @@ pub enum Msg {
impl RemoveUserFromGroupComponent { impl RemoveUserFromGroupComponent {
fn submit_remove_group(&mut self) -> Result<bool> { fn submit_remove_group(&mut self) -> Result<bool> {
let group = self.props.group_id; let group = self.props.group_id;
self._task = HostService::graphql_query::<RemoveUserFromGroup>( self.task = HostService::graphql_query::<RemoveUserFromGroup>(
remove_user_from_group::Variables { remove_user_from_group::Variables {
user: self.props.username.clone(), user: self.props.username.clone(),
group, group,
@ -60,6 +60,7 @@ impl RemoveUserFromGroupComponent {
Msg::SubmitRemoveGroup => return self.submit_remove_group(), Msg::SubmitRemoveGroup => return self.submit_remove_group(),
Msg::RemoveGroupResponse(response) => { Msg::RemoveGroupResponse(response) => {
response?; response?;
self.task = None;
self.props self.props
.on_user_removed_from_group .on_user_removed_from_group
.emit((self.props.username.clone(), self.props.group_id)); .emit((self.props.username.clone(), self.props.group_id));
@ -77,13 +78,14 @@ impl Component for RemoveUserFromGroupComponent {
Self { Self {
link, link,
props, props,
_task: None, task: None,
} }
} }
fn update(&mut self, msg: Self::Message) -> ShouldRender { fn update(&mut self, msg: Self::Message) -> ShouldRender {
match self.handle_msg(msg) { match self.handle_msg(msg) {
Err(e) => { Err(e) => {
self.task = None;
self.props.on_error.emit(e); self.props.on_error.emit(e);
true true
} }
@ -99,6 +101,7 @@ impl Component for RemoveUserFromGroupComponent {
html! { html! {
<button <button
class="btn btn-danger" class="btn btn-danger"
disabled=self.task.is_some()
onclick=self.link.callback(|_| Msg::SubmitRemoveGroup)> onclick=self.link.callback(|_| Msg::SubmitRemoveGroup)>
<i class="bi-x-circle-fill" aria-label="Remove user from group" /> <i class="bi-x-circle-fill" aria-label="Remove user from group" />
</button> </button>

View File

@ -37,7 +37,7 @@ pub struct UserDetailsForm {
form: yew_form::Form<UserModel>, form: yew_form::Form<UserModel>,
/// True if we just successfully updated the user, to display a success message. /// True if we just successfully updated the user, to display a success message.
just_updated: bool, just_updated: bool,
_task: Option<FetchTask>, task: Option<FetchTask>,
} }
pub enum Msg { pub enum Msg {
@ -73,7 +73,7 @@ impl Component for UserDetailsForm {
form: yew_form::Form::new(model), form: yew_form::Form::new(model),
props, props,
just_updated: false, just_updated: false,
_task: None, task: None,
} }
} }
@ -83,6 +83,7 @@ impl Component for UserDetailsForm {
Err(e) => { Err(e) => {
ConsoleService::error(&e.to_string()); ConsoleService::error(&e.to_string());
self.props.on_error.emit(e); self.props.on_error.emit(e);
self.task = None;
true true
} }
Ok(b) => b, Ok(b) => b,
@ -192,8 +193,9 @@ impl Component for UserDetailsForm {
<button <button
type="button" type="button"
class="btn btn-primary col-sm-1 col-form-label" class="btn btn-primary col-sm-1 col-form-label"
disabled=self.task.is_some()
onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})> onclick=self.link.callback(|e: MouseEvent| {e.prevent_default(); Msg::SubmitClicked})>
<b>{"Update"}</b> {"Update"}
</button> </button>
</div> </div>
</form> </form>
@ -246,7 +248,7 @@ impl UserDetailsForm {
return Ok(false); return Ok(false);
} }
let req = update_user::Variables { user: user_input }; let req = update_user::Variables { user: user_input };
self._task = Some(HostService::graphql_query::<UpdateUser>( self.task = Some(HostService::graphql_query::<UpdateUser>(
req, req,
self.link.callback(Msg::UserUpdated), self.link.callback(Msg::UserUpdated),
"Error trying to update user", "Error trying to update user",
@ -255,6 +257,7 @@ impl UserDetailsForm {
} }
fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> { fn user_update_finished(&mut self, r: Result<update_user::ResponseData>) -> Result<bool> {
self.task = None;
match r { match r {
Err(e) => return Err(e), Err(e) => return Err(e),
Ok(_) => { Ok(_) => {