From 65e9190773b3dcda423cd5dec4ed06415a98bfa7 Mon Sep 17 00:00:00 2001
From: booblegum <booblegum42@gmail.com>
Date: Wed, 28 Dec 2016 12:54:48 +0300
Subject: [PATCH] =?UTF-8?q?PR-62=20=D0=9C=D0=BE=D0=B4=D0=B8=D1=84=D0=B8?=
 =?UTF-8?q?=D0=BA=D0=B0=D1=86=D0=B8=D1=8F=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B?=
 =?UTF-8?q?=20=D0=B7=D0=B0=D0=BF=D0=BE=D0=BB=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D1=80=D1=82=D1=84=D0=BE=D0=BB=D0=B8=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

in process...
---
 assets/js/build/create_worksell.js            |    1 +
 .../js/build/init_customer_project_create.js  |    1 -
 assets/js/build/init_portfolio_create_edit.js | 1861 +++++++++++++++++
 assets/js/build/portfolio_create_edit.js      |  273 +++
 assets/js/src/init_portfolio_create_edit.js   |  148 ++
 assets/js/src/portfolio_create_edit.js        |   11 +
 assets/js/src/seeds/image_upload.js           |    1 +
 assets/sass/components/custom-components.sass |    5 +-
 projects/forms.py                             |   28 +
 .../0053_portfolio_specializations.py         |   22 +
 projects/models.py                            |   20 +-
 .../{ => _trash}/portfolio_create.html        |    0
 .../customer_project_create_or_edit.html      |    9 +-
 projects/templates/portfolio_create_edit.html |  181 ++
 projects/urls.py                              |    9 +-
 projects/views.py                             |  180 +-
 users/templates/contractor_profile.html       |    3 +-
 webpack.config.js                             |    5 +-
 work_sell/templates/worksell_create.html      |   10 +-
 work_sell/views.py                            |   10 +-
 20 files changed, 2679 insertions(+), 99 deletions(-)
 create mode 100644 assets/js/build/init_portfolio_create_edit.js
 create mode 100644 assets/js/build/portfolio_create_edit.js
 create mode 100644 assets/js/src/init_portfolio_create_edit.js
 create mode 100644 assets/js/src/portfolio_create_edit.js
 create mode 100644 projects/migrations/0053_portfolio_specializations.py
 rename projects/templates/{ => _trash}/portfolio_create.html (100%)
 create mode 100644 projects/templates/portfolio_create_edit.html

diff --git a/assets/js/build/create_worksell.js b/assets/js/build/create_worksell.js
index 24e8a41..9e1dbbd 100644
--- a/assets/js/build/create_worksell.js
+++ b/assets/js/build/create_worksell.js
@@ -362,6 +362,7 @@
 	        $btn.closest('.file-upload-widget').remove();
 	    });
 	} //TODO: оформить Upload'еры в виде классов
+	//require: <script src='{% static "my-libs.js" %}'></script>
 	exports.imageUploadInit = imageUploadInit;
 	// export {imageUploadInit, previewImg}
 
