mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-01 15:09:14 +00:00
[lib setting] folder perm: add 'add folder', bugfix & etc.
This commit is contained in:
llj
@@ -3,20 +3,17 @@ define([
|
||||
'underscore',
|
||||
'backbone',
|
||||
'common',
|
||||
'file-tree',
|
||||
'app/collections/repo-user-folder-perm',
|
||||
'app/collections/repo-group-folder-perm',
|
||||
'app/views/repo-folder-perm'
|
||||
], function($, _, Backbone, Common, UserFolderPerm, GroupFolderPerm, ItemView) {
|
||||
], function($, _, Backbone, Common, FileTree, UserFolderPerm, GroupFolderPerm, ItemView) {
|
||||
'use strict';
|
||||
|
||||
var View = Backbone.View.extend({
|
||||
|
||||
template: _.template($('#repo-folder-perm-admin-dialog-tmpl').html()),
|
||||
|
||||
events: {
|
||||
'click .add-folder': 'addFolder'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
this.repo_name = options.repo_name;
|
||||
this.repo_id = options.repo_id;
|
||||
@@ -24,7 +21,11 @@ define([
|
||||
this.render();
|
||||
this.$('.op-target').css({'max-width':280}); // for long repo name
|
||||
this.$el.modal({
|
||||
focus: false
|
||||
focus: false,
|
||||
onClose: function() {
|
||||
$(document).off('click', hideItemEdit);
|
||||
$.modal.close();
|
||||
}
|
||||
});
|
||||
$("#simplemodal-container").css({
|
||||
'width':'auto',
|
||||
@@ -32,22 +33,38 @@ define([
|
||||
});
|
||||
this.$('.js-tabs').tabs();
|
||||
|
||||
var userPerm = new UserFolderPerm({repo_id: this.repo_id});
|
||||
userPerm.perm_type = 'user';
|
||||
this.$userPermPanel = this.$('#js-repo-user-folder-perm');
|
||||
this.userPerm = new UserFolderPerm({repo_id: this.repo_id});
|
||||
this.userPerm.perm_type = 'user';
|
||||
this.$userPermPanel = this.$('#js-repo-user-folder-perm .js-folder-perm-content');
|
||||
|
||||
var groupPerm = new GroupFolderPerm({repo_id: this.repo_id});
|
||||
groupPerm.perm_type = 'group';
|
||||
this.$groupPermPanel = this.$('#js-repo-group-folder-perm');
|
||||
this.groupPerm = new GroupFolderPerm({repo_id: this.repo_id});
|
||||
this.groupPerm.perm_type = 'group';
|
||||
this.$groupPermPanel = this.$('#js-repo-group-folder-perm .js-folder-perm-content');
|
||||
|
||||
this.renderPanel({
|
||||
collection: userPerm,
|
||||
collection: this.userPerm,
|
||||
$panel: this.$userPermPanel
|
||||
});
|
||||
this.renderPanel({
|
||||
collection: groupPerm,
|
||||
collection: this.groupPerm,
|
||||
$panel: this.$groupPermPanel
|
||||
});
|
||||
|
||||
// click to hide 'perm edit'
|
||||
var _this = this;
|
||||
var hideItemEdit = function(e) {
|
||||
var target = e.target || event.srcElement;
|
||||
var $el = _this.$('.perm-toggle-select:visible');
|
||||
var $td = $el.parent();
|
||||
if ($el.length &&
|
||||
!$el.is(target) &&
|
||||
!$el.find('*').is(target) &&
|
||||
!$td.find('.edit-icon').is(target)) {
|
||||
$el.hide();
|
||||
$td.find('.cur-perm, .edit-icon').show();
|
||||
}
|
||||
};
|
||||
$(document).click(hideItemEdit);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@@ -69,9 +86,13 @@ define([
|
||||
var $error = $('.error', $panel);
|
||||
|
||||
if (collection.perm_type == 'user') {
|
||||
$('[name="emails"]', $panel).select2($.extend({
|
||||
width: '190px'
|
||||
},Common.contactInputOptionsForSelect2()));
|
||||
$('[name="emails"]', $panel).select2($.extend(
|
||||
Common.contactInputOptionsForSelect2(), {
|
||||
width: '190px',
|
||||
placeholder: gettext("Search user or enter email"), // to override 'placeholder' returned by `Common.conta...`
|
||||
maximumSelectionSize: 1,
|
||||
formatSelectionTooBig: gettext("You can only select 1 item")
|
||||
}));
|
||||
} else {
|
||||
var groups = app.pageOptions.groups || [];
|
||||
var g_opts = '';
|
||||
@@ -79,8 +100,10 @@ define([
|
||||
g_opts += '<option value="' + groups[i].id + '" data-index="' + i + '">' + groups[i].name + '</option>';
|
||||
}
|
||||
$('[name="groups"]', $panel).html(g_opts).select2({
|
||||
placeholder: gettext("Select groups"),
|
||||
placeholder: gettext("Select a group"),
|
||||
width: '190px',
|
||||
maximumSelectionSize: 1,
|
||||
formatSelectionTooBig: gettext("You can only select 1 item"),
|
||||
escapeMarkup: function(m) { return m; }
|
||||
});
|
||||
}
|
||||
@@ -117,13 +140,155 @@ define([
|
||||
perm_type: perm_type,
|
||||
$error: $('.error', $panel)
|
||||
});
|
||||
$('tbody', $panel).append(view.render().el);
|
||||
if (options.prepend) {
|
||||
$('[name="folder_path"]', $panel).closest('tr').after(view.render().el);
|
||||
} else {
|
||||
$('tbody', $panel).append(view.render().el);
|
||||
}
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .add-folder': 'showFolderSelectForm',
|
||||
'click .js-folder-select-submit': 'addFolder',
|
||||
'click .js-folder-select-cancel': 'cancelFolderSelect',
|
||||
|
||||
'click .js-user-perm-add-submit': 'addUserPerm',
|
||||
'click .js-group-perm-add-submit': 'addGroupPerm'
|
||||
},
|
||||
|
||||
showFolderSelectForm: function(e) {
|
||||
var $icon = $(e.currentTarget);
|
||||
var $permContent = $icon.closest('.js-folder-perm-content').slideUp();
|
||||
|
||||
var $form = $('.js-folder-select-form', $permContent.parent()).slideDown();
|
||||
var $jstreeContainer = $('.js-jtree-container', $form);
|
||||
var repo_data = FileTree.formatRepoData([{
|
||||
'id': this.repo_id,
|
||||
'name': this.repo_name
|
||||
}]);
|
||||
FileTree.renderDirTree($jstreeContainer, $form, repo_data);
|
||||
},
|
||||
|
||||
addFolder: function(e) {
|
||||
var $icon = $(e.currentTarget);
|
||||
var $permContent = $icon.closest('.js-folder-perm-content').slideUp();
|
||||
var $folderSelect = $('.js-folder-select', $permContent.parent()).slideDown();
|
||||
var $submitBtn = $(e.currentTarget);
|
||||
|
||||
var $form = $submitBtn.closest('form');
|
||||
var path = $('[name=dst_path]', $form).val();
|
||||
if (!path) {
|
||||
$('.error', $form).html(gettext("Please click and choose a directory.")).removeClass('hide');
|
||||
return false;
|
||||
}
|
||||
$form.slideUp();
|
||||
// destroy the jstree instance.
|
||||
// attention: because of `destroy()`, the $jstreeContainer's class names should not include string 'jstree', e.g. '.js-jstree-container' is not ok.
|
||||
$.jstree._reference($('.js-jtree-container', $form)).destroy();
|
||||
|
||||
var $folderPerm = $('.js-folder-perm-content', $form.parent()).slideDown();
|
||||
$('[name=folder_path]', $folderPerm).val(path);
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
cancelFolderSelect: function(e) {
|
||||
var $cancelBtn = $(e.currentTarget);
|
||||
var $form = $cancelBtn.closest('form').slideUp();
|
||||
// destroy the jstree instance.
|
||||
$.jstree._reference($('.js-jtree-container', $form)).destroy();
|
||||
$('.js-folder-perm-content', $form.parent()).slideDown();
|
||||
},
|
||||
|
||||
addUserPerm: function(e) {
|
||||
var $panel = this.$userPermPanel;
|
||||
var $error = $('.error', $panel);
|
||||
var $email = $('[name="emails"]', $panel);
|
||||
var $path = $('[name="folder_path"]', $panel);
|
||||
|
||||
var email = $email.val();
|
||||
var path = $path.val();
|
||||
|
||||
if (!email || !path) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $perm = $('[name="permission"]', $panel);
|
||||
var perm = $perm.val();
|
||||
var $submit = $(e.currentTarget);
|
||||
Common.disableButton($submit);
|
||||
|
||||
this.userPerm.create({
|
||||
'user_email': email,
|
||||
'folder_path': path,
|
||||
'permission': perm
|
||||
}, {
|
||||
wait: true,
|
||||
prepend: true,
|
||||
success: function() {
|
||||
$email.select2('val', '');
|
||||
$path.val('');
|
||||
$('[value="rw"]', $perm).attr('selected', 'selected');
|
||||
$('[value="r"]', $perm).removeAttr('selected');
|
||||
$error.addClass('hide');
|
||||
},
|
||||
error: function(collection, response, options) {
|
||||
var err_msg;
|
||||
if (response.responseText) {
|
||||
err_msg = response.responseJSON.error_msg;
|
||||
} else {
|
||||
err_msg = gettext('Please check the network.');
|
||||
}
|
||||
$error.html(err_msg).removeClass('hide');
|
||||
},
|
||||
complete: function() {
|
||||
Common.enableButton($submit);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addGroupPerm: function(e) {
|
||||
var $panel = this.$groupPermPanel;
|
||||
var $error = $('.error', $panel);
|
||||
var $group = $('[name="groups"]', $panel);
|
||||
var $path = $('[name="folder_path"]', $panel);
|
||||
|
||||
var group_val = $group.val(); // null or [group_id]
|
||||
var path = $path.val();
|
||||
|
||||
if (!group_val || !path) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $perm = $('[name="permission"]', $panel);
|
||||
var perm = $perm.val();
|
||||
var $submit = $(e.currentTarget);
|
||||
Common.disableButton($submit);
|
||||
|
||||
this.groupPerm.create({
|
||||
'group_id': group_val[0],
|
||||
'folder_path': path,
|
||||
'permission': perm
|
||||
}, {
|
||||
wait: true,
|
||||
prepend: true,
|
||||
success: function() {
|
||||
$group.select2('val', '');
|
||||
$path.val('');
|
||||
$('[value="rw"]', $perm).attr('selected', 'selected');
|
||||
$('[value="r"]', $perm).removeAttr('selected');
|
||||
$error.addClass('hide');
|
||||
},
|
||||
error: function(collection, response, options) {
|
||||
var err_msg;
|
||||
if (response.responseText) {
|
||||
err_msg = response.responseJSON.error_msg;
|
||||
} else {
|
||||
err_msg = gettext('Please check the network.');
|
||||
}
|
||||
$error.html(err_msg).removeClass('hide');
|
||||
},
|
||||
complete: function() {
|
||||
Common.enableButton($submit);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@@ -16,7 +16,7 @@ define([
|
||||
'mouseleave': 'rmHighlight',
|
||||
'click .edit-icon': 'showEdit',
|
||||
'change .perm-toggle-select': 'edit',
|
||||
'click .remove': 'remove'
|
||||
'click .rm': 'rm'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
@@ -96,7 +96,7 @@ define([
|
||||
});
|
||||
},
|
||||
|
||||
remove: function() {
|
||||
rm: function() {
|
||||
var url = Common.getUrl({
|
||||
name: this.data.perm_type == 'user' ? 'repo_user_folder_perm' : 'repo_group_folder_perm',
|
||||
repo_id: this.data.repo_id
|
||||
|
||||
Reference in New Issue
Block a user