WIP: add user group search

public/app/features/org/all.js

@@ -1,7 +1,6 @@
 define([
   './org_users_ctrl',
   './profile_ctrl',
-  './org_users_ctrl',
   './select_org_ctrl',
   './change_password_ctrl',
   './newOrgCtrl',
@@ -9,4 +8,5 @@ define([
   './orgApiKeysCtrl',
   './orgDetailsCtrl',
   './prefs_control',
+  './user_groups_ctrl',
 ], function () {});

public/app/features/org/partials/user_groups.html

@@ -0,0 +1,60 @@
+<navbar icon="icon-gf icon-gf-users" title="User Groups" title-url="org">
+</navbar>
+
+<div class="page-container">
+	<div class="page-header">
+		<h1>User Groups</h1>
+
+    <div class="page-header-tabs">
+      <a class="btn btn-success" href="/org/user-groups/create">
+        <i class="fa fa-plus"></i>
+          Create User Group
+      </a>
+    </div>
+  </div>
+  <div class="search-field-wrapper pull-right width-18">
+    <span style="position: relative;">
+      <input  type="text" placeholder="Find User Group by name" tabindex="1" give-focus="true"
+      ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
+    </span>
+  </div>
+  <div class="admin-list-table">
+    <table class="filter-table form-inline">
+      <thead>
+        <tr>
+          <th>Id</th>
+          <th>Name</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr ng-repeat="userGroup in ctrl.userGroups">
+          <td>{{userGroup.id}}</td>
+          <td>{{userGroup.name}}</td>
+          <td class="text-right">
+            <a href="org/user-groups/edit/{{userGroup.id}}" class="btn btn-inverse btn-small">
+              <i class="fa fa-edit"></i>
+              Edit
+            </a>
+            &nbsp;&nbsp;
+            <a ng-click="ctrl.deleteUserGroup(userGroup)" class="btn btn-danger btn-small">
+              <i class="fa fa-remove"></i>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+
+    </table>
+  </div>
+
+  <div class="admin-list-paging" ng-if="ctrl.showPaging">
+    <ol>
+      <li ng-repeat="page in ctrl.pages">
+        <button
+          class="btn btn-small"
+          ng-class="{'btn-secondary': page.current, 'btn-inverse': !page.current}"
+          ng-click="ctrl.navigateToPage(page)">{{page.page}}</button>
+      </li>
+    </ol>
+  </div>
+</div>

public/app/features/org/user_groups_ctrl.ts

@@ -0,0 +1,68 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+export default class UserGroupsCtrl {
+  userGroups: any;
+  pages = [];
+  perPage = 50;
+  page = 1;
+  totalPages: number;
+  showPaging = false;
+  query: any = '';
+
+  /** @ngInject */
+  constructor(private $scope, private $http, private backendSrv) {
+    this.get();
+  }
+
+  get() {
+    this.backendSrv.get(`/api/user-groups/search?perpage=${this.perPage}&page=${this.page}&query=${this.query}`)
+      .then((result) => {
+        this.userGroups = result.userGroups;
+        this.page = result.page;
+        this.perPage = result.perPage;
+        this.totalPages = Math.ceil(result.totalCount / result.perPage);
+        this.showPaging = this.totalPages > 1;
+        this.pages = [];
+
+        for (var i = 1; i < this.totalPages+1; i++) {
+          this.pages.push({ page: i, current: i === this.page});
+        }
+      });
+  }
+
+  navigateToPage(page) {
+    this.page = page.page;
+    this.get();
+  }
+
+  deleteUserGroup(userGroup) {
+    this.$scope.appEvent('confirm-modal', {
+      title: 'Delete',
+      text: 'Are you sure you want to delete User Group ' + userGroup.name + '?',
+      yesText: "Delete",
+      icon: "fa-warning",
+      onConfirm: () => {
+        this.deleteUserGroupConfirmed(userGroup);
+      }
+    });
+  }
+
+  deleteUserGroupConfirmed(userGroup) {
+    this.backendSrv.delete('/api/user-groups/' + userGroup.id)
+      .then(this.get.bind(this));
+  }
+
+  openUserGroupModal() {
+    var modalScope = this.$scope.$new();
+
+    this.$scope.appEvent('show-modal', {
+      src: 'public/app/features/org/partials/add_user.html',
+      modalClass: 'user-group-modal',
+      scope: modalScope
+    });
+  }
+}
+
+coreModule.controller('UserGroupsCtrl', UserGroupsCtrl);