select collections on group add/edit

src/app/organization/organizationGroupsAddController.js

@@ -1,14 +1,60 @@
 angular
     .module('bit.organization')
 
-    .controller('organizationGroupsAddController', function ($scope, $state, $uibModalInstance, apiService,
+    .controller('organizationGroupsAddController', function ($scope, $state, $uibModalInstance, apiService, cipherService,
         $analytics) {
         $analytics.eventTrack('organizationGroupsAddController', { category: 'Modal' });
+        $scope.collections = [];
+        $scope.selectedCollections = {};
+        $scope.loading = true;
+
+        $uibModalInstance.opened.then(function () {
+            return apiService.collections.listOrganization({ orgId: $state.params.orgId }).$promise;
+        }).then(function (collections) {
+            $scope.collections = cipherService.decryptCollections(collections.Data, $state.params.orgId, true);
+            $scope.loading = false;
+        });
+
+        $scope.toggleCollectionSelectionAll = function ($event) {
+            var collections = {};
+            if ($event.target.checked) {
+                for (var i = 0; i < $scope.collections.length; i++) {
+                    collections[$scope.collections[i].id] = true;
+                }
+            }
+
+            $scope.selectedCollections = collections;
+        };
+
+        $scope.toggleCollectionSelection = function (id) {
+            if (id in $scope.selectedCollections) {
+                delete $scope.selectedCollections[id];
+            }
+            else {
+                $scope.selectedCollections[id] = true;
+            }
+        };
+
+        $scope.collectionSelected = function (collection) {
+            return collection.id in $scope.selectedCollections;
+        };
+
+        $scope.allSelected = function () {
+            return Object.keys($scope.selectedCollections).length === $scope.collections.length;
+        };
 
         $scope.submit = function (model) {
             var group = {
-                name: model.name
+                name: model.name,
+                collectionIds: []
             };
+
+            for (var id in $scope.selectedCollections) {
+                if ($scope.selectedCollections.hasOwnProperty(id)) {
+                    group.collectionIds.push(id);
+                }
+            }
+
             $scope.submitPromise = apiService.groups.post({ orgId: $state.params.orgId }, group, function (response) {
                 $analytics.eventTrack('Created Group');
                 $uibModalInstance.close({

src/app/organization/organizationGroupsEditController.js

@@ -1,22 +1,73 @@
 angular
     .module('bit.organization')
 
-    .controller('organizationGroupsEditController', function ($scope, $state, $uibModalInstance, apiService,
+    .controller('organizationGroupsEditController', function ($scope, $state, $uibModalInstance, apiService, cipherService,
         $analytics, id) {
         $analytics.eventTrack('organizationGroupsEditController', { category: 'Modal' });
-        $scope.collection = {};
+        $scope.collections = [];
+        $scope.selectedCollections = {};
+        $scope.loading = true;
 
         $uibModalInstance.opened.then(function () {
-            apiService.groups.get({ orgId: $state.params.orgId, id: id }, function (group) {
+            return apiService.groups.getDetails({ orgId: $state.params.orgId, id: id }).$promise;
+        }).then(function (group) {
             $scope.group = {
                 id: id,
                 name: group.Name
             };
-            });
+
+            var collections = {};
+            if (group.CollectionIds) {
+                for (var i = 0; i < group.CollectionIds.length; i++) {
+                    collections[group.CollectionIds[i]] = true;
+                }
+            }
+            $scope.selectedCollections = collections;
+
+            return apiService.collections.listOrganization({ orgId: $state.params.orgId }).$promise;
+        }).then(function (collections) {
+            $scope.collections = cipherService.decryptCollections(collections.Data, $state.params.orgId, true);
+            $scope.loading = false;
         });
 
+        $scope.toggleCollectionSelectionAll = function ($event) {
+            var collections = {};
+            if ($event.target.checked) {
+                for (var i = 0; i < $scope.collections.length; i++) {
+                    collections[$scope.collections[i].id] = true;
+                }
+            }
+
+            $scope.selectedCollections = collections;
+        };
+
+        $scope.toggleCollectionSelection = function (id) {
+            if (id in $scope.selectedCollections) {
+                delete $scope.selectedCollections[id];
+            }
+            else {
+                $scope.selectedCollections[id] = true;
+            }
+        };
+
+        $scope.collectionSelected = function (collection) {
+            return collection.id in $scope.selectedCollections;
+        };
+
+        $scope.allSelected = function () {
+            return Object.keys($scope.selectedCollections).length === $scope.collections.length;
+        };
+
         $scope.submit = function () {
-            $scope.submitPromise = apiService.groups.put({ orgId: $state.params.orgId }, $scope.group, function (response) {
+            var group = $scope.group;
+            group.collectionIds = [];
+            for (var id in $scope.selectedCollections) {
+                if ($scope.selectedCollections.hasOwnProperty(id)) {
+                    group.collectionIds.push(id);
+                }
+            }
+
+            $scope.submitPromise = apiService.groups.put({ orgId: $state.params.orgId }, group, function (response) {
                 $analytics.eventTrack('Edited Group');
                 $uibModalInstance.close({
                     id: response.Id,

src/app/organization/views/organizationGroupsAdd.html

@@ -4,6 +4,13 @@
 </div>
 <form name="form" ng-submit="form.$valid && submit(model)" api-form="submitPromise">
     <div class="modal-body">
+        <div class="callout callout-default">
+            <h4><i class="fa fa-info-circle"></i> Note</h4>
+            <p>
+                After creating the group, you can associate a user to it by selecting the "Groups" option for a specific user
+                on the "People" page.
+            </p>
+        </div>
         <div class="callout callout-danger validation-errors" ng-show="form.$errors">
             <h4>Errors have occured</h4>
             <ul>
@@ -14,11 +21,40 @@
             <label for="email">Name</label>
             <input type="text" id="name" name="Name" ng-model="model.name" class="form-control" required api-field />
         </div>
-        <div class="callout callout-default">
-            <h4><i class="fa fa-info-circle"></i> Note</h4>
-            <p>
-                After creating the group, you can associate a user to it by selecting a specific user on the "People" page.
-            </p>
+        <h4>Collections</h4>
+        <div ng-show="loading && !collections.length">
+            Loading collections...
+        </div>
+        <div ng-show="!loading && !collections.length">
+            <p>No collections for your organization.</p>
+        </div>
+        <div class="table-responsive" ng-show="collections.length" style="margin: 0;">
+            <table class="table table-striped table-hover" style="margin: 0;">
+                <thead>
+                    <tr>
+                        <th style="width: 40px;">
+                            <input type="checkbox"
+                                   ng-checked="allSelected()"
+                                   ng-click="toggleCollectionSelectionAll($event)">
+                        </th>
+                        <th>Name</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="collection in collections | orderBy: ['name']">
+                        <td valign="middle">
+                            <input type="checkbox"
+                                   name="selectedCollections[]"
+                                   value="{{collection.id}}"
+                                   ng-checked="collectionSelected(collection)"
+                                   ng-click="toggleCollectionSelection(collection.id)">
+                        </td>
+                        <td valign="middle">
+                            {{collection.name}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
     <div class="modal-footer">

src/app/organization/views/organizationGroupsEdit.html

@@ -4,6 +4,13 @@
 </div>
 <form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
     <div class="modal-body">
+        <div class="callout callout-default">
+            <h4><i class="fa fa-info-circle"></i> Note</h4>
+            <p>
+                Select "Users" from the listing options to manage existing users for this group. Associate new users by
+                selecting "Groups" the "People" page for a specific user.
+            </p>
+        </div>
         <div class="callout callout-danger validation-errors" ng-show="form.$errors">
             <h4>Errors have occured</h4>
             <ul>
@@ -14,12 +21,40 @@
             <label for="email">Name</label>
             <input type="text" id="name" name="Name" ng-model="group.name" class="form-control" required api-field />
         </div>
-        <div class="callout callout-default">
-            <h4><i class="fa fa-info-circle"></i> Note</h4>
-            <p>
-                Select "Users" from the listing options to manage existing users for this collection. Associate new users by
-                editing the user's access on the "People" page.
-            </p>
+        <h4>Collections</h4>
+        <div ng-show="loading && !collections.length">
+            Loading collections...
+        </div>
+        <div ng-show="!loading && !collections.length">
+            <p>No collections for your organization.</p>
+        </div>
+        <div class="table-responsive" ng-show="collections.length" style="margin: 0;">
+            <table class="table table-striped table-hover" style="margin: 0;">
+                <thead>
+                    <tr>
+                        <th style="width: 40px;">
+                            <input type="checkbox"
+                                   ng-checked="allSelected()"
+                                   ng-click="toggleCollectionSelectionAll($event)">
+                        </th>
+                        <th>Name</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="collection in collections | orderBy: ['name']">
+                        <td valign="middle">
+                            <input type="checkbox"
+                                   name="selectedCollections[]"
+                                   value="{{collection.id}}"
+                                   ng-checked="collectionSelected(collection)"
+                                   ng-click="toggleCollectionSelection(collection.id)">
+                        </td>
+                        <td valign="middle">
+                            {{collection.name}}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
     <div class="modal-footer">

src/app/services/apiService.js

@@ -83,6 +83,7 @@
 
         _service.groups = $resource(_apiUri + '/organizations/:orgId/groups/:id', {}, {
             get: { method: 'GET', params: { id: '@id', orgId: '@orgId' } },
+            getDetails: { url: _apiUri + '/organizations/:orgId/groups/:id/details', method: 'GET', params: { id: '@id', orgId: '@orgId' } },
             listOrganization: { method: 'GET', params: { orgId: '@orgId' } },
             post: { method: 'POST', params: { orgId: '@orgId' } },
             put: { method: 'POST', params: { id: '@id', orgId: '@orgId' } },