Добавлен класс компонента для единичного выбора при поиске Косметические правкиremotes/origin/PR-41
booblegum
9 years ago
parent
38655e4e10
commit
834f3695e9
9 changed files with 468 additions and 287 deletions
@ -0,0 +1,113 @@ |
||||
import {htmlTemplate, tmpl_selectBoxOptions, tmpl_selectBoxEditCont, tmpl_selectBox} from './base/AbsBaseSelect' |
||||
import TreeSelect from './TreeSelect' |
||||
|
||||
const tmpl_selectBoxResults = () => |
||||
` |
||||
<div class="select-box-results"> |
||||
<div class="box-wrapper"> |
||||
<div class="main-part"> |
||||
<ul> |
||||
</ul> |
||||
</div> |
||||
<!--<div class="other-part">--> |
||||
<!--<span class="other-header">Из других категорий</span>--> |
||||
<!--<ul>--> |
||||
<!--</ul>--> |
||||
<!--</div>--> |
||||
</div> |
||||
<!--<div style="padding-top: 5px">--> |
||||
<!--<button class="button-add results">ПРИМЕНИТЬ</button>--> |
||||
<!--</div>--> |
||||
</div> |
||||
`;
|
||||
|
||||
const tmpl_elementResult = (el, id, header) => |
||||
`<li data-id="${id}">
|
||||
${el} |
||||
<!--<div class="header">${header}</div>--> |
||||
</li>`; |
||||
|
||||
export default class SingleTreeSelect extends TreeSelect { |
||||
getTemplate(classes) { |
||||
let selectBox = this.hasEditableContainer ? tmpl_selectBoxEditCont() : tmpl_selectBox(); |
||||
classes = classes ? classes.join(" ") : ""; |
||||
return htmlTemplate({ |
||||
header: "TestHeader", selectBox, id: this.containerId, classes, |
||||
tmpl_selectBoxOptions, tmpl_selectBoxResults |
||||
}) |
||||
} |
||||
|
||||
// _buildComponents(data) {
|
||||
// // AFTER PRELOAD
|
||||
// let classes = this.$container.attr('class');
|
||||
// if (classes) classes = classes.split(/\s+/);
|
||||
// let template = this.getTemplate(classes);
|
||||
// this.$container.replaceWith(template);
|
||||
//
|
||||
// this.$selectBox = $(`#${this.containerId}`);
|
||||
// this.$header = this.$selectBox.find('.select-box-header .header');
|
||||
// this.$header.html(this.header);
|
||||
// this.$resultsBox = this.$selectBox.find('.select-box-results');
|
||||
// this.$optionsBox = this.$selectBox.find('.select-box-options');
|
||||
// this.$searchInput = this.$selectBox.find('input.select-box-search');
|
||||
// this.$buttonAdd = this.$selectBox.find('.button-add.results');
|
||||
// this.$buttonAddOptions = this.$selectBox.find('.button-add.options');
|
||||
// this.$editableContainer = this.$selectBox.find('.editable-container');
|
||||
// this.$resultsBox.hide();
|
||||
// this.$optionsBox.hide();
|
||||
// this.$buttonAddOptions.hide();
|
||||
// // TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
|
||||
//
|
||||
// // REDEFINE IN CHILD
|
||||
// // this.dataTree = data;
|
||||
// // this._bindEvents();
|
||||
// }
|
||||
|
||||
_fillResultsData(searchText) { |
||||
let self = this; |
||||
// FILL RESULTS
|
||||
// MAIN PART
|
||||
let $container = this.$resultsBox.find('.main-part ul'); |
||||
this._fillContainer($container, tmpl_elementResult, {searchText: searchText, parentCategoryId: self.parentId}); |
||||
|
||||
// OTHER PART
|
||||
// // Если нет parentId, не нужно искать в других категориях
|
||||
// if (!this.parentId) {
|
||||
// $('.other-part').hide();
|
||||
// } else {
|
||||
// $container = this.$resultsBox.find('.other-part ul');
|
||||
// this._fillContainer($container, tmpl_elementResult, {
|
||||
// searchText: searchText,
|
||||
// excludeCategoryId: self.parentId
|
||||
// });
|
||||
// }
|
||||
// this.$resultsBox.find('div.header').hide();
|
||||
// this.$resultsBox.find('li').on("mouseover", function (e) {
|
||||
// $(e.target).children('.header').show(300);
|
||||
// e.preventDefault();
|
||||
// });
|
||||
|
||||
|
||||
this.$resultsBox.find('li').on("click", function (e) { |
||||
const id = $(e.target).data("id"); |
||||
self.selectedEl.id = id; |
||||
self.selectedEl.value = self.dataTree.getElementById(id).name; |
||||
self.$searchInput.val(self.selectedEl.value); |
||||
self.updateEditableContainer(id); |
||||
if (self.$buttonAddOptions) self.$buttonAddOptions.show(); |
||||
self.$resultsBox.hide(); |
||||
|
||||
//TODO: duplicate code
|
||||
if (self.nextSelectBox && self.dataTree.hasChildren(self.selectedEl.id)) { |
||||
self.nextSelectBox.setParent(self.selectedEl.id); |
||||
self.nextSelectBox.setHeader(self.selectedEl.value); |
||||
self.nextSelectBox.show(); |
||||
} |
||||
if (self.prevSelectBox) { |
||||
self.prevSelectBox.$buttonAddOptions.hide(); |
||||
self.prevSelectBox.$searchInput.removeClass("active"); |
||||
} |
||||
self.$searchInput.addClass('active'); |
||||
}) |
||||
} |
||||
} |
||||
@ -1,82 +0,0 @@ |
||||
// `
|
||||
import DataTree from './data/DataTree' |
||||
const tmpl_selectBoxEditCont = () =>` |
||||
<div class="row"> |
||||
<div class="col-lg-3"> |
||||
<div id="component-preloader"><span class="spinner"></span></div> |
||||
<input disabled class="select-box-search" type="text" placeholder="Выберите/Поиск"> |
||||
</div> |
||||
<div class="col-lg-9"> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
const tmpl_plug = ({header, selectBox}) => |
||||
` |
||||
<div class="select-box-container"> |
||||
<div class="select-box-header"> |
||||
<div class="header">${header}</div> |
||||
<i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i> |
||||
</div> |
||||
<div class="select-box-search"> |
||||
${selectBox} |
||||
</div> |
||||
</div> |
||||
`;
|
||||
|
||||
export default class TreeSelectPreload { |
||||
constructor($container, {url}) { |
||||
let template = this.getTemplate(); |
||||
$container.html(template); |
||||
this.$preloader = $container.find('#component-preloader'); |
||||
this.$spinner = this.$preloader.find('.spinner'); |
||||
this.getData(url) |
||||
} |
||||
|
||||
hidePreloader() { |
||||
// console.log("hide preloader ", this.$preloader);
|
||||
this.$spinner.fadeOut(); |
||||
this.$preloader.delay(350).fadeOut('slow'); |
||||
} |
||||
|
||||
getData(url, data = {}) { |
||||
const self = this; |
||||
$.ajax({ |
||||
url: url, |
||||
dataType: 'json', |
||||
data: data, |
||||
success: self._buildComponents.bind(self), |
||||
error: self._onLoadDataError.bind(self), |
||||
}); |
||||
} |
||||
|
||||
getTemplate() { |
||||
let selectBox = tmpl_selectBoxEditCont(); |
||||
return tmpl_plug({header: "TestHeader", selectBox}) |
||||
} |
||||
|
||||
_buildComponents(data) { |
||||
console.log("loading data =", data); |
||||
// console.log("this =", this);
|
||||
this.hidePreloader(); |
||||
// this.$selectBox = $(`#${this.containerId}`);
|
||||
// this.$header = this.$selectBox.find('.select-box-header .header');
|
||||
// this.$resultsBox = this.$selectBox.find('.select-box-results');
|
||||
// this.$optionsBox = this.$selectBox.find('.select-box-options');
|
||||
// this.$searchInput = this.$selectBox.find('input.select-box-search');
|
||||
// this.$editableContainer = this.$selectBox.find('.editable-container');
|
||||
// this._fillOptionsData();
|
||||
// this.$resultsBox.hide();
|
||||
// this.$optionsBox.hide();
|
||||
// this.$buttonAddOptions.hide();
|
||||
} |
||||
|
||||
_fillOptionsData() { |
||||
|
||||
} |
||||
|
||||
_onLoadDataError(error) { |
||||
console.log("Error loading data -->", error); |
||||
} |
||||
|
||||
|
||||
} |
||||
Loading…
Reference in new issue