From 834f3695e90bb9889edd6b3ad3e53190836a175e Mon Sep 17 00:00:00 2001 From: booblegum Date: Wed, 23 Nov 2016 01:32:56 +0300 Subject: [PATCH] =?UTF-8?q?PR-15=20=D0=9F=D1=80=D0=BE=D1=84=D0=B8=D0=BB?= =?UTF-8?q?=D1=8C=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B5=D0=BA=20?= =?UTF-8?q?=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D0=BD=D0=B8=D1=82=D0=B5=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=BC=D0=BE=D0=B4=D0=B8=D1=84=D0=B8=D0=BA=D0=B0=D1=86?= =?UTF-8?q?=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Добавлен класс компонента для единичного выбора при поиске Косметические правки --- .../lib/proekton-components/js/build/init.js | 142 ++++---- .../js/build/init_user_profile.js | 314 +++++++++++++----- .../js/src/NoTreeSelect.js | 2 +- .../js/src/SingleTreeSelect.js | 113 +++++++ .../proekton-components/js/src/TreeSelect.js | 2 +- .../js/src/TreeSelectPreload.js | 82 ----- .../js/src/base/AbsBaseSelect.js | 76 +++-- .../js/src/init_user_profile.js | 15 +- users/static/css/user_profile_edit.css | 9 +- 9 files changed, 468 insertions(+), 287 deletions(-) create mode 100644 assets/lib/proekton-components/js/src/SingleTreeSelect.js delete mode 100644 assets/lib/proekton-components/js/src/TreeSelectPreload.js diff --git a/assets/lib/proekton-components/js/build/init.js b/assets/lib/proekton-components/js/build/init.js index 1eec193..fb67a4b 100644 --- a/assets/lib/proekton-components/js/build/init.js +++ b/assets/lib/proekton-components/js/build/init.js @@ -12,8 +12,6 @@ var _get = function get(object, property, receiver) { if (object === null) objec var _AbsBaseSelect2 = require('./base/AbsBaseSelect'); -var _AbsBaseSelect3 = _interopRequireDefault(_AbsBaseSelect2); - var _NoTreeData = require('./data/NoTreeData'); var _NoTreeData2 = _interopRequireDefault(_NoTreeData); @@ -73,7 +71,7 @@ var NoTreeSelect = function (_AbsBaseSelect) { }]); return NoTreeSelect; -}(_AbsBaseSelect3.default); +}(_AbsBaseSelect2.AbsBaseSelect); exports.default = NoTreeSelect; @@ -303,8 +301,6 @@ var _get = function get(object, property, receiver) { if (object === null) objec var _AbsBaseSelect2 = require('./base/AbsBaseSelect'); -var _AbsBaseSelect3 = _interopRequireDefault(_AbsBaseSelect2); - var _DataTree = require('./data/DataTree'); var _DataTree2 = _interopRequireDefault(_DataTree); @@ -417,7 +413,7 @@ var TreeSelect = function (_AbsBaseSelect) { }]); return TreeSelect; -}(_AbsBaseSelect3.default); +}(_AbsBaseSelect2.AbsBaseSelect); exports.default = TreeSelect; @@ -468,7 +464,7 @@ var tmpl_selectBoxOptions = function tmpl_selectBoxOptions() { }; var tmpl_selectBoxResults = function tmpl_selectBoxResults() { - return "\n
\n
\n
\n
    \n
\n
\n
\n \u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439\n
    \n
\n
\n
\n \n
\n"; + return "\n
\n
\n
\n
    \n
\n
\n
\n \u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439\n
    \n
\n
\n
\n
\n \n
\n
\n"; }; var htmlTemplate = function htmlTemplate(_ref4) { @@ -545,9 +541,6 @@ var AbsBaseSelect = function () { this.parentId = undefined; } - // getTemplate(header, id, editable_container, vertical_child) { - - _createClass(AbsBaseSelect, [{ key: "getTemplate", value: function getTemplate(classes) { @@ -712,77 +705,77 @@ var AbsBaseSelect = function () { this.$selectBox.find('li').on("click", this._onclickOptionsElement.bind(self)); } }, { - key: "_fillResultsData", - value: function _fillResultsData(searchText) { - var self = this; + key: "_search", + value: function _search(_ref6) { + var searchText = _ref6.searchText, + _ref6$parentCategoryI = _ref6.parentCategoryId, + parentCategoryId = _ref6$parentCategoryI === undefined ? null : _ref6$parentCategoryI, + _ref6$excludeCategory = _ref6.excludeCategoryId, + excludeCategoryId = _ref6$excludeCategory === undefined ? null : _ref6$excludeCategory; + + // :FORMAT spec_list [{name, id}, ...] + var specList = this.dataTree.dataToList(parentCategoryId, false, excludeCategoryId); + return specList.filter(function (el) { + return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; + }); + } + }, { + key: "_fillContainer", + value: function _fillContainer($container, template, _ref7) { + var _ref7$searchText = _ref7.searchText, + searchText = _ref7$searchText === undefined ? "" : _ref7$searchText, + _ref7$parentCategoryI = _ref7.parentCategoryId, + parentCategoryId = _ref7$parentCategoryI === undefined ? null : _ref7$parentCategoryI, + _ref7$excludeCategory = _ref7.excludeCategoryId, + excludeCategoryId = _ref7$excludeCategory === undefined ? null : _ref7$excludeCategory; - function search(_ref6) { - var searchText = _ref6.searchText, - _ref6$parentCategoryI = _ref6.parentCategoryId, - parentCategoryId = _ref6$parentCategoryI === undefined ? null : _ref6$parentCategoryI, - _ref6$excludeCategory = _ref6.excludeCategoryId, - excludeCategoryId = _ref6$excludeCategory === undefined ? null : _ref6$excludeCategory; - - // :FORMAT spec_list [{name, id}, ...] - var specList = self.dataTree.dataToList(parentCategoryId, true, excludeCategoryId); - return specList.filter(function (el) { - return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; - }); + $container.html(""); + $('.other-part').show(); + var searchRes = this._search({ searchText: searchText, parentCategoryId: parentCategoryId, excludeCategoryId: excludeCategoryId }); + if (!searchRes.length) { + if ($container.closest('div').hasClass('main-part')) { + $container.append('
  • Ничего не найдено
    • '); + this.$resultsBox.find('.button-add.results').hide(); + } else { + $('.other-part').hide(); + } + return; } + this.$resultsBox.find('.button-add.results').show(); + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; - function fillContainer($container, template, _ref7) { - var _ref7$searchText = _ref7.searchText, - searchText = _ref7$searchText === undefined ? "" : _ref7$searchText, - _ref7$parentCategoryI = _ref7.parentCategoryId, - parentCategoryId = _ref7$parentCategoryI === undefined ? null : _ref7$parentCategoryI, - _ref7$excludeCategory = _ref7.excludeCategoryId, - excludeCategoryId = _ref7$excludeCategory === undefined ? null : _ref7$excludeCategory; - - $container.html(""); - $('.other-part').show(); - var searchRes = search({ searchText: searchText, parentCategoryId: parentCategoryId, excludeCategoryId: excludeCategoryId }); - // || (!excludeCategoryId && parentCategoryId === null) - if (!searchRes.length) { - if ($container.closest('div').hasClass('main-part')) { - $container.append('
  • Ничего не найдено
    • '); - self.$resultsBox.find('.button-add.results').hide(); - } else { - $('.other-part').hide(); - } - return; - } - self.$resultsBox.find('.button-add.results').show(); - var _iteratorNormalCompletion2 = true; - var _didIteratorError2 = false; - var _iteratorError2 = undefined; + try { + for (var _iterator2 = searchRes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var el = _step2.value; + var header = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(el.id), {}); + $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { try { - for (var _iterator2 = searchRes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { - var el = _step2.value; - - var header = AbsBaseSelect.getHeader(self.dataTree.getSpecChain(el.id), {}); - $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); } - } catch (err) { - _didIteratorError2 = true; - _iteratorError2 = err; } finally { - try { - if (!_iteratorNormalCompletion2 && _iterator2.return) { - _iterator2.return(); - } - } finally { - if (_didIteratorError2) { - throw _iteratorError2; - } + if (_didIteratorError2) { + throw _iteratorError2; } } } - + } + }, { + key: "_fillResultsData", + value: function _fillResultsData(searchText) { + var self = this; // FILL RESULTS // MAIN PART var $container = this.$resultsBox.find('.main-part ul'); - fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId }); + this._fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId }); // OTHER PART // Если нет parentId, не нужно искать в других категориях @@ -790,7 +783,7 @@ var AbsBaseSelect = function () { $('.other-part').hide(); } else { $container = this.$resultsBox.find('.other-part ul'); - fillContainer($container, tmpl_elementResult, { searchText: searchText, excludeCategoryId: self.parentId }); + this._fillContainer($container, tmpl_elementResult, { searchText: searchText, excludeCategoryId: self.parentId }); } this.$resultsBox.find('div.header').hide(); this.$resultsBox.find('li').on("mouseover", function (e) { @@ -936,6 +929,17 @@ var AbsBaseSelect = function () { }(); exports.default = AbsBaseSelect; +exports.htmlTemplate = htmlTemplate; +exports.tmpl_plug = tmpl_plug; +exports.tmpl_elementOption = tmpl_elementOption; +exports.tmpl_preloader = tmpl_preloader; +exports.tmpl_light = tmpl_light; +exports.tmpl_elementResult = tmpl_elementResult; +exports.tmpl_selectBox = tmpl_selectBox; +exports.tmpl_selectBoxEditCont = tmpl_selectBoxEditCont; +exports.tmpl_selectBoxResults = tmpl_selectBoxResults; +exports.tmpl_selectBoxOptions = tmpl_selectBoxOptions; +exports.AbsBaseSelect = AbsBaseSelect; },{}],5:[function(require,module,exports){ "use strict"; diff --git a/assets/lib/proekton-components/js/build/init_user_profile.js b/assets/lib/proekton-components/js/build/init_user_profile.js index 9bc1d2e..6de4c0f 100644 --- a/assets/lib/proekton-components/js/build/init_user_profile.js +++ b/assets/lib/proekton-components/js/build/init_user_profile.js @@ -12,8 +12,6 @@ var _get = function get(object, property, receiver) { if (object === null) objec var _AbsBaseSelect2 = require('./base/AbsBaseSelect'); -var _AbsBaseSelect3 = _interopRequireDefault(_AbsBaseSelect2); - var _NoTreeData = require('./data/NoTreeData'); var _NoTreeData2 = _interopRequireDefault(_NoTreeData); @@ -73,11 +71,11 @@ var NoTreeSelect = function (_AbsBaseSelect) { }]); return NoTreeSelect; -}(_AbsBaseSelect3.default); +}(_AbsBaseSelect2.AbsBaseSelect); exports.default = NoTreeSelect; -},{"./base/AbsBaseSelect":4,"./data/NoTreeData":6}],2:[function(require,module,exports){ +},{"./base/AbsBaseSelect":5,"./data/NoTreeData":7}],2:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -289,7 +287,141 @@ var SelectedContainer = (_class = function () { }(), (_applyDecoratedDescriptor(_class.prototype, 'remove', [_decorators2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'remove'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'add', [_decorators2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'add'), _class.prototype)), _class); exports.default = SelectedContainer; -},{"./data/DataTree":5,"./data/NoTreeData":6,"./decorators":7}],3:[function(require,module,exports){ +},{"./data/DataTree":6,"./data/NoTreeData":7,"./decorators":8}],3:[function(require,module,exports){ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _AbsBaseSelect = require('./base/AbsBaseSelect'); + +var _TreeSelect2 = require('./TreeSelect'); + +var _TreeSelect3 = _interopRequireDefault(_TreeSelect2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var tmpl_selectBoxResults = function tmpl_selectBoxResults() { + return '\n
    \n
    \n
    \n
      \n
    \n
    \n \n \n \n \n \n
    \n \n \n \n
    \n'; +}; + +var tmpl_elementResult = function tmpl_elementResult(el, id, header) { + return '
  • \n ' + el + '\n \n
    • '; +}; + +var SingleTreeSelect = function (_TreeSelect) { + _inherits(SingleTreeSelect, _TreeSelect); + + function SingleTreeSelect() { + _classCallCheck(this, SingleTreeSelect); + + return _possibleConstructorReturn(this, (SingleTreeSelect.__proto__ || Object.getPrototypeOf(SingleTreeSelect)).apply(this, arguments)); + } + + _createClass(SingleTreeSelect, [{ + key: 'getTemplate', + value: function getTemplate(classes) { + var selectBox = this.hasEditableContainer ? (0, _AbsBaseSelect.tmpl_selectBoxEditCont)() : (0, _AbsBaseSelect.tmpl_selectBox)(); + classes = classes ? classes.join(" ") : ""; + return (0, _AbsBaseSelect.htmlTemplate)({ + header: "TestHeader", selectBox: selectBox, id: this.containerId, classes: classes, + tmpl_selectBoxOptions: _AbsBaseSelect.tmpl_selectBoxOptions, tmpl_selectBoxResults: tmpl_selectBoxResults + }); + } + + // _buildComponents(data) { + // // AFTER PRELOAD + // let classes = this.$container.attr('class'); + // if (classes) classes = classes.split(/\s+/); + // let template = this.getTemplate(classes); + // this.$container.replaceWith(template); + // + // this.$selectBox = $(`#${this.containerId}`); + // this.$header = this.$selectBox.find('.select-box-header .header'); + // this.$header.html(this.header); + // this.$resultsBox = this.$selectBox.find('.select-box-results'); + // this.$optionsBox = this.$selectBox.find('.select-box-options'); + // this.$searchInput = this.$selectBox.find('input.select-box-search'); + // this.$buttonAdd = this.$selectBox.find('.button-add.results'); + // this.$buttonAddOptions = this.$selectBox.find('.button-add.options'); + // this.$editableContainer = this.$selectBox.find('.editable-container'); + // this.$resultsBox.hide(); + // this.$optionsBox.hide(); + // this.$buttonAddOptions.hide(); + // // TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select + // + // // REDEFINE IN CHILD + // // this.dataTree = data; + // // this._bindEvents(); + // } + + }, { + key: '_fillResultsData', + value: function _fillResultsData(searchText) { + var self = this; + // FILL RESULTS + // MAIN PART + var $container = this.$resultsBox.find('.main-part ul'); + this._fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId }); + + // OTHER PART + // // Если нет parentId, не нужно искать в других категориях + // if (!this.parentId) { + // $('.other-part').hide(); + // } else { + // $container = this.$resultsBox.find('.other-part ul'); + // this._fillContainer($container, tmpl_elementResult, { + // searchText: searchText, + // excludeCategoryId: self.parentId + // }); + // } + // this.$resultsBox.find('div.header').hide(); + // this.$resultsBox.find('li').on("mouseover", function (e) { + // $(e.target).children('.header').show(300); + // e.preventDefault(); + // }); + + + this.$resultsBox.find('li').on("click", function (e) { + var id = $(e.target).data("id"); + self.selectedEl.id = id; + self.selectedEl.value = self.dataTree.getElementById(id).name; + self.$searchInput.val(self.selectedEl.value); + self.updateEditableContainer(id); + if (self.$buttonAddOptions) self.$buttonAddOptions.show(); + self.$resultsBox.hide(); + + //TODO: duplicate code + if (self.nextSelectBox && self.dataTree.hasChildren(self.selectedEl.id)) { + self.nextSelectBox.setParent(self.selectedEl.id); + self.nextSelectBox.setHeader(self.selectedEl.value); + self.nextSelectBox.show(); + } + if (self.prevSelectBox) { + self.prevSelectBox.$buttonAddOptions.hide(); + self.prevSelectBox.$searchInput.removeClass("active"); + } + self.$searchInput.addClass('active'); + }); + } + }]); + + return SingleTreeSelect; +}(_TreeSelect3.default); + +exports.default = SingleTreeSelect; + +},{"./TreeSelect":4,"./base/AbsBaseSelect":5}],4:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { @@ -303,8 +435,6 @@ var _get = function get(object, property, receiver) { if (object === null) objec var _AbsBaseSelect2 = require('./base/AbsBaseSelect'); -var _AbsBaseSelect3 = _interopRequireDefault(_AbsBaseSelect2); - var _DataTree = require('./data/DataTree'); var _DataTree2 = _interopRequireDefault(_DataTree); @@ -417,11 +547,11 @@ var TreeSelect = function (_AbsBaseSelect) { }]); return TreeSelect; -}(_AbsBaseSelect3.default); +}(_AbsBaseSelect2.AbsBaseSelect); exports.default = TreeSelect; -},{"./base/AbsBaseSelect":4,"./data/DataTree":5}],4:[function(require,module,exports){ +},{"./base/AbsBaseSelect":5,"./data/DataTree":6}],5:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { @@ -468,7 +598,7 @@ var tmpl_selectBoxOptions = function tmpl_selectBoxOptions() { }; var tmpl_selectBoxResults = function tmpl_selectBoxResults() { - return "\n
    \n
    \n
    \n
      \n
    \n
    \n
    \n \u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439\n
      \n
    \n
    \n
    \n \n
    \n"; + return "\n
    \n
    \n
    \n
      \n
    \n
    \n
    \n \u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439\n
      \n
    \n
    \n
    \n
    \n \n
    \n
    \n"; }; var htmlTemplate = function htmlTemplate(_ref4) { @@ -545,9 +675,6 @@ var AbsBaseSelect = function () { this.parentId = undefined; } - // getTemplate(header, id, editable_container, vertical_child) { - - _createClass(AbsBaseSelect, [{ key: "getTemplate", value: function getTemplate(classes) { @@ -712,77 +839,77 @@ var AbsBaseSelect = function () { this.$selectBox.find('li').on("click", this._onclickOptionsElement.bind(self)); } }, { - key: "_fillResultsData", - value: function _fillResultsData(searchText) { - var self = this; + key: "_search", + value: function _search(_ref6) { + var searchText = _ref6.searchText, + _ref6$parentCategoryI = _ref6.parentCategoryId, + parentCategoryId = _ref6$parentCategoryI === undefined ? null : _ref6$parentCategoryI, + _ref6$excludeCategory = _ref6.excludeCategoryId, + excludeCategoryId = _ref6$excludeCategory === undefined ? null : _ref6$excludeCategory; + + // :FORMAT spec_list [{name, id}, ...] + var specList = this.dataTree.dataToList(parentCategoryId, false, excludeCategoryId); + return specList.filter(function (el) { + return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; + }); + } + }, { + key: "_fillContainer", + value: function _fillContainer($container, template, _ref7) { + var _ref7$searchText = _ref7.searchText, + searchText = _ref7$searchText === undefined ? "" : _ref7$searchText, + _ref7$parentCategoryI = _ref7.parentCategoryId, + parentCategoryId = _ref7$parentCategoryI === undefined ? null : _ref7$parentCategoryI, + _ref7$excludeCategory = _ref7.excludeCategoryId, + excludeCategoryId = _ref7$excludeCategory === undefined ? null : _ref7$excludeCategory; - function search(_ref6) { - var searchText = _ref6.searchText, - _ref6$parentCategoryI = _ref6.parentCategoryId, - parentCategoryId = _ref6$parentCategoryI === undefined ? null : _ref6$parentCategoryI, - _ref6$excludeCategory = _ref6.excludeCategoryId, - excludeCategoryId = _ref6$excludeCategory === undefined ? null : _ref6$excludeCategory; - - // :FORMAT spec_list [{name, id}, ...] - var specList = self.dataTree.dataToList(parentCategoryId, true, excludeCategoryId); - return specList.filter(function (el) { - return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; - }); + $container.html(""); + $('.other-part').show(); + var searchRes = this._search({ searchText: searchText, parentCategoryId: parentCategoryId, excludeCategoryId: excludeCategoryId }); + if (!searchRes.length) { + if ($container.closest('div').hasClass('main-part')) { + $container.append('
  • Ничего не найдено
    • '); + this.$resultsBox.find('.button-add.results').hide(); + } else { + $('.other-part').hide(); + } + return; } + this.$resultsBox.find('.button-add.results').show(); + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; - function fillContainer($container, template, _ref7) { - var _ref7$searchText = _ref7.searchText, - searchText = _ref7$searchText === undefined ? "" : _ref7$searchText, - _ref7$parentCategoryI = _ref7.parentCategoryId, - parentCategoryId = _ref7$parentCategoryI === undefined ? null : _ref7$parentCategoryI, - _ref7$excludeCategory = _ref7.excludeCategoryId, - excludeCategoryId = _ref7$excludeCategory === undefined ? null : _ref7$excludeCategory; - - $container.html(""); - $('.other-part').show(); - var searchRes = search({ searchText: searchText, parentCategoryId: parentCategoryId, excludeCategoryId: excludeCategoryId }); - // || (!excludeCategoryId && parentCategoryId === null) - if (!searchRes.length) { - if ($container.closest('div').hasClass('main-part')) { - $container.append('
  • Ничего не найдено
    • '); - self.$resultsBox.find('.button-add.results').hide(); - } else { - $('.other-part').hide(); - } - return; - } - self.$resultsBox.find('.button-add.results').show(); - var _iteratorNormalCompletion2 = true; - var _didIteratorError2 = false; - var _iteratorError2 = undefined; + try { + for (var _iterator2 = searchRes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var el = _step2.value; + var header = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(el.id), {}); + $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { try { - for (var _iterator2 = searchRes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { - var el = _step2.value; - - var header = AbsBaseSelect.getHeader(self.dataTree.getSpecChain(el.id), {}); - $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); } - } catch (err) { - _didIteratorError2 = true; - _iteratorError2 = err; } finally { - try { - if (!_iteratorNormalCompletion2 && _iterator2.return) { - _iterator2.return(); - } - } finally { - if (_didIteratorError2) { - throw _iteratorError2; - } + if (_didIteratorError2) { + throw _iteratorError2; } } } - + } + }, { + key: "_fillResultsData", + value: function _fillResultsData(searchText) { + var self = this; // FILL RESULTS // MAIN PART var $container = this.$resultsBox.find('.main-part ul'); - fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId }); + this._fillContainer($container, tmpl_elementResult, { searchText: searchText, parentCategoryId: self.parentId }); // OTHER PART // Если нет parentId, не нужно искать в других категориях @@ -790,7 +917,7 @@ var AbsBaseSelect = function () { $('.other-part').hide(); } else { $container = this.$resultsBox.find('.other-part ul'); - fillContainer($container, tmpl_elementResult, { searchText: searchText, excludeCategoryId: self.parentId }); + this._fillContainer($container, tmpl_elementResult, { searchText: searchText, excludeCategoryId: self.parentId }); } this.$resultsBox.find('div.header').hide(); this.$resultsBox.find('li').on("mouseover", function (e) { @@ -936,8 +1063,19 @@ var AbsBaseSelect = function () { }(); exports.default = AbsBaseSelect; +exports.htmlTemplate = htmlTemplate; +exports.tmpl_plug = tmpl_plug; +exports.tmpl_elementOption = tmpl_elementOption; +exports.tmpl_preloader = tmpl_preloader; +exports.tmpl_light = tmpl_light; +exports.tmpl_elementResult = tmpl_elementResult; +exports.tmpl_selectBox = tmpl_selectBox; +exports.tmpl_selectBoxEditCont = tmpl_selectBoxEditCont; +exports.tmpl_selectBoxResults = tmpl_selectBoxResults; +exports.tmpl_selectBoxOptions = tmpl_selectBoxOptions; +exports.AbsBaseSelect = AbsBaseSelect; -},{}],5:[function(require,module,exports){ +},{}],6:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { @@ -1089,7 +1227,7 @@ var DataTree = function () { exports.default = DataTree; -},{}],6:[function(require,module,exports){ +},{}],7:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { @@ -1142,7 +1280,7 @@ var NoTreeData = function () { exports.default = NoTreeData; -},{}],7:[function(require,module,exports){ +},{}],8:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { @@ -1222,7 +1360,7 @@ function onBind(target, name, descriptor) { // export {onBind}; -},{}],8:[function(require,module,exports){ +},{}],9:[function(require,module,exports){ 'use strict'; var _SelectedContainer = require('./SelectedContainer'); @@ -1237,6 +1375,10 @@ var _TreeSelect = require('./TreeSelect'); var _TreeSelect2 = _interopRequireDefault(_TreeSelect); +var _SingleTreeSelect = require('./SingleTreeSelect'); + +var _SingleTreeSelect2 = _interopRequireDefault(_SingleTreeSelect); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } $(function () { @@ -1280,23 +1422,23 @@ $(function () { } function createFilerLocations(url) { - var sb_loc_main = new _TreeSelect2.default($('#sb-location-1'), { url: url, visible: true }); + var sb_loc_main = new _SingleTreeSelect2.default($('#sb-location-1'), { url: url, visible: true }); sb_loc_main.setHeader("Местоположение"); var select_loc = new _SelectedContainer2.default($('#selected-location'), { obj: sb_loc_main, onlyOne: true }); sb_loc_main.connectSelectedContainer(select_loc); - var sb_loc_1 = new _TreeSelect2.default($('#sb-location-2'), { obj: sb_loc_main }); - var sb_loc_2 = new _TreeSelect2.default($('#sb-location-3'), { obj: sb_loc_main }); + var sb_loc_1 = new _SingleTreeSelect2.default($('#sb-location-2'), { obj: sb_loc_main }); + var sb_loc_2 = new _SingleTreeSelect2.default($('#sb-location-3'), { obj: sb_loc_main }); // Убираем кнопки add-options, блокирем поиск, меняем подсказки sb_loc_main.dataPromise.then(function () { sb_loc_1.$buttonAddOptions.remove(); sb_loc_main.$buttonAddOptions.remove(); - sb_loc_main.$searchInput.prop("readonly", true); - sb_loc_1.$searchInput.prop("readonly", true); - sb_loc_2.$searchInput.prop("readonly", true); - sb_loc_main.$searchInput.prop("placeholder", "Выберите"); - sb_loc_1.$searchInput.prop("placeholder", "Выберите"); - sb_loc_2.$searchInput.prop("placeholder", "Выберите"); + // sb_loc_main.$searchInput.prop("readonly", true); + // sb_loc_1.$searchInput.prop("readonly", true); + // sb_loc_2.$searchInput.prop("readonly", true); + // sb_loc_main.$searchInput.prop("placeholder", "Выберите"); + // sb_loc_1.$searchInput.prop("placeholder", "Выберите"); + // sb_loc_2.$searchInput.prop("placeholder", "Выберите"); }); sb_loc_main.setNearbySelectBox(sb_loc_1); @@ -1322,4 +1464,4 @@ $(function () { createFilerLocations('/api/locations_flat'); }); -},{"./NoTreeSelect":1,"./SelectedContainer":2,"./TreeSelect":3}]},{},[8]); +},{"./NoTreeSelect":1,"./SelectedContainer":2,"./SingleTreeSelect":3,"./TreeSelect":4}]},{},[9]); diff --git a/assets/lib/proekton-components/js/src/NoTreeSelect.js b/assets/lib/proekton-components/js/src/NoTreeSelect.js index e8887a3..d536521 100644 --- a/assets/lib/proekton-components/js/src/NoTreeSelect.js +++ b/assets/lib/proekton-components/js/src/NoTreeSelect.js @@ -1,4 +1,4 @@ -import AbsBaseSelect from './base/AbsBaseSelect' +import {AbsBaseSelect} from './base/AbsBaseSelect' import NoTreeData from './data/NoTreeData' export default class NoTreeSelect extends AbsBaseSelect{ diff --git a/assets/lib/proekton-components/js/src/SingleTreeSelect.js b/assets/lib/proekton-components/js/src/SingleTreeSelect.js new file mode 100644 index 0000000..e9228b4 --- /dev/null +++ b/assets/lib/proekton-components/js/src/SingleTreeSelect.js @@ -0,0 +1,113 @@ +import {htmlTemplate, tmpl_selectBoxOptions, tmpl_selectBoxEditCont, tmpl_selectBox} from './base/AbsBaseSelect' +import TreeSelect from './TreeSelect' + +const tmpl_selectBoxResults = () => + ` +
    +
    +
    +
      +
    +
    + + + + + +
    + + + +
    +`; + +const tmpl_elementResult = (el, id, header) => + `
  • + ${el} + +
    • `; + +export default class SingleTreeSelect extends TreeSelect { + getTemplate(classes) { + let selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont() : tmpl_selectBox(); + classes = classes ? classes.join(" ") : ""; + return htmlTemplate({ + header: "TestHeader", selectBox, id: this.containerId, classes, + tmpl_selectBoxOptions, tmpl_selectBoxResults + }) + } + + // _buildComponents(data) { + // // AFTER PRELOAD + // let classes = this.$container.attr('class'); + // if (classes) classes = classes.split(/\s+/); + // let template = this.getTemplate(classes); + // this.$container.replaceWith(template); + // + // this.$selectBox = $(`#${this.containerId}`); + // this.$header = this.$selectBox.find('.select-box-header .header'); + // this.$header.html(this.header); + // this.$resultsBox = this.$selectBox.find('.select-box-results'); + // this.$optionsBox = this.$selectBox.find('.select-box-options'); + // this.$searchInput = this.$selectBox.find('input.select-box-search'); + // this.$buttonAdd = this.$selectBox.find('.button-add.results'); + // this.$buttonAddOptions = this.$selectBox.find('.button-add.options'); + // this.$editableContainer = this.$selectBox.find('.editable-container'); + // this.$resultsBox.hide(); + // this.$optionsBox.hide(); + // this.$buttonAddOptions.hide(); + // // TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select + // + // // REDEFINE IN CHILD + // // this.dataTree = data; + // // this._bindEvents(); + // } + + _fillResultsData(searchText) { + let self = this; + // FILL RESULTS + // MAIN PART + let $container = this.$resultsBox.find('.main-part ul'); + this._fillContainer($container, tmpl_elementResult, {searchText: searchText, parentCategoryId: self.parentId}); + + // OTHER PART + // // Если нет parentId, не нужно искать в других категориях + // if (!this.parentId) { + // $('.other-part').hide(); + // } else { + // $container = this.$resultsBox.find('.other-part ul'); + // this._fillContainer($container, tmpl_elementResult, { + // searchText: searchText, + // excludeCategoryId: self.parentId + // }); + // } + // this.$resultsBox.find('div.header').hide(); + // this.$resultsBox.find('li').on("mouseover", function (e) { + // $(e.target).children('.header').show(300); + // e.preventDefault(); + // }); + + + this.$resultsBox.find('li').on("click", function (e) { + const id = $(e.target).data("id"); + self.selectedEl.id = id; + self.selectedEl.value = self.dataTree.getElementById(id).name; + self.$searchInput.val(self.selectedEl.value); + self.updateEditableContainer(id); + if (self.$buttonAddOptions) self.$buttonAddOptions.show(); + self.$resultsBox.hide(); + + //TODO: duplicate code + if (self.nextSelectBox && self.dataTree.hasChildren(self.selectedEl.id)) { + self.nextSelectBox.setParent(self.selectedEl.id); + self.nextSelectBox.setHeader(self.selectedEl.value); + self.nextSelectBox.show(); + } + if (self.prevSelectBox) { + self.prevSelectBox.$buttonAddOptions.hide(); + self.prevSelectBox.$searchInput.removeClass("active"); + } + self.$searchInput.addClass('active'); + }) + } +} \ No newline at end of file diff --git a/assets/lib/proekton-components/js/src/TreeSelect.js b/assets/lib/proekton-components/js/src/TreeSelect.js index ffb2433..22c087b 100644 --- a/assets/lib/proekton-components/js/src/TreeSelect.js +++ b/assets/lib/proekton-components/js/src/TreeSelect.js @@ -1,4 +1,4 @@ -import AbsBaseSelect from './base/AbsBaseSelect' +import {AbsBaseSelect} from './base/AbsBaseSelect' import DataTree from './data/DataTree' export default class TreeSelect extends AbsBaseSelect{ diff --git a/assets/lib/proekton-components/js/src/TreeSelectPreload.js b/assets/lib/proekton-components/js/src/TreeSelectPreload.js deleted file mode 100644 index 13dd294..0000000 --- a/assets/lib/proekton-components/js/src/TreeSelectPreload.js +++ /dev/null @@ -1,82 +0,0 @@ -// ` -import DataTree from './data/DataTree' -const tmpl_selectBoxEditCont = () =>` -
    -
    -
    - -
    -
    -
    -
    -`; -const tmpl_plug = ({header, selectBox}) => - ` -
    -
    -
    ${header}
    - -
    -
    - ${selectBox} -
    -
    -`; - -export default class TreeSelectPreload { - constructor($container, {url}) { - let template = this.getTemplate(); - $container.html(template); - this.$preloader = $container.find('#component-preloader'); - this.$spinner = this.$preloader.find('.spinner'); - this.getData(url) - } - - hidePreloader() { - // console.log("hide preloader ", this.$preloader); - this.$spinner.fadeOut(); - this.$preloader.delay(350).fadeOut('slow'); - } - - getData(url, data = {}) { - const self = this; - $.ajax({ - url: url, - dataType: 'json', - data: data, - success: self._buildComponents.bind(self), - error: self._onLoadDataError.bind(self), - }); - } - - getTemplate() { - let selectBox = tmpl_selectBoxEditCont(); - return tmpl_plug({header: "TestHeader", selectBox}) - } - - _buildComponents(data) { - console.log("loading data =", data); - // console.log("this =", this); - this.hidePreloader(); - // this.$selectBox = $(`#${this.containerId}`); - // this.$header = this.$selectBox.find('.select-box-header .header'); - // this.$resultsBox = this.$selectBox.find('.select-box-results'); - // this.$optionsBox = this.$selectBox.find('.select-box-options'); - // this.$searchInput = this.$selectBox.find('input.select-box-search'); - // this.$editableContainer = this.$selectBox.find('.editable-container'); - // this._fillOptionsData(); - // this.$resultsBox.hide(); - // this.$optionsBox.hide(); - // this.$buttonAddOptions.hide(); - } - - _fillOptionsData() { - - } - - _onLoadDataError(error) { - console.log("Error loading data -->", error); - } - - -} \ No newline at end of file diff --git a/assets/lib/proekton-components/js/src/base/AbsBaseSelect.js b/assets/lib/proekton-components/js/src/base/AbsBaseSelect.js index 4a5b656..260b395 100644 --- a/assets/lib/proekton-components/js/src/base/AbsBaseSelect.js +++ b/assets/lib/proekton-components/js/src/base/AbsBaseSelect.js @@ -59,7 +59,9 @@ const tmpl_selectBoxResults = () => +
    +
    `; @@ -131,7 +133,6 @@ export default class AbsBaseSelect { this.parentId = undefined; } - // getTemplate(header, id, editable_container, vertical_child) { getTemplate(classes) { let selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont() : tmpl_selectBox(); classes = classes ? classes.join(" ") : ""; @@ -216,7 +217,11 @@ export default class AbsBaseSelect { setHeader(header) { - if (this.$header){this.$header.html(header)} else {this.header = header} + if (this.$header) { + this.$header.html(header) + } else { + this.header = header + } // default hide // this.show(); } @@ -293,42 +298,40 @@ export default class AbsBaseSelect { } - _fillResultsData(searchText) { - let self = this; - - function search({searchText, parentCategoryId = null, excludeCategoryId = null}) { - // :FORMAT spec_list [{name, id}, ...] - let specList = self.dataTree.dataToList(parentCategoryId, true, excludeCategoryId); - return specList.filter(function (el) { - return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; - }); - } + _search({searchText, parentCategoryId = null, excludeCategoryId = null}) { + // :FORMAT spec_list [{name, id}, ...] + let specList = this.dataTree.dataToList(parentCategoryId, false, excludeCategoryId); + return specList.filter(function (el) { + return el.name.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; + }); + } - function fillContainer($container, template, {searchText = "", parentCategoryId = null, excludeCategoryId = null}) { - $container.html(""); - $('.other-part').show(); - let searchRes = search({searchText, parentCategoryId, excludeCategoryId}); - // || (!excludeCategoryId && parentCategoryId === null) - if (!searchRes.length) { - if ($container.closest('div').hasClass('main-part')) { - $container.append('
  • Ничего не найдено
    • '); - self.$resultsBox.find('.button-add.results').hide(); - } else { - $('.other-part').hide(); - } - return; - } - self.$resultsBox.find('.button-add.results').show(); - for (let el of searchRes) { - let header = AbsBaseSelect.getHeader(self.dataTree.getSpecChain(el.id), {}); - $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); + _fillContainer($container, template, {searchText = "", parentCategoryId = null, excludeCategoryId = null}) { + $container.html(""); + $('.other-part').show(); + let searchRes = this._search({searchText, parentCategoryId, excludeCategoryId}); + if (!searchRes.length) { + if ($container.closest('div').hasClass('main-part')) { + $container.append('
  • Ничего не найдено
    • '); + this.$resultsBox.find('.button-add.results').hide(); + } else { + $('.other-part').hide(); } + return; } + this.$resultsBox.find('.button-add.results').show(); + for (let el of searchRes) { + let header = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(el.id), {}); + $container.append(template(AbsBaseSelect.highlight(el.name, searchText), el.id, header)); + } + } + _fillResultsData(searchText) { + let self = this; // FILL RESULTS // MAIN PART let $container = this.$resultsBox.find('.main-part ul'); - fillContainer($container, tmpl_elementResult, {searchText: searchText, parentCategoryId: self.parentId}); + this._fillContainer($container, tmpl_elementResult, {searchText: searchText, parentCategoryId: self.parentId}); // OTHER PART // Если нет parentId, не нужно искать в других категориях @@ -336,7 +339,7 @@ export default class AbsBaseSelect { $('.other-part').hide(); } else { $container = this.$resultsBox.find('.other-part ul'); - fillContainer($container, tmpl_elementResult, {searchText: searchText, excludeCategoryId: self.parentId}); + this._fillContainer($container, tmpl_elementResult, {searchText: searchText, excludeCategoryId: self.parentId}); } this.$resultsBox.find('div.header').hide(); this.$resultsBox.find('li').on("mouseover", function (e) { @@ -352,8 +355,6 @@ export default class AbsBaseSelect { } $(this).find('.header').hide(); }) - - } _onclickOptionsElement(e) { @@ -429,4 +430,11 @@ export default class AbsBaseSelect { this.$searchInput.val(this.selectedEl.value); } } +} + +export { + htmlTemplate, + tmpl_plug, tmpl_elementOption, tmpl_preloader, tmpl_light, tmpl_elementResult, + tmpl_selectBox, tmpl_selectBoxEditCont, tmpl_selectBoxResults, tmpl_selectBoxOptions, + AbsBaseSelect } \ No newline at end of file diff --git a/assets/lib/proekton-components/js/src/init_user_profile.js b/assets/lib/proekton-components/js/src/init_user_profile.js index 4d9d110..c42e387 100644 --- a/assets/lib/proekton-components/js/src/init_user_profile.js +++ b/assets/lib/proekton-components/js/src/init_user_profile.js @@ -1,6 +1,7 @@ import SelectedContainer from './SelectedContainer'; import NoTreeSelect from './NoTreeSelect'; import TreeSelect from './TreeSelect'; +import SingleTreeSelect from './SingleTreeSelect' $(function () { function createFilterSpecs(url) { @@ -44,23 +45,17 @@ $(function () { } function createFilerLocations(url) { - let sb_loc_main = new TreeSelect($('#sb-location-1'), {url, visible:true}); + let sb_loc_main = new SingleTreeSelect($('#sb-location-1'), {url, visible:true}); sb_loc_main.setHeader("Местоположение"); let select_loc = new SelectedContainer($('#selected-location'), {obj: sb_loc_main, onlyOne: true}); sb_loc_main.connectSelectedContainer(select_loc); - let sb_loc_1 = new TreeSelect($('#sb-location-2'), {obj: sb_loc_main}); - let sb_loc_2 = new TreeSelect($('#sb-location-3'), {obj: sb_loc_main}); + let sb_loc_1 = new SingleTreeSelect($('#sb-location-2'), {obj: sb_loc_main}); + let sb_loc_2 = new SingleTreeSelect($('#sb-location-3'), {obj: sb_loc_main}); - // Убираем кнопки add-options, блокирем поиск, меняем подсказки + // Убираем кнопки add-options sb_loc_main.dataPromise.then(()=>{ sb_loc_1.$buttonAddOptions.remove(); sb_loc_main.$buttonAddOptions.remove(); - sb_loc_main.$searchInput.prop("readonly", true); - sb_loc_1.$searchInput.prop("readonly", true); - sb_loc_2.$searchInput.prop("readonly", true); - sb_loc_main.$searchInput.prop("placeholder", "Выберите"); - sb_loc_1.$searchInput.prop("placeholder", "Выберите"); - sb_loc_2.$searchInput.prop("placeholder", "Выберите"); }); diff --git a/users/static/css/user_profile_edit.css b/users/static/css/user_profile_edit.css index bf837e1..e04cb3e 100644 --- a/users/static/css/user_profile_edit.css +++ b/users/static/css/user_profile_edit.css @@ -2,14 +2,15 @@ padding: 43px 25px 40px 25px; } +/*TODO: Привязать к ширине блока справа*/ .avatarInset { - width: 200px; - height: 200px; + width: 210px; + height: 210px; } .avatar { - width: 220px; - height: 220px; + width: 228px; + height: 228px; padding: 10px; }