PR-20 Функционал и вид списков в фильтре поиска заказов

Поправлены мелкие недоработки в дизайне
remotes/origin/PR-41
booblegum 9 years ago
parent e1ef2361ff
commit 38655e4e10
  1. 2
      assets/lib/proekton-components/bash/browserify.sh
  2. 1
      assets/lib/proekton-components/css/select-box.css
  3. 159
      assets/lib/proekton-components/js/build/init.js
  4. 6
      assets/lib/proekton-components/js/build/init_user_profile.js
  5. 6
      assets/lib/proekton-components/js/src/base/AbsBaseSelect.js
  6. 2
      assets/lib/proekton-components/js/src/init.js
  7. 6
      assets/projects-filter.js
  8. 14
      projects/static/css/project_filter.css
  9. 4
      projects/templates/partials/inc-projects-filter.html

@ -2,6 +2,6 @@
echo "run browserify"
cd ..
source ~/venv/proekton/bin/activate
#browserify ./js/src/init.js -o ./js/build/init.js -t babelify
browserify ./js/src/init.js -o ./js/build/init.js -t babelify
browserify ./js/src/init_user_profile.js -o ./js/build/init_user_profile.js -t babelify
#watchify ./js/src/init.js -t babelify -o ./js/build/init.js

@ -118,6 +118,7 @@ input.select-box-search {
background-size: 40px 40px;
background-color: white;
margin-bottom: -1px;
color: #494546;
}
input.select-box-search.active{

@ -4,6 +4,7 @@
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; }; }();
@ -82,8 +83,11 @@ exports.default = NoTreeSelect;
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 _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 _desc, _value, _class; // `
var _DataTree = require('./data/DataTree');
@ -94,15 +98,48 @@ var _NoTreeData = require('./data/NoTreeData');
var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
var _decorators = require('./decorators');
var _decorators2 = _interopRequireDefault(_decorators);
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 _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
var desc = {};
Object['ke' + 'ys'](descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ('value' in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object['define' + 'Property'](target, property, desc);
desc = null;
}
return desc;
}
var tmpl_selectedElement = function tmpl_selectedElement(header, name, id) {
return '\n <div class="selected-element">\n <div class="header">\n ' + header + '\n </div>\n <div class="name">\n ' + name + '\n </div>\n <span data-id="' + id + '" class="icon-remove"></span>\n </div>\n';
};
var SelectedContainer = function () {
var SelectedContainer = (_class = function () {
function SelectedContainer($container, _ref) {
var _this = this;
@ -119,6 +156,7 @@ var SelectedContainer = function () {
this.elements_id = []; // [spec_id, spec_id, ...]
this.onlyOne = onlyOne;
var self = this;
this.$self.hide();
obj.dataPromise.then(function (data) {
_this.dataTree = noTree ? new _NoTreeData2.default(data.results) : new _DataTree2.default(data.results);
@ -132,23 +170,31 @@ var SelectedContainer = function () {
value: function restoreElements() {
var self = this;
if (this.$input && this.$input.val()) {
var data = this.$input.val().split(',').filter(function (el) {
var clearString = this.$input.val().replace(/[\[\]\'\'\"\"]/g, '');
var data = clearString.split(',').filter(function (el) {
return el;
});
this.elements_id = [];
if (this.$input) this.$input.val(this.elements_id.join(','));
data.forEach(function (el) {
return self.add(el);
});
}
}
}, {
key: 'on',
value: function on(methodName, func) {
this[methodName] = this[methodName].bind(this, { func: func, bindFunc: true });
}
}, {
key: '_removeById',
value: function _removeById(spec_id) {
var index = this.elements_id.indexOf(spec_id);
value: function _removeById(id) {
var index = this.elements_id.indexOf(id);
if (index >= 0) {
this.elements_id.splice(index, 1);
}
this.$self.find('span[data-id=\'' + spec_id + '\']').parents('.selected-element').remove();
this.$self.find('span[data-id=\'' + id + '\']').parents('.selected-element').remove();
}
}, {
key: '_onLoadDataError',
@ -161,19 +207,19 @@ var SelectedContainer = function () {
var spec_id = $(e.target).data("id");
this._removeById(spec_id);
if (this.$input) this.$input.val(this.elements_id.join(','));
if (!this.elements_id.length) this.$self.hide();
e.preventDefault();
}
}, {
key: 'replace',
value: function replace(_id, max_len) {
console.log("replace");
var id = Number(_id);
if (this.elements_id.length > 1) throw new RangeError("Replace error: more than one element");
this.elements_id = [id];
// Remove old
this._removeById(this.elements_id[0]);
//Add new
this._addElementToHtml(id, max_len);
this.elements_id = [id];
}
}, {
key: '_addElementToHtml',
@ -186,6 +232,7 @@ var SelectedContainer = function () {
this.$self.append(SelectedContainer.getTemplate(header || "&nbsp;", name, id));
this.btn_remove = this.$self.find('.icon-remove');
this.btn_remove.on("click", this.remove.bind(self));
if (this.elements_id.length) this.$self.show();
}
}, {
key: 'add',
@ -239,16 +286,16 @@ var SelectedContainer = function () {
}]);
return SelectedContainer;
}();
}(), (_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}],3:[function(require,module,exports){
},{"./data/DataTree":5,"./data/NoTreeData":6,"./decorators":7}],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; }; }();
@ -391,7 +438,7 @@ var tmpl_selectBoxEditCont = function tmpl_selectBoxEditCont() {
_ref$preloaderTemplat = _ref.preloaderTemplate,
preloaderTemplate = _ref$preloaderTemplat === undefined ? "" : _ref$preloaderTemplat;
return "\n <div class=\"row\">\n <div class=\"col-lg-3\">\n \n <div style=\"width: 100%; position: relative\">\n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u0414\u041E\u0411\u0410\u0412\u0418\u0422\u042C</button>\n </div>\n </div>\n <div class=\"col-lg-9\">\n <span style=\"display: none\" class=\"editable-container\"></span>\n </div>\n </div>\n";
return "\n <div class=\"row\">\n <div class=\"col-lg-3\">\n \n <div style=\"width: 100%; position: relative\">\n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n </div>\n </div>\n <div class=\"col-lg-9\">\n <span style=\"display: none\" class=\"editable-container\"></span>\n </div>\n </div>\n";
};
var tmpl_selectBox = function tmpl_selectBox() {
@ -399,7 +446,7 @@ var tmpl_selectBox = function tmpl_selectBox() {
_ref2$preloaderTempla = _ref2.preloaderTemplate,
preloaderTemplate = _ref2$preloaderTempla === undefined ? "" : _ref2$preloaderTempla;
return " \n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u0414\u041E\u0411\u0410\u0412\u0418\u0422\u042C</button>\n";
return " \n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n";
};
var tmpl_elementResult = function tmpl_elementResult(el, id, header) {
@ -421,7 +468,7 @@ var tmpl_selectBoxOptions = function tmpl_selectBoxOptions() {
};
var tmpl_selectBoxResults = function tmpl_selectBoxResults() {
return "\n <div class=\"select-box-results\">\n <div class=\"box-wrapper\">\n <div class=\"main-part\">\n <ul>\n </ul>\n </div>\n <div class=\"other-part\">\n <span class=\"other-header\">\u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439</span>\n <ul>\n </ul>\n </div>\n </div>\n <button class=\"button-add results\">\u0414\u041E\u0411\u0410\u0412\u0418\u0422\u042C</button>\n </div>\n";
return "\n <div class=\"select-box-results\">\n <div class=\"box-wrapper\">\n <div class=\"main-part\">\n <ul>\n </ul>\n </div>\n <div class=\"other-part\">\n <span class=\"other-header\">\u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439</span>\n <ul>\n </ul>\n </div>\n </div>\n <button class=\"button-add results\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n </div>\n";
};
var htmlTemplate = function htmlTemplate(_ref4) {
@ -1096,6 +1143,86 @@ var NoTreeData = function () {
exports.default = NoTreeData;
},{}],7:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = onBind;
function onBind(target, name, descriptor) {
var method = descriptor.value;
descriptor.value = function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var binds = [];
args = Array.from(args);
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = args.slice()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var arg = _step.value;
// console.log("onBind -->", typeof arg, "arg = ", arg);
// console.log("arg.func -->", typeof arg.originalEvent);
// typeof arg === 'object' && !(arg.originalEvent)
if (arg.bindFunc) {
binds.push(arg);
args.splice(args.indexOf(arg), 1);
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
method.apply(this, args);
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = binds[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var bind = _step2.value;
bind.func.bind(this)();
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
return this;
};
}
// export {onBind};
},{}],8:[function(require,module,exports){
'use strict';
var _SelectedContainer = require('./SelectedContainer');
@ -1116,7 +1243,7 @@ $(function () {
function createFilterSpecs(url) {
// SPECIALIZATIONS FILTER
var sb_main = new _TreeSelect2.default($('#select-box-1'), { url: url, hasEditableContainer: true });
sb_main.setHeader("Специализации");
sb_main.setHeader("Специальность");
var select_container = new _SelectedContainer2.default($('#selected-spec'), { obj: sb_main });
sb_main.connectSelectedContainer(select_container);
var sb_1 = new _TreeSelect2.default($('#select-box-2'), { obj: sb_main });
@ -1194,4 +1321,4 @@ $(function () {
// fullData({next: '/api/locations_flat', results: []});
}); // `
},{"./NoTreeSelect":1,"./SelectedContainer":2,"./TreeSelect":3}]},{},[7]);
},{"./NoTreeSelect":1,"./SelectedContainer":2,"./TreeSelect":3}]},{},[8]);

@ -438,7 +438,7 @@ var tmpl_selectBoxEditCont = function tmpl_selectBoxEditCont() {
_ref$preloaderTemplat = _ref.preloaderTemplate,
preloaderTemplate = _ref$preloaderTemplat === undefined ? "" : _ref$preloaderTemplat;
return "\n <div class=\"row\">\n <div class=\"col-lg-3\">\n \n <div style=\"width: 100%; position: relative\">\n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u0414\u041E\u0411\u0410\u0412\u0418\u0422\u042C</button>\n </div>\n </div>\n <div class=\"col-lg-9\">\n <span style=\"display: none\" class=\"editable-container\"></span>\n </div>\n </div>\n";
return "\n <div class=\"row\">\n <div class=\"col-lg-3\">\n \n <div style=\"width: 100%; position: relative\">\n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n </div>\n </div>\n <div class=\"col-lg-9\">\n <span style=\"display: none\" class=\"editable-container\"></span>\n </div>\n </div>\n";
};
var tmpl_selectBox = function tmpl_selectBox() {
@ -446,7 +446,7 @@ var tmpl_selectBox = function tmpl_selectBox() {
_ref2$preloaderTempla = _ref2.preloaderTemplate,
preloaderTemplate = _ref2$preloaderTempla === undefined ? "" : _ref2$preloaderTempla;
return " \n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u0414\u041E\u0411\u0410\u0412\u0418\u0422\u042C</button>\n";
return " \n " + preloaderTemplate + "\n <input class=\"select-box-search\" type=\"text\" placeholder=\"\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435/\u041F\u043E\u0438\u0441\u043A\">\n <button style=\"display: none\" class=\"button-add options\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n";
};
var tmpl_elementResult = function tmpl_elementResult(el, id, header) {
@ -468,7 +468,7 @@ var tmpl_selectBoxOptions = function tmpl_selectBoxOptions() {
};
var tmpl_selectBoxResults = function tmpl_selectBoxResults() {
return "\n <div class=\"select-box-results\">\n <div class=\"box-wrapper\">\n <div class=\"main-part\">\n <ul>\n </ul>\n </div>\n <div class=\"other-part\">\n <span class=\"other-header\">\u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439</span>\n <ul>\n </ul>\n </div>\n </div>\n <button class=\"button-add results\">\u0414\u041E\u0411\u0410\u0412\u0418\u0422\u042C</button>\n </div>\n";
return "\n <div class=\"select-box-results\">\n <div class=\"box-wrapper\">\n <div class=\"main-part\">\n <ul>\n </ul>\n </div>\n <div class=\"other-part\">\n <span class=\"other-header\">\u0418\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439</span>\n <ul>\n </ul>\n </div>\n </div>\n <button class=\"button-add results\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n </div>\n";
};
var htmlTemplate = function htmlTemplate(_ref4) {

@ -7,7 +7,7 @@ const tmpl_selectBoxEditCont = ({preloaderTemplate = ""}={}) =>
<div style="width: 100%; position: relative">
${preloaderTemplate}
<input class="select-box-search" type="text" placeholder="Выберите/Поиск">
<button style="display: none" class="button-add options">ДОБАВИТЬ</button>
<button style="display: none" class="button-add options">ПРИМЕНИТЬ</button>
</div>
</div>
<div class="col-lg-9">
@ -20,7 +20,7 @@ const tmpl_selectBox = ({preloaderTemplate = ""}={}) =>
`
${preloaderTemplate}
<input class="select-box-search" type="text" placeholder="Выберите/Поиск">
<button style="display: none" class="button-add options">ДОБАВИТЬ</button>
<button style="display: none" class="button-add options">ПРИМЕНИТЬ</button>
`;
const tmpl_elementResult = (el, id, header) =>
@ -59,7 +59,7 @@ const tmpl_selectBoxResults = () =>
</ul>
</div>
</div>
<button class="button-add results">ДОБАВИТЬ</button>
<button class="button-add results">ПРИМЕНИТЬ</button>
</div>
`;

@ -7,7 +7,7 @@ $(function () {
function createFilterSpecs(url) {
// SPECIALIZATIONS FILTER
let sb_main = new TreeSelect($('#select-box-1'), {url, hasEditableContainer: true});
sb_main.setHeader("Специализации");
sb_main.setHeader("Специальность");
let select_container = new SelectedContainer($('#selected-spec'), {obj: sb_main});
sb_main.connectSelectedContainer(select_container);
let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main});

@ -1,15 +1,15 @@
$(function () {
let $buttonF1 = $('.resButton');
if ($('.slide').hasClass("active")) $buttonF1.css('transform', 'rotate(180deg)');
if ($('.slide').hasClass("active")) $buttonF1.css('transform', 'rotate(0deg)');
$buttonF1.on("click", function (e) {
e.preventDefault();
let $slide = $('.slide');
if ($slide.hasClass("active")) {
$buttonF1.css('transform', 'rotate(0deg)');
$buttonF1.css('transform', 'rotate(180deg)');
$slide.slideUp(300);
} else {
$buttonF1.css('transform', 'rotate(180deg)');
$buttonF1.css('transform', 'rotate(0deg)');
$slide.slideDown(300);
}
$slide.toggleClass("active");

@ -53,6 +53,8 @@ body {
}
.resButton {
position: relative;
top: -15px;
width: 50px;
height: 50px;
background-color: white;
@ -62,10 +64,12 @@ body {
font-size: 16px;
float: left;
border-radius: 100%;
margin: -15px 20px 0 28px;
/* margin: -15px 20px 0 28px; */
margin-left: 25px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
transform: rotate(180deg);
}
button.resButton:focus {
@ -76,9 +80,9 @@ button.resButton:focus {
display: flex;
}
.flex .header {
padding-right: 10px;
}
/*.flex .header {*/
/*padding-right: 10px;*/
/*}*/
.header .fa {
padding-left: 3px;
@ -90,7 +94,7 @@ button.resButton:focus {
.border {
flex: 1 1 auto;
float: left;
margin: 10px 0 0 0;
margin: 10px 0 0 25px;
border-top: 1px solid #CFCFCF;
}

@ -1,7 +1,6 @@
<form id="filter-form" action="/projects" method="GET" novalidate xmlns="http://www.w3.org/1999/html">
<div class="filter form-container">
{# <div id="page-preloader"><span class="spinner"></span></div>#}
<div class="triangle1"></div>
<div class="row">
<div class="col-lg-12">
@ -72,8 +71,7 @@
<div class="col-lg-12">
<div class="flex">
<span class="header">Расширенные поля</span>
{# style = "..." Костыль для выравнивания разделяющих линий #}
<button class="resButton" style="margin-right: 80px">
<button class="resButton">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</button>
<div class="border"></div>

Loading…
Cancel
Save