You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ranger.apache.org by pr...@apache.org on 2022/01/27 14:01:59 UTC
[ranger] branch master updated: RANGER-3552 : Improvement in Module Permission edit page.
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 <dh...@gmail.com>
AuthorDate: Mon Jan 24 16:09:43 2022 +0530
RANGER-3552 : Improvement in Module Permission edit page.
Signed-off-by: pradeep <pr...@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>