Commit 908eb24d by Torkel Ödegaard

dashboard_folders: fixes to user & group picker

parent 92717cca
...@@ -16,8 +16,27 @@ export class UserGroupPickerCtrl { ...@@ -16,8 +16,27 @@ export class UserGroupPickerCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) { constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
this.userGroupSegment = this.uiSegmentSrv.newSegment({value: 'Choose User Group', selectMode: true});
this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false}); this.debouncedSearchUserGroups = _.debounce(this.searchUserGroups, 500, {'leading': true, 'trailing': false});
this.resetUserGroupSegment();
}
resetUserGroupSegment() {
this.userGroupId = null;
const userGroupSegment = this.uiSegmentSrv.newSegment({value: 'Choose User Group', selectMode: true, fake: true});
if (!this.userGroupSegment) {
this.userGroupSegment = userGroupSegment;
} else {
this.userGroupSegment.value = userGroupSegment.value;
this.userGroupSegment.html = userGroupSegment.html;
this.userGroupSegment.value = userGroupSegment.value;
}
}
userGroupIdChanged(newVal) {
if (!newVal) {
this.resetUserGroupSegment();
}
} }
searchUserGroups(query: string) { searchUserGroups(query: string) {
...@@ -50,8 +69,12 @@ export function userGroupPicker() { ...@@ -50,8 +69,12 @@ export function userGroupPicker() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
scope: { scope: {
userGroupSegment: '=',
userGroupId: '=', userGroupId: '=',
},
link: function(scope, elem, attrs, ctrl) {
scope.$watch("ctrl.userGroupId", (newVal, oldVal) => {
ctrl.userGroupIdChanged(newVal);
});
} }
}; };
} }
......
...@@ -17,8 +17,21 @@ export class UserPickerCtrl { ...@@ -17,8 +17,21 @@ export class UserPickerCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) { constructor(private backendSrv, private $scope, $sce, private uiSegmentSrv) {
this.userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true}); this.userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true, fake: true});
this.debouncedSearchUsers = _.debounce(this.searchUsers, 500, {'leading': true, 'trailing': false}); this.debouncedSearchUsers = _.debounce(this.searchUsers, 500, {'leading': true, 'trailing': false});
this.userId = null;
this.resetUserSegment();
}
resetUserSegment() {
const userSegment = this.uiSegmentSrv.newSegment({value: 'Choose User', selectMode: true, fake: true});
if (!this.userSegment) {
this.userSegment = userSegment;
} else {
this.userSegment.value = userSegment.value;
this.userSegment.html = userSegment.html;
this.userSegment.value = userSegment.value;
}
} }
searchUsers(query: string) { searchUsers(query: string) {
...@@ -44,11 +57,16 @@ export class UserPickerCtrl { ...@@ -44,11 +57,16 @@ export class UserPickerCtrl {
}); });
} }
userIdChanged(newVal) {
if (!newVal) {
this.resetUserSegment();
}
}
private userKey(user: User) { private userKey(user: User) {
return this.uiSegmentSrv.newSegment(user.login + ' - ' + user.email); return this.uiSegmentSrv.newSegment(user.login + ' - ' + user.email);
} }
} }
export interface User { export interface User {
...@@ -66,9 +84,12 @@ export function userPicker() { ...@@ -66,9 +84,12 @@ export function userPicker() {
bindToController: true, bindToController: true,
controllerAs: 'ctrl', controllerAs: 'ctrl',
scope: { scope: {
userSegment: '=',
userLogin: '=',
userId: '=', userId: '=',
},
link: function(scope, elem, attrs, ctrl) {
scope.$watch("ctrl.userId", (newVal, oldVal) => {
ctrl.userIdChanged(newVal);
});
} }
}; };
} }
......
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
</div> </div>
<div class="gf-form" ng-show="ctrl.type === 'User'"> <div class="gf-form" ng-show="ctrl.type === 'User'">
<span class="gf-form-label">User</span> <span class="gf-form-label">User</span>
<user-picker user-login="ctrl.userLogin" user-id="ctrl.userId" user-segment="ctrl.userSegment"></user-picker> <user-picker user-id="ctrl.userId"></user-picker>
</div> </div>
<div class="gf-form" ng-show="ctrl.type === 'User Group'"> <div class="gf-form" ng-show="ctrl.type === 'User Group'">
<span class="gf-form-label">User Group</span> <span class="gf-form-label">User Group</span>
<user-group-picker user-group-id="ctrl.userGroupId" user-group-segment="ctrl.userGroupSegment"></user-group-picker> <user-group-picker user-group-id="ctrl.userGroupId"></user-group-picker>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label">Role</span> <span class="gf-form-label">Role</span>
......
...@@ -14,12 +14,9 @@ export class AclCtrl { ...@@ -14,12 +14,9 @@ export class AclCtrl {
{value: 2, text: 'Read-only Edit'}, {value: 2, text: 'Read-only Edit'},
{value: 4, text: 'Edit'} {value: 4, text: 'Edit'}
]; ];
userLogin: string;
userId: number; userId: number;
userSegment: any;
type = 'User'; type = 'User';
userGroupId: number; userGroupId: number;
userGroupSegment: any;
permission = 1; permission = 1;
/** @ngInject */ /** @ngInject */
...@@ -40,7 +37,7 @@ export class AclCtrl { ...@@ -40,7 +37,7 @@ export class AclCtrl {
addPermission() { addPermission() {
if (this.type === 'User') { if (this.type === 'User') {
if (this.userSegment.value === 'Choose User') { if (!this.userId) {
return; return;
} }
...@@ -48,15 +45,11 @@ export class AclCtrl { ...@@ -48,15 +45,11 @@ export class AclCtrl {
userId: this.userId, userId: this.userId,
permissionType: this.permission permissionType: this.permission
}).then(() => { }).then(() => {
this.userId = 0; this.userId = null;
this.userLogin = '';
this.userSegment.value = 'Choose User';
this.userSegment.text = 'Choose User';
this.userSegment.html = 'Choose User';
this.get(this.dashboard.id); this.get(this.dashboard.id);
}); });
} else { } else {
if (this.userGroupSegment.value === 'Choose User Group') { if (!this.userGroupId) {
return; return;
} }
...@@ -64,10 +57,7 @@ export class AclCtrl { ...@@ -64,10 +57,7 @@ export class AclCtrl {
userGroupId: this.userGroupId, userGroupId: this.userGroupId,
permissionType: this.permission permissionType: this.permission
}).then(() => { }).then(() => {
this.userGroupId = 0; this.userGroupId = null;
this.userGroupSegment.value = 'Choose User Group';
this.userGroupSegment.text = 'Choose User Group';
this.userGroupSegment.html = 'Choose User Group';
this.get(this.dashboard.id); this.get(this.dashboard.id);
}); });
} }
......
...@@ -18,10 +18,10 @@ ...@@ -18,10 +18,10 @@
<h3 class="page-heading">User Group Members</h3> <h3 class="page-heading">User Group Members</h3>
<form name="addMemberForm" class="gf-form-group"> <form name="ctrl.addMemberForm" class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Name</span> <span class="gf-form-label width-10">Name</span>
<user-picker required user-login="ctrl.userName" user-id="ctrl.userId"></user-picker> <user-picker user-id="ctrl.userId"></user-picker>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
......
...@@ -6,9 +6,9 @@ import _ from 'lodash'; ...@@ -6,9 +6,9 @@ import _ from 'lodash';
export default class UserGroupDetailsCtrl { export default class UserGroupDetailsCtrl {
userGroup: UserGroup; userGroup: UserGroup;
userGroupMembers: User[] = []; userGroupMembers: User[] = [];
userName = '';
userId: number; userId: number;
navModel: any; navModel: any;
addMemberForm: any;
constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) { constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) {
this.navModel = navModelSrv.getOrgNav(3); this.navModel = navModelSrv.getOrgNav(3);
...@@ -52,10 +52,10 @@ export default class UserGroupDetailsCtrl { ...@@ -52,10 +52,10 @@ export default class UserGroupDetailsCtrl {
} }
addMember() { addMember() {
if (!this.$scope.addMemberForm.$valid) { return; } if (!this.addMemberForm.$valid) { return; }
this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => { this.backendSrv.post(`/api/user-groups/${this.$routeParams.id}/members`, {userId: this.userId}).then(() => {
this.userName = ''; this.userId = null;
this.get(); this.get();
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment