groups list/add/edit

src/app/global/mainController.js

@@ -60,6 +60,10 @@ angular
             $scope.$broadcast('organizationPeopleInvite');
         };
 
+        $scope.addOrganizationGroup = function () {
+            $scope.$broadcast('organizationGroupsAdd');
+        };
+
         // Append dropdown menu somewhere else
         var bodyScrollbarWidth,
             appendedDropdownMenu,

src/app/organization/organizationGroupsAddController.js

@@ -0,0 +1,24 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationGroupsAddController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics) {
+        $analytics.eventTrack('organizationGroupsAddController', { category: 'Modal' });
+
+        $scope.submit = function (model) {
+            var group = {
+                name: model.name
+            };
+            $scope.submitPromise = apiService.groups.post({ orgId: $state.params.orgId }, group, function (response) {
+                $analytics.eventTrack('Created Group');
+                $uibModalInstance.close({
+                    id: response.Id,
+                    name: response.Name
+                });
+            }).$promise;
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/organization/organizationGroupsController.js

@@ -1,6 +1,85 @@
 angular
     .module('bit.organization')
 
-    .controller('organizationGroupsController', function ($scope, $state) {
-        
+    .controller('organizationGroupsController', function ($scope, $state, apiService, $uibModal, $filter,
+        toastr, $analytics) {
+        $scope.groups = [];
+        $scope.loading = true;
+        $scope.$on('$viewContentLoaded', function () {
+            loadList();
+        });
+
+        $scope.$on('organizationGroupsAdd', function (event, args) {
+            $scope.add();
+        });
+
+        $scope.add = function () {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/organization/views/organizationGroupsAdd.html',
+                controller: 'organizationGroupsAddController'
+            });
+
+            modal.result.then(function (group) {
+                $scope.groups.push(group);
+            });
+        };
+
+        $scope.edit = function (group) {
+            var modal = $uibModal.open({
+                animation: true,
+                templateUrl: 'app/organization/views/organizationGroupsEdit.html',
+                controller: 'organizationGroupsEditController',
+                resolve: {
+                    id: function () { return group.id; }
+                }
+            });
+
+            modal.result.then(function (editedGroup) {
+                var existingGroups = $filter('filter')($scope.groups, { id: editedGroup.id }, true);
+                if (existingGroups && existingGroups.length > 0) {
+                    existingGroups[0].name = editedGroup.name;
+                }
+            });
+        };
+
+        $scope.users = function (group) {
+            
+        };
+
+        $scope.collections = function (collection) {
+            
+        };
+
+        $scope.delete = function (group) {
+            if (!confirm('Are you sure you want to delete this group (' + group.name + ')?')) {
+                return;
+            }
+
+            apiService.groups.del({ orgId: $state.params.orgId, id: group.id }, function () {
+                var index = $scope.groups.indexOf(group);
+                if (index > -1) {
+                    $scope.groups.splice(index, 1);
+                }
+
+                $analytics.eventTrack('Deleted Group');
+                toastr.success(group.name + ' has been deleted.', 'Group Deleted');
+            }, function () {
+                toastr.error(group.name + ' was not able to be deleted.', 'Error');
+            });
+        };
+
+        function loadList() {
+            apiService.groups.listOrganization({ orgId: $state.params.orgId }, function (list) {
+                var groups = [];
+                for (var i = 0; i < list.Data.length; i++) {
+                    groups.push({
+                        id: list.Data[i].Id,
+                        name: list.Data[i].Name
+                    });
+                }
+                $scope.groups = groups;
+                $scope.loading = false;
+            });
+        }
     });

src/app/organization/organizationGroupsEditController.js

@@ -0,0 +1,31 @@
+angular
+    .module('bit.organization')
+
+    .controller('organizationGroupsEditController', function ($scope, $state, $uibModalInstance, apiService,
+        $analytics, id) {
+        $analytics.eventTrack('organizationGroupsEditController', { category: 'Modal' });
+        $scope.collection = {};
+
+        $uibModalInstance.opened.then(function () {
+            apiService.groups.get({ orgId: $state.params.orgId, id: id }, function (group) {
+                $scope.group = {
+                    id: id,
+                    name: group.Name
+                };
+            });
+        });
+
+        $scope.submit = function () {
+            $scope.submitPromise = apiService.groups.put({ orgId: $state.params.orgId }, $scope.group, function (response) {
+                $analytics.eventTrack('Edited Group');
+                $uibModalInstance.close({
+                    id: response.Id,
+                    name: response.Name
+                });
+            }).$promise;
+        };
+
+        $scope.close = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    });

src/app/organization/views/organizationGroups.html

@@ -7,10 +7,69 @@
 <section class="content">
     <div class="box">
         <div class="box-header with-border">
-            <h3 class="box-title">Coming soon...</h3>
+            &nbsp;
+            <div class="box-filters hidden-xs">
+                <div class="form-group form-group-sm has-feedback has-feedback-left">
+                    <input type="text" id="search" class="form-control" placeholder="Search groups..."
+                           style="width: 200px;" ng-model="filterSearch">
+                    <span class="fa fa-search form-control-feedback text-muted" aria-hidden="true"></span>
+                </div>
+            </div>
+            <div class="box-tools">
+                <button type="button" class="btn btn-primary btn-sm btn-flat" ng-click="add()">
+                    <i class="fa fa-fw fa-plus-circle"></i> New Group
+                </button>
+            </div>
         </div>
-        <div class="box-body">
-            <p>Groups are coming soon to bitwarden Enterprise organizations.</p>
+        <div class="box-body" ng-class="{'no-padding': filteredGroups.length}">
+            <div ng-show="loading && !groups.length">
+                Loading...
+            </div>
+            <div ng-show="!filteredGroups.length && filterSearch">
+                No groups to list.
+            </div>
+            <div ng-show="!loading && !groups.length">
+                <p>There are no groups yet for your organization.</p>
+                <button type="button" ng-click="add()" class="btn btn-default btn-flat">Add a Group</button>
+            </div>
+            <div class="table-responsive" ng-show="groups.length">
+                <table class="table table-striped table-hover table-vmiddle">
+                    <tbody>
+                        <tr ng-repeat="group in filteredGroups = (groups | filter: (filterSearch || '') |
+                            orderBy: ['name']) track by group.id">
+                            <td style="width: 70px;">
+                                <div class="btn-group" data-append-to="body">
+                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                        <i class="fa fa-cog"></i> <span class="caret"></span>
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        <li>
+                                            <a href="javascript:void(0)" ng-click="users(group)">
+                                                <i class="fa fa-fw fa-users"></i> Users
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:void(0)" ng-click="collections(group)">
+                                                <i class="fa fa-fw fa-cubes"></i> Collections
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="javascript:void(0)" ng-click="delete(group)" class="text-red">
+                                                <i class="fa fa-fw fa-trash"></i> Delete
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </td>
+                            <td valign="middle">
+                                <a href="javascript:void(0)" ng-click="edit(group)">
+                                    {{group.name}}
+                                </a>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </section>

src/app/organization/views/organizationGroupsAdd.html

@@ -0,0 +1,30 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title"><i class="fa fa-sitemap"></i> Add New Group</h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit(model)" api-form="submitPromise">
+    <div class="modal-body">
+        <div class="callout callout-danger validation-errors" ng-show="form.$errors">
+            <h4>Errors have occured</h4>
+            <ul>
+                <li ng-repeat="e in form.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <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>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/organization/views/organizationGroupsEdit.html

@@ -0,0 +1,31 @@
+<div class="modal-header">
+    <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <h4 class="modal-title"><i class="fa fa-sitemap"></i> Edit Group</h4>
+</div>
+<form name="form" ng-submit="form.$valid && submit()" api-form="submitPromise">
+    <div class="modal-body">
+        <div class="callout callout-danger validation-errors" ng-show="form.$errors">
+            <h4>Errors have occured</h4>
+            <ul>
+                <li ng-repeat="e in form.$errors">{{e}}</li>
+            </ul>
+        </div>
+        <div class="form-group" show-errors>
+            <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>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="submit" class="btn btn-primary btn-flat" ng-disabled="form.$loading">
+            <i class="fa fa-refresh fa-spin loading-icon" ng-show="form.$loading"></i>Submit
+        </button>
+        <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
+    </div>
+</form>

src/app/services/apiService.js

@@ -81,6 +81,14 @@
             del: { url: _apiUri + '/organizations/:orgId/collectionUsers/:id/delete', method: 'POST', params: { id: '@id', orgId: '@orgId' } }
         });
 
