working on dashbord acl stuff

public/app/core/components/user_picker.ts

@@ -7,37 +7,35 @@ const template = `
   <gf-form-dropdown model="ctrl.user"
                     get-options="ctrl.debouncedSearchUsers($query)"
                     css-class="gf-size-auto"
-                    on-change="ctrl.onChange()"
+                    on-change="ctrl.onChange($option)"
   </gf-form-dropdown>
 </div>
 `;
 export class UserPickerCtrl {
   user: any;
-  userId: number;
   debouncedSearchUsers: any;
+  userPicked: any;
 
   /** @ngInject */
   constructor(private backendSrv, private $scope, $sce) {
-    this.user = {text: 'Choose', value: null};
+    this.reset();
     this.debouncedSearchUsers = _.debounce(this.searchUsers, 500, {'leading': true, 'trailing': false});
   }
 
   searchUsers(query: string) {
     return Promise.resolve(this.backendSrv.get('/api/users/search?perpage=10&page=1&query=' + query).then(result => {
       return _.map(result.users, user => {
-        return {text: user.login + ' -  ' + user.email, value: user.id};
+        return {text: user.login + ' -  ' + user.email, value: user};
       });
     }));
   }
 
-  onChange() {
-    this.userId = this.user.value;
+  onChange(option) {
+    this.userPicked({$user: option.value});
   }
 
-  userIdChanged() {
-    if (this.userId === null) {
-      this.user = {text: 'Choose', value: null};
-    }
+  reset() {
+    this.user = {text: 'Choose', value: null};
   }
 }
 
@@ -56,11 +54,11 @@ export function userPicker() {
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {
-      userId: '=',
+      userPicked: '&',
     },
     link: function(scope, elem, attrs, ctrl) {
-      scope.$watch("ctrl.userId", (newVal, oldVal) => {
-        ctrl.userIdChanged(newVal);
+      scope.$on("user-picker-reset", () => {
+        ctrl.reset();
       });
     }
   };

public/app/features/dashboard/acl/acl.ts

@@ -13,14 +13,16 @@ export class AclCtrl {
     {value: 4, text: 'Admin'}
   ];
 
-  type = 'User Group';
-  permission = 1;
-  userId: number;
-  userGroupId: number;
+  newType: string;
+  newAcl: DashboardAcl;
+  canUpdate: boolean;
 
   /** @ngInject */
-  constructor(private backendSrv, private dashboardSrv, private $sce) {
+  constructor(private backendSrv, private dashboardSrv, private $sce, private $scope) {
     this.aclItems = [];
+    this.newType = 'User Group';
+    this.resetNew();
+
     this.dashboard = dashboardSrv.getCurrent();
     this.get(this.dashboard.id);
   }
@@ -28,72 +30,57 @@ export class AclCtrl {
   get(dashboardId: number) {
     return this.backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`)
       .then(result => {
-        this.aclItems = _.map(result, item => {
-          if (item.userId > 0) {
-            item.icon = "fa fa-fw fa-user";
-            item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
-          } else if (item.userGroupId > 0) {
-            item.icon = "fa fa-fw fa-users";
-            item.nameHtml = this.$sce.trustAsHtml(item.userGroup);
-          } else if (item.role) {
-            item.icon = "fa fa-fw fa-street-view";
-            item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
-          }
-          return item;
-        });
+        this.aclItems = _.map(result, this.prepareViewModel.bind(this));
       });
   }
 
-  addPermission() {
-    if (this.type === 'User') {
-      if (!this.userId) {
-        return;
-      }
-      return this.addOrUpdateUserPermission(this.userId, this.permission).then(() => {
-        this.userId = null;
-        return this.get(this.dashboard.id);
-      });
-    } else {
-      if (!this.userGroupId) {
-        return;
-      }
-
-      return this.addOrUpdateUserGroupPermission(this.userGroupId, this.permission).then(() => {
-        this.userGroupId = null;
-        return this.get(this.dashboard.id);
-      });
+  prepareViewModel(item: DashboardAcl): DashboardAcl {
+    if (item.userId > 0) {
+      item.icon = "fa fa-fw fa-user";
+      item.nameHtml = this.$sce.trustAsHtml(item.userLogin);
+    } else if (item.userGroupId > 0) {
+      item.icon = "fa fa-fw fa-users";
+      item.nameHtml = this.$sce.trustAsHtml(item.userGroup);
+    } else if (item.role) {
+      item.icon = "fa fa-fw fa-street-view";
+      item.nameHtml = this.$sce.trustAsHtml(`Everyone with <span class="query-keyword">${item.role}</span> Role`);
     }
+
+    return item;
   }
 
-  addOrUpdateUserPermission(userId: number, permissions: number) {
-    return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, {
-      userId: userId,
-      permissions: permissions
-    });
+  addPermission() {
+    this.aclItems.push(this.prepareViewModel(this.newAcl));
+    this.$scope.$broadcast('user-picker-reset');
+    this.$scope.$broadcast('user-group-picker-reset');
+  }
+
+  resetNew() {
+    this.newAcl = {
+      userId: 0,
+      userGroupId: 0,
+      permission: 1
+    };
   }
 
-  addOrUpdateUserGroupPermission(userGroupId: number, permissions: number) {
+  update() {
     return this.backendSrv.post(`/api/dashboards/id/${this.dashboard.id}/acl`, {
-      userGroupId: userGroupId,
-      permissions: permissions
+      acl: this.aclItems
     });
   }
 
-  updatePermission(permission: DashboardAcl) {
-    if (permission.userId > 0) {
-      return this.addOrUpdateUserPermission(permission.userId, permission.permissions);
-    } else {
-      if (!permission.userGroupId) {
-        return;
-      }
-      return this.addOrUpdateUserGroupPermission(permission.userGroupId, permission.permissions);
-    }
+  permissionChanged() {
+    this.canUpdate = true;
   }
 
-  removePermission(permission: DashboardAcl) {
-    return this.backendSrv.delete(`/api/dashboards/id/${permission.dashboardId}/acl/${permission.id}`).then(() => {
-      return this.get(permission.dashboardId);
-    });
+  userPicked(user) {
+    this.newAcl.userLogin = user.login;
+    this.newAcl.userId = user.id;
+  }
+
+  removeItem(index) {
+    this.aclItems.splice(index, 1);
+    this.canUpdate = true;
   }
 }
 
@@ -118,18 +105,18 @@ export interface FormModel {
 }
 
 export interface DashboardAcl {
-  id: number;
-  orgId: number;
-  dashboardId: number;
-  created: Date;
-  updated: Date;
+  id?: number;
+  dashboardId?: number;
   userId: number;
-  userLogin: number;
-  userEmail: string;
+  userLogin?: number;
+  userEmail?: string;
   userGroupId: number;
-  userGroup: string;
-  permissions: number;
-  permissionName: string;
+  userGroup?: string;
+  permission?: number;
+  permissionName?: string;
+  role?: string;
+  icon?: string;
+  nameHtml?: string;
 }
 
 coreModule.directive('dashAclModal', dashAclModal);