This is an automated email from the ASF dual-hosted git repository. pradeep pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/ranger.git
The following commit(s) were added to refs/heads/master by this push: new fedd731 RANGER-3552 : Improvement in Module Permission edit page. fedd731 is described below commit fedd731978e12cf28b3863b1e646aed22b3f4191 Author: Dhaval.Rajpara <dhavalrajpara1...@gmail.com> AuthorDate: Mon Jan 24 16:09:43 2022 +0530 RANGER-3552 : Improvement in Module Permission edit page. Signed-off-by: pradeep <prad...@apache.org> --- .../views/permissions/ModulePermissionForm.js | 74 +++++++++++++++++----- .../permissions/ModulePermissionForm_tmpl.html | 18 +----- 2 files changed, 60 insertions(+), 32 deletions(-) diff --git a/security-admin/src/main/webapp/scripts/views/permissions/ModulePermissionForm.js b/security-admin/src/main/webapp/scripts/views/permissions/ModulePermissionForm.js index d26e415..7b8c4c8 100644 --- a/security-admin/src/main/webapp/scripts/views/permissions/ModulePermissionForm.js +++ b/security-admin/src/main/webapp/scripts/views/permissions/ModulePermissionForm.js @@ -68,7 +68,7 @@ define(function(require) { selectUsers : 'div[data-editors="selectUsers"]', addGroupBtn : '[data-id="addGroupBtn"]', addUserBtn : '[data-id="addUserBtn"]', - }, + }, events : function(){ var events = {}; events['click ' + this.ui.addGroupBtn ] = 'onAddGroup'; @@ -112,23 +112,65 @@ define(function(require) { }, } }, - render: function(options) { - var that = this; - Backbone.Form.prototype.render.call(this, options); - this.$el.find('[data-js="selectedGroupList"] span i').on('click', this.removeGroup.bind(this)); - this.$el.find('[data-js="selectedUserList"] span i').on('click', this.removeUser.bind(this)); - - if(this.model.get('groupPermList').length <= 0){ - this.$el.find('.emptySelectedGroups').show(); - }else{ - this.$el.find('.emptySelectedGroups').hide(); + + render: function(options) { + var that = this; + Backbone.Form.prototype.render.call(this, options); + this.showGroupTag(); + this.showUserTag(); + this.$el.find('[data-js="selectedGroupList"] span i').on('click', this.removeGroup.bind(this)); + this.$el.find('[data-js="selectedUserList"] span i').on('click', this.removeUser.bind(this)); + if(this.model.get('groupPermList').length <= 0){ + this.$el.find('.emptySelectedGroups').show(); + }else{ + this.$el.find('.emptySelectedGroups').hide(); + } + if(this.model.get('userPermList').length <= 0){ + this.$el.find('.emptySelectedUsers').show(); + }else{ + this.$el.find('.emptySelectedUsers').hide(); + } + }, + + showUserTag : function() { + var that = this + var userListData = this.model.get('userPermList'); + if(userListData &&!_.isEmpty(userListData)) { + var i , j; + for(var i=0,j=0; i<=j+200 && userListData.length > i; i++){ + that.$el.find('.selectedUserList').append('<span class="selected-widget"><i class="icon remove fa-fw fa fa-remove" data-id="'+userListData[i].userId+'"></i> '+userListData[i].userName+'</span>') + } + that.$el.find('.selectedUserList').scroll(function(position) { + if (position.currentTarget.scrollHeight <= (position.currentTarget.clientHeight + position.currentTarget.scrollTop) + 10) { + j = i; + for(i; i<=j+200 && userListData.length > i; i++){ + that.$el.find('.selectedUserList').append('<span class="selected-widget"><i class="icon remove fa-fw fa fa-remove" data-id="'+userListData[i].userId+'"></i> '+userListData[i].userName+'</span>') } - if(this.model.get('userPermList').length <= 0){ - this.$el.find('.emptySelectedUsers').show(); - }else{ - this.$el.find('.emptySelectedUsers').hide(); + that.$el.find('[data-js="selectedUserList"] span i').on('click', that.removeUser.bind(that)); + } + }) + } + }, + showGroupTag : function() { + var that = this + var groupListData = this.model.get('groupPermList'); + if (groupListData && !_.isEmpty(groupListData)) { + var m , n; + for(var m=0,n=0; m<=n+200 && groupListData.length > m; m++){ + that.$el.find('.selectedGroupList').append('<span class="selected-widget"><i class="icon remove fa-fw fa fa-remove" data-id="'+groupListData[m].groupId+'"></i> '+groupListData[m].groupName+'</span>') + } + that.$el.find('.selectedGroupList').scroll(function(position) { + if (position.currentTarget.scrollHeight <= (position.currentTarget.clientHeight + position.currentTarget.scrollTop) + 10) { + n = m; + for(m; m<=n+200 && groupListData.length > m; m++){ + that.$el.find('.selectedGroupList').append('<span class="selected-widget"><i class="icon remove fa-fw fa fa-remove" data-id="'+groupListData[m].groupId+'"></i> '+groupListData[m].groupName+'</span>') } - }, + that.$el.find('[data-js="selectedGroupList"] span i').on('click', that.removeGroup.bind(that)); + } + }) + } + }, + setupFieldsforEditModule : function(){ this.addedGroups = _.map(this.model.get('groupPermList'), function(g){ return { 'id' : g.groupId, 'text' : g.groupName} }); this.addedUsers = _.map(this.model.get('userPermList'), function(u){ return { 'id' : u.userId, 'text' : u.userName} }); diff --git a/security-admin/src/main/webapp/templates/permissions/ModulePermissionForm_tmpl.html b/security-admin/src/main/webapp/templates/permissions/ModulePermissionForm_tmpl.html index 1eb329b..6aaaa87 100644 --- a/security-admin/src/main/webapp/templates/permissions/ModulePermissionForm_tmpl.html +++ b/security-admin/src/main/webapp/templates/permissions/ModulePermissionForm_tmpl.html @@ -56,26 +56,12 @@ </tr> <tr> <td class="vertAlignInitial"> - <div class="selected-list clearfix" data-js="selectedGroupList"> + <div class="selected-list clearfix selectedGroupList" data-js="selectedGroupList"> <label class="editable-empty emptySelectedGroups">No Selected Groups</label> - {{#each groupList}} - <span class="selected-widget"> - <i class="icon remove fa-fw fa fa-remove" data-id="{{./this.groupId}}"></i> - {{./this.groupName}} - </span> - {{/each}} - </div></td> <td class="vertAlignInitial" width="100%"> - <div class="selected-list clearfix" data-js="selectedUserList"> + <div class="selected-list clearfix selectedUserList" data-js="selectedUserList"> <label class="editable-empty emptySelectedUsers" style="text-align: center;">No Selected Users</label> - - {{#each userList}} - <span class="selected-widget"> - <i class="icon remove fa-fw fa fa-remove" data-id="{{./this.userId}}"></i> - {{./this.userName}} - </span> - {{/each}} </div></td> </tr> </tbody>