+        _service.groups = $resource(_apiUri + '/organizations/:orgId/groups/:id', {}, {
+            get: { 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' } },
+            del: { url: _apiUri + '/organizations/:orgId/groups/:id/delete', method: 'POST', params: { id: '@id', orgId: '@orgId' } }
+        });
+
         _service.accounts = $resource(_apiUri + '/accounts', {}, {
             register: { url: _apiUri + '/accounts/register', method: 'POST', params: {} },
             emailToken: { url: _apiUri + '/accounts/email-token', method: 'POST', params: {} },

src/app/views/organizationLayout.html

@@ -84,6 +84,13 @@
                 <a ui-sref="backend.org.groups({orgId: params.orgId})">
                     <i class="fa fa-sitemap fa-fw"></i> <span>Groups</span>
                 </a>
+                <ul class="treeview-menu" ng-class="{'menu-open': $state.includes('backend.org.groups')}">
+                    <li>
+                        <a href="javascript:void(0)" ng-click="addOrganizationGroup()">
+                            <i class="fa fa-plus-circle fa-fw"></i> New Group
+                        </a>
+                    </li>
+                </ul>
             </li>
             <li ng-class="{active: $state.is('backend.org.billing')}" ng-if="isOrgOwner(orgProfile)">
                 <a ui-sref="backend.org.billing({orgId: params.orgId})">

src/index.html

@@ -149,6 +149,8 @@
     <script src="app/organization/organizationVaultEditLoginController.js"></script>
     <script src="app/organization/organizationVaultLoginCollectionsController.js"></script>
     <script src="app/organization/organizationGroupsController.js"></script>
+    <script src="app/organization/organizationGroupsAddController.js"></script>
+    <script src="app/organization/organizationGroupsEditController.js"></script>
     <script src="app/organization/organizationCollectionsGroupsController.js"></script>
 
     <script src="app/settings/settingsModule.js"></script>