%PDF- %PDF-
Server IP : 37.220.80.31 / Your IP : 3.131.38.208 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/js/landing/ui/panel/formsettingspanel/content/fields-rules/src/internal/rule-group/ |
Upload File : |
import {Dom, Tag, Text, Type} from 'main.core'; import {BaseEvent} from 'main.core.events'; import {BaseField} from 'landing.ui.field.basefield'; import {Loc} from 'landing.loc'; import {IconButton} from 'landing.ui.component.iconbutton'; import {ActionPanel} from 'landing.ui.component.actionpanel'; import {fetchEventsFromOptions} from 'landing.ui.component.internal'; import type {RuleGroupOptions} from '../../types'; import RuleEntry from '../rule-entry/rule-entry'; import RuleType from '../../rule-type'; import {FieldElement} from '../field-element/field-element'; import FieldValueElement from '../field-value-element/field-value-element'; import FieldActionPanel from '../field-action-panel/field-action-panel'; import './css/style.css'; export default class RuleGroup extends BaseField { options: RuleGroupOptions; constructor(options: RuleGroupOptions) { super(options); this.setEventNamespace('BX.Landing.UI.Panel.FormSettingsPanel.Content.FieldRules.RuleGroup'); this.subscribeFromOptions(fetchEventsFromOptions(options)); this.setLayoutClass('landing-ui-rule-group'); const layout = this.getLayout(); Dom.clean(layout); Dom.append(this.getHeaderLayout(), layout); Dom.append(this.getBodyLayout(), layout); Dom.append(this.getFooterLayout(), layout); if (Type.isArrayFilled(this.options.data.list)) { const filteredDataList = this.options.data.list.filter((item) => { const conditionTarget = this.getField(item.condition.target); const actionTarget = this.getField(item.action.target); return conditionTarget && actionTarget; }); if (this.getTypeId() === RuleType.TYPE_0) { const groupedList = filteredDataList.reduce((acc, item) => { const {target, operation, value} = item.condition; if (!Type.isArray(acc[`${target}${operation}${value}`])) { acc[`${target}${operation}${value}`] = []; } acc[`${target}${operation}${value}`].push(item); return acc; }, {}); Object.values(groupedList).forEach((group, index) => { const [firstItem] = group; if (Type.isPlainObject(firstItem)) { const targetField = this.getField(firstItem.condition.target); const entry = new RuleEntry({ enableHeader: index === 0, typeId: this.getTypeId(), fields: this.options.fields, onChange: () => this.emit('onChange'), conditions: [ new FieldElement({ dictionary: this.options.dictionary, fields: this.options.fields, id: targetField.id, title: targetField.label, color: FieldElement.Colors.blue, onRemove: () => { this.onConditionFieldRemove(entry); }, }), new FieldValueElement({ dictionary: this.options.dictionary, fields: this.options.fields, removable: false, data: group[0].condition, }), ], expressions: group.map((groupItem) => { const targetField = this.getField(groupItem.action.target); return new FieldElement({ id: targetField.id, title: targetField.label, removable: true, color: FieldElement.Colors.green, actionsLabel: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_LABEL'), actionsList: [ { name: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_SHOW_LABEL'), value: 'show', }, { name: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_HIDE_LABEL'), value: 'hide', }, ], actionsValue: groupItem.action.type, }); }), }); this.addEntry(entry); } }); } if ( this.getTypeId() === RuleType.TYPE_1 || this.getTypeId() === RuleType.TYPE_2 ) { const entry = new RuleEntry({ enableHeader: true, typeId: this.getTypeId(), fields: this.options.fields, onChange: () => this.emit('onChange'), }); const groupedList = filteredDataList.reduce((acc, item) => { const {target} = item.condition; if (!Type.isArray(acc[target])) { acc[target] = []; } acc[target].push(item); return acc; }, {}); Object.values(groupedList).forEach((group) => { const [firstItem] = group; if (Type.isPlainObject(firstItem)) { const targetField = this.getField(firstItem.condition.target); const allowedMultipleConditions = ( ( this.getTypeId() === RuleType.TYPE_2 && targetField.multiple ) || this.getTypeId() === RuleType.TYPE_1 ); entry.addCondition( new FieldElement({ dictionary: this.options.dictionary, fields: this.options.fields, id: targetField.id, title: targetField.label, color: FieldElement.Colors.blue, onRemove: () => { this.onConditionFieldRemove(entry); }, }), ); const groupedConditions = group.reduce((acc, item) => { acc[`${item.condition.operation}${item.condition.value}`] = item; return acc; }, {}); Object.values(groupedConditions).forEach((item) => { entry.addCondition( new FieldValueElement({ dictionary: this.options.dictionary, fields: this.options.fields, removable: allowedMultipleConditions, data: item.condition, }), ); }); entry.addCondition( new FieldActionPanel({ style: { display: allowedMultipleConditions ? null : 'none', }, onAddCondition: () => { this.onAddFieldCondition( new BaseEvent({ data: { entry, target: targetField.id, }, }), ); }, }), ); } }); const groupedExpressions = Object.values(filteredDataList).reduce((acc, item) => { const {target, type} = item.action; acc[`${target}${type}`] = item; return acc; }, {}); Object.values(groupedExpressions).forEach((item) => { const targetField = this.getField(item.action.target); const element = new FieldElement({ id: targetField.id, title: targetField.label, removable: true, color: FieldElement.Colors.green, actionsLabel: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_LABEL'), actionsList: [ { name: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_SHOW_LABEL'), value: 'show', }, { name: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_HIDE_LABEL'), value: 'hide', }, ], actionsValue: item.action.type, }); entry.addExpression(element); }); this.addEntry(entry); } } } getEntries(): Array<RuleEntry> { return this.cache.remember('entries', () => []); } setEntries(entries: Array<RuleEntry>) { this.cache.set('entries', entries); } addEntry(entry: RuleEntry) { if (entry) { const entries = this.getEntries(); if (!entries.includes(entry)) { entry.subscribe('onChange', () => this.emit('onChange')); entries.push(entry); Dom.append(entry.getLayout(), this.getBodyLayout()); this.emit('onChange'); } } } getHeaderLayout(): HTMLDivElement { return this.cache.remember('headerLayout', () => { return Tag.render` <div class="landing-ui-rule-group-header"> ${this.getHeaderTitleLayout()} ${this.getRemoveButtonLayout()} </div> `; }); } getHeaderTitleLayout(): HTMLDivElement { return this.cache.remember('headerTitleLayout', () => { const titleOfRuleType = Loc.getMessage(`LANDING_FIELDS_RULES_TYPE_${this.getTypeId() + 1}`); return Tag.render` <div class="landing-ui-rule-group-header-title">${titleOfRuleType}</div> `; }); } getRemoveButtonLayout(): HTMLDivElement { return this.cache.remember('removeButtonLayout', () => { const button = new IconButton({ type: IconButton.Types.remove, onClick: this.onRemoveClick.bind(this), title: Loc.getMessage('LANDING_RULE_GROUP_REMOVE_BUTTON_TITLE'), style: { marginLeft: 'auto', }, }); return button.getLayout(); }); } onRemoveClick() { Dom.remove(this.getLayout()); this.emit('onRemove'); this.emit('onChange'); } getBodyLayout(): HTMLDivElement { return this.cache.remember('bodyLayout', () => { return Tag.render` <div class="landing-ui-rule-group-body"></div> `; }); } getFooterLayout(): HTMLDivElement { return this.cache.remember('footerLayout', () => { return Tag.render` <div class="landing-ui-rule-group-footer"> ${this.getFooterActionPanel().getLayout()} </div> `; }); } getFooterActionPanel(): ActionPanel { return this.cache.remember('footerActionPanel', () => { return new ActionPanel({ left: [ { id: 'selectField', text: Loc.getMessage('LANDING_RULE_ENTRY_ADD_FIELD_LABEL'), onClick: this.onAddFieldClick.bind(this), }, ], }); }); } onAddFieldClick(event: BaseEvent) { const menu = this.getFieldsListMenu(); menu.getPopupWindow().setBindElement(event.currentTarget); menu.show(); } getFieldsListMenu(): BX.Main.Menu { return this.cache.remember('fieldsMenu', () => { return new window.top.BX.Main.Menu({ maxHeight: 205, items: ( this.options.fields .map((field) => { return { id: field.id, text: field.label, onclick: () => { this.onFieldsListMenuItemClick(field); this.getFieldsListMenu().close(); }, }; }) ), autoHide: true, }); }); } getDefaultValueState(fieldId: string): string { const targetField = this.options.fields.find((field) => { return String(field.id) === String(fieldId); }); if (targetField) { const filteredOperations = this.options.dictionary.deps.condition.operations.filter((operation) => { return ( ( !Type.isArrayFilled(operation.fieldTypes) || operation.fieldTypes.includes(targetField.type) ) && ( !Type.isArrayFilled(operation.excludeFieldTypes) || ( Type.isArrayFilled(operation.excludeFieldTypes) && !operation.excludeFieldTypes.includes(targetField.type) ) ) ); }); if (Type.isArrayFilled(filteredOperations)) { return filteredOperations[0].id; } } return '='; } onAddFieldCondition(event: BaseEvent) { const {target, entry}: {target: string, entry: RuleEntry} = event.getData(); entry.addCondition( new FieldValueElement({ dictionary: this.options.dictionary, fields: this.options.fields, removable: true, data: { target, operation: this.getDefaultValueState(target), value: null, }, }), ); } onConditionFieldRemove(entry: RuleEntry) { const fieldElements = entry.conditions.filter((item) => { return item instanceof FieldElement; }); if (fieldElements.length === 1) { const entries = this.getEntries().filter((item) => { return entry !== item; }); this.setEntries(entries); Dom.remove(entry.getLayout()); } } onFieldsListMenuItemClick(field) { if (this.getTypeId() === RuleType.TYPE_0) { const enableHeader = this.getEntries().length === 0; const entry = new RuleEntry({ enableHeader, typeId: this.getTypeId(), fields: this.options.fields, conditions: [ new FieldElement({ dictionary: this.options.dictionary, fields: this.options.fields, id: field.id, title: field.label, color: FieldElement.Colors.blue, onRemove: () => { this.onConditionFieldRemove(entry); }, }), new FieldValueElement({ dictionary: this.options.dictionary, fields: this.options.fields, removable: false, data: { target: field.id, operation: this.getDefaultValueState(field.id), value: null, }, }), ], onChange: () => this.emit('onChange'), }); this.addEntry(entry); } if ( this.getTypeId() === RuleType.TYPE_1 || this.getTypeId() === RuleType.TYPE_2 ) { const allowedMultipleConditions = ( ( this.getTypeId() === RuleType.TYPE_2 && field.multiple ) || this.getTypeId() === RuleType.TYPE_1 ); const items = [ new FieldElement({ dictionary: this.options.dictionary, fields: this.options.fields, id: field.id, title: field.label, color: FieldElement.Colors.blue, onRemove: () => { this.onConditionFieldRemove(this.getEntries()[0]); }, }), new FieldValueElement({ dictionary: this.options.dictionary, fields: this.options.fields, removable: allowedMultipleConditions, data: { target: field.id, operation: this.getDefaultValueState(field.id), value: null, }, }), ]; if ( this.getTypeId() === RuleType.TYPE_1 || this.getTypeId() === RuleType.TYPE_2 ) { items.push( new FieldActionPanel({ style: { display: allowedMultipleConditions ? null : 'none', }, onAddCondition: () => { this.onAddFieldCondition( new BaseEvent({ data: { entry: this.getEntries()[0], target: field.id, }, }), ); }, }), ); } const [entry] = this.getEntries(); if (entry) { items.forEach((item) => { entry.addCondition(item); }); } else { const newEntry = new RuleEntry({ enableHeader: true, typeId: this.getTypeId(), fields: this.options.fields, conditions: items, onChange: () => this.emit('onChange'), }); this.addEntry(newEntry); } } } getId(): number { if (!Type.isNil(this.options.data.id)) { return this.options.data.id; } return 0; } getTypeId(): number { return Text.toNumber(this.options.data.typeId); } getLogic(): 'or' | 'and' { return this.getTypeId() === RuleType.TYPE_2 ? 'and' : 'or'; } getValue() { const list = this.getEntries().reduce((acc, entry) => { return [...acc, ...entry.getValue()]; }, []); return { id: this.getId(), typeId: this.getTypeId(), logic: this.getLogic(), list, }; } getField(fieldId: string) { return this.options.fields.find((item) => { return String(item.id) === String(fieldId); }); } }