From 908eb24d3ad0a8e9094623b37dcf613c57316814 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 14 Jun 2017 12:21:05 -0400 Subject: [PATCH] dashboard_folders: fixes to user & group picker --- .../app/core/components/user_group_picker.ts | 27 +++++++++++++++-- public/app/core/components/user_picker.ts | 29 ++++++++++++++++--- public/app/features/dashboard/acl/acl.html | 4 +-- public/app/features/dashboard/acl/acl.ts | 18 +++--------- .../org/partials/edit_user_group.html | 4 +-- .../features/org/user_group_details_ctrl.ts | 6 ++-- 6 files changed, 61 insertions(+), 27 deletions(-) diff --git a/public/app/core/components/user_group_picker.ts b/public/app/core/components/user_group_picker.ts index 07b2ebcef38..185184d857d 100644 --- a/public/app/core/components/user_group_picker.ts +++ b/public/app/core/components/user_group_picker.ts @@ -16,8 +16,27 @@ export class UserGroupPickerCtrl { /** @ngInject */ 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.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) { @@ -50,8 +69,12 @@ export function userGroupPicker() { bindToController: true, controllerAs: 'ctrl', scope: { - userGroupSegment: '=', userGroupId: '=', + }, + link: function(scope, elem, attrs, ctrl) { + scope.$watch("ctrl.userGroupId", (newVal, oldVal) => { + ctrl.userGroupIdChanged(newVal); + }); } }; } diff --git a/public/app/core/components/user_picker.ts b/public/app/core/components/user_picker.ts index f12fa9a241d..9697bae4dda 100644 --- a/public/app/core/components/user_picker.ts +++ b/public/app/core/components/user_picker.ts @@ -17,8 +17,21 @@ export class UserPickerCtrl { /** @ngInject */ 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.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) { @@ -44,11 +57,16 @@ export class UserPickerCtrl { }); } + userIdChanged(newVal) { + if (!newVal) { + this.resetUserSegment(); + } + } + private userKey(user: User) { return this.uiSegmentSrv.newSegment(user.login + ' - ' + user.email); } - } export interface User { @@ -66,9 +84,12 @@ export function userPicker() { bindToController: true, controllerAs: 'ctrl', scope: { - userSegment: '=', - userLogin: '=', userId: '=', + }, + link: function(scope, elem, attrs, ctrl) { + scope.$watch("ctrl.userId", (newVal, oldVal) => { + ctrl.userIdChanged(newVal); + }); } }; } diff --git a/public/app/features/dashboard/acl/acl.html b/public/app/features/dashboard/acl/acl.html index 1d4110b1dca..ab3393c92ec 100644 --- a/public/app/features/dashboard/acl/acl.html +++ b/public/app/features/dashboard/acl/acl.html @@ -8,11 +8,11 @@
User - +
User Group - +
Role diff --git a/public/app/features/dashboard/acl/acl.ts b/public/app/features/dashboard/acl/acl.ts index 9ed38f44a95..ef2593de402 100644 --- a/public/app/features/dashboard/acl/acl.ts +++ b/public/app/features/dashboard/acl/acl.ts @@ -14,12 +14,9 @@ export class AclCtrl { {value: 2, text: 'Read-only Edit'}, {value: 4, text: 'Edit'} ]; - userLogin: string; userId: number; - userSegment: any; type = 'User'; userGroupId: number; - userGroupSegment: any; permission = 1; /** @ngInject */ @@ -40,7 +37,7 @@ export class AclCtrl { addPermission() { if (this.type === 'User') { - if (this.userSegment.value === 'Choose User') { + if (!this.userId) { return; } @@ -48,15 +45,11 @@ export class AclCtrl { userId: this.userId, permissionType: this.permission }).then(() => { - this.userId = 0; - this.userLogin = ''; - this.userSegment.value = 'Choose User'; - this.userSegment.text = 'Choose User'; - this.userSegment.html = 'Choose User'; + this.userId = null; this.get(this.dashboard.id); }); } else { - if (this.userGroupSegment.value === 'Choose User Group') { + if (!this.userGroupId) { return; } @@ -64,10 +57,7 @@ export class AclCtrl { userGroupId: this.userGroupId, permissionType: this.permission }).then(() => { - this.userGroupId = 0; - this.userGroupSegment.value = 'Choose User Group'; - this.userGroupSegment.text = 'Choose User Group'; - this.userGroupSegment.html = 'Choose User Group'; + this.userGroupId = null; this.get(this.dashboard.id); }); } diff --git a/public/app/features/org/partials/edit_user_group.html b/public/app/features/org/partials/edit_user_group.html index 18e8d3fe001..da1e3066d31 100644 --- a/public/app/features/org/partials/edit_user_group.html +++ b/public/app/features/org/partials/edit_user_group.html @@ -18,10 +18,10 @@

User Group Members

-
+
Name - +
diff --git a/public/app/features/org/user_group_details_ctrl.ts b/public/app/features/org/user_group_details_ctrl.ts index af2fdcd99d2..c8e4effadff 100644 --- a/public/app/features/org/user_group_details_ctrl.ts +++ b/public/app/features/org/user_group_details_ctrl.ts @@ -6,9 +6,9 @@ import _ from 'lodash'; export default class UserGroupDetailsCtrl { userGroup: UserGroup; userGroupMembers: User[] = []; - userName = ''; userId: number; navModel: any; + addMemberForm: any; constructor(private $scope, private $http, private backendSrv, private $routeParams, navModelSrv) { this.navModel = navModelSrv.getOrgNav(3); @@ -52,10 +52,10 @@ export default class UserGroupDetailsCtrl { } 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.userName = ''; + this.userId = null; this.get(); }); }