app: Disable the add user/group buttons when relevant

This commit is contained in:
Valentin Tolmer 2021-10-11 19:20:13 +02:00 committed by nitnelave
parent 01c82f09eb
commit 9a68563c0b
5 changed files with 58 additions and 70 deletions

View File

@ -110,11 +110,12 @@ impl AddGroupMemberComponent {
self.props.on_user_added_to_group.emit(user); self.props.on_user_added_to_group.emit(user);
} }
Msg::SelectionChanged(option_props) => { Msg::SelectionChanged(option_props) => {
let was_some = self.selected_user.is_some();
self.selected_user = option_props.map(|u| User { self.selected_user = option_props.map(|u| User {
id: u.value, id: u.value,
display_name: u.text, display_name: u.text,
}); });
return Ok(false); return Ok(self.selected_user.is_some() != was_some);
} }
} }
Ok(true) Ok(true)
@ -170,8 +171,8 @@ impl Component for AddGroupMemberComponent {
} }
}; };
html! { html! {
<> <div class="row">
<td> <div class="col-sm-3">
<Select on_selection_change=self.link.callback(Msg::SelectionChanged)> <Select on_selection_change=self.link.callback(Msg::SelectionChanged)>
{ {
to_add_user_list to_add_user_list
@ -180,22 +181,20 @@ impl Component for AddGroupMemberComponent {
.collect::<Vec<_>>() .collect::<Vec<_>>()
} }
</Select> </Select>
</td> </div>
<td> <div class="col-sm-1">
<button <button
class="btn btn-success" class="btn btn-success"
onclick=self.link.callback(|_| Msg::SubmitAddMember)> disabled=self.selected_user.is_none()
{"Add"} onclick=self.link.callback(|_| Msg::SubmitAddMember)>
</button> {"Add"}
</td> </button>
</> </div>
</div>
} }
} else { } else {
html! { html! {
<> {"Loading groups"}
<td>{"Loading groups"}</td>
<td></td>
</>
} }
} }
} }

View File

@ -124,11 +124,12 @@ impl AddUserToGroupComponent {
self.props.on_user_added_to_group.emit(group); self.props.on_user_added_to_group.emit(group);
} }
Msg::SelectionChanged(option_props) => { Msg::SelectionChanged(option_props) => {
let was_some = self.selected_group.is_some();
self.selected_group = option_props.map(|props| Group { self.selected_group = option_props.map(|props| Group {
id: props.value.parse::<i64>().unwrap(), id: props.value.parse::<i64>().unwrap(),
display_name: props.text, display_name: props.text,
}); });
return Ok(false); return Ok(self.selected_group.is_some() != was_some);
} }
} }
Ok(true) Ok(true)
@ -183,8 +184,8 @@ impl Component for AddUserToGroupComponent {
} }
}; };
html! { html! {
<> <div class="row">
<td> <div class="col-sm-3">
<Select on_selection_change=self.link.callback(Msg::SelectionChanged)> <Select on_selection_change=self.link.callback(Msg::SelectionChanged)>
{ {
to_add_group_list to_add_group_list
@ -193,22 +194,20 @@ impl Component for AddUserToGroupComponent {
.collect::<Vec<_>>() .collect::<Vec<_>>()
} }
</Select> </Select>
</td> </div>
<td> <div class="col-sm-1">
<button <button
class="btn btn-success" class="btn btn-success"
onclick=self.link.callback(|_| Msg::SubmitAddGroup)> disabled=self.selected_group.is_none()
{"Add"} onclick=self.link.callback(|_| Msg::SubmitAddGroup)>
</button> {"Add"}
</td> </button>
</> </div>
</div>
} }
} else { } else {
html! { html! {
<> {"Loading groups"}
<td>{"Loading groups"}</td>
<td></td>
</>
} }
} }
} }

View File

@ -131,36 +131,32 @@ impl GroupDetails {
} }
}; };
html! { html! {
<div> <div>
<h3>{"Members"}</h3> <h3>{"Members"}</h3>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr key="headerRow"> <tr key="headerRow">
<th>{"User Id"}</th> <th>{"User Id"}</th>
<th>{"Display name"}</th> <th>{"Display name"}</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{if g.users.is_empty() { {if g.users.is_empty() {
html! { html! {
<tr key="EmptyRow"> <tr key="EmptyRow">
<td>{"No members"}</td> <td>{"No members"}</td>
<td/> <td/>
</tr> </tr>
} }
} else { } else {
html! {<>{g.users.iter().map(make_user_row).collect::<Vec<_>>()}</>} html! {<>{g.users.iter().map(make_user_row).collect::<Vec<_>>()}</>}
}} }}
<hr/> </tbody>
<tr key="groupToAddRow"> </table>
{self.view_add_user_button(g)} </div>
</tr>
</tbody>
</table>
</div> </div>
</div>
} }
} }
@ -222,12 +218,8 @@ impl Component for GroupDetails {
(Some(u), error) => { (Some(u), error) => {
html! { html! {
<div> <div>
/*
<GroupDetailsForm
user=u.clone()
on_error=self.link.callback(Msg::OnError)/>
*/
{self.view_user_list(u)} {self.view_user_list(u)}
{self.view_add_user_button(u)}
{self.view_messages(error)} {self.view_messages(error)}
</div> </div>
} }

View File

@ -69,6 +69,7 @@ impl Component for Select {
html! { html! {
<select <select
ref=self.node_ref.clone() ref=self.node_ref.clone()
disabled=self.props.children.is_empty()
onchange=self.link.callback(SelectMsg::OnSelectChange)> onchange=self.link.callback(SelectMsg::OnSelectChange)>
{ self.props.children.clone() } { self.props.children.clone() }
</select> </select>

View File

@ -153,10 +153,6 @@ impl UserDetails {
} else { } else {
html! {<>{u.groups.iter().map(make_group_row).collect::<Vec<_>>()}</>} html! {<>{u.groups.iter().map(make_group_row).collect::<Vec<_>>()}</>}
}} }}
<hr/>
<tr key="groupToAddRow">
{self.view_add_group_button(u)}
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -222,6 +218,7 @@ impl Component for UserDetails {
user=u.clone() user=u.clone()
on_error=self.link.callback(Msg::OnError)/> on_error=self.link.callback(Msg::OnError)/>
{self.view_group_memberships(u)} {self.view_group_memberships(u)}
{self.view_add_group_button(u)}
<div> <div>
<NavButton <NavButton
route=AppRoute::ChangePassword(u.id.clone()) route=AppRoute::ChangePassword(u.id.clone())