issue #1588 (#1597)

Use ldapGroup component for select group access machine

public/js/booking/ldapGroup.component.html

 <div>
 
-    <input type="text" ng-model="$ctrl.group_selected" placeholder="Escriu el grup"
+    <input type="text" ng-model="$ctrl.group_selected" placeholder="Search group"
            ng-if="$ctrl.editable"
            ng-required="!$ctrl.ngModel.$valid"
            uib-typeahead="name for name in $ctrl.getGroups($viewValue)"

public/js/booking/ldapGroups.component.js

@@ -6,6 +6,8 @@ export default {
     },
     bindings: {
         editable: '<',
+        onAdd: '&',
+        onDelete: '&'
     },
     templateUrl: '/js/booking/ldapGroup.component.html',
     controller: grpCtrl
@@ -39,8 +41,12 @@ function grpCtrl(apiLDAP, $scope, $timeout) {
         } else {
             self.selected_groups.push(self.group_selected);
         }
+        self.onAdd({ group: self.group_selected})
         self.group_selected = null;
     };
-    self.remove_ldap_group =  group => self.selected_groups = remove_array_element(self.selected_groups,group);
+    self.remove_ldap_group =  group => {
+        self.selected_groups = remove_array_element(self.selected_groups,group)
+        self.onDelete({ group })
+    }
 
 }

templates/main/machine_access_group.html.ep

 <div class="card">
     <div class="card-body">
 
-
-<button ng-enabled="allow_group"
-        ng-click="add_group_access(allow_group)">Add</button>
-<select ng-model="allow_group"
-    ng-show="ldap_groups"
-    ng-options="group for group in ldap_groups | orderBy:group"
-    >
-    </select>
-
-<div ng-show="ldap_groups && !access_groups">
+        <div ng-show="ldap_groups && !access_groups">
             <i class="fas fa-sync-alt fa-spin"></i>
-</div>
+        </div>
 
+        <ldap-groups name="groups"
+                     ng-model="access_groups" editable="true"
+                     on-add="add_group_access(group)"
+                     on-delete="remove_group_access(group)"
+        ></ldap-groups>
 
-<div class="card-body">
+        <div class="card-body">
 
-<div class="alert alert-warning" ng-show="access_groups && access_groups.length == 0">
-    <div ng-show="ldap_groups && ldap_groups.length == 0 ">
+            <div class="alert alert-warning" ng-show="access_groups && access_groups.length === 0">
+                <div ng-show="ldap_groups && ldap_groups.length === 0 ">
                     <%=l 'There are no LDAP groups defined.' %>
 %       if ( $USER->is_admin ) {
                         <a href="/admin/groups">Create one.</a>
 %       }
                 </div>
                 <%=l 'This virtual machine has no group restrictions.' %>
-</div>
-
+            </div>
 
-<div ng-show="access_groups && access_groups.length > 0">
+            <div ng-show="access_groups && access_groups.length > 0">
                 <b><%=l 'Only users from these groups will be allowed to execute this machine' %></b>
-</div>
-
-<table ng-show="access_groups.length" class="card-table table-stripped">
-    <tbody>
-        <tr ng-repeat="group in access_groups">
-            <td>
-                <button ng-click="remove_group_access(group)"
-                                            class="badge badge-light text-blue">x</button>
-                <a ng-bind-html="group" href="/admin/group/{{group}}">{{group}}</a>
-            </td>
-        </tr>
-    </tbody>
-</table>
+            </div>
 
-</div>
+        </div>
 
-</div>
+    </div>
 </div>