Your IP : 3.143.4.111
// @flow
import 'ui.design-tokens';
import 'ui.progressbar';
import {Type, Tag, Loc, Dom, Event} from 'main.core';
import { BaseEvent, EventEmitter } from 'main.core.events';
import { Popup, PopupManager } from 'main.popup';
import { Alert, AlertColor, AlertIcon, AlertSize } from 'ui.alerts';
import {Button, CancelButton} from 'ui.buttons';
import type { OptionsField } from './process-types';
import { BaseField } from './fields/base-field';
import { TextField } from './fields/text-field';
import { FileField } from './fields/file-field';
import { CheckboxField } from './fields/checkbox-field';
import { SelectField } from './fields/select-field';
import { RadioField } from './fields/radio-field';
/**
* @namespace {BX.UI.StepProcessing}
*/
export type DialogOptions = {
id: string,
messages?: {
title?: string,
summary?: string,
startButton?: string,
stopButton?: string,
closeButton?: string
},
optionsFields?: OptionsField[],
optionsFieldsValue?: Object,
showButtons?: {
start?: boolean,
stop?: boolean,
close?: boolean
},
handlers?: {
start?: any => void,
stop?: any => void,
dialogShown?: any => void,
dialogClosed?: any => void
},
minWidth?: number,
maxWidth?: number
};
export const DialogStyle = {
ProcessWindow: 'bx-stepprocessing-dialog-process',
ProcessPopup: 'bx-stepprocessing-dialog-process-popup',
ProcessSummary: 'bx-stepprocessing-dialog-process-summary',
ProcessProgressbar: 'bx-stepprocessing-dialog-process-progressbar',
ProcessOptions: 'bx-stepprocessing-dialog-process-options',
ProcessOptionContainer: 'bx-stepprocessing-dialog-process-option-container',
ProcessOptionsTitle: 'bx-stepprocessing-dialog-process-options-title',
ProcessOptionsInput: 'bx-stepprocessing-dialog-process-options-input',
ProcessOptionsObligatory: 'ui-alert ui-alert-xs ui-alert-warning',
ProcessOptionText: 'bx-stepprocessing-dialog-process-option-text',
ProcessOptionCheckbox: 'bx-stepprocessing-dialog-process-option-checkbox',
ProcessOptionMultiple: 'bx-stepprocessing-dialog-process-option-multiple',
ProcessOptionFile: 'bx-stepprocessing-dialog-process-option-file',
ProcessOptionSelect: 'bx-stepprocessing-dialog-process-option-select',
ButtonStart: 'popup-window-button-accept',
ButtonStop: 'popup-window-button-disable',
ButtonCancel: 'popup-window-button-link-cancel',
ButtonDownload: 'popup-window-button-link-download',
ButtonRemove: 'popup-window-button-link-remove'
};
export const DialogEvent = {
Shown: 'BX.UI.StepProcessing.Dialog.Shown',
Closed: 'BX.UI.StepProcessing.Dialog.Closed',
Start: 'BX.UI.StepProcessing.Dialog.Start',
Stop: 'BX.UI.StepProcessing.Dialog.Stop',
};
/**
* UI of process dialog
*
* @namespace {BX.UI.StepProcessing}
* @event BX.UI.StepProcessing.Dialog.Shown
* @event BX.UI.StepProcessing.Dialog.Closed
* @event BX.UI.StepProcessing.Dialog.Start
* @event BX.UI.StepProcessing.Dialog.Stop
*/
export class Dialog
{
id: string = '';
/**
* @type {DialogOptions}
* @private
*/
_settings: DialogOptions = {};
//popup
popupWindow: Popup;
isShown: boolean = false;
//UI
error: Alert;
warning: Alert;
progressBar: BX.UI.ProgressBar;
buttons: {[type: 'start'|'stop'|'close']: Button} = {};
fields: {[name: string]: BaseField} = {};
//DOM
optionsFieldsBlock: HTMLElement;
summaryBlock: HTMLElement;
errorBlock: HTMLElement;
warningBlock: HTMLElement;
progressBarBlock: HTMLElement;
/**
* @private
*/
_messages = {};
/**
* @private
*/
_handlers = {};
/**
* @private
*/
isAdminPanel = false;
constructor(settings: DialogOptions = {})
{
this._settings = settings;
this.id = this.getSetting('id', 'ProcessDialog_' + Math.random().toString().substring(2));
this._messages = this.getSetting('messages', {});
let optionsFields = {};
const fields = this.getSetting('optionsFields');
if (Type.isArray(fields))
{
fields.forEach(option => {
if (
Type.isPlainObject(option) &&
option.hasOwnProperty('name') &&
option.hasOwnProperty('type') &&
option.hasOwnProperty('title')
)
{
optionsFields[option.name] = option;
}
});
}
else if (Type.isPlainObject(fields))
{
Object.keys(fields).forEach(optionName => {
let option = fields[optionName];
if (
Type.isPlainObject(option) &&
option.hasOwnProperty('name') &&
option.hasOwnProperty('type') &&
option.hasOwnProperty('title')
)
{
optionsFields[option.name] = option;
}
});
}
this.setSetting('optionsFields', optionsFields);
const optionsFieldsValue = this.getSetting('optionsFieldsValue');
if (!optionsFieldsValue)
{
this.setSetting('optionsFieldsValue',{});
}
const showButtons = this.getSetting('showButtons');
if (!showButtons)
{
this.setSetting('showButtons', {'start':true, 'stop':true, 'close':true});
}
this._handlers = this.getSetting('handlers', {});
}
destroy()
{
if (this.popupWindow)
{
this.popupWindow.destroy();
this.popupWindow = null;
}
}
getId()
{
return this.id;
}
getSetting(name: $Keys<DialogOptions>, defaultVal: ?any = null)
{
return this._settings.hasOwnProperty(name) ? this._settings[name] : defaultVal;
}
setSetting(name: $Keys<DialogOptions>, value: any)
{
this._settings[name] = value;
return this;
}
getMessage(name: string): string
{
return this._messages && this._messages.hasOwnProperty(name) ? this._messages[name] : "";
}
setMessage(name: string, text: string)
{
this._messages[name] = text;
return this;
}
//region Event handlers
setHandler(type: string, handler: any => void)
{
if (typeof(handler) == 'function')
{
this._handlers[type] = handler;
}
return this;
}
callHandler(type: string, args: {[string]: any})
{
if (typeof(this._handlers[type]) == 'function')
{
this._handlers[type].apply(this, args);
}
}
//endregion
//region Run
start()
{
this.callHandler('start');
EventEmitter.emit(DialogEvent.Start, new BaseEvent({dialog: this}));
}
stop()
{
this.callHandler('stop');
EventEmitter.emit(DialogEvent.Stop, new BaseEvent({dialog: this}));
}
show()
{
if (this.isShown)
{
return;
}
const optionElement = document.querySelector('#bx-admin-prefix');
if (optionElement)
{
this.isAdminPanel = true;
}
this.progressBar = new BX.UI.ProgressBar({
statusType: BX.UI.ProgressBar.Status.COUNTER,
size: this.isAdminPanel ? BX.UI.ProgressBar.Size.LARGE : BX.UI.ProgressBar.Size.MEDIUM,
fill: this.isAdminPanel,
column: !this.isAdminPanel
});
this.error = new Alert({
color: AlertColor.DANGER,
icon: AlertIcon.DANGER,
size: AlertSize.SMALL
});
this.warning = new Alert({
color: AlertColor.WARNING,
icon: AlertIcon.WARNING,
size: AlertSize.SMALL
});
this.popupWindow = PopupManager.create({
id: this.getId(),
cacheable: false,
titleBar: this.getMessage("title"),
autoHide: false,
closeByEsc: false,
closeIcon: true,
content: this._prepareDialogContent(),
draggable: true,
buttons: this._prepareDialogButtons(),
className: DialogStyle.ProcessWindow,
bindOptions: {forceBindPosition: false},
events: {
onClose: BX.delegate(this.onDialogClose, this)
},
overlay: true,
resizable: true,
minWidth: Number.parseInt(this.getSetting('minWidth', 500)),
maxWidth: Number.parseInt(this.getSetting('maxWidth', 1000))
});
if (!this.popupWindow.isShown())
{
this.popupWindow.show();
}
this.isShown = this.popupWindow.isShown();
if (this.isShown)
{
this.callHandler('dialogShown');
EventEmitter.emit(DialogEvent.Shown, new BaseEvent({dialog: this}));
}
return this;
}
close()
{
if (!this.isShown)
{
return;
}
if (this.popupWindow)
{
this.popupWindow.close();
}
this.isShown = false;
this.callHandler('dialogClosed');
EventEmitter.emit(DialogEvent.Closed, new BaseEvent({dialog: this}));
return this;
}
// endregion
//region Dialog
/**
* @private
*/
_prepareDialogContent()
{
this.summaryBlock = Tag.render`<div class="${DialogStyle.ProcessSummary}">${this.getMessage('summary')}</div>`;
this.errorBlock = this.error.getContainer();
this.warningBlock = this.warning.getContainer();
this.errorBlock.style.display = 'none';
this.warningBlock.style.display = 'none';
if (this.progressBar)
{
this.progressBarBlock = Tag.render`<div class="${DialogStyle.ProcessProgressbar}" style="display:none"></div>`;
this.progressBarBlock.appendChild(this.progressBar.getContainer());
}
if (!this.optionsFieldsBlock)
{
this.optionsFieldsBlock = Tag.render`<div class="${DialogStyle.ProcessOptions}" style="display:none"></div>`;
}
else
{
Dom.clean(this.optionsFieldsBlock);
}
let optionsFields = this.getSetting('optionsFields', {});
let optionsFieldsValue = this.getSetting('optionsFieldsValue', {});
Object.keys(optionsFields).forEach(optionName => {
let optionValue = optionsFieldsValue[optionName] ? optionsFieldsValue[optionName] : null;
let optionBlock = this._renderOption(optionsFields[optionName], optionValue);
if (optionBlock instanceof HTMLElement)
{
this.optionsFieldsBlock.appendChild(optionBlock);
this.optionsFieldsBlock.style.display = 'block';
}
});
let dialogContent = Tag.render`<div class="${DialogStyle.ProcessPopup}"></div>`;
dialogContent.appendChild(this.summaryBlock);
dialogContent.appendChild(this.warningBlock);
dialogContent.appendChild(this.errorBlock);
if (this.progressBarBlock)
{
dialogContent.appendChild(this.progressBarBlock);
}
if (this.optionsFieldsBlock)
{
dialogContent.appendChild(this.optionsFieldsBlock);
}
return dialogContent;
}
/**
* @private
*/
_renderOption(option: OptionsField, optionValue: any = null)
{
option.id = this.id + '_opt_' + option.name;
switch (option.type)
{
case 'text':
this.fields[option.name] = new TextField(option);
break;
case 'file':
this.fields[option.name] = new FileField(option);
break;
case 'checkbox':
this.fields[option.name] = new CheckboxField(option);
break;
case 'select':
this.fields[option.name] = new SelectField(option);
break;
case 'radio':
this.fields[option.name] = new RadioField(option);
break;
}
if (optionValue !== null)
{
this.fields[option.name].setValue(optionValue);
}
const optionBlock = this.fields[option.name].getContainer();
return optionBlock;
}
//endregion
//region Events
onDialogClose()
{
if (this.popupWindow)
{
this.popupWindow.destroy();
this.popupWindow = null;
}
this.buttons = {};
this.fields = {};
this.summaryBlock = null;
this.isShown = false;
this.callHandler('dialogClosed');
EventEmitter.emit(DialogEvent.Closed, new BaseEvent({dialog: this}));
}
handleStartButtonClick()
{
const btn = this.getButton('start');
if (btn && btn.isDisabled())
{
return;
}
this.start();
}
handleStopButtonClick()
{
const btn = this.getButton('stop');
if (btn && btn.isDisabled())
{
return;
}
this.stop();
}
handleCloseButtonClick()
{
this.popupWindow.close();
}
//endregion
//region Buttons
/**
* @private
*/
_prepareDialogButtons(): Button[]
{
const showButtons = this.getSetting('showButtons');
let ret = [];
this.buttons = {};
if (showButtons.start)
{
const startButtonText = this.getMessage('startButton');
this.buttons.start = new Button({
text: startButtonText || 'Start',
color: Button.Color.SUCCESS,
icon: Button.Icon.START,
//className: DialogStyle.ButtonStart,
events:
{
click: BX.delegate(this.handleStartButtonClick, this)
}
});
ret.push(this.buttons.start);
}
if (showButtons.stop)
{
const stopButtonText = this.getMessage('stopButton');
this.buttons.stop = new Button({
text: stopButtonText || 'Stop',
color: Button.Color.LIGHT_BORDER,
icon: Button.Icon.STOP,
//className: DialogStyle.ButtonStop,
events:
{
click: BX.delegate(this.handleStopButtonClick, this)
}
});
this.buttons.stop.setDisabled();
ret.push(this.buttons.stop);
}
if (showButtons.close)
{
const closeButtonText = this.getMessage('closeButton');
this.buttons.close = new CancelButton({
text: closeButtonText || 'Close',
color: Button.Color.LIGHT_BORDER,
tag: Button.Tag.SPAN,
events:
{
click: BX.delegate(this.handleCloseButtonClick, this)
}
});
ret.push(this.buttons.close);
}
return ret;
}
/**
* @param {String} downloadLink
* @param {String} fileName
* @param {function} purgeHandler
* @return self
*/
setDownloadButtons(downloadLink: string, fileName: string, purgeHandler: any => {})
{
let ret = [];
if (downloadLink)
{
let downloadButtonText = this.getMessage("downloadButton");
downloadButtonText = downloadButtonText !== "" ? downloadButtonText : "Download file";
const downloadButton = new Button({
text: downloadButtonText,
color: Button.Color.SUCCESS,
icon: Button.Icon.DOWNLOAD,
className: DialogStyle.ButtonDownload,
tag: Button.Tag.LINK,
link: downloadLink,
props: {
//href: downloadLink,
download: fileName
}
});
ret.push(downloadButton);
}
if (typeof(purgeHandler) == 'function')
{
let clearButtonText = this.getMessage("clearButton");
clearButtonText = clearButtonText !== "" ? clearButtonText : "Delete file";
const clearButton = new Button({
text: clearButtonText,
color: Button.Color.LIGHT_BORDER,
icon: Button.Icon.REMOVE,
className: DialogStyle.ButtonRemove,
events:
{
click: purgeHandler
}
});
ret.push(clearButton);
}
if (this.buttons.close)
{
ret.push(this.buttons.close);
}
if (ret.length > 0 && this.popupWindow)
{
this.popupWindow.setButtons(ret);
}
return this;
}
resetButtons(showButtons = {'start':true, 'stop':true, 'close':true})
{
this._prepareDialogButtons();
showButtons = showButtons || this.getSetting('showButtons');
let ret = [];
if (showButtons.start)
{
ret.push(this.buttons.start);
}
if (showButtons.stop)
{
ret.push(this.buttons.stop);
}
if (showButtons.close)
{
ret.push(this.buttons.close);
}
if (ret.length > 0 && this.popupWindow)
{
this.popupWindow.setButtons(ret);
}
return this;
}
getButton(bid: string): ?Button
{
return this.buttons[bid] ?? null;
}
lockButton(bid: string, lock: boolean, wait: boolean)
{
const btn = this.getButton(bid);
if (btn)
{
btn.setDisabled(lock);
if (Type.isBoolean(wait))
{
btn.setWaiting(wait);
}
}
return this;
}
showButton(bid: string, show: boolean)
{
const btn = this.getButton(bid);
if (btn)
{
btn.getContainer().style.display = !!show ? '' : 'none';
}
if (bid === 'close')
{
if (this.popupWindow && this.popupWindow.closeIcon)
{
this.popupWindow.closeIcon.style.display = !!show ? '' : 'none';
}
}
return this;
}
// endregion
//region Summary
setSummary(content: string, isHtml: boolean = false)
{
if (this.optionsFieldsBlock)
{
BX.clean(this.optionsFieldsBlock);
this.optionsFieldsBlock.style.display = 'none';
}
if (Type.isStringFilled(content))
{
if (this.summaryBlock)
{
if (!!isHtml)
this.summaryBlock.innerHTML = content;
else
this.summaryBlock.innerHTML = BX.util.htmlspecialchars(content);
this.summaryBlock.style.display = "block";
}
}
else
{
this.summaryBlock.innerHTML = "";
this.summaryBlock.style.display = "none";
}
return this;
}
//endregion
//region Errors
setErrors(errors: Array<string>, isHtml: bool = false)
{
errors.forEach(err => this.setError(err, isHtml));
return this;
}
setError(content, isHtml)
{
if (Type.isStringFilled(content))
{
this.setSummary('');
if (this.progressBar)
{
this.progressBar.setColor(BX.UI.ProgressBar.Color.DANGER);
}
if (!!isHtml)
{
this.error.setText(content);
}
else
{
this.error.setText(BX.util.htmlspecialchars(content));
}
this.errorBlock.style.display = "flex";
}
return this;
}
clearErrors()
{
if (this.error)
{
this.error.setText('');
}
if (this.errorBlock)
{
this.errorBlock.style.display = 'none';
}
return this;
}
setWarning(err: string, isHtml: boolean = false)
{
if (Type.isStringFilled(err))
{
if (!!isHtml)
{
this.warning.setText(err);
}
else
{
this.warning.setText(BX.util.htmlspecialchars(err));
}
this.warningBlock.style.display = "flex";
}
return this;
}
clearWarnings()
{
if (this.warning)
{
this.warning.setText("");
}
if (this.warningBlock)
{
this.warningBlock.style.display = 'none';
}
return this;
}
//endregion
//region Progressbar
setProgressBar(totalItems: number, processedItems: number, textBefore: string)
{
if (this.progressBar)
{
if (Type.isNumber(processedItems) && Type.isNumber(totalItems) && totalItems > 0)
{
BX.show(this.progressBarBlock);
this.progressBar.setColor(BX.UI.ProgressBar.Color.PRIMARY);
this.progressBar.setMaxValue(totalItems);
textBefore = textBefore || "";
this.progressBar.setTextBefore(textBefore);
this.progressBar.update(processedItems);
}
else
{
this.hideProgressBar();
}
}
return this;
}
hideProgressBar()
{
if (this.progressBar)
{
BX.hide(this.progressBarBlock);
}
return this;
}
//endregion
//region Initial options
getOptionField(name: string): ?BaseField
{
if (Type.isString(name))
{
if (this.fields[name] && this.fields[name] instanceof BaseField)
{
return this.fields[name];
}
}
return null;
}
getOptionFieldValues()
{
let initialOptions = {};
if (this.optionsFieldsBlock)
{
Object.keys(this.fields).forEach(optionName => {
let field = this.getOptionField(optionName);
let val = field.getValue();
if (field.type === 'checkbox' && Type.isBoolean(val))
{
initialOptions[optionName] = val ? 'Y' : 'N';
}
else if (Type.isArray(val))
{
if (Type.isArrayFilled(val))
{
initialOptions[optionName] = val;
}
}
else if (val)
{
initialOptions[optionName] = val;
}
});
}
return initialOptions;
}
checkOptionFields(): boolean
{
let checked = true;
if (this.optionsFieldsBlock)
{
Object.keys(this.fields).forEach(optionName => {
let field = this.getOptionField(optionName);
if (field.obligatory)
{
if (!field.isFilled())
{
field.showWarning();
checked = false;
}
else
{
field.hideWarning();
}
}
});
}
return checked;
}
lockOptionFields(flag: boolean = true)
{
if (this.optionsFieldsBlock)
{
Object.keys(this.fields).forEach(optionName => {
let field = this.getOptionField(optionName);
if (field)
{
field.lock(flag);
}
});
}
return this;
}
//endregion
}