From 9a68563c0b9088d33d2f2caabd1d379e52f6214d Mon Sep 17 00:00:00 2001
From: Valentin Tolmer <valentin.tolmer@gmail.com>
Date: Mon, 11 Oct 2021 19:20:13 +0200
Subject: [PATCH] app: Disable the add user/group buttons when relevant

---
 app/src/components/add_group_member.rs  | 31 +++++++------
 app/src/components/add_user_to_group.rs | 31 +++++++------
 app/src/components/group_details.rs     | 60 +++++++++++--------------
 app/src/components/select.rs            |  1 +
 app/src/components/user_details.rs      |  5 +--
 5 files changed, 58 insertions(+), 70 deletions(-)

diff --git a/app/src/components/add_group_member.rs b/app/src/components/add_group_member.rs
index faac268..1d17e40 100644
--- a/app/src/components/add_group_member.rs
+++ b/app/src/components/add_group_member.rs
@@ -110,11 +110,12 @@ impl AddGroupMemberComponent {
                 self.props.on_user_added_to_group.emit(user);
             }
             Msg::SelectionChanged(option_props) => {
+                let was_some = self.selected_user.is_some();
                 self.selected_user = option_props.map(|u| User {
                     id: u.value,
                     display_name: u.text,
                 });
-                return Ok(false);
+                return Ok(self.selected_user.is_some() != was_some);
             }
         }
         Ok(true)
@@ -170,8 +171,8 @@ impl Component for AddGroupMemberComponent {
                 }
             };
             html! {
-            <>
-              <td>
+            <div class="row">
+              <div class="col-sm-3">
                 <Select on_selection_change=self.link.callback(Msg::SelectionChanged)>
                   {
                     to_add_user_list
@@ -180,22 +181,20 @@ impl Component for AddGroupMemberComponent {
                         .collect::<Vec<_>>()
                   }
                 </Select>
-              </td>
-                  <td>
-                    <button
-                      class="btn btn-success"
-                      onclick=self.link.callback(|_| Msg::SubmitAddMember)>
-                      {"Add"}
-                    </button>
-                  </td>
-            </>
+              </div>
+              <div class="col-sm-1">
+                <button
+                  class="btn btn-success"
+                  disabled=self.selected_user.is_none()
+                  onclick=self.link.callback(|_| Msg::SubmitAddMember)>
+                  {"Add"}
+                </button>
+              </div>
+            </div>
             }
         } else {
             html! {
-              <>
-                <td>{"Loading groups"}</td>
-                <td></td>
-              </>
+              {"Loading groups"}
             }
         }
     }
diff --git a/app/src/components/add_user_to_group.rs b/app/src/components/add_user_to_group.rs
index 44bf6a1..ff77cf3 100644
--- a/app/src/components/add_user_to_group.rs
+++ b/app/src/components/add_user_to_group.rs
@@ -124,11 +124,12 @@ impl AddUserToGroupComponent {
                 self.props.on_user_added_to_group.emit(group);
             }
             Msg::SelectionChanged(option_props) => {
+                let was_some = self.selected_group.is_some();
                 self.selected_group = option_props.map(|props| Group {
                     id: props.value.parse::<i64>().unwrap(),
                     display_name: props.text,
                 });
-                return Ok(false);
+                return Ok(self.selected_group.is_some() != was_some);
             }
         }
         Ok(true)
@@ -183,8 +184,8 @@ impl Component for AddUserToGroupComponent {
                 }
             };
             html! {
-            <>
-              <td>
+            <div class="row">
+              <div class="col-sm-3">
                 <Select on_selection_change=self.link.callback(Msg::SelectionChanged)>
                   {
                     to_add_group_list
@@ -193,22 +194,20 @@ impl Component for AddUserToGroupComponent {
                         .collect::<Vec<_>>()
                   }
                 </Select>
-              </td>
-                  <td>
-                    <button
-                      class="btn btn-success"
-                      onclick=self.link.callback(|_| Msg::SubmitAddGroup)>
-                      {"Add"}
-                    </button>
-                  </td>
-            </>
+              </div>
+              <div class="col-sm-1">
+                <button
+                  class="btn btn-success"
+                  disabled=self.selected_group.is_none()
+                  onclick=self.link.callback(|_| Msg::SubmitAddGroup)>
+                  {"Add"}
+                </button>
+              </div>
+            </div>
             }
         } else {
             html! {
-              <>
-                <td>{"Loading groups"}</td>
-                <td></td>
-              </>
+              {"Loading groups"}
             }
         }
     }
diff --git a/app/src/components/group_details.rs b/app/src/components/group_details.rs
index 6adbd1c..9561825 100644
--- a/app/src/components/group_details.rs
+++ b/app/src/components/group_details.rs
@@ -131,36 +131,32 @@ impl GroupDetails {
             }
         };
         html! {
-        <div>
-          <h3>{"Members"}</h3>
-          <div class="table-responsive">
-            <table class="table table-striped">
-              <thead>
-                <tr key="headerRow">
-                  <th>{"User Id"}</th>
-                  <th>{"Display name"}</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                {if g.users.is_empty() {
-                  html! {
-                    <tr key="EmptyRow">
-                      <td>{"No members"}</td>
-                      <td/>
-                    </tr>
-                  }
-                } else {
-                  html! {<>{g.users.iter().map(make_user_row).collect::<Vec<_>>()}</>}
-                }}
-                <hr/>
-                <tr key="groupToAddRow">
-                  {self.view_add_user_button(g)}
-                </tr>
-              </tbody>
-            </table>
+          <div>
+            <h3>{"Members"}</h3>
+            <div class="table-responsive">
+              <table class="table table-striped">
+                <thead>
+                  <tr key="headerRow">
+                    <th>{"User Id"}</th>
+                    <th>{"Display name"}</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {if g.users.is_empty() {
+                    html! {
+                      <tr key="EmptyRow">
+                        <td>{"No members"}</td>
+                        <td/>
+                      </tr>
+                    }
+                  } else {
+                    html! {<>{g.users.iter().map(make_user_row).collect::<Vec<_>>()}</>}
+                  }}
+                </tbody>
+              </table>
+            </div>
           </div>
-        </div>
         }
     }
 
@@ -222,12 +218,8 @@ impl Component for GroupDetails {
             (Some(u), error) => {
                 html! {
                     <div>
-                        /*
-                      <GroupDetailsForm
-                        user=u.clone()
-                        on_error=self.link.callback(Msg::OnError)/>
-                        */
                       {self.view_user_list(u)}
+                      {self.view_add_user_button(u)}
                       {self.view_messages(error)}
                     </div>
                 }
diff --git a/app/src/components/select.rs b/app/src/components/select.rs
index e78581e..1125b2b 100644
--- a/app/src/components/select.rs
+++ b/app/src/components/select.rs
@@ -69,6 +69,7 @@ impl Component for Select {
         html! {
             <select
               ref=self.node_ref.clone()
+              disabled=self.props.children.is_empty()
               onchange=self.link.callback(SelectMsg::OnSelectChange)>
             { self.props.children.clone() }
             </select>
diff --git a/app/src/components/user_details.rs b/app/src/components/user_details.rs
index 840d95f..d6b31bc 100644
--- a/app/src/components/user_details.rs
+++ b/app/src/components/user_details.rs
@@ -153,10 +153,6 @@ impl UserDetails {
                 } else {
                   html! {<>{u.groups.iter().map(make_group_row).collect::<Vec<_>>()}</>}
                 }}
-                <hr/>
-                <tr key="groupToAddRow">
-                  {self.view_add_group_button(u)}
-                </tr>
               </tbody>
             </table>
           </div>
@@ -222,6 +218,7 @@ impl Component for UserDetails {
                         user=u.clone()
                         on_error=self.link.callback(Msg::OnError)/>
                       {self.view_group_memberships(u)}
+                      {self.view_add_group_button(u)}
                       <div>
                         <NavButton
                           route=AppRoute::ChangePassword(u.id.clone())