diff --git a/assets/js/build/init_customer_project_create.js b/assets/js/build/init_customer_project_create.js
index 7ebba90..8a88ea6 100644
--- a/assets/js/build/init_customer_project_create.js
+++ b/assets/js/build/init_customer_project_create.js
@@ -179,7 +179,6 @@
 	            }
 	        });
 	        select_realty.on("add", function (args) {
-	            console.log("realty add");
 	            //TODO: Костыли!!!
 	            $('#checkbox-sb-realty').prop("checked", true);
 	            sb_realty.show();
diff --git a/assets/js/build/init_portfolio_create_edit.js b/assets/js/build/init_portfolio_create_edit.js
new file mode 100644
index 0000000..aaffb17
--- /dev/null
+++ b/assets/js/build/init_portfolio_create_edit.js
@@ -0,0 +1,1861 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _SelectedContainer = __webpack_require__(17);
+
+	var _SelectedContainer2 = _interopRequireDefault(_SelectedContainer);
+
+	var _SelectedContainerCreate = __webpack_require__(21);
+
+	var _SelectedContainerCreate2 = _interopRequireDefault(_SelectedContainerCreate);
+
+	var _NoTreeSelect = __webpack_require__(22);
+
+	var _NoTreeSelect2 = _interopRequireDefault(_NoTreeSelect);
+
+	var _TreeSelect = __webpack_require__(24);
+
+	var _TreeSelect2 = _interopRequireDefault(_TreeSelect);
+
+	var _SelectOrCreate = __webpack_require__(26);
+
+	var _SelectOrCreate2 = _interopRequireDefault(_SelectOrCreate);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	$(function () {
+	    function createSpecs(url) {
+	        // SPECIALIZATIONS  
+	        var sb_main = new _TreeSelect2.default($('#select-box-1'), { url: url, visible: true, required: true });
+	        // 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 });
+	        var sb_2 = new _TreeSelect2.default($('#select-box-3'), { obj: sb_main });
+	        var sb_3 = new _TreeSelect2.default($('#select-box-4'), { obj: sb_main });
+	        var sb_4 = new _TreeSelect2.default($('#select-box-5'), { obj: sb_main });
+
+	        // select_container.on("add", () => {
+	        //     let $container = $('#spec-value');
+	        //     $container.html($('#selected-spec').find(".selected-element").find(".name").html());
+	        // });
+
+	        sb_main.setNearbySelectBox(sb_1);
+	        sb_1.setNearbySelectBox(sb_2, sb_main);
+	        sb_2.setNearbySelectBox(sb_3, sb_1);
+	        sb_3.setNearbySelectBox(sb_4, sb_2);
+	        sb_4.setNearbySelectBox("", sb_3);
+	    }
+
+	    function createBuildingClass(url) {
+	        // BUILDING-CLASSIFICATION  
+	        sb_build_main = new _TreeSelect2.default($('#sb-building-classification'), { url: url, visible: true });
+	        sb_build_main.setHeader("Классификация здания");
+
+	        var sb_build_1 = new _TreeSelect2.default($('#sb-building-sub-classification'), { obj: sb_build_main });
+
+	        var select_build_container = new _SelectedContainer2.default($('#selected-building-classification'), {
+	            obj: sb_build_main,
+	            onlyOne: true
+	        });
+	        sb_build_main.connectSelectedContainer(select_build_container);
+
+	        sb_build_main.setNearbySelectBox(sb_build_1);
+	        sb_build_1.setNearbySelectBox("", sb_build_main);
+	    }
+
+	    function createConstructionType(url) {
+	        sb_constr_main = new _NoTreeSelect2.default($('#sb-construction-type'), { url: url, visible: true });
+	        sb_constr_main.setHeader("Вид строительства");
+	        var select_constr_type = new _SelectedContainer2.default($('#selected-construction-type'), {
+	            obj: sb_constr_main,
+	            noTree: true,
+	            onlyOne: true
+	        });
+	        sb_constr_main.connectSelectedContainer(select_constr_type);
+	    }
+
+	    function createLocations(url) {
+	        sb_loc_main = new _TreeSelect2.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 });
+
+	        sb_loc_main.setNearbySelectBox(sb_loc_1);
+	        sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main);
+	        sb_loc_2.setNearbySelectBox("", sb_loc_1);
+	    }
+
+	    function createRealty(url) {
+	        var sb_realty = new _SelectOrCreate2.default($('#sb-realty'), { url: url, visible: true });
+	        sb_realty.setHeader(" ");
+	        var select_realty = new _SelectedContainerCreate2.default($('#selected-realty'), {
+	            obj: sb_realty,
+	            noTree: true,
+	            onlyOne: true,
+	            noHeader: true
+	        });
+	        sb_realty.connectSelectedContainer(select_realty);
+	        sb_realty.setLinkBoxes([sb_loc_main, sb_constr_main, sb_build_main]);
+	        select_realty.on("add", function () {
+	            $('#checkbox-sb-realty').attr("disabled", true);
+	        });
+	        select_realty.on("remove", function () {
+	            $('#checkbox-sb-realty').attr("disabled", false);
+	        });
+	        sb_realty.dataPromise.then(function () {
+	            var $realty = $('#sb-realty');
+	            var check = $('#checkbox-sb-realty');
+	            if (!check.prop("checked")) {
+	                $realty.hide();
+	            }
+	        });
+	        var sb_realty_top = new _NoTreeSelect2.default($('#sb-realty-top'), { url: url, visible: true });
+	        sb_realty_top.setHeader("Объект");
+	        sb_realty_top.connectSelectedContainer(select_realty);
+	        sb_realty_top.dataPromise.then(function () {
+	            if (!sb_realty_top.dataTree.data.length) {
+	                sb_realty_top.hide();
+	            } else {
+	                var id = window.location.hash.replace("#", "");
+	                if (id) sb_realty_top.setElementById(id);
+	            }
+	        });
+	        select_realty.on("add", function (args) {
+	            //TODO: Костыли!!!
+	            $('#checkbox-sb-realty').prop("checked", true);
+	            sb_realty.show();
+	            var id = args[0];
+	            if (id.text) return;
+	            var el = sb_realty.dataTree.getElementById(id);
+	            sb_realty_top.dataPromise.then(function () {
+	                sb_realty_top.$searchInput.val(el.name);
+	                sb_realty_top.selectedEl.id = id;
+	                sb_realty_top.selectedEl.value = el.name;
+	            });
+
+	            sb_realty.selectedEl.id = id;
+	            sb_realty._fillBoxes();
+	        });
+	    }
+
+	    var sb_loc_main = void 0,
+	        sb_constr_main = void 0,
+	        sb_build_main = void 0;
+	    // Тип работы
+	    createSpecs('/api/specializations_flat');
+	    // Классификация здания
+	    createBuildingClass('/api/building_classifications');
+	    // createConstructionType('/api/construction_type');
+	    // createLocations('/api/locations_flat');
+
+	    // createRealty('/api/realties/current_user')
+	});
+	// import SingleTreeSelect from 'components/SingleTreeSelect'
+
+/***/ },
+/* 1 */,
+/* 2 */,
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */,
+/* 8 */,
+/* 9 */,
+/* 10 */,
+/* 11 */,
+/* 12 */,
+/* 13 */,
+/* 14 */,
+/* 15 */,
+/* 16 */,
+/* 17 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'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 _desc, _value, _class; // `
+
+
+	var _DataTree = __webpack_require__(18);
+
+	var _DataTree2 = _interopRequireDefault(_DataTree);
+
+	var _NoTreeData = __webpack_require__(19);
+
+	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
+
+	var _decorators = __webpack_require__(20);
+
+	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" style="' + (header ? '' : 'display:flex; align-items: center;') + '">\n                <div class="' + (header ? '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 = (_class = function () {
+	    function SelectedContainer($container, _ref) {
+	        var _this = this;
+
+	        var obj = _ref.obj,
+	            _ref$noTree = _ref.noTree,
+	            noTree = _ref$noTree === undefined ? false : _ref$noTree,
+	            _ref$noHeader = _ref.noHeader,
+	            noHeader = _ref$noHeader === undefined ? false : _ref$noHeader,
+	            _ref$onlyOne = _ref.onlyOne,
+	            onlyOne = _ref$onlyOne === undefined ? false : _ref$onlyOne;
+
+	        _classCallCheck(this, SelectedContainer);
+
+	        // TODO: rename variables to camelCase
+	        this.$self = $container;
+	        this.elements_id = []; // [spec_id, spec_id, ...]
+	        this.onlyOne = onlyOne;
+	        this.options = { noHeader: noHeader };
+	        var self = this;
+	        this.$self.hide();
+
+	        obj.dataPromise.then(function (data) {
+	            data = data.results ? data.results : data;
+	            _this.dataTree = noTree ? new _NoTreeData2.default(data) : new _DataTree2.default(data);
+	            _this.$input = _this.$self.find('input[type="hidden"]');
+	            if (_this.$input.length == 0) throw new URIError('input for ' + _this.$self.attr("class") + ' not found');
+
+	            _this.restoreElements();
+	        }).catch(self._onLoadDataError.bind(self));
+	    }
+
+	    _createClass(SelectedContainer, [{
+	        key: 'restoreElements',
+	        value: function restoreElements() {
+	            var self = this;
+	            if (this.$input && this.$input.val()) {
+
+	                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(id) {
+	            var index = this.elements_id.indexOf(id);
+	            if (index >= 0) {
+	                this.elements_id.splice(index, 1);
+	            }
+	            this.$self.find('span[data-id=\'' + id + '\']').parents('.selected-element').remove();
+	        }
+	    }, {
+	        key: '_onLoadDataError',
+	        value: function _onLoadDataError(error) {
+	            console.log("Error loading data -->", error);
+	        }
+	    }, {
+	        key: 'removeAll',
+	        value: function removeAll() {
+	            var _iteratorNormalCompletion = true;
+	            var _didIteratorError = false;
+	            var _iteratorError = undefined;
+
+	            try {
+	                for (var _iterator = this.elements_id[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                    var id = _step.value;
+
+	                    this._removeById(id);
+	                }
+	            } catch (err) {
+	                _didIteratorError = true;
+	                _iteratorError = err;
+	            } finally {
+	                try {
+	                    if (!_iteratorNormalCompletion && _iterator.return) {
+	                        _iterator.return();
+	                    }
+	                } finally {
+	                    if (_didIteratorError) {
+	                        throw _iteratorError;
+	                    }
+	                }
+	            }
+	        }
+	    }, {
+	        key: 'remove',
+	        value: function remove(e) {
+	            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) {
+	            var id = Number(_id);
+	            if (this.elements_id.length > 1) throw new RangeError("Replace error: more than one element");
+	            // Remove old
+	            this._removeById(this.elements_id[0]);
+	            //Add new
+	            this._addElementToHtml(id, max_len);
+	            this.elements_id = [id];
+	        }
+	    }, {
+	        key: '_addElementToHtml',
+	        value: function _addElementToHtml(id, max_len) {
+	            var self = this;
+	            var header = SelectedContainer.getHeader(this.dataTree.getSpecChain(id), "", max_len);
+	            var name = this.dataTree.getElementById(id).name;
+	            this.elements_id.push(id);
+	            if (this.$input) this.$input.val(this.elements_id.join(','));
+	            // console.log("header = ", header);
+	            this.$self.append(SelectedContainer.getTemplate(header || (this.options.noHeader ? "" : "&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',
+	        value: function add(_id, max_len) {
+	            var id = Number(_id);
+	            var el = this.dataTree.getElementById(id);
+	            if (!el) {
+	                throw new Error('\u042D\u043B\u0435\u043C\u0435\u043D\u0442 \u0441 id = ' + _id + ' \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u0438 \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u0431\u044B\u0442\u044C \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D');
+	            }
+	            var self = this;
+	            if (this.onlyOne) {
+	                this.replace(_id, max_len);
+	                return;
+	            }
+
+	            var has_already = this.elements_id.filter(function (el) {
+	                return self.dataTree.isChild(el, id);
+	            });
+
+	            if (has_already.length || this.elements_id.indexOf(Number(id)) != -1) {
+	                //TODO: do popup messages
+	                return;
+	            }
+
+	            var not_valid = this.elements_id.filter(function (el) {
+	                return self.dataTree.isChild(id, el);
+	            });
+
+	            not_valid.forEach(function (el) {
+	                self._removeById(el);
+	            });
+	            this._addElementToHtml(id, max_len);
+	        }
+	    }], [{
+	        key: 'getTemplate',
+	        value: function getTemplate(header, name, id) {
+	            return tmpl_selectedElement(header, name, id);
+	        }
+	    }, {
+	        key: 'getHeader',
+	        value: function getHeader(spec_chain, separator, max_len) {
+	            function toShortString(string, max_len) {
+	                return string.slice(0, max_len) + (string.length > max_len ? "..." : "");
+	            }
+
+	            separator = separator || ' / ';
+	            var str_chain = "";
+
+	            spec_chain.forEach(function (el) {
+	                str_chain = (max_len ? toShortString(el.name, max_len) : el.name) + (str_chain ? separator : "") + str_chain;
+	            });
+
+	            return str_chain;
+	        }
+	    }]);
+
+	    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;
+
+/***/ },
+/* 18 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	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; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var Node = function Node(data, tree) {
+	    _classCallCheck(this, Node);
+
+	    this.name = data.name;
+	    this.id = data.id;
+	    if (data.parent === null) {
+	        this.parent = "root";
+	        data.parent = { id: "root" };
+	        this.name = "";
+	    }
+	    if (data.parent.id && data.parent.id !== 'root') {
+	        var el = tree._getElementById(data.parent.id);
+	        this.parent = el.node || new Node(el, tree);
+	    }
+	    data.node = this;
+	    this.children = data.children.map(function (el_obj) {
+	        var el = tree._getElementById(el_obj.id);
+	        if (el.node) return el.node;
+	        el.node = new Node(el, tree);
+	        return el.node;
+	    });
+
+	    this.children = this.children || [];
+	};
+
+	var DataTree = function () {
+	    function DataTree(data) {
+	        _classCallCheck(this, DataTree);
+
+	        this.baseData = data;
+	        this._root = new Node(data[0], this);
+	    }
+
+	    /**
+	     * получить element в базовой структуре
+	     */
+
+
+	    _createClass(DataTree, [{
+	        key: "_getElementById",
+	        value: function _getElementById(id) {
+	            for (var i = 0; i < this.baseData.length; i++) {
+	                if (this.baseData[i].id == id) return this.baseData[i];
+	            }
+	        }
+
+	        /**
+	         * получить element в дереве
+	         */
+
+	    }, {
+	        key: "getElementById",
+	        value: function getElementById(id) {
+	            function searchInChildren(children) {
+	                for (var i = 0; i < children.length; i++) {
+	                    if (children[i].id == id) return children[i];
+	                    var res = searchInChildren(children[i].children);
+	                    if (res) return res;
+	                }
+	            }
+
+	            return searchInChildren(this._root.children);
+	        }
+
+	        /**
+	         * Является ли узел c el_id дочерним для parent_id
+	         * @param el_id
+	         * @param parent_id
+	         */
+
+	    }, {
+	        key: "isChild",
+	        value: function isChild(elId, parent_id) {
+	            function checkParent(el, parent) {
+	                if (el.parent == parent) return true;
+	                if (el.parent && el.parent != 'root') return checkParent(el.parent, parent);
+	                return false;
+	            }
+	            return checkParent(this.getElementById(elId), this.getElementById(parent_id));
+	        }
+	    }, {
+	        key: "hasChildren",
+	        value: function hasChildren(elId) {
+	            return this.getElementById(elId).children.length ? true : false;
+	        }
+
+	        /**
+	         * @param start_parent_id(number) - начиная с
+	         * @param attached(bool) - включая вложенные/дочерние
+	         * @param exclude_id - исключая узел c exclude_id и всеми его вложенными узлами
+	         * @returns [{name, id}, ...]
+	         */
+
+	    }, {
+	        key: "dataToList",
+	        value: function dataToList(start_parent_id, attached, exclude_id) {
+	            var data_list = [];
+
+	            function goInChildren(children) {
+	                for (var i = 0; i < children.length; i++) {
+	                    if (children[i].id == exclude_id) continue;
+	                    data_list.push({ name: children[i].name, id: children[i].id });
+	                    if (attached) goInChildren(children[i].children);
+	                }
+	            }
+	            var start = start_parent_id ? this.getElementById(start_parent_id) : this._root;
+	            goInChildren(start.children);
+	            return data_list;
+	        }
+
+	        /**
+	         *
+	         * @param id
+	         * @param incl(bool) - исключая сам элемент
+	         * @returns {Array} всех узлов/элементов от элемента с id до корня
+	         */
+
+	    }, {
+	        key: "getSpecChain",
+	        value: function getSpecChain(id) {
+	            var incl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+	            var chain = [];
+	            var el = this.getElementById(id);
+	            function getParent(el) {
+	                if (el.parent && el.parent != "root") {
+	                    chain.push(el.parent);
+	                    getParent(el.parent);
+	                }
+	            }
+	            getParent(el);
+	            if (incl) chain.unshift(el);
+	            return chain;
+	        }
+	    }]);
+
+	    return DataTree;
+	}();
+
+	exports.default = DataTree;
+
+/***/ },
+/* 19 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	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; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var NoTreeData = function () {
+	    function NoTreeData(data) {
+	        _classCallCheck(this, NoTreeData);
+
+	        this.data = data;
+	        this.specChain = [];
+	    }
+
+	    _createClass(NoTreeData, [{
+	        key: "getElementById",
+	        value: function getElementById(id) {
+	            for (var i = 0; i < this.data.length; i++) {
+	                if (this.data[i].id == id) return this.data[i];
+	            }
+	        }
+	    }, {
+	        key: "getSpecChain",
+	        value: function getSpecChain(id, incl) {
+	            return this.specChain;
+	        }
+	    }, {
+	        key: "isChild",
+	        value: function isChild(el_id, parent_id) {
+	            return false;
+	        }
+	    }, {
+	        key: "hasChildren",
+	        value: function hasChildren() {
+	            return false;
+	        }
+	    }, {
+	        key: "dataToList",
+	        value: function dataToList() {
+	            return this.data;
+	        }
+	    }]);
+
+	    return NoTreeData;
+	}();
+
+	exports.default = NoTreeData;
+
+/***/ },
+/* 20 */
+/***/ function(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);
+	        // console.log("args -->", args.slice());
+	        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 && 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)(args);
+	            }
+	        } catch (err) {
+	            _didIteratorError2 = true;
+	            _iteratorError2 = err;
+	        } finally {
+	            try {
+	                if (!_iteratorNormalCompletion2 && _iterator2.return) {
+	                    _iterator2.return();
+	                }
+	            } finally {
+	                if (_didIteratorError2) {
+	                    throw _iteratorError2;
+	                }
+	            }
+	        }
+
+	        return this;
+	    };
+	}
+
+	// export {onBind};
+
+/***/ },
+/* 21 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _desc, _value, _class;
+
+	var _SelectedContainer2 = __webpack_require__(17);
+
+	var _SelectedContainer3 = _interopRequireDefault(_SelectedContainer2);
+
+	var _decorators = __webpack_require__(20);
+
+	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 _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; }
+
+	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;
+	}
+
+	/**
+	 * Контэйнер - позволяющий принимать/отправлять новый объект для создания
+	 */
+	//TODO: попробовать реализовать как Mixin
+	var SelectedContainerCreate = (_class = function (_SelectedContainer) {
+	    _inherits(SelectedContainerCreate, _SelectedContainer);
+
+	    function SelectedContainerCreate() {
+	        _classCallCheck(this, SelectedContainerCreate);
+
+	        return _possibleConstructorReturn(this, (SelectedContainerCreate.__proto__ || Object.getPrototypeOf(SelectedContainerCreate)).apply(this, arguments));
+	    }
+
+	    _createClass(SelectedContainerCreate, [{
+	        key: 'add',
+	        value: function add(_id, max_len) {
+	            console.log("_id = ", _id);
+	            var self = this;
+	            if (_id.text) {
+	                this._removeById(this.elements_id[0]);
+	                this.elements_id = [0];
+	                this.$input_id = this.$self.find('input[type="hidden"].-id');
+	                this.$input_id.val("");
+	                this.$input_name = this.$self.find('input[type="hidden"].-name');
+	                this.$input_name.val(_id.text);
+	                this.$self.append(_SelectedContainer3.default.getTemplate("", _id.text, 0));
+	                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();
+	                return;
+	            }
+	            _get(SelectedContainerCreate.prototype.__proto__ || Object.getPrototypeOf(SelectedContainerCreate.prototype), 'add', this).call(this, _id, max_len);
+	        }
+	    }]);
+
+	    return SelectedContainerCreate;
+	}(_SelectedContainer3.default), (_applyDecoratedDescriptor(_class.prototype, 'add', [_decorators2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'add'), _class.prototype)), _class);
+	exports.default = SelectedContainerCreate;
+
+/***/ },
+/* 22 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _AbsBaseSelect2 = __webpack_require__(23);
+
+	var _NoTreeData = __webpack_require__(19);
+
+	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
+
+	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 NoTreeSelect = function (_AbsBaseSelect) {
+	    _inherits(NoTreeSelect, _AbsBaseSelect);
+
+	    function NoTreeSelect($container, _ref) {
+	        var url = _ref.url,
+	            obj = _ref.obj,
+	            _ref$visible = _ref.visible,
+	            visible = _ref$visible === undefined ? true : _ref$visible,
+	            _ref$required = _ref.required,
+	            required = _ref$required === undefined ? false : _ref$required;
+
+	        _classCallCheck(this, NoTreeSelect);
+
+	        //TODO: сделать автоматическую передачу всех параметров родителю
+	        return _possibleConstructorReturn(this, (NoTreeSelect.__proto__ || Object.getPrototypeOf(NoTreeSelect)).call(this, $container, { url: url, obj: obj, visible: visible, required: required }));
+	    }
+
+	    _createClass(NoTreeSelect, [{
+	        key: '_buildComponents',
+	        value: function _buildComponents(data) {
+	            _get(NoTreeSelect.prototype.__proto__ || Object.getPrototypeOf(NoTreeSelect.prototype), '_buildComponents', this).call(this, data);
+	            this.dataTree = this.dataTree || new _NoTreeData2.default(data.results || data);
+	            this.$buttonAddOptions.hide();
+	            this._fillOptionsData();
+	            this._bindEvents();
+	        }
+	    }, {
+	        key: '_onclickOptionsElement',
+	        value: function _onclickOptionsElement(e) {
+	            _get(NoTreeSelect.prototype.__proto__ || Object.getPrototypeOf(NoTreeSelect.prototype), '_onclickOptionsElement', this).call(this, e);
+	            this.clear();
+	            var id = $(e.target).data("id");
+	            this.selectedContainer.add(id);
+	            e.preventDefault();
+	            return false;
+	        }
+	    }, {
+	        key: '_onButtonAddOptions',
+	        value: function _onButtonAddOptions(e) {
+	            //    pass
+	        }
+	    }]);
+
+	    return NoTreeSelect;
+	}(_AbsBaseSelect2.AbsBaseSelect);
+
+	exports.default = NoTreeSelect;
+
+/***/ },
+/* 23 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+
+	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; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	//TEMPLATES `
+	var tmpl_selectBoxEditCont = function tmpl_selectBoxEditCont() {
+	    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+	        _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\">\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() {
+	    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+	        _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\" value=\"\">\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) {
+	    return "<li><label>\n        <input type=\"checkbox\" data-id=\"" + id + "\">" + el + "\n        <div class=\"header\">" + header + "</div>\n    </label></li>";
+	};
+
+	var tmpl_elementOption = function tmpl_elementOption(el) {
+	    return "<li data-id=\"" + el.id + "\">" + el.name + "</li>";
+	};
+
+	var tmpl_plug = function tmpl_plug(_ref3) {
+	    var header = _ref3.header,
+	        selectBox = _ref3.selectBox;
+	    return htmlTemplate({ header: header, selectBox: selectBox });
+	};
+
+	var tmpl_selectBoxOptions = function tmpl_selectBoxOptions() {
+	    return "\n    <div class=\"select-box-options\">\n        <div class=\"box-wrapper\">\n            <ul>\n            \n            </ul>\n        </div>\n    </div>\n";
+	};
+
+	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        <div style=\"padding-top: 5px\">\n        <button class=\"button-add results\">\u041F\u0420\u0418\u041C\u0415\u041D\u0418\u0422\u042C</button>\n        </div>\n    </div>\n";
+	};
+
+	var htmlTemplate = function htmlTemplate(_ref4) {
+	    var header = _ref4.header,
+	        selectBox = _ref4.selectBox,
+	        _ref4$required = _ref4.required,
+	        required = _ref4$required === undefined ? false : _ref4$required,
+	        _ref4$id = _ref4.id,
+	        id = _ref4$id === undefined ? "" : _ref4$id,
+	        _ref4$classes = _ref4.classes,
+	        classes = _ref4$classes === undefined ? "" : _ref4$classes,
+	        _ref4$tmpl_selectBoxO = _ref4.tmpl_selectBoxOptions,
+	        tmpl_selectBoxOptions = _ref4$tmpl_selectBoxO === undefined ? function () {
+	        return "";
+	    } : _ref4$tmpl_selectBoxO,
+	        _ref4$tmpl_selectBoxR = _ref4.tmpl_selectBoxResults,
+	        tmpl_selectBoxResults = _ref4$tmpl_selectBoxR === undefined ? function () {
+	        return "";
+	    } : _ref4$tmpl_selectBoxR;
+	    return "\n<div class=\"select-box-container " + classes + "\" id=\"" + id + "\">\n    <div class=\"select-box-header\">\n        <div class=\"header\">" + header + "</div>\n         <i class=\"fa fa-question-circle-o\" aria-hidden=\"true\" title=\"bla-bla-bla...\"></i>\n         " + (required ? '<span class="required">Обязательно</span>' : '') + "\n    </div>\n    <div class=\"select-box-search\">\n        " + selectBox + "\n    </div>\n    \n    " + tmpl_selectBoxOptions() + "\n    " + tmpl_selectBoxResults() + "\n    <span style=\"clear: both\"></span>\n</div>\n";
+	};
+	var tmpl_light = function tmpl_light(el) {
+	    return "<span class=\"highlight\">" + el + "</span>";
+	};
+
+	var tmpl_preloader = function tmpl_preloader() {
+	    return "<div id=\"component-preloader\"><span class=\"spinner\"></span></div>";
+	};
+
+	var AbsBaseSelect = function () {
+	    function AbsBaseSelect($container, _ref5) {
+	        var url = _ref5.url,
+	            obj = _ref5.obj,
+	            _ref5$hasEditableCont = _ref5.hasEditableContainer,
+	            hasEditableContainer = _ref5$hasEditableCont === undefined ? false : _ref5$hasEditableCont,
+	            _ref5$visible = _ref5.visible,
+	            visible = _ref5$visible === undefined ? false : _ref5$visible,
+	            _ref5$required = _ref5.required,
+	            required = _ref5$required === undefined ? false : _ref5$required;
+
+	        _classCallCheck(this, AbsBaseSelect);
+
+	        if (new.target === AbsBaseSelect) {
+	            throw new TypeError("Cannot construct Abstract instances directly");
+	        }
+	        if (obj && url) {
+	            throw new URIError("Must be either the date or url");
+	        }
+
+	        var self = this;
+	        //TODO: проверка наличия id контейнера
+	        this.containerId = $container.attr("id");
+	        this.$container = $container;
+	        this.hasEditableContainer = hasEditableContainer;
+	        this.visible = visible;
+	        this.required = required;
+	        // Быстрая заглушка, до отображения данных
+	        if (visible) {
+	            var preloaderTemplate = tmpl_preloader();
+	            var selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont({ preloaderTemplate: preloaderTemplate }) : tmpl_selectBox({ preloaderTemplate: preloaderTemplate });
+	            var plugTemplate = tmpl_plug({ header: "Loading...", selectBox: selectBox });
+	            $container.html(plugTemplate);
+
+	            this.$preloader = $container.find('#component-preloader');
+	            this.$spinner = this.$preloader.find('.spinner');
+	        }
+	        if (url) {
+	            this.dataPromise = this.getData(url);
+	            //TODO: дописать нормальную обработку url
+	            this.type = url.split("/")[2];
+	        }
+	        var _dataPromise = void 0;
+	        if (url) {
+	            _dataPromise = this.dataPromise;
+	        } else {
+	            _dataPromise = obj.dataPromise;
+	        }
+	        // if (dataTree) this.dataTree = dataTree;
+	        _dataPromise.then(self._buildComponents.bind(self)).catch(self._onLoadDataError.bind(self));
+
+	        //  INIT EMPTY PROP
+	        this.selectedEl = { id: undefined, value: undefined };
+	        this.parentId = undefined;
+	    }
+
+	    _createClass(AbsBaseSelect, [{
+	        key: "getTemplate",
+	        value: function getTemplate(classes) {
+	            var selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont() : tmpl_selectBox();
+	            classes = classes ? classes.join(" ") : "";
+	            return htmlTemplate({
+	                header: "", selectBox: selectBox, required: this.required, id: this.containerId, classes: classes,
+	                tmpl_selectBoxOptions: tmpl_selectBoxOptions, tmpl_selectBoxResults: tmpl_selectBoxResults
+	            });
+	        }
+	    }, {
+	        key: "getData",
+	        value: function getData(url) {
+	            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+	            var self = this;
+	            return Promise.resolve($.ajax({
+	                url: url,
+	                dataType: 'json',
+	                data: data
+	            }));
+	        }
+	    }, {
+	        key: "hidePreloader",
+	        value: function hidePreloader() {
+	            // console.log("hide preloader ", this.$preloader);
+	            this.$spinner.fadeOut();
+	            return Promise.resolve(this.$preloader.delay(500).fadeOut(2000));
+	        }
+	    }, {
+	        key: "clear",
+	        value: function clear() {
+	            this.$searchInput.val("");
+	            this.$optionsBox.hide();
+	            this.$resultsBox.hide();
+	            this.$buttonAdd.hide();
+	            this.$buttonAddOptions.hide();
+	            this.selectedEl = { id: undefined, value: undefined };
+	            if (this.hasEditableContainer) {
+	                this.$editableContainer.html("");
+	                this.$editableContainer.hide();
+	            }
+	            this.$searchInput.removeClass("active");
+	        }
+	    }, {
+	        key: "hide",
+	        value: function hide() {
+	            this.$selectBox.hide();
+	        }
+	    }, {
+	        key: "show",
+	        value: function show() {
+	            this.$selectBox.show();
+	        }
+	    }, {
+	        key: "setHeader",
+	        value: function setHeader(header) {
+
+	            if (this.$header) {
+	                this.$header.find('.header').html(header);
+	                this.$header.show();
+	            } else {
+	                this.header = header;
+	            }
+	            // default hide
+	            // this.show();
+	        }
+	    }, {
+	        key: "setParent",
+	        value: function setParent(parentId) {
+	            this.parentId = parentId;
+	            this._fillOptionsData();
+	        }
+	    }, {
+	        key: "connectSelectedContainer",
+	        value: function connectSelectedContainer(selectedContainer) {
+	            this.selectedContainer = selectedContainer;
+	        }
+	    }, {
+	        key: "getIdsSelectedElements",
+	        value: function getIdsSelectedElements() {
+	            var allChecked = this.$resultsBox.find(":checked");
+	            return allChecked.map(function () {
+	                return $(this).data("id");
+	            });
+	        }
+	    }, {
+	        key: "updateEditableContainer",
+	        value: function updateEditableContainer(elId) {
+	            // Если нет контейнера для отображения ...
+	            if (this.$editableContainer.length) {
+	                var separator = ' / ';
+	                var chainHeader = AbsBaseSelect.getHeader(this.dataTree.getSpecChain(elId, true), { separator: separator });
+	                chainHeader = AbsBaseSelect.highlight(chainHeader, separator, true);
+	                var elTemplate = "<span class=\"\">" + chainHeader + "</span>";
+	                this.$editableContainer.html(elTemplate);
+	                this.$editableContainer.show();
+	                return;
+	            }
+	            //..., передаем отображение предыдущему selectBox
+	            if (this.prevSelectBox) this.prevSelectBox.updateEditableContainer(elId);
+	        }
+	    }, {
+	        key: "_buildComponents",
+	        value: function _buildComponents(data) {
+	            // AFTER PRELOAD
+	            // this.hidePreloader().then(() => console.log("END -)"));
+	            var classes = this.$container.attr('class');
+	            if (classes) classes = classes.split(/\s+/);
+	            var template = this.getTemplate(classes);
+	            this.$container.replaceWith(template);
+
+	            this.$selectBox = $("#" + this.containerId);
+	            this.$header = this.$selectBox.find('.select-box-header');
+	            this.$header.find('.header').html(this.header);
+	            if (!this.header) this.$header.hide();
+	            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: реализовать нормальное show/hide + visible
+	            if (!this.visible) this.hide();
+	            //    TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
+	        }
+	    }, {
+	        key: "_fillOptionsData",
+	        value: function _fillOptionsData() {
+	            var self = this;
+	            var dataList = this.dataTree.dataToList(this.parentId);
+	            var $container = this.$optionsBox.find('ul');
+	            $container.html("");
+	            var _iteratorNormalCompletion = true;
+	            var _didIteratorError = false;
+	            var _iteratorError = undefined;
+
+	            try {
+	                for (var _iterator = dataList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                    var el = _step.value;
+
+	                    $container.append($(tmpl_elementOption(el)));
+	                }
+	            } catch (err) {
+	                _didIteratorError = true;
+	                _iteratorError = err;
+	            } finally {
+	                try {
+	                    if (!_iteratorNormalCompletion && _iterator.return) {
+	                        _iterator.return();
+	                    }
+	                } finally {
+	                    if (_didIteratorError) {
+	                        throw _iteratorError;
+	                    }
+	                }
+	            }
+
+	            this.$selectBox.find('li').on("click", this._onclickOptionsElement.bind(self));
+	        }
+	    }, {
+	        key: "_search",
+	        value: function _search(_ref6) {
+	            var searchText = _ref6.searchText,
+	                _ref6$parentCategoryI = _ref6.parentCategoryId,
+	                parentCategoryId = _ref6$parentCategoryI === undefined ? null : _ref6$parentCategoryI,
+	                _ref6$attached = _ref6.attached,
+	                attached = _ref6$attached === undefined ? true : _ref6$attached,
+	                _ref6$excludeCategory = _ref6.excludeCategoryId,
+	                excludeCategoryId = _ref6$excludeCategory === undefined ? null : _ref6$excludeCategory;
+
+	            // :FORMAT spec_list [{name, id}, ...]
+	            var specList = this.dataTree.dataToList(parentCategoryId, attached, 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$attached = _ref7.attached,
+	                attached = _ref7$attached === undefined ? true : _ref7$attached,
+	                _ref7$excludeCategory = _ref7.excludeCategoryId,
+	                excludeCategoryId = _ref7$excludeCategory === undefined ? null : _ref7$excludeCategory;
+
+	            $container.html("");
+	            $('.other-part').show();
+	            var searchRes = this._search({ searchText: searchText, parentCategoryId: parentCategoryId, attached: attached, excludeCategoryId: excludeCategoryId });
+	            if (!searchRes.length) {
+	                if ($container.closest('div').hasClass('main-part')) {
+	                    $container.append('<li>Ничего не найдено</li>');
+	                    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;
+
+	            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 {
+	                    if (!_iteratorNormalCompletion2 && _iterator2.return) {
+	                        _iterator2.return();
+	                    }
+	                } finally {
+	                    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');
+	            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("mouseout", function (event) {
+	                var e = event.toElement || event.relatedTarget;
+	                if (e.parentNode == this || e == this) {
+	                    return;
+	                }
+	                $(this).find('.header').hide();
+	            });
+	        }
+	    }, {
+	        key: "setElementById",
+	        value: function setElementById(id) {
+	            var value = this.dataTree.getElementById(id).name;
+	            this.selectedEl.id = id;
+	            this.selectedEl.value = value;
+	            this.$searchInput.val(value);
+	            this.updateEditableContainer(id);
+	        }
+	    }, {
+	        key: "_onclickOptionsElement",
+	        value: function _onclickOptionsElement(e) {
+	            var id = $(e.target).data("id");
+	            this.setElementById(id);
+	            this.$buttonAddOptions.show();
+	            this.$optionsBox.hide();
+	        }
+	    }, {
+	        key: "_onButtonAddOptions",
+	        value: function _onButtonAddOptions(e) {
+	            this._addToSelectedContainer(this.selectedEl.id);
+	            this.clear();
+	            e.preventDefault();
+	            return false;
+	        }
+	    }, {
+	        key: "_onButtonAdd",
+	        value: function _onButtonAdd(e) {
+	            var self = this;
+
+	            this.getIdsSelectedElements().each(function () {
+	                self._addToSelectedContainer(this);
+	            });
+	            this.clear();
+	            e.preventDefault();
+	            return false;
+	        }
+	    }, {
+	        key: "_onLoadDataError",
+	        value: function _onLoadDataError(error) {
+	            console.log("Error loading data -->", error);
+	        }
+	    }, {
+	        key: "_addToSelectedContainer",
+	        value: function _addToSelectedContainer(id) {
+	            this.selectedContainer.add(id);
+	        }
+	    }, {
+	        key: "_onInput_searchInput",
+	        value: function _onInput_searchInput(e) {
+	            this._fillResultsData(this.$searchInput.val());
+	            this.$resultsBox.show();
+	            this.$optionsBox.hide();
+	        }
+	    }, {
+	        key: "_onClick_searchInput",
+	        value: function _onClick_searchInput(e) {
+	            this.$optionsBox.show();
+	            this.$resultsBox.hide();
+	            this.$searchInput.val("");
+	        }
+	    }, {
+	        key: "_bindEvents",
+	        value: function _bindEvents() {
+	            var self = this;
+	            $(document).click(function (event) {
+	                if ($(event.target).closest("#" + self.containerId).length) {
+	                    return;
+	                }
+	                self._looseFocus();
+	            });
+	            // RESULTS BOX
+	            this.$searchInput.on("input", this._onInput_searchInput.bind(self));
+	            // OPTIONS BOX
+	            this.$searchInput.on("click", this._onClick_searchInput.bind(self));
+
+	            this.$buttonAdd.on("click", this._onButtonAdd.bind(self));
+
+	            this.$buttonAddOptions.on("click", this._onButtonAddOptions.bind(self));
+	        }
+	    }, {
+	        key: "_looseFocus",
+	        value: function _looseFocus() {
+	            this.$resultsBox.hide();
+	            this.$optionsBox.hide();
+	            if (!this.selectedEl.id) {
+	                this.$searchInput.val("");
+	            } else {
+	                this.$searchInput.val(this.selectedEl.value);
+	            }
+	        }
+	    }], [{
+	        key: "getHeader",
+	        value: function getHeader(catChain, _ref8) {
+	            var _ref8$separator = _ref8.separator,
+	                separator = _ref8$separator === undefined ? " / " : _ref8$separator,
+	                _ref8$maxLen = _ref8.maxLen,
+	                maxLen = _ref8$maxLen === undefined ? 60 : _ref8$maxLen;
+
+	            function toShortString(string, maxLen) {
+	                return string.slice(0, maxLen) + (string.length > maxLen ? "..." : "");
+	            }
+
+	            var strChain = "";
+
+	            catChain.forEach(function (el) {
+	                strChain = (maxLen ? toShortString(el.name, maxLen) : el.name) + (strChain ? separator : "") + strChain;
+	            });
+
+	            return strChain;
+	        }
+	    }, {
+	        key: "highlight",
+	        value: function highlight(string, sub_string) {
+	            var lastIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+	            var index = lastIndex ? string.toLowerCase().lastIndexOf(sub_string.toLowerCase()) : string.toLowerCase().indexOf(sub_string.toLowerCase());
+	            if (index === -1) return string;
+	            var before = void 0,
+	                select = void 0,
+	                after = void 0;
+	            if (lastIndex) {
+	                var _ref9 = [string.slice(0, index), string.slice(index, string.length), ""];
+	                before = _ref9[0];
+	                select = _ref9[1];
+	                after = _ref9[2];
+	            } else {
+	                var _ref10 = [string.slice(0, index), string.slice(index, index + sub_string.length), string.slice(index + sub_string.length)];
+	                before = _ref10[0];
+	                select = _ref10[1];
+	                after = _ref10[2];
+	            }
+
+	            return "" + before + tmpl_light(select) + after;
+	        }
+	    }]);
+
+	    return AbsBaseSelect;
+	}();
+
+	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;
+
+/***/ },
+/* 24 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _AbsBaseSelect2 = __webpack_require__(23);
+
+	var _DataTree = __webpack_require__(18);
+
+	var _DataTree2 = _interopRequireDefault(_DataTree);
+
+	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 TreeSelect = function (_AbsBaseSelect) {
+	    _inherits(TreeSelect, _AbsBaseSelect);
+
+	    function TreeSelect() {
+	        _classCallCheck(this, TreeSelect);
+
+	        return _possibleConstructorReturn(this, (TreeSelect.__proto__ || Object.getPrototypeOf(TreeSelect)).apply(this, arguments));
+	    }
+
+	    _createClass(TreeSelect, [{
+	        key: 'setNearbySelectBox',
+	        value: function setNearbySelectBox(next, prev) {
+	            this.nextSelectBox = next;
+	            this.prevSelectBox = prev;
+	        }
+	    }, {
+	        key: 'clearAllNext',
+	        value: function clearAllNext() {
+	            this.clear();
+	            if (this.nextSelectBox) {
+	                this.nextSelectBox.hide();
+	                this.nextSelectBox.clearAllNext();
+	            }
+	        }
+	    }, {
+	        key: 'clearAllPrev',
+	        value: function clearAllPrev() {
+	            this.clear();
+	            if (this.prevSelectBox) {
+	                this.clear();
+	                this.hide();
+	                this.prevSelectBox.clearAllPrev();
+	            }
+	        }
+	    }, {
+	        key: '_buildComponents',
+	        value: function _buildComponents(data) {
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_buildComponents', this).call(this, data);
+	            //TODO: Изменять свойство visible при show/hide
+	            if (!this.visible) this.hide();
+	            if (this.hasEditableContainer) this.$editableContainer.hide();
+	            this.dataTree = this.dataTree || new _DataTree2.default(data.results);
+	            this._fillOptionsData();
+	            this._bindEvents();
+	        }
+	    }, {
+	        key: '_onclickOptionsElement',
+	        value: function _onclickOptionsElement(e) {
+	            this.clearAllNext();
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_onclickOptionsElement', this).call(this, e);
+	            if (this.nextSelectBox && this.dataTree.hasChildren(this.selectedEl.id)) {
+	                this.nextSelectBox.setParent(this.selectedEl.id);
+	                this.nextSelectBox.setHeader(this.selectedEl.value);
+	                this.nextSelectBox.show();
+	            }
+	            if (this.prevSelectBox) {
+	                this.prevSelectBox.$buttonAddOptions.hide();
+	                this.prevSelectBox.$searchInput.removeClass("active");
+	            }
+	            this.$searchInput.addClass('active');
+	        }
+	    }, {
+	        key: '_onButtonAddOptions',
+	        value: function _onButtonAddOptions(e) {
+	            // this._addToSelectedContainer(this.selectedEl.id);
+	            // this.clear();
+	            // e.preventDefault();
+	            // return false;
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_onButtonAddOptions', this).call(this, e);
+	            this.clearAllNext();
+	            this.clearAllPrev();
+	        }
+	    }, {
+	        key: '_onButtonAdd',
+	        value: function _onButtonAdd(e) {
+	            _get(TreeSelect.prototype.__proto__ || Object.getPrototypeOf(TreeSelect.prototype), '_onButtonAdd', this).call(this, e);
+	            this.clearAllNext();
+	            this.clearAllPrev();
+	        }
+	    }, {
+	        key: '_addToSelectedContainer',
+	        value: function _addToSelectedContainer(id) {
+	            if (this.selectedContainer) {
+	                this.selectedContainer.add(id);
+	                return;
+	            }
+
+	            this.prevSelectBox._addToSelectedContainer(id);
+	        }
+	    }]);
+
+	    return TreeSelect;
+	}(_AbsBaseSelect2.AbsBaseSelect);
+
+	exports.default = TreeSelect;
+
+/***/ },
+/* 25 */,
+/* 26 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+
+	var _AbsBaseSelect2 = __webpack_require__(23);
+
+	var _NoTreeData = __webpack_require__(19);
+
+	var _NoTreeData2 = _interopRequireDefault(_NoTreeData);
+
+	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 htmlTemplate = function htmlTemplate(_ref) {
+	    var header = _ref.header,
+	        selectBox = _ref.selectBox,
+	        _ref$id = _ref.id,
+	        id = _ref$id === undefined ? "" : _ref$id,
+	        _ref$classes = _ref.classes,
+	        classes = _ref$classes === undefined ? "" : _ref$classes,
+	        _ref$tmpl_selectBoxOp = _ref.tmpl_selectBoxOptions,
+	        tmpl_selectBoxOptions = _ref$tmpl_selectBoxOp === undefined ? function () {
+	        return "";
+	    } : _ref$tmpl_selectBoxOp,
+	        _ref$tmpl_selectBoxRe = _ref.tmpl_selectBoxResults,
+	        tmpl_selectBoxResults = _ref$tmpl_selectBoxRe === undefined ? function () {
+	        return "";
+	    } : _ref$tmpl_selectBoxRe;
+	    return '\n<div class="select-box-container ' + classes + '" id="' + id + '">\n    <div class="select-box-search">\n        ' + selectBox + '\n    </div>\n\n    ' + tmpl_selectBoxOptions() + '\n    ' + tmpl_selectBoxResults() + '\n    <span style="clear: both"></span>\n</div>\n';
+	};
+
+	var tmpl_selectBoxResults = function tmpl_selectBoxResults() {
+	    return '\n    <div style="width: 100%; max-width: 95%" class="select-box-results">\n        <button class="button-add create">\u0421\u041E\u0417\u0414\u0410\u0422\u042C</button>\n    </div>\n';
+	};
+
+	// const tmpl_elementResult = (el, id, header) =>
+	//     `<li data-id="${id}">
+	//         ${el}
+	//     </li>`;
+
+	var SelectOrCreate = function (_AbsBaseSelect) {
+	    _inherits(SelectOrCreate, _AbsBaseSelect);
+
+	    function SelectOrCreate() {
+	        _classCallCheck(this, SelectOrCreate);
+
+	        return _possibleConstructorReturn(this, (SelectOrCreate.__proto__ || Object.getPrototypeOf(SelectOrCreate)).apply(this, arguments));
+	    }
+
+	    _createClass(SelectOrCreate, [{
+	        key: 'getTemplate',
+	        value: function getTemplate(classes) {
+	            var selectBox = this.hasEditableContainer ? (0, _AbsBaseSelect2.tmpl_selectBoxEditCont)() : (0, _AbsBaseSelect2.tmpl_selectBox)();
+	            classes = classes ? classes.join(" ") : "";
+	            return htmlTemplate({
+	                header: "TestHeader", selectBox: selectBox, id: this.containerId, classes: classes,
+	                tmpl_selectBoxOptions: _AbsBaseSelect2.tmpl_selectBoxOptions, tmpl_selectBoxResults: tmpl_selectBoxResults
+	            });
+	        }
+	    }, {
+	        key: 'setLinkBoxes',
+	        value: function setLinkBoxes() {
+	            var boxes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+	            this.boxes = boxes;
+	        }
+	    }, {
+	        key: '_buildComponents',
+	        value: function _buildComponents(data) {
+	            _get(SelectOrCreate.prototype.__proto__ || Object.getPrototypeOf(SelectOrCreate.prototype), '_buildComponents', this).call(this, data);
+	            var self = this;
+	            //TODO: Изменять свойство visible при show/hide
+	            if (!this.visible) this.hide();
+	            if (this.hasEditableContainer) this.$editableContainer.hide();
+	            this.dataTree = this.dataTree || new _NoTreeData2.default(data);
+	            this.$buttonCreate = this.$resultsBox.find('.create');
+	            // console.log("$buttonCreate = ", $buttonCreate);
+	            this.$buttonCreate.on("click", function () {
+	                return console.log('Button Create');
+	            });
+	            this.$buttonCreate.on("click", this._onButtonCreate.bind(self));
+	            this._fillOptionsData();
+	            this._bindEvents();
+	            this.$searchInput.attr("placeholder", 'Создать/Выбрать объект');
+	        }
+	    }, {
+	        key: 'getData',
+	        value: function getData(url) {
+	            var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+	            return Promise.resolve($.ajax({
+	                url: url,
+	                dataType: 'json',
+	                data: data
+	            }));
+	        }
+	    }, {
+	        key: '_onLoadDataError',
+	        value: function _onLoadDataError(error) {
+	            console.log("Error loading data -->", error);
+	        }
+	    }, {
+	        key: '_fillBoxes',
+	        value: function _fillBoxes() {
+	            var _this2 = this;
+
+	            var self = this;
+	            var id = this.selectedEl.id;
+	            this.getData('/api/realties?id=' + id).then(function (_data) {
+	                var data = _data.results[0] || _data[0];
+	                // this._addToSelectedContainer(this.selectedEl.id);
+	                // console.log("res data = ", data);
+	                var _iteratorNormalCompletion = true;
+	                var _didIteratorError = false;
+	                var _iteratorError = undefined;
+
+	                try {
+	                    for (var _iterator = _this2.boxes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+	                        var box = _step.value;
+
+	                        box.selectedContainer.removeAll();
+	                        //TODO: Костыль!
+	                        if (box.type == 'building_classifications' && data['building_classification']) {
+	                            // console.log("building_classification = ",data['building_classification']);
+	                            box._addToSelectedContainer(data['building_classification'].id);
+	                        } else if (box.type == 'locations_flat' && data['location']) {
+	                            // console.log("location = ",data['location']);
+	                            box._addToSelectedContainer(data['location'].id);
+	                        } else if (box.type == 'construction_type' && data['construction_type']) {
+	                            // console.log("construction_type = ",data['construction_type']);
+	                            box._addToSelectedContainer(data['construction_type'].id);
+	                        } else {
+	                            console.log("Нет совпадений для ", box.type);
+	                        }
+	                    }
+	                } catch (err) {
+	                    _didIteratorError = true;
+	                    _iteratorError = err;
+	                } finally {
+	                    try {
+	                        if (!_iteratorNormalCompletion && _iterator.return) {
+	                            _iterator.return();
+	                        }
+	                    } finally {
+	                        if (_didIteratorError) {
+	                            throw _iteratorError;
+	                        }
+	                    }
+	                }
+	            }).catch(this._onLoadDataError.bind(self));
+	        }
+	    }, {
+	        key: '_onButtonAddOptions',
+	        value: function _onButtonAddOptions(e) {
+	            this._fillBoxes();
+	            _get(SelectOrCreate.prototype.__proto__ || Object.getPrototypeOf(SelectOrCreate.prototype), '_onButtonAddOptions', this).call(this, e);
+	        }
+	    }, {
+	        key: '_onButtonCreate',
+	        value: function _onButtonCreate(e) {
+	            this.selectedContainer.add({ text: this.$searchInput.val() });
+	            if (this.boxes) {
+	                var _iteratorNormalCompletion2 = true;
+	                var _didIteratorError2 = false;
+	                var _iteratorError2 = undefined;
+
+	                try {
+	                    for (var _iterator2 = this.boxes[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+	                        var box = _step2.value;
+
+	                        console.log('box clear');
+	                        box.selectedContainer.removeAll();
+	                    }
+	                } catch (err) {
+	                    _didIteratorError2 = true;
+	                    _iteratorError2 = err;
+	                } finally {
+	                    try {
+	                        if (!_iteratorNormalCompletion2 && _iterator2.return) {
+	                            _iterator2.return();
+	                        }
+	                    } finally {
+	                        if (_didIteratorError2) {
+	                            throw _iteratorError2;
+	                        }
+	                    }
+	                }
+	            }
+	            e.preventDefault();
+	            this.$buttonCreate.hide();
+	            this.$searchInput.val("");
+	        }
+	    }, {
+	        key: '_onInput_searchInput',
+	        value: function _onInput_searchInput(e) {
+	            // this._fillResultsData(self .$searchInput.val());
+	            this.$buttonAddOptions.hide();
+	            this.$buttonCreate.show();
+	            // console.log("on input");
+	            this.$resultsBox.show();
+	            this.$optionsBox.hide();
+	        }
+	    }, {
+	        key: '_onClick_searchInput',
+	        value: function _onClick_searchInput(e) {
+	            this.$optionsBox.show();
+	            this.$resultsBox.hide();
+	            this.$searchInput.val("");
+	        }
+	    }]);
+
+	    return SelectOrCreate;
+	}(_AbsBaseSelect2.AbsBaseSelect);
+
+	exports.default = SelectOrCreate;
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/assets/js/build/portfolio_create_edit.js b/assets/js/build/portfolio_create_edit.js
new file mode 100644
index 0000000..8dcf82b
--- /dev/null
+++ b/assets/js/build/portfolio_create_edit.js
@@ -0,0 +1,273 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _image_upload = __webpack_require__(11);
+
+	var _scroll_on_required = __webpack_require__(8);
+
+	var _ajax_send_form_data = __webpack_require__(12);
+
+	$(function () {
+	    (0, _image_upload.imageUploadInit)();
+	    (0, _scroll_on_required.scrollOnRequiredInit)();
+	    window.sendFormData = _ajax_send_form_data.sendFormData;
+	    window.scrollOnRequiredInit = _scroll_on_required.scrollOnRequiredInit;
+	});
+
+/***/ },
+/* 1 */,
+/* 2 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	function getCookie(name) {
+	    var cookieValue = null;
+	    if (document.cookie && document.cookie != '') {
+	        var cookies = document.cookie.split(';');
+	        for (var i = 0; i < cookies.length; i++) {
+	            var cookie = jQuery.trim(cookies[i]);
+	            if (cookie.substring(0, name.length + 1) == name + '=') {
+	                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+	                break;
+	            }
+	        }
+	    }
+	    return cookieValue;
+	}
+
+	function humanFileSize(bytes, si) {
+	    var thresh = si ? 1000 : 1024;
+
+	    if (Math.abs(bytes) < thresh) return bytes + ' B';
+
+	    var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+	    var u = -1;
+
+	    do {
+	        bytes /= thresh;
+	        ++u;
+	    } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+
+	    return bytes.toFixed(1) + ' ' + units[u];
+	}
+
+	exports.humanFileSize = humanFileSize;
+	exports.getCookie = getCookie;
+
+/***/ },
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */,
+/* 8 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	function scrollOnRequiredInit() {
+	    var $required = $('.required.error');
+	    // console.log($required);
+	    if (!$required.length) return;
+	    $('html, body').animate({
+	        scrollTop: $required.offset().top - 25
+	    }, 1000);
+	}
+
+	exports.scrollOnRequiredInit = scrollOnRequiredInit;
+
+/***/ },
+/* 9 */,
+/* 10 */,
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.imageUploadInit = undefined;
+
+	var _utils = __webpack_require__(2);
+
+	// function previewImg() {
+	//     let $fileUploadWidgets = $('.file-upload-widget');
+	//     $.each($fileUploadWidgets, function (ind, el) {
+	//         let $fileImg = $(el).find('img');
+	//         let $fileInput = $(el).find('.file-upload-input');
+	//         // console.log("$fileInput[0].files.length = ", $fileInput[0].files.length);
+	//         // console.log("$fileInput.val() = ", $fileInput.val());
+	//         console.log("$fileInput = ", $fileInput);
+	//         if ($fileInput[0].files.length) {
+	//             console.log("Попытка загрузить файл");
+	//             let reader = new FileReader();
+	//             reader.onload = function (e) {
+	//                 $fileImg.attr('src', e.target.result);
+	//             };
+	//
+	//             reader.readAsDataURL($fileInput[0].files[0]);
+	//         }
+	//     })
+	// }
+
+	function imageUploadInit() {
+	    var $fileUploadContainer = $('#fileUploadContainer');
+
+	    $('#fileUploadAddBtn').on('click', function ($evt) {
+	        $fileUploadContainer.find('.file-upload-widget').last().find('.file-upload-input').click();
+	    });
+
+	    $fileUploadContainer.on('change', '.file-upload-input', function ($evt) {
+	        var $fileInput = $(this);
+	        var $fileUploadWidget = $fileInput.closest('.file-upload-widget');
+	        var $fileImg = $fileUploadWidget.find('.preview');
+	        var filePath = $fileInput.val().replace(/\\/g, '/');
+	        var fileName = path.basename(filePath);
+	        var fileSize = $fileInput.get(0).files && (0, _utils.humanFileSize)($fileInput.get(0).files[0].size);
+	        console.log("file path", filePath);
+	        console.log("file path2 ", $fileInput[0].files[0]);
+	        if (fileName) {
+	            $fileUploadWidget.find('.file-upload-label').text(fileName + ' ' + fileSize);
+
+	            var $newFileUploadWidget = $fileUploadWidget.clone();
+	            $newFileUploadWidget.find('.file-upload-label').text('');
+
+	            $fileUploadContainer.find('.list-new-new').append($newFileUploadWidget);
+
+	            $fileUploadWidget.css('display', 'block');
+
+	            if ($fileImg.length) {
+	                var reader = new FileReader();
+	                reader.onload = function (e) {
+	                    $fileImg.css('background-image', 'url(' + e.target.result + ')');
+	                };
+
+	                reader.readAsDataURL($fileInput[0].files[0]);
+	            }
+	        }
+	    });
+
+	    $fileUploadContainer.on('click', '.file-upload-remove-img-btn', function ($evt) {
+	        var $btn = $(this);
+	        $btn.closest('.file-upload-widget').remove();
+	    });
+	} //TODO: оформить Upload'еры в виде классов
+	//require: <script src='{% static "my-libs.js" %}'></script>
+	exports.imageUploadInit = imageUploadInit;
+	// export {imageUploadInit, previewImg}
+
+/***/ },
+/* 12 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	exports.sendFormData = undefined;
+
+	var _utils = __webpack_require__(2);
+
+	function sendFormData(e) {
+	    e.preventDefault();
+	    var $target = $(e.target);
+	    var $form = $target.closest("form");
+	    // let formData = $form.serializeArray();
+	    var formData = new FormData($form[0]);
+	    $.ajax({
+	        url: $form.attr("action"),
+	        data: formData,
+	        async: false,
+	        method: $form.attr("method"),
+	        beforeSend: function beforeSend(xhr) {
+	            xhr.setRequestHeader("X-CSRFToken", (0, _utils.getCookie)('csrftoken'));
+	        },
+	        success: function success(data) {
+	            // let data = xhr.responseJSON;
+	            // console.log('success data -->', data);
+	            window.location.href = data.redirect_to;
+	        },
+	        cache: false,
+	        contentType: false,
+	        processData: false,
+	        error: function error(xhr, ajaxOptions, thrownError) {
+	            var status = xhr.status;
+	            $('.error').removeClass('error');
+	            if (status == 400) {
+	                var data = xhr.responseJSON;
+	                $.each(data, function (key, value) {
+	                    var $header = $form.find("[name=" + key + "]").siblings('.required');
+	                    if ($header.length > 0) {
+	                        $header.addClass("error");
+	                    }
+	                });
+	                window.scrollOnRequiredInit();
+	            } else {
+	                console.log('xhr = ', xhr);
+	            }
+	        }
+	    });
+	    // $.post(url, formData).done(function (data) {
+	    //     alert(data);
+	    // });
+	}
+
+	exports.sendFormData = sendFormData;
+
+/***/ }
+/******/ ]);
\ No newline at end of file
diff --git a/assets/js/src/init_portfolio_create_edit.js b/assets/js/src/init_portfolio_create_edit.js
new file mode 100644
index 0000000..c21c3f8
--- /dev/null
+++ b/assets/js/src/init_portfolio_create_edit.js
@@ -0,0 +1,148 @@
+import SelectedContainer from 'components/SelectedContainer';
+import SelectedContainerCreate from 'components/SelectedContainerCreate';
+import NoTreeSelect from 'components/NoTreeSelect';
+import TreeSelect from 'components/TreeSelect';
+// import SingleTreeSelect from 'components/SingleTreeSelect'
+import SelectOrCreate from 'components/SelectOrCreate'
+
+$(function () {
+    function createSpecs(url) {
+        // SPECIALIZATIONS  
+        let sb_main = new TreeSelect($('#select-box-1'), {url, visible: true, required: true});
+        // sb_main.setHeader("Специальность");
+        let select_container = new SelectedContainer($('#selected-spec'),
+            {
+                obj: sb_main,
+                // onlyOne: true
+            });
+        sb_main.connectSelectedContainer(select_container);
+        let sb_1 = new TreeSelect($('#select-box-2'), {obj: sb_main});
+        let sb_2 = new TreeSelect($('#select-box-3'), {obj: sb_main});
+        let sb_3 = new TreeSelect($('#select-box-4'), {obj: sb_main});
+        let sb_4 = new TreeSelect($('#select-box-5'), {obj: sb_main});
+
+        // select_container.on("add", () => {
+        //     let $container = $('#spec-value');
+        //     $container.html($('#selected-spec').find(".selected-element").find(".name").html());
+        // });
+
+        sb_main.setNearbySelectBox(sb_1);
+        sb_1.setNearbySelectBox(sb_2, sb_main);
+        sb_2.setNearbySelectBox(sb_3, sb_1);
+        sb_3.setNearbySelectBox(sb_4, sb_2);
+        sb_4.setNearbySelectBox("", sb_3);
+
+    }
+
+    function createBuildingClass(url) {
+        // BUILDING-CLASSIFICATION  
+        sb_build_main = new TreeSelect($('#sb-building-classification'), {url, visible: true});
+        sb_build_main.setHeader("Классификация здания");
+
+        let sb_build_1 = new TreeSelect($('#sb-building-sub-classification'), {obj: sb_build_main});
+
+        let select_build_container = new SelectedContainer($('#selected-building-classification'),
+            {
+                obj: sb_build_main,
+                onlyOne: true
+            });
+        sb_build_main.connectSelectedContainer(select_build_container);
+
+        sb_build_main.setNearbySelectBox(sb_build_1);
+        sb_build_1.setNearbySelectBox("", sb_build_main);
+    }
+
+    function createConstructionType(url) {
+        sb_constr_main = new NoTreeSelect($('#sb-construction-type'), {url, visible: true});
+        sb_constr_main.setHeader("Вид строительства");
+        let select_constr_type = new SelectedContainer($('#selected-construction-type'), {
+            obj: sb_constr_main,
+            noTree: true,
+            onlyOne: true
+        });
+        sb_constr_main.connectSelectedContainer(select_constr_type);
+    }
+
+    function createLocations(url) {
+        sb_loc_main = new TreeSelect($('#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});
+
+        sb_loc_main.setNearbySelectBox(sb_loc_1);
+        sb_loc_1.setNearbySelectBox(sb_loc_2, sb_loc_main);
+        sb_loc_2.setNearbySelectBox("", sb_loc_1);
+    }
+
+    function createRealty(url) {
+        let sb_realty = new SelectOrCreate($('#sb-realty'), {url, visible: true});
+        sb_realty.setHeader(" ");
+        let select_realty = new SelectedContainerCreate($('#selected-realty'),
+            {
+                obj: sb_realty,
+                noTree: true,
+                onlyOne: true,
+                noHeader: true
+            });
+        sb_realty.connectSelectedContainer(select_realty);
+        sb_realty.setLinkBoxes([sb_loc_main, sb_constr_main, sb_build_main]);
+        select_realty.on("add", () => {
+            $('#checkbox-sb-realty').attr("disabled", true)
+        });
+        select_realty.on("remove", () => {
+            $('#checkbox-sb-realty').attr("disabled", false)
+        });
+        sb_realty.dataPromise.then(function () {
+                let $realty = $('#sb-realty');
+                let check = $('#checkbox-sb-realty');
+                if (!check.prop("checked")) {
+                    $realty.hide();
+                }
+            }
+        );
+        let sb_realty_top = new NoTreeSelect($('#sb-realty-top'), {url, visible: true});
+        sb_realty_top.setHeader("Объект");
+        sb_realty_top.connectSelectedContainer(select_realty);
+        sb_realty_top.dataPromise.then(function () {
+            if (!sb_realty_top.dataTree.data.length) {
+                sb_realty_top.hide()
+            }else{
+                let id = window.location.hash.replace("#", "");
+                if (id) sb_realty_top.setElementById(id);
+            }
+        });
+        select_realty.on("add", (args)=> {
+            //TODO: Костыли!!!
+            $('#checkbox-sb-realty').prop("checked", true);
+            sb_realty.show();
+            let id = args[0];
+            if (id.text) return;
+            let el = sb_realty.dataTree.getElementById(id);
+            sb_realty_top.dataPromise.then(function () {
+                sb_realty_top.$searchInput.val(el.name);
+                sb_realty_top.selectedEl.id = id;
+                sb_realty_top.selectedEl.value = el.name;
+            });
+
+            sb_realty.selectedEl.id = id;
+            sb_realty._fillBoxes();
+        })
+    }
+
+    let sb_loc_main, sb_constr_main, sb_build_main;
+    // Тип работы
+    createSpecs('/api/specializations_flat');
+    // Классификация здания
+    createBuildingClass('/api/building_classifications');
+    // createConstructionType('/api/construction_type');
+    // createLocations('/api/locations_flat');
+
+    // createRealty('/api/realties/current_user')
+
+});
\ No newline at end of file
diff --git a/assets/js/src/portfolio_create_edit.js b/assets/js/src/portfolio_create_edit.js
new file mode 100644
index 0000000..4d9bfe2
--- /dev/null
+++ b/assets/js/src/portfolio_create_edit.js
@@ -0,0 +1,11 @@
+import {imageUploadInit} from './seeds/image_upload'
+import {scrollOnRequiredInit} from './seeds/scroll_on_required'
+import {sendFormData} from './seeds/ajax_send_form_data'
+
+
+$(function () {
+    imageUploadInit();
+    scrollOnRequiredInit();
+    window.sendFormData = sendFormData;
+    window.scrollOnRequiredInit = scrollOnRequiredInit;
+});
\ No newline at end of file
diff --git a/assets/js/src/seeds/image_upload.js b/assets/js/src/seeds/image_upload.js
index 76700a5..881bde2 100644
--- a/assets/js/src/seeds/image_upload.js
+++ b/assets/js/src/seeds/image_upload.js
@@ -1,4 +1,5 @@
 //TODO: оформить Upload'еры в виде классов
+//require: <script src='{% static "my-libs.js" %}'></script>
 import {humanFileSize} from '../utils'
 
 // function previewImg() {
diff --git a/assets/sass/components/custom-components.sass b/assets/sass/components/custom-components.sass
index dc0dad9..45b987f 100644
--- a/assets/sass/components/custom-components.sass
+++ b/assets/sass/components/custom-components.sass
@@ -69,7 +69,7 @@ textarea.description
     font-style: italic
 
 .btn-simple
-  text-transform: uppercase
+  //text-transform: uppercase
   border-radius: 40px
   padding: 10px 15px
   border: 1px solid #FF0029
@@ -207,10 +207,11 @@ textarea.description
     border-top: 1px solid #CFCFCF
 
 .btn-plus
+  line-height: 115%
   white-space: normal
   padding-left: 18%
   color: #FF0029
-  line-height: 1em
+  //line-height: 1em
   font-family: Arial-MT-Regular, sans-serif
   font-size: 10pt
 
diff --git a/projects/forms.py b/projects/forms.py
index f3006ce..8879a2f 100644
--- a/projects/forms.py
+++ b/projects/forms.py
@@ -272,6 +272,34 @@ class RealtyFormNew(forms.ModelForm):
         # self.fields['location'].queryset = Location.objects # Migrate with this enabled
 
 
+class PortfolioFormNew(forms.ModelForm):
+    photos = forms.ModelMultipleChoiceField(
+        queryset=PortfolioPhoto.objects.none(),
+        # widget=forms.CheckboxSelectMultiple,
+        required=False,
+    )
+
+    class Meta:
+        model = Portfolio
+        fields = (
+            'name',
+            'building_classification',  # Классификация здания
+            'specializations',          # Тип работы
+            'description',
+            'photos'
+        )
+
+    def __init__(self, *args, **kwargs):
+        try:
+            self.request = kwargs.pop('request')
+        except KeyError:
+            pass
+        super().__init__(*args, **kwargs)
+        self.fields['specializations'].required = True
+        if self.instance.pk:
+            self.fields['photos'].queryset = self.instance.photos
+
+
 class PortfolioForm(forms.ModelForm):
     building_classification = TreeNodeChoiceField(
         BuildingClassfication.objects.exclude(name='_root'),
diff --git a/projects/migrations/0053_portfolio_specializations.py b/projects/migrations/0053_portfolio_specializations.py
new file mode 100644
index 0000000..6f06911
--- /dev/null
+++ b/projects/migrations/0053_portfolio_specializations.py
@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-12-27 16:47
+from __future__ import unicode_literals
+
+from django.db import migrations
+import mptt.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('specializations', '0004_auto_20161014_2344'),
+        ('projects', '0052_realty_created'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='portfolio',
+            name='specializations',
+            field=mptt.fields.TreeManyToManyField(blank=True, to='specializations.Specialization'),
+        ),
+    ]
diff --git a/projects/models.py b/projects/models.py
index 2c8b3f7..40aea96 100644
--- a/projects/models.py
+++ b/projects/models.py
@@ -6,7 +6,7 @@ from django.db.models import Q
 from django.utils import timezone
 from hitcount.models import HitCountMixin
 from mptt.managers import TreeManager
-from mptt.models import TreeForeignKey, MPTTModel
+from mptt.models import TreeForeignKey, MPTTModel, TreeManyToManyField
 from django.db.models import Sum, Count
 
 _.map = _.map_;
@@ -356,20 +356,24 @@ class Candidate(models.Model):
 
 
 class Portfolio(models.Model):
-    budget = models.DecimalField(max_digits=10, decimal_places=0, default=0, null=True, blank=True)
+    name = models.CharField(max_length=255)
     building_classification = TreeForeignKey(BuildingClassfication, related_name='portfolios', null=True, blank=True)
-    construction_type = models.ForeignKey(ConstructionType, related_name='portfolios', null=True, blank=True)
+    # @deprecated
+    specialization = TreeForeignKey(Specialization, related_name='portfolios', null=True, blank=True)
+    specializations = TreeManyToManyField(Specialization, blank=True)
+    description = models.TextField(blank=True)
     created = models.DateTimeField(auto_now_add=True, auto_created=True)
+    user = models.ForeignKey(User, related_name='portfolios', null=True, blank=True)
+    worksell = models.BooleanField(default=False)
+
+    # @deprecated all fields
+    budget = models.DecimalField(max_digits=10, decimal_places=0, default=0, null=True, blank=True)
+    construction_type = models.ForeignKey(ConstructionType, related_name='portfolios', null=True, blank=True)
     currency = models.CharField(max_length=20, default='rur', choices=CURRENCIES, null=True, blank=True)
-    description = models.TextField(blank=True)
     location = TreeForeignKey('common.Location', related_name='portfolios', null=True, blank=True)
-    name = models.CharField(max_length=255)
-    specialization = TreeForeignKey(Specialization, related_name='portfolios', null=True, blank=True)
     term = models.IntegerField(default=0, null=True, blank=True)
     term_type = models.CharField(max_length=20, choices=TERM_TYPES, default='hour', null=True, blank=True)
-    user = models.ForeignKey(User, related_name='portfolios', null=True, blank=True)
     work_type = models.IntegerField(default=1, choices=Project.WORK_TYPES)
-    worksell = models.BooleanField(default=False)
 
     def __str__(self):
         return self.name
diff --git a/projects/templates/portfolio_create.html b/projects/templates/_trash/portfolio_create.html
similarity index 100%
rename from projects/templates/portfolio_create.html
rename to projects/templates/_trash/portfolio_create.html
diff --git a/projects/templates/customer_project_create_or_edit.html b/projects/templates/customer_project_create_or_edit.html
index 87272ae..63e1b9d 100644
--- a/projects/templates/customer_project_create_or_edit.html
+++ b/projects/templates/customer_project_create_or_edit.html
@@ -63,7 +63,7 @@
                             <div class="header">&nbsp;</div>
                             <div href="#" onclick="return false" data-toggle="modal"
                                  data-target="#projectWorkTypeSuggestionModal"
-                                 style="text-transform: none; line-height: 115%"
+{#                                 style="text-transform: none; line-height: 115%"#}
                                  class="btn btn-simple btn-plus">Нет нужной специальности хочу добавить
                             </div>
                         </div>
@@ -123,13 +123,6 @@
 
                                 <ul style="float: none" class="list-new-new">
                                     {% for file in form.files.field.queryset.all %}
-                                        {#                                        <li class="existing-file-widget">#}
-                                        {#                                            <input type="checkbox" name="{{ form.files.html_name }}"#}
-                                        {#                                                   value="{{ file.pk }}" checked#}
-                                        {#                                                   style='display: none'>#}
-                                        {#                                            <p class="file-upload-label">{{ file.file.name|basename }} {{ file.file.size|filesizeformat }}</p>#}
-                                        {#                                            <div class="existing-file-remove-btn"></div>#}
-                                        {#                                        </li>#}
                                         <li class="file-upload-widget">
                                             <input type="hidden" name="files" class="file-upload-input" value="{{ file.pk }}">
                                             <span class="file-upload-label">{{ file.file.name|basename }} {{ file.file.size|filesizeformat }}</span>
diff --git a/projects/templates/portfolio_create_edit.html b/projects/templates/portfolio_create_edit.html
new file mode 100644
index 0000000..008cf76
--- /dev/null
+++ b/projects/templates/portfolio_create_edit.html
@@ -0,0 +1,181 @@
+{% extends 'partials/_base.html' %}
+{% load i18n %}
+{% load staticfiles %}
+{% load sass_tags %}
+{% block personal_css %}
+    <link rel='stylesheet' href='{% sass_src "sass/components/custom-components.sass" %}'>
+    <link rel='stylesheet' href='{% sass_src "lib/proekton-components/sass/components.sass" %}'>
+{% endblock %}
+
+{% block content %}
+    {% include 'partials/modals/project_work_type_suggestion.html' %}
+    <div class="container main-scope">
+        <div class="row title-scope">
+            <div class="col-lg-12">
+                <h1>{% if pk %}Редактировать{% else %}Добавить{% endif %} работу в портфолио</h1>
+            </div>
+        </div>
+        <div class="row main-content">
+            <div class="col-lg-12">
+                <form action="
+                {% if pk %}
+                   {% url 'projects:contractor-portfolio-edit' pk=pk %}
+                {% else %}
+                   {% url 'projects:contractor-portfolio-create' %}
+                {% endif %}
+                "
+                      method="POST"
+                      enctype="multipart/form-data" novalidate>
+                    {% csrf_token %}
+                    <div class="row">
+                        <div class="col-lg-9">
+                            <div class="simple-field">
+                                <div class="header">Название проекта</div>
+                                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                                <span class="required {% if form.name.errors %}error{% endif %}">Обязательно</span>
+                                <input value="{{ form.name.value }}" name="name"
+                                       class="simple-input italic"
+                                       placeholder="Пример: Дизайн квартиры, Армирование фундамента, Конструкции перекрытия и т.д."
+                                       autocomplete="off"
+                                       required>
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div id="sb-building-classification">
+                            </div>
+                            <div class="vertical-child" id="sb-building-sub-classification">
+                            </div>
+                            <div class="selected-container" id="selected-building-classification">
+                                <input type="hidden"
+                                       name="building_classification"
+                                       value="{{ form.building_classification.value }}">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row vertical-child mod-align-bottom">
+                        <div class="col-lg-9">
+                            <div class="header">Тип работы</div>
+                            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                            <span class="required {% if form.specializations.errors %}error{% endif %}">Обязательно</span>
+                            {#  Для поиска заголовка обязательного поля по name= FIXME: fixit#}
+                            <div hidden name="specializations"></div>
+                            <div class="" id="select-box-1"></div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="header">&nbsp;</div>
+                            <div href="#" onclick="return false" data-toggle="modal"
+                                 data-target="#projectWorkTypeSuggestionModal"
+                                    {#                                 style="text-transform: none; line-height: 115%"#}
+                                 class="btn btn-simple btn-plus">Нет нужной специальности хочу добавить
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-2">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-3">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-4">
+                            </div>
+                        </div>
+                        <div class="col-lg-3">
+                            <div class="vertical-child" id="select-box-5">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-12">
+                            <div class="selected-container horizontal" id="selected-spec">
+                                <input type="hidden" name="specializations"
+                                       value="{{ form.specializations.value }}">
+                            </div>
+                        </div>
+                    </div>
+                    <div style="margin-top: 45px" class="row">
+                        <div class="col-lg-12">
+                            <div class="simple-field">
+                                <div class="header">Подробно опишите проект</div>
+                                <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
+                                <textarea name="description" class="description"
+                                          rows="6">{{ form.description.value }}</textarea>
+
+                            </div>
+                            <div class="documentsChat mod" id="fileUploadContainer">
+                                <div style="display: inline-block;vertical-align: middle;">
+                                    <div style="display: inline-block;vertical-align: inherit;"
+                                         class="upload-new paper-clip">
+                                        <p id="fileUploadAddBtn" style="margin: 0">прикрепить файл</p>
+                                    </div>
+                                    <span style="display: inline-block;vertical-align: inherit;">ДО 100 ФАЙЛОВ</span>
+                                </div>
+                                {% for image in form.photos.field.queryset.all %}
+                                    <input type="hidden" name="files" class="file-upload-input"
+                                    <div class="col-lg-3 file-upload-widget" style="display: none">
+                                        <div class="preview-container">
+                                            <div class="btn close file-upload-remove-img-btn">&times;</div>
+                                            <div class="preview">
+                                                <img src="{{ image.img.url }}">
+                                            </div>
+                                        </div>
+                                        <span style="display:none" class="file-upload-label"></span>
+
+                                    </div>
+                                {% endfor %}
+                                <div class="row list-new-new" style="margin-top: 10px">
+                                    <div class="col-lg-3 file-upload-widget" style="display: none">
+                                        <input type="file" name="new_files" class="file-upload-input"
+                                               style="position: absolute; top: -1000px; left: -1000px">
+                                        <div class="preview-container">
+                                            <div class="btn close file-upload-remove-img-btn">&times;</div>
+                                            <div class="preview"></div>
+                                        </div>
+                                        <span style="display:none" class="file-upload-label"></span>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-12">
+                            <div class="separator">
+                                <div class="border"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row top-line">
+                        <div class="col-lg-3" style="text-align: center">
+                            <input style="width: 100%" type="submit" class="btn btn-simple"
+                                   onclick="sendFormData(event)"
+                                   value="{% if pk %}СОХРАНИТЬ{% else %}РАЗМЕСТИТЬ{% endif %} ПОРТФОЛИО">
+                        </div>
+                        <div class="col-lg-3 col-lg-offset-6" style="text-align: center">
+                            <input style="width: 100%" type="button" class="btn btn-simple"
+                                   value="ПРЕДВАРИТЕЛЬНЫЙ ПРОСМОТР">
+                        </div>
+                    </div>
+                </form>
+            </div> <!-- content -->
+        </div>
+        {#        <ul id="popups-storage" hidden>#}
+        {#            {% if form.errors %}#}
+        {#                <li class="error">Форма заполнена неполностью</li>#}
+        {#            {% endif %}#}
+        {#       <li class="info">Message-1</li>#}
+        {#       <li class="warning">Message-1</li>#}
+        {#        </ul>#}
+        {#        {% include 'partials/inc-message-popup.html' %}#}
+    </div>
+
+{% endblock %}
+{% block personal_js %}
+    <script src='{% static "my-libs.js" %}'></script>
+    <script src='{% static "js/build/init_portfolio_create_edit.js" %}'></script>
+    <script src='{% static "js/build/portfolio_create_edit.js" %}'></script>
+{% endblock %}
\ No newline at end of file
diff --git a/projects/urls.py b/projects/urls.py
index a225723..16db9bb 100644
--- a/projects/urls.py
+++ b/projects/urls.py
@@ -6,10 +6,11 @@ from .views import (
     add_candidate,
     ArbitrationCreateView,
     CandidateDeleteView,
-    contractor_portfolio_create,
+    # contractor_portfolio_create,
     ContractorAnswerArchiveView,
+    ContractorPortfolioCreateView,
     ContractorPortfolioTrashView,
-    ContractorPortfolioUpdateView,
+    ContractorPortfolioEditView,
     CustomerOfferOrderView,
     CustomerProjectCreateView,
     CustomerProjectDeleteView,
@@ -49,9 +50,9 @@ urlpatterns = [
     urls.url(r'^arbitration/create/$', ArbitrationCreateView.as_view(), name='arbitration-create'),
     urls.url(r'^answer/move/archive/$', ContractorAnswerArchiveView.as_view(), name='contractor-answer-archive'),
 
-    urls.url(r'^portfolio/create/$', contractor_portfolio_create, name='contractor-portfolio-create'),
+    urls.url(r'^portfolio/create/$', ContractorPortfolioCreateView.as_view(), name='contractor-portfolio-create'),
     urls.url(r'^portfolio/(?P<pk>\d+)/$', PortfolioDetail.as_view(), name='contractor-portfolio-detail'),
-    urls.url(r'^portfolio/(?P<pk>\d+)/edit/$', ContractorPortfolioUpdateView.as_view(),
+    urls.url(r'^portfolio/(?P<pk>\d+)/edit/$', ContractorPortfolioEditView.as_view(),
              name='contractor-portfolio-edit'),
     urls.url(r'^portfolio/(?P<pk>\d+)/trash/$', ContractorPortfolioTrashView.as_view(),
              name='contractor-portfolio-trash'),
diff --git a/projects/views.py b/projects/views.py
index cb8a2e9..e7fcd1a 100644
--- a/projects/views.py
+++ b/projects/views.py
@@ -16,6 +16,7 @@ from django.shortcuts import render, get_object_or_404, redirect
 from django.views.generic import DetailView, CreateView, DeleteView, View, UpdateView, TemplateView
 from hitcount.models import HitCount
 from hitcount.views import HitCountMixin
+from hitcount.views import HitCountMixin
 
 import re
 
@@ -51,6 +52,7 @@ from .forms import (
     CustomerProjectTrashForm,
     PortfolioEditForm,
     PortfolioForm,
+    PortfolioFormNew,
     ProjectAnswerForm,
     ProjectAnswerMessageForm,
     ProjectWorkTypeSuggestionForm,
@@ -877,85 +879,135 @@ class CustomerOfferOrderView(View):
         return HttpResponseRedirect(redirect_url)
 
 
-def contractor_portfolio_create(request):  # TODO: pekopt: shit. rewrite using generic
-    if request.is_ajax():
-        form = PortfolioForm(data=request.POST)
-        # import code; code.interact(local=dict(globals(), **locals()))
+class ContractorPortfolioCreateView(BaseMixin, View):
+    form_class = PortfolioFormNew
+    work_type_suggestion_form = ProjectWorkTypeSuggestionForm
+    template_name = 'portfolio_create_edit.html'
+
+    def dispatch(self, request, *args, **kwargs):
+        if request.user.is_authenticated() and request.user.is_contractor():
+            return super().dispatch(request, *args, **kwargs)
+        else:
+            raise PermissionDenied
+
+    def get(self, request, *args, **kwargs):
+        context = self.get_context_data(**_.merge({}, request.GET, kwargs))
+
+        form = self.form_class()
+        work_type_suggestion_form = self.work_type_suggestion_form(request=request, prefix='work_type_suggestion')
+
+        context.update({
+            'form': form,
+            'work_type_suggestion_form': work_type_suggestion_form,
+        })
+
+        return render(request, self.template_name, context)
+
+    def post(self, request, *args, **kwargs):
+        if request.POST.get('specializations') == "":
+            request.POST.pop('specializations')
+        else:
+            request.POST.setlist('specializations', request.POST.get('specializations', "").split(','))
+
+        form = self.form_class(request.POST, request=request)
+        # print('POST = ', request.POST)
         if form.is_valid():
-            duplicate = form.cleaned_data.get('duplicate')
-            instance = form.save(commit=False)
-            instance.user = request.user
-            instance.save()
-            if duplicate:
-                work_sell = WorkSell()
-                work_sell.name = instance.name
-                work_sell.budget = instance.budget
-                work_sell.building_classification = instance.building_classification
-                work_sell.construction_type = instance.construction_type
-                work_sell.currency = instance.currency
-                work_sell.description = instance.description
-                work_sell.term = instance.term
-                work_sell.term_type = instance.term_type
-                work_sell.contractor = instance.user
-                work_sell.save()
-
-            images_ids = request.POST.get('images_ids').split(';')[:-1]
-            for pk in images_ids:
-                picture = Picture.objects.get(pk=pk)
-                temp_file = ContentFile(picture.file.read())
-                temp_file.name = picture.file.name
-                p_photo = PortfolioPhoto()
-                p_photo.img = temp_file
-                p_photo.portfolio = instance
-                p_photo.save()
-                if duplicate:
-                    w_photo = WorkSellPhoto()
-                    w_photo.img = temp_file
-                    w_photo.worksell = work_sell
-                    w_photo.save()
-            data = {'status': 'ok'}
+            portfolio = form.save(commit=False)
+            portfolio.user = request.user
+            portfolio.save()
+            form.save_m2m()
+            for file in request.FILES.getlist('new_files'):
+                PortfolioPhoto.objects.create(img=file, portfolio=portfolio)
+            messages.info(request, 'Портфолио успешно создано')
+            redirect_to = reverse('projects:contractor-portfolio-detail', kwargs={'pk': portfolio.pk})
+            if request.is_ajax():
+                return JsonResponse({'redirect_to': redirect_to}, status=200)
+            return redirect(redirect_to)
         else:
-            data = {'status': 'no', 'form_errors': form.errors}
-        return HttpResponse(json.dumps(data), content_type='application/json')
-    else:
-        raise Http404
+            context = self.get_context_data(**kwargs)
+            context.update({'form': form})
+            if request.is_ajax():
+                data = json.dumps(form.errors)
+                print("form errors = ", data)
+                return HttpResponse(content=data, status=400, content_type='application/json')
+            return render(request, self.template_name, context)
 
 
-class ContractorPortfolioUpdateView(BaseMixin, UpdateView):
-    model = Portfolio
-    form_class = PortfolioEditForm
-    template_name = 'contractor_portfolio_edit.html'
+class ContractorPortfolioEditView(BaseMixin, View):
+    form_class = PortfolioFormNew
+    work_type_suggestion_form = ProjectWorkTypeSuggestionForm
+    template_name = 'portfolio_create_edit.html'
 
-    def get_success_url(self):
-        return reverse('projects:contractor-portfolio-detail', kwargs={'pk': self.object.pk})
+    def get(self, request, *args, **kwargs):
+        portfolio = get_object_or_404(Portfolio, pk=kwargs.get('pk'))
+        form = self.form_class(instance=portfolio, request=request)
+        work_type_suggestion_form = self.work_type_suggestion_form(request=request, prefix='work_type_suggestion')
 
-    def form_valid(self, form):
-        portfolio = form.instance
+        context = self.get_context_data(**_.merge({}, request.GET, kwargs))
+
+        context.update({
+            'form': form,
+            'work_type_suggestion_form': work_type_suggestion_form,
+        })
+
+        return render(request, self.template_name, context)
+
+    def post(self, request, *args, **kwargs):
+        # print("request.POST = ", request.POST)
+        project = get_object_or_404(request.user.customer_projects, pk=kwargs.get('pk'))
+        form = self.form_class(request.POST, request.FILES, request=request, instance=project)
 
-        photos = form.cleaned_data['photos']
+        form.is_valid()
+        realty = form.cleaned_data.get('realty')
 
-        # # Doesn't work:
-        # 
-        # portfolio.photos = photos
-        # portfolio.save()
+        if realty:
+            realty_form = self.realty_form(request.POST, instance=realty, request=request, prefix='realty_form')
+        else:
+            realty_form = self.realty_form(request.POST, request=request, prefix='realty_form')
 
-        PortfolioPhoto.objects.filter(portfolio=portfolio).delete()
+        if form.is_valid() and realty_form.is_valid():
+            project = form.save(commit=False)
+            project.customer = request.user
+            project.files = form.cleaned_data.get(
+                'files')  # TODO: Should we somehow get rid of this explicit assignment?
+            project.save()
+            form.save_m2m()
 
-        for photo in photos:
-            PortfolioPhoto.objects.create(img=photo.img, portfolio=portfolio)
+            for file in request.FILES.getlist('new_files'):
+                ProjectFile.objects.create(file=file, project=project)
 
-        live_images = form.cleaned_data['live_images']
+            if not realty:
+                realty = realty_form.save(commit=False)
+                realty.user = request.user
+                if not request.POST.get('new_realty_name'):
+                    realty.is_virtual = True
+                realty.name = request.POST.get('new_realty_name')
+                realty.save()
+                realty_form.save_m2m()
 
-        for live_image in live_images:
-            new_image = ContentFile(live_image.file.read())
-            new_image.name = live_image.file.name
+                project.realty = realty  # Connect a realty with a project
+                project.save()
 
-            PortfolioPhoto.objects.create(img=new_image, portfolio=portfolio)
+            messages.info(request, 'Проект успешно отредактирован')
+            # redirect_to = request.POST.get('back')
+            redirect_to = reverse('projects:detail', kwargs={'pk': project.pk})
+            return redirect(redirect_to)
+        else:
+            if form.errors:
+                messages.info(request, (
+                    '<p>Произошла ошибка (form)</p>'
+                    '<pre>{form}</pre>'
+                ).format(form=pformat(form.errors)))
 
-            live_image.file.delete()
-            live_image.delete()
+            if realty_form and realty_form.errors:
+                messages.info(request, (
+                    '<p>Произошла ошибка (realty_form)</p>'
+                    '<pre>{realty_form}</pre>'
+                ).format(realty_form=pformat(realty_form.errors)))
 
-        return super().form_valid(form)
+            context = self.get_context_data(**kwargs)
+            context.update({'form': form, 'realty_form': realty_form})
+            return render(request, self.template_name, context)
 
 
 class PortfolioDelete(DeleteView):
diff --git a/users/templates/contractor_profile.html b/users/templates/contractor_profile.html
index 99c0543..996e553 100644
--- a/users/templates/contractor_profile.html
+++ b/users/templates/contractor_profile.html
@@ -182,7 +182,8 @@
                         {% if contractor.pk == request.user.pk %}
                             <div class="col-lg-9">
                                 <p class="addWork">
-                                    <a href="#" data-toggle="modal" data-target="#portfolio-modal">Добавить работу</a>
+{#                                    <a href="#" data-toggle="modal" data-target="#portfolio-modal">Добавить работу</a>#}
+                                    <a href="{% url 'projects:contractor-portfolio-create' %}" >Добавить работу</a>
                                 </p>
                             </div>
 
diff --git a/webpack.config.js b/webpack.config.js
index 2ca09b1..121ae91 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,7 +18,10 @@ module.exports = {
         home_page: "./assets/js/src/home_page.js",
         //profile
         customer_profile: "./assets/js/src/customer_profile.js",
-        user_profile_edit: "./assets/js/src/user_profile_edit.js"
+        user_profile_edit: "./assets/js/src/user_profile_edit.js",
+        //portfolio
+        init_portfolio_create_edit: "./assets/js/src/init_portfolio_create_edit.js",
+        portfolio_create_edit: "./assets/js/src/portfolio_create_edit.js",
 
     },
 
diff --git a/work_sell/templates/worksell_create.html b/work_sell/templates/worksell_create.html
index 7f7d8d4..bdaf24d 100644
--- a/work_sell/templates/worksell_create.html
+++ b/work_sell/templates/worksell_create.html
@@ -236,11 +236,11 @@
     </div>
 {% endblock %}
 {% block old_js %}
-    <script src='{% static "lib/jquery.fileupload/js/vendor/jquery.ui.widget.js" %}'></script>
-    <script src='{% static "lib/jquery.fileupload/js/jquery.iframe-transport.js" %}'></script>
-    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload.js" %}'></script>
-    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload-process.js" %}'></script>
-    <script src='{% static "lib/lodash/lodash.js" %}'></script>
+{#    <script src='{% static "lib/jquery.fileupload/js/vendor/jquery.ui.widget.js" %}'></script>#}
+{#    <script src='{% static "lib/jquery.fileupload/js/jquery.iframe-transport.js" %}'></script>#}
+{#    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload.js" %}'></script>#}
+{#    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload-process.js" %}'></script>#}
+{#    <script src='{% static "lib/lodash/lodash.js" %}'></script>#}
     <script src='{% static "my-libs.js" %}'></script>
 {% endblock %}
 {% block js_block %}
diff --git a/work_sell/views.py b/work_sell/views.py
index 20f621a..b550aae 100644
--- a/work_sell/views.py
+++ b/work_sell/views.py
@@ -176,11 +176,11 @@ class WorkSellCreateView(BaseMixin, View):
     work_type_suggestion_form = ProjectWorkTypeSuggestionForm
     template_name = 'worksell_create.html'
 
-    # def dispatch(self, request, *args, **kwargs):
-    #     if request.user.is_authenticated() and request.user.is_contractor():
-    #         return super().dispatch(request, *args, **kwargs)
-    #     else:
-    #         raise PermissionDenied
+    def dispatch(self, request, *args, **kwargs):
+        if request.user.is_authenticated() and request.user.is_contractor():
+            return super().dispatch(request, *args, **kwargs)
+        else:
+            raise PermissionDenied
 
     def get_context_data(self, **kwargs):
         ctx = super().get_context_data()