| Server IP : 37.220.80.31 / Your IP : 18.118.24.228 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/components/bitrix/main.field.config.detail/templates/.default/ |
Upload File : |
import {Tag, Text, Reflection, Runtime, Event, Type, ajax as Ajax, Dom, Loc} from 'main.core';
import {Loader} from "main.loader";
import {MessageBox} from 'ui.dialogs.messagebox';
import {UserField} from 'ui.userfield';
import {ButtonManager, Button} from 'ui.buttons';
const namespace = Reflection.namespace('BX.Main.UserField');
/**
* @memberOf BX.Main.UserField
*/
class Config
{
static #instances: Map = new Map();
id: number = 0;
inputs: Map = new Map();
tabs: Map = new Map();
container: Element = null;
settingsContainer: ?Element = null;
settingsTable: ?Element = null;
errorsContainer: ?Element = null;
saveButton: ?Button = null;
cancelButton: ?Button = null;
deleteButton: ?Button = null;
moduleId: string;
constructor(params: {
id: number,
container: Element,
errorsContainer: Element,
moduleId: string,
})
{
this.tabs = new Map();
this.inputs = new Map();
const saveButtonNode = document.getElementById('ui-button-panel-save');
if(saveButtonNode)
{
this.saveButton = ButtonManager.createFromNode(saveButtonNode);
}
const cancelButtonNode = document.getElementById('ui-button-panel-cancel');
if(cancelButtonNode)
{
this.cancelButton = ButtonManager.createFromNode(cancelButtonNode);
}
const deleteButtonNode = document.getElementById('ui-button-panel-remove');
if(deleteButtonNode)
{
this.deleteButton = ButtonManager.createFromNode(deleteButtonNode);
}
if(Type.isPlainObject(params))
{
this.id = Text.toInteger(params.id);
if(Type.isDomNode(params.container))
{
this.container = params.container;
}
if(Type.isDomNode(params.errorsContainer))
{
this.errorsContainer = params.errorsContainer;
}
this.moduleId = params.moduleId;
}
this.bindEvents();
this.fillTabs();
this.constructor.#instances.set(this.id, this);
this.adjustVisibility();
this.syncEnumDefaultSelector();
}
getBooleanInputNames(): Array
{
return [
'multiple',
'mandatory',
'showFilter',
'isSearchable',
]
}
getSettingsContainer(): ?Element
{
if(this.container && !this.settingsContainer)
{
this.settingsContainer = this.container.querySelector('[data-role="main-user-field-settings-container"]');
}
return this.settingsContainer;
}
getSettingsTable(): ?Element
{
if(!this.settingsTable)
{
const settingsContainer = this.getSettingsContainer();
if(settingsContainer)
{
this.settingsTable = settingsContainer.querySelector('[data-role="main-user-field-settings-table"]');
}
}
return this.settingsTable;
}
fillTabs()
{
const tabNames = [
'common', 'labels', 'additional', 'list'
];
if(this.container)
{
tabNames.forEach((name: string) => {
const tab = this.container.querySelector('[data-tab="' + name + '"]');
if(tab)
{
this.tabs.set(name, tab);
}
});
}
}
showTab(name: string)
{
Array.from(this.tabs.keys()).forEach((tabName: string) => {
if(tabName === name)
{
this.tabs.get(tabName).classList.add('main-user-field-edit-tab-current');
}
else
{
this.tabs.get(tabName).classList.remove('main-user-field-edit-tab-current');
}
});
}
getInput(name: string): ?Element
{
if(this.container && !this.inputs.has(name))
{
const input = this.container.querySelector('[data-role="main-user-field-' + name + '"]');
if(input)
{
this.inputs.set(name, input);
}
}
return this.inputs.get(name);
}
getInputValue(name: string): ?string
{
if(name === 'userTypeId')
{
return this.getSelectedUserTypeId();
}
const input = this.getInput(name);
if(input)
{
if(this.getBooleanInputNames().includes(name))
{
return (input.checked ? 'Y' : 'N');
}
return input.value;
}
return '';
}
bindEvents()
{
const userTypeIdSelector = this.getInput('userTypeId');
if(userTypeIdSelector)
{
Event.bind(userTypeIdSelector, 'change', this.handleUserTypeChange.bind(this));
}
const commonLabelInput = this.getInput('editFormLabel');
if(commonLabelInput && commonLabelInput.parentElement && commonLabelInput.parentElement.parentElement)
{
const languageId = commonLabelInput.parentElement.parentElement.dataset['language'];
const currentLanguageLabelInput = this.getInput('editFormLabel-' + languageId);
if(currentLanguageLabelInput)
{
Event.bind(commonLabelInput, 'change', () => {
this.syncLabelInputs(commonLabelInput, currentLanguageLabelInput);
});
Event.bind(currentLanguageLabelInput, 'change', () => {
this.syncLabelInputs(currentLanguageLabelInput, commonLabelInput);
});
}
}
const addEnum = this.container.querySelector('[data-role="main-user-field-enum-add"]');
if(addEnum)
{
Event.bind(addEnum, 'click', this.addEnumRow.bind(this));
}
const deleteButtons = Array.from(this.container.querySelectorAll('[data-role="main-user-field-enum-delete"]'));
deleteButtons.forEach((target) => {
Event.bind(target, 'click', this.deleteEnumRow.bind(this));
});
const enumRows = Array.from(this.container.querySelectorAll('[data-role="main-user-field-enum-row"]'));
enumRows.forEach((row: Element) => {
const input = row.querySelector('[data-role="main-user-field-enum-value"]');
if(input)
{
Event.bind(input, 'change', this.syncEnumDefaultSelector.bind(this));
}
});
Event.bind(
this.saveButton.getContainer(),
'click',
(event) => {
event.preventDefault();
this.save();
},
{
passive: false
}
);
if(this.deleteButton)
{
Event.bind(
this.deleteButton.getContainer(),
'click',
(event) => {
event.preventDefault();
this.delete();
}
);
}
}
getSelectedUserTypeId(): ?string
{
const option = this.getSelectedOption('userTypeId');
if(option)
{
return option.value;
}
return null;
}
getSelectedOption(inputName: string): ?HTMLOptionElement
{
const input = this.getInput(inputName);
if(input)
{
const options = Array.from(input.querySelectorAll('option'));
const index = input.selectedIndex;
return options[index];
}
return null;
}
handleUserTypeChange()
{
if(this.isProgress)
{
return;
}
const settingsTable = this.getSettingsTable();
if(!settingsTable)
{
return;
}
const userTypeId = this.getSelectedUserTypeId();
if(!userTypeId)
{
return;
}
this.startProgress();
Ajax.runComponentAction('bitrix:main.field.config.detail', 'getSettings', {
data: {
userTypeId,
},
analyticsLabel: 'mainUserFieldConfigGetSettings',
mode: 'class',
}).then((response) => {
this.stopProgress();
let html = '';
if(response.data.html && response.data.html.length > 0)
{
html = response.data.html;
}
Runtime.html(settingsTable, html).then(() => {
this.adjustVisibility();
});
}).catch((response) => {
this.stopProgress();
this.showErrors(response.errors);
});
}
getLoader()
{
if(!this.loader)
{
this.loader = new Loader({size: 150});
}
return this.loader;
}
startProgress()
{
this.isProgress = true;
if(!this.getLoader().isShown())
{
this.getLoader().show(this.container);
}
this.hideErrors();
}
stopProgress()
{
this.isProgress = false;
this.getLoader().hide();
setTimeout(() => {
this.saveButton.setWaiting(false);
Dom.removeClass(this.saveButton.getContainer(), 'ui-btn-wait');
if(this.deleteButton)
{
this.deleteButton.setWaiting(false);
Dom.removeClass(this.deleteButton.getContainer(), 'ui-btn-wait');
}
}, 200);
}
showErrors(errors: string[])
{
let text = '';
errors.forEach((message) => {
text += message;
});
if(Type.isDomNode(this.errorsContainer))
{
this.errorsContainer.innerText = text;
this.errorsContainer.parentElement.style.display = 'block';
}
else
{
console.error(text);
}
}
hideErrors()
{
if(Type.isDomNode(this.errorsContainer))
{
this.errorsContainer.innerText = '';
this.errorsContainer.parentElement.style.display = 'none';
}
}
getSettings(): {}
{
const settings = {};
const settingsForm = this.container.querySelector('[data-role="main-user-field-settings"]');
if(settingsForm)
{
const formData = new FormData(settingsForm);
for(let pair of formData.entries())
{
const name = pair[0].substr(9, pair[0].length - 10);
settings[name] = pair[1];
}
}
return settings;
}
prepareFieldData(): {}
{
if(!this.container)
{
return {};
}
const editFormLabel = {};
const labelInputs = Array.from(this.container.querySelectorAll('[data-role="main-user-field-label-container"]'));
labelInputs.forEach((labelContainer) => {
const languageId = labelContainer.dataset['language'];
editFormLabel[languageId] = this.getInputValue('editFormLabel-' + languageId);
});
const list = [];
const userTypeId = this.getInputValue('userTypeId');
if(userTypeId === 'enumeration')
{
let selectedDefaultIndex = 0;
const enumDefault = this.getInput('enumDefault');
if(enumDefault)
{
selectedDefaultIndex = enumDefault.selectedIndex;
}
const sortStep = 100;
let sort = 0;
let index = 1;
const rows = Array.from(this.container.querySelectorAll('[data-role="main-user-field-enum-row"]'));
rows.forEach((row: Element) => {
const input = row.querySelector('[data-role="main-user-field-enum-value"]');
if (!input)
{
return;
}
let def = 'N';
if(selectedDefaultIndex === index)
{
def = 'Y';
}
sort += sortStep;
const id = Text.toInteger(row.dataset['id']);
list.push({
value: input.value,
def,
sort,
id,
});
index++;
})
}
const id = Text.toInteger(this.getInputValue('id'));
let fieldName = this.getInputValue('fieldName');
if(id <= 0)
{
fieldName = this.getInputValue('fieldPrefix') + fieldName;
}
return {
id,
editFormLabel,
entityId: this.getInputValue('entityId'),
fieldName: fieldName,
sort: this.getInputValue('sort'),
multiple: this.getInputValue('multiple'),
mandatory: this.getInputValue('mandatory'),
showFilter: this.getInputValue('showFilter'),
isSearchable: this.getInputValue('isSearchable'),
userTypeId,
settings: this.getSettings(),
enum: list,
};
}
save()
{
if(this.isProgress)
{
return;
}
if(!this.moduleId)
{
return;
}
this.startProgress();
const fieldData = this.prepareFieldData();
let languageId = null;
const commonLabelInput = this.getInput('editFormLabel');
if(commonLabelInput && commonLabelInput.parentElement && commonLabelInput.parentElement.parentElement)
{
languageId = commonLabelInput.parentElement.parentElement.dataset['language'];
}
const userField = new UserField(fieldData, {
languageId,
moduleId: this.moduleId,
});
userField.save().then(() => {
this.afterSave(userField);
this.stopProgress();
}).catch((errors) => {
this.showErrors(errors);
this.stopProgress();
});
}
delete()
{
if(this.isProgress)
{
return;
}
if(!this.moduleId)
{
return;
}
const id = Text.toInteger(this.getInputValue('id'));
if(id <= 0)
{
return;
}
MessageBox.confirm(
Loc.getMessage('MAIN_FIELD_CONFIG_DELETE_CONFIRM'),
() => {
return new Promise((resolve) => {
const userField = new UserField(this.prepareFieldData(), {
moduleId: this.moduleId,
});
this.startProgress();
userField.delete().then(() => {
this.stopProgress();
const slider = this.getSlider();
if(slider)
{
this.addDataToSlider('userFieldData', userField.serialize());
slider.close();
}
else
{
MessageBox.alert(Loc.getMessage('MAIN_FIELD_CONFIG_DELETE_SUCCESS'));
}
resolve();
}).catch((errors) => {
this.stopProgress();
this.showErrors(errors);
resolve();
});
});
},
null,
(box) => {
this.stopProgress();
box.close();
}
);
}
adjustVisibility()
{
const settingsTable = this.getSettingsTable();
const settingsTab = document.querySelector('[data-role="tab-additional"]');
const listTab = document.querySelector('[data-role="tab-list"]');
if(!settingsTable || !settingsTab || !listTab)
{
return;
}
if(settingsTable.childElementCount <= 0)
{
settingsTab.style.display = 'none';
}
else
{
settingsTab.style.display = 'block';
}
const userTypeId = this.getSelectedUserTypeId();
if(userTypeId === 'enumeration')
{
listTab.style.display = 'flex';
}
else
{
listTab.style.display = 'none';
}
if(userTypeId === 'boolean')
{
this.changeInputVisibility('multiple', 'none');
this.changeInputVisibility('mandatory', 'none');
}
else
{
this.changeInputVisibility('multiple', 'block');
this.changeInputVisibility('mandatory', 'block');
}
}
changeInputVisibility(inputName: string, display: string)
{
const input = this.getInput(inputName);
if(input && input.parentElement && input.parentElement.parentElement)
{
input.parentElement.parentElement.style.display = display;
}
}
afterSave(userField: UserField)
{
this.addDataToSlider('userFieldData', userField.serialize());
const slider = this.getSlider();
if(slider)
{
slider.close();
}
else
{
const id = Text.toInteger(this.getInputValue('id'));
if(id <= 0)
{
if(!!userField.getDetailUrl())
{
location.href = userField.getDetailUrl();
return;
}
this.getInput('id').value = userField.getId();
const prefixInput = this.getInput('fieldPrefix');
if(prefixInput && prefixInput.parentElement && prefixInput.parentElement.parentElement)
{
prefixInput.parentElement.parentElement.classList.remove('main-user-field-name-with-prefix');
Dom.remove(prefixInput.parentElement);
}
this.getInput('fieldName').value = userField.getName();
this.getInput('fieldName').disabled = true;
this.getInput('fieldName').parentElement.classList.remove('ui-ctl-inline');
}
}
}
getSlider()
{
if(Reflection.getClass('BX.SidePanel'))
{
return BX.SidePanel.Instance.getSliderByWindow(window);
}
return null;
}
addDataToSlider(key, data)
{
if(Type.isString(key))
{
let slider = this.getSlider();
if(slider)
{
slider.getData().set(key, data);
BX.SidePanel.Instance.postMessage(slider, 'userfield-list-update');
}
}
}
static handleLeftMenuClick(id: number, tabName: string)
{
if(Config.#instances)
{
const instance = Config.#instances.get(id);
if(instance)
{
instance.showTab(tabName);
}
}
}
syncLabelInputs(fromLabel: HTMLInputElement, toLabel: HTMLInputElement)
{
const tab = fromLabel.closest('.main-user-field-edit-tab');
if(tab && tab.classList.contains('main-user-field-edit-tab-current'))
{
toLabel.value = fromLabel.value;
}
}
addEnumRow()
{
const addEnum = this.container.querySelector('[data-role="main-user-field-enum-add"]');
if (addEnum)
{
const row = Tag.render`
<div class="main-user-field-enum-row" data-role="main-user-field-enum-row">
<div class="main-user-field-enum-row-inner ui-ctl ui-ctl-textbox ui-ctl-w100 ui-ctl-row">
<span class="main-user-field-enum-row-draggable" style=""></span>
<input class="ui-ctl-element" type="text" name="ENUM[][VALUE]" value="" data-role="main-user-field-enum-value" onchange="${this.syncEnumDefaultSelector.bind(this)}">
<div class="main-user-field-enum-delete" onclick="${this.deleteEnumRow.bind(this)}"></div>
</div>
</div>`;
Dom.append(row, document.querySelector('.main-user-field-enum-row-list'));
let item = new DragDropItem();
item.init(row);
}
}
deleteEnumRow({target})
{
Dom.remove(target.parentElement);
this.syncEnumDefaultSelector();
}
syncEnumDefaultSelector()
{
const userTypeId = this.getInputValue('userTypeId');
if(userTypeId === 'enumeration')
{
const selector = this.getInput('enumDefault');
if(!selector)
{
return;
}
let selectedId;
let selectedValue;
const selectedDefaultOption = this.getSelectedOption('enumDefault');
if(selectedDefaultOption)
{
if(selectedDefaultOption.dataset['id'])
{
selectedId = Text.toInteger(selectedDefaultOption.dataset['id']);
}
else
{
selectedValue = selectedDefaultOption.value;
}
}
const options = Array.from(selector.querySelectorAll('option'));
options.forEach((option: HTMLOptionElement) => {
if(option.value !== 'empty')
{
Dom.remove(option);
}
});
const rows = Array.from(this.container.querySelectorAll('[data-role="main-user-field-enum-row"]'));
rows.forEach((row: Element) => {
const id = Text.toInteger(row.dataset['id']);
const input = row.querySelector('[data-role="main-user-field-enum-value"]');
if (!input)
{
return;
}
const value = input.value;
const selected = (
(id > 0 && id === selectedId)
|| (value === selectedValue)
);
if(value.length > 0)
{
selector.appendChild(Tag.render`<option ${selected ? 'selected="selected"' : ''} value="${Text.encode(value)}" data-id="${id}">${Text.encode(value)}</option>`);
}
});
}
}
}
class DragDropItem
{
constructor() {
this.itemContainer = null;
this.draggableItemContainer = null;
this.dragElement = null;
}
init(item)
{
this.itemContainer = item;
const dragButton = this.itemContainer.querySelector('.main-user-field-enum-row-draggable');
if (jsDD)
{
dragButton.onbxdragstart = this.onDragStart.bind(this);
dragButton.onbxdrag = this.onDrag.bind(this);
dragButton.onbxdragstop = this.onDragStop.bind(this);
jsDD.registerObject(dragButton);
this.itemContainer.onbxdestdraghover = this.onDragEnter.bind(this);
this.itemContainer.onbxdestdraghout = this.onDragLeave.bind(this);
this.itemContainer.onbxdestdragfinish = this.onDragDrop.bind(this);
jsDD.registerDest(this.itemContainer, 30);
}
}
onDragStart()
{
Dom.addClass(this.itemContainer, "main-user-field-enum-row-disabled");
if (!this.dragElement)
{
this.dragElement = this.itemContainer.cloneNode(true);
this.dragElement.style.position = "absolute";
this.dragElement.style.width = this.itemContainer.offsetWidth + "px";
this.dragElement.className = "main-user-field-enum-row-drag";
Dom.append(this.dragElement, document.body);
}
}
onDrag(x, y)
{
if (this.dragElement)
{
this.dragElement.style.left = x + "px";
this.dragElement.style.top = y + "px";
}
}
onDragStop()
{
Dom.removeClass(this.itemContainer, "main-user-field-enum-row-disabled");
Dom.remove(this.dragElement);
this.dragElement = null;
}
onDragEnter(draggableItem)
{
this.draggableBtnContainer = draggableItem.closest('.main-user-field-enum-row');
if (this.draggableBtnContainer !== this.itemContainer)
{
this.showDragTarget();
}
}
onDragLeave()
{
this.hideDragTarget();
}
onDragDrop()
{
if (this.draggableBtnContainer !== this.itemContainer)
{
this.hideDragTarget();
Dom.remove(this.draggableBtnContainer);
Dom.insertBefore(this.draggableBtnContainer, this.itemContainer);
}
}
showDragTarget()
{
Dom.addClass(this.itemContainer, 'main-user-field-enum-row-target-shown');
this.getDragTarget().style.height = this.itemContainer.offsetHeight + "px";
}
hideDragTarget()
{
Dom.removeClass(this.itemContainer, "main-user-field-enum-row-target-shown");
this.getDragTarget().style.height = 0;
}
getDragTarget()
{
if (!this.dragTarget)
{
this.dragTarget = Tag.render`<div class="main-user-field-enum-row-drag-target"></div>`;
Dom.prepend(this.dragTarget, this.itemContainer);
}
return this.dragTarget;
}
}
class DragDropBtnContainer
{
constructor() {
this.container = document.querySelector('.main-user-field-enum-row-list');
this.height = null;
}
init()
{
this.container.onbxdestdraghover = BX.delegate(this.onDragEnter, this);
this.container.onbxdestdraghout = BX.delegate(this.onDragLeave, this);
this.container.onbxdestdragfinish = BX.delegate(this.onDragDrop, this);
jsDD.registerDest(this.container, 40);
}
onDragEnter(draggableItem)
{
this.draggableBtnContainer = draggableItem.closest('.main-user-field-enum-row');
this.height = this.draggableBtnContainer.offsetHeight;
this.showDragTarget();
}
onDragLeave()
{
this.hideDragTarget();
}
onDragDrop()
{
this.hideDragTarget();
Dom.remove(this.draggableBtnContainer);
Dom.insertBefore(this.draggableBtnContainer, this.dragTarget);
}
showDragTarget()
{
Dom.addClass(this.container, 'main-user-field-enum-row-list-target-shown');
this.getDragTarget().style.height = this.height + "px";
}
hideDragTarget()
{
Dom.removeClass(this.container, "main-user-field-enum-row-list-target-shown");
this.getDragTarget().style.height = 0;
}
getDragTarget()
{
if (!this.dragTarget)
{
this.dragTarget = Tag.render`<div class="main-user-field-enum-row-list-target"></div>`;
Dom.append(this.dragTarget, this.container);
}
return this.dragTarget;
}
}
namespace.Config = Config;
namespace.DragDropItem = DragDropItem;
namespace.DragDropBtnContainer = DragDropBtnContainer;