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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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