Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-07 22:45:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: #7023

Browse Source 
- add category selector to privileges and category create modals
- allow category selector to work for multiple selectors on same page
This commit is contained in:
Barış Soner Uşaklı
2018-12-04 14:32:43 -05:00
parent 89acb89659
commit f581c052ee
8 changed files with 82 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/less/admin/admin.less
View File

@@ -235,13 +235,14 @@ body {
margin: 35px 5px 0 5px;
}
}
.category-dropdown-menu {
max-height: 600px;
overflow-y: auto;
[component="category-selector"] {
.fa-stack {
border-radius: 50%;
}
.category-dropdown-menu {
max-height: 600px;
overflow-y: auto;
}
}
.table-reordering {

23
public/src/admin/manage/categories.js
View File

@@ -1,7 +1,11 @@
'use strict';
define('admin/manage/categories', ['vendor/jquery/serializeObject/jquery.ba-serializeobject.min', 'translator', 'benchpress'], function (serialize, translator, Benchpress) {
define('admin/manage/categories', [
'vendor/jquery/serializeObject/jquery.ba-serializeobject.min',
'translator',
'benchpress',
'categorySelector',
], function (serialize, translator, Benchpress, categorySelector) {
var Categories = {};
var newCategoryId = -1;
var sortables;
@@ -54,11 +58,16 @@ define('admin/manage/categories', ['vendor/jquery/serializeObject/jquery.ba-seri
};
Categories.throwCreateModal = function () {
socket.emit('admin.categories.getNames', {}, function (err, categories) {
socket.emit('categories.getSelectCategories', {}, function (err, categories) {
if (err) {
return app.alertError(err.message);
}
categories.unshift({
cid: 0,
name: '[[admin/manage/categories:parent-category-none]]',
icon: 'fa-none',
});
Benchpress.parse('admin/partials/categories/create', {
categories: categories,
}, function (html) {
@@ -74,11 +83,15 @@ define('admin/manage/categories', ['vendor/jquery/serializeObject/jquery.ba-seri
},
});
var parentSelector = categorySelector.init(modal.find('#parentCidGroup [component="category-selector"]'));
var cloneFromSelector = categorySelector.init(modal.find('#cloneFromCidGroup [component="category-selector"]'));
function submit() {
var formData = modal.find('form').serializeObject();
formData.description = '';
formData.icon = 'fa-comments';
formData.uid = app.user.uid;
formData.parentCid = parentSelector.getSelectedCid();
formData.cloneFromCid = cloneFromSelector.getSelectedCid();
Categories.create(formData);
modal.modal('hide');
@@ -87,11 +100,11 @@ define('admin/manage/categories', ['vendor/jquery/serializeObject/jquery.ba-seri
$('#cloneChildren').on('change', function () {
var check = $(this);
var parentSelect = $('#parentCid');
var parentSelect = modal.find('#parentCidGroup [component="category-selector"] .dropdown-toggle');
if (check.prop('checked')) {
parentSelect.attr('disabled', 'disabled');
parentSelect.val('');
parentSelector.selectCategory(0);
} else {
parentSelect.removeAttr('disabled');
}

9
public/src/admin/manage/privileges.js
View File

@@ -13,11 +13,10 @@ define('admin/manage/privileges', [
Privileges.init = function () {
cid = ajaxify.data.cid || 0;
$('ul[for="category-selector"]').on('click', 'li', function () {
var val = this.getAttribute('data-cid');
ajaxify.go('admin/manage/privileges/' + (val === 'global' ? '' : val));
categorySelector.init($('[component="category-selector"]'), function (category) {
var cid = parseInt(category.cid, 10);
ajaxify.go('admin/manage/privileges/' + (cid || ''));
});
Privileges.setupPrivilegeTable();
};
@@ -179,7 +178,7 @@ define('admin/manage/privileges', [
};
Privileges.copyPrivilegesFromCategory = function () {
categorySelector.modal(function (fromCid) {
categorySelector.modal(ajaxify.data.categories.slice(1), function (fromCid) {
socket.emit('admin.categories.copyPrivilegesFrom', { toCid: cid, fromCid: fromCid }, function (err) {
if (err) {
return app.alertError(err.message);

52
public/src/modules/categorySelector.js
View File

@@ -2,32 +2,45 @@
define('categorySelector', ['benchpress', 'translator', 'categorySearch'], function (Benchpress, translator, categorySearch) {
var categorySelector = {};
var selectedCategory;
var el;
categorySelector.init = function (_el, callback) {
categorySelector.init = function (el, callback) {
callback = callback || function () {};
el = _el;
selectedCategory = null;
var selector = {
el: el,
selectedCategory: null,
};
el.on('click', '[data-cid]', function () {
var categoryEl = $(this);
categorySelector.selectCategory(categoryEl.attr('data-cid'));
callback(selectedCategory);
if (categoryEl.hasClass('disabled')) {
return false;
}
selector.selectCategory(categoryEl.attr('data-cid'));
callback(selector.selectedCategory);
});
categorySearch.init(el);
};
categorySelector.getSelectedCategory = function () {
return selectedCategory;
};
categorySelector.selectCategory = function (cid) {
var categoryEl = el.find('[data-cid="' + cid + '"]');
selectedCategory = {
selector.selectCategory = function (cid) {
var categoryEl = selector.el.find('[data-cid="' + cid + '"]');
selector.selectedCategory = {
cid: cid,
name: categoryEl.attr('data-name'),
};
el.find('[component="category-selector-selected"]').html(categoryEl.find('[component="category-markup"]').html());
if (categoryEl.length) {
selector.el.find('[component="category-selector-selected"]').html(categoryEl.find('[component="category-markup"]').html());
} else {
selector.el.find('[component="category-selector-selected"]').translateHtml('[[topic:thread_tools.select_category]]');
}
};
selector.getSelectedCategory = function () {
return selector.selectedCategory;
};
selector.getSelectedCid = function () {
return selector.selectedCategory ? selector.selectedCategory.cid : 0;
};
return selector;
};
categorySelector.modal = function (categories, callback) {
@@ -50,12 +63,11 @@ define('categorySelector', ['benchpress', 'translator', 'categorySearch'], funct
},
},
});
categorySelector.init(modal.find('[component="category-selector"]'));
var selector = categorySelector.init(modal.find('[component="category-selector"]'));
function submit(ev) {
ev.preventDefault();
var selectedCategory = categorySelector.getSelectedCategory();
if (selectedCategory) {
callback(selectedCategory.cid);
if (selector.selectedCategory) {
callback(selector.selectedCategory.cid);
modal.modal('hide');
}
return false;

13
src/controllers/admin/privileges.js
View File

@@ -19,7 +19,7 @@ privilegesController.get = function (req, res, callback) {
privileges.categories.list(cid, next);
}
},
allCategories: function (next) {
categories: function (next) {
async.waterfall([
function (next) {
categories.getAllCidsFromSet('categories:cid', next);
@@ -36,7 +36,12 @@ privilegesController.get = function (req, res, callback) {
}, next);
},
function (data) {
data.allCategories.forEach(function (category) {
data.categories.unshift({
cid: 0,
name: '[[admin/manage/privileges:global]]',
icon: 'fa-list',
});
data.categories.forEach(function (category) {
if (category) {
category.selected = category.cid === cid;
@@ -48,8 +53,8 @@ privilegesController.get = function (req, res, callback) {
res.render('admin/manage/privileges', {
privileges: data.privileges,
allCategories: data.allCategories,
selected: data.selected ? data.selected.name : '[[admin/manage/privileges:global]]',
categories: data.categories,
selectedCategory: data.selected,
cid: cid,
});
},

19
src/socket.io/categories.js
View File

@@ -21,7 +21,7 @@ SocketCategories.get = function (socket, data, callback) {
isAdmin: async.apply(user.isAdministrator, socket.uid),
categories: function (next) {
async.waterfall([
async.apply(categories.getAllCidsFromSet, 'categories:cid'),
async.apply(categories.getCidsByPrivilege, 'categories:cid', socket.uid, 'find'),
async.apply(categories.getCategoriesData),
], next);
},
@@ -132,23 +132,16 @@ SocketCategories.getCategoriesByPrivilege = function (socket, privilege, callbac
};
SocketCategories.getMoveCategories = function (socket, data, callback) {
SocketCategories.getSelectCategories(socket, data, callback);
};
SocketCategories.getSelectCategories = function (socket, data, callback) {
async.waterfall([
function (next) {
async.parallel({
isAdmin: async.apply(user.isAdministrator, socket.uid),
categories: function (next) {
async.waterfall([
function (next) {
categories.getAllCidsFromSet('categories:cid', next);
},
function (cids, next) {
categories.getCategories(cids, socket.uid, next);
},
function (categoriesData, next) {
categoriesData = categories.getTree(categoriesData);
categories.buildForSelectCategories(categoriesData, next);
},
], next);
categories.buildForSelect(socket.uid, 'find', next);
},
}, next);
},

15
src/views/admin/manage/privileges.tpl
View File

@@ -5,19 +5,10 @@
[[admin/manage/categories:privileges.description]]
</p>
<p class="lead">
<div class="lead">
[[admin/manage/categories:privileges.category-selector]]
<button type="button" id="category-selector" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
{selected} <i class="fa fa-angle-down"></i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="category-selector">
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider" data-cid="global">[[admin/manage/privileges:global]]</li>
<!-- BEGIN allCategories -->
<li class="mdl-menu__item" data-cid="{../value}">{../text}</li>
<!-- END -->
</ul>
</p>
<!-- IMPORT partials/category-selector.tpl -->
</div>
<hr />

18
src/views/admin/partials/categories/create.tpl
View File

@@ -3,24 +3,14 @@
<label for="name">[[admin/manage/categories:name]]</label>
<input type="text" class="form-control" name="name" id="name" />
</div>
<div class="form-group">
<div class="form-group" id="parentCidGroup">
<label for="parentCid">[[admin/manage/categories:optional-parent-category]]</label>
<select class="form-control" name="parentCid" id="parentCid">
<option value=""></option>
<!-- BEGIN categories -->
<option value="{categories.cid}">{categories.name}</option>
<!-- END categories -->
</select>
<!-- IMPORT partials/category-selector.tpl -->
</div>
<div class="form-group">
<div class="form-group" id="cloneFromCidGroup">
<label for="cloneFromCid">[[admin/manage/categories:optional-clone-settings]]</label>
<select class="form-control" name="cloneFromCid" id="cloneFromCid">
<option value=""></option>
<!-- BEGIN categories -->
<option value="{categories.cid}">{categories.name}</option>
<!-- END categories -->
</select>
<!-- IMPORT partials/category-selector.tpl -->
<label>
<input id="cloneChildren" name="cloneChildren" type="checkbox">
<strong>[[admin/manage/categories:clone-children]]</strong>