Your IP : 3.143.239.135
import {EventEmitter, BaseEvent} from "main.core.events";
import {PopupMenu} from 'main.popup';
import {Dom, Event, Reflection, Text, Tag, Loc} from 'main.core';
import Grid from "./grid";
import Column from "./column";
import Title from "./item/title";
import UserGroupTitle from "./item/usergrouptitle";
import VariableSelector from "./item/variableselector";
import MultiSelector from "./item/multivariable/multiselector";
import Hint from "./item/hint";
type SectionOptions = {
id: string;
headSection: Section;
title: string;
hint: string;
rights: [];
userGroups: [];
grid: Grid;
};
export default class Section {
constructor(options: SectionOptions)
{
this.id = options.id ?? null;
this.headSection = options.headSection ? options.headSection : null;
this.title = options.title;
this.hint = options.hint;
this.rights = options.rights ? options.rights : [];
this.userGroups = options.userGroups ? options.userGroups : [];
this.grid = options.grid ? options.grid : null;
this.layout = {
title: null,
headColumn: null,
columns: null,
content: null,
earLeft: null,
earRight: null
};
this.scroll = 0;
this.earTimer = null;
this.earLeftTimer = null;
this.earRightTimer = null;
this.columns = [];
this.bindEvents();
}
bindEvents(): void
{
EventEmitter.subscribe(this.grid, 'AccessRights.Section:scroll', (event: BaseEvent) => {
const [object] = event.getData();
if (this.title !== object.title)
{
this.getColumnsContainer().scrollLeft = object.getScroll()
}
object.adjustEars();
PopupMenu.destroy('ui-access-rights-column-item-popup-variables');
});
Event.bind(window, 'resize', this.adjustEars.bind(this));
}
getGrid(): Grid
{
return this.grid;
}
addColumn(param): void
{
if(!param)
{
return;
}
const options = Object.assign({}, param);
options.userGroup = param;
const column = this.getColumn(options);
Dom.append(column.render(), this.layout.columns)
this.columns.push(column);
}
getColumn(options): Column
{
const controls = [];
this.rights.map(
(data) => {
const isVariable = (data.type === VariableSelector.TYPE || data.type === MultiSelector.TYPE);
controls.push({
type: data.type,
title: isVariable ? data.title : null,
hint: data.hint,
variables: isVariable ? data.variables : [],
enableSearch: isVariable ? data.enableSearch : null,
showAvatars: isVariable ? data.showAvatars : false,
compactView: isVariable ? data.compactView : false,
hintTitle: isVariable ? data.hintTitle : null,
allSelectedCode: isVariable ? data.allSelectedCode : null,
access: data
})
}
);
return new Column({
items: controls,
userGroup: options.userGroup ? options.userGroup : null,
section: this,
headSection: options.headSection,
grid: this.grid,
newColumn: options.newColumn ? options.newColumn : null
});
}
removeColumn(param): void
{
if (!param)
{
return;
}
for (let i = 0; i < this.columns.length; i++)
{
if (param.userGroup === this.columns[i].userGroup)
{
this.columns[i].remove();
break;
}
}
}
addHeadColumn(): Column
{
let titles = [];
if(!this.headSection)
{
this.rights.map((data) => {
titles.push({
id: data.id,
type: Title.TYPE,
title: data.title,
hint: data.hint
})
});
}
if (this.headSection)
{
titles = [
{
type: UserGroupTitle.TYPE,
title: Loc.getMessage('JS_UI_ACCESSRIGHTS_ROLES'),
controller: true
},
{
type: UserGroupTitle.TYPE,
title: Loc.getMessage('JS_UI_ACCESSRIGHTS_EMPLOYEES_AND_DEPARTMENTS'),
controller: false
}
]
}
const column = new Column({
items: titles,
section: this,
grid: this.grid
});
Dom.append(column.render(), this.layout.headColumn);
return column;
}
getColumnsContainer(): HTMLElement
{
if (!this.layout.columns)
{
const column = Tag.render`<div class='ui-access-rights-section-wrapper'></div>`;
Event.bind(column, 'scroll', this.adjustScroll.bind(this));
this.layout.columns = column;
}
return this.layout.columns;
}
getTitleNode(): HTMLElement
{
const node = Tag.render`<div class='ui-access-rights-section-title'>${Text.encode(this.title)}</div>`;
if (this.hint)
{
const hintNode = new Hint({
hint: this.hint,
className: 'ui-access-rights-section-title-hint'
});
node.appendChild(hintNode.render());
}
return node;
}
adjustScroll(): void
{
if (Text.toNumber(this.scroll) !== Text.toNumber(this.getColumnsContainer().scrollLeft))
{
this.scroll = this.getColumnsContainer().scrollLeft;
EventEmitter.emit(this.grid, "AccessRights.Section:scroll", [this]);
}
}
adjustEars(): void
{
const container = this.getColumnsContainer();
const scroll = container.scrollLeft;
const isLeftVisible = scroll > 0;
const isRightVisible = container.scrollWidth > (Math.round(scroll + container.offsetWidth));
this.getContentContainer().classList[isLeftVisible ? 'add' : 'remove']('ui-access-rights-section-ear-left-shown');
this.getContentContainer().classList[isRightVisible ? 'add' : 'remove']('ui-access-rights-section-ear-right-shown');
}
getContentContainer(): HTMLElement
{
if (!this.layout.content)
{
this.layout.content = Tag.render`
<div class='ui-access-rights-section-content'>
${this.getColumnsContainer()}
${this.getEarLeft()}
${this.getEarRight()}
</div>
`;
}
return this.layout.content;
}
getEarLeft(): HTMLElement
{
if (!this.layout.earLeft)
{
this.layout.earLeft = Tag.render`<div class='ui-access-rights-section-ear-left'></div>`;
Event.bind(this.layout.earLeft, 'mouseenter', () => {
this.stopAutoScroll();
this.earLeftTimer = setTimeout(
() => {
this.scrollToLeft()
},
110
);
});
Event.bind(this.layout.earLeft, 'mouseleave', () => {
clearTimeout(this.earLeftTimer);
this.stopAutoScroll()
});
}
return this.layout.earLeft;
}
getEarRight(): HTMLElement
{
if (!this.layout.earRight)
{
this.layout.earRight = Tag.render`<div class='ui-access-rights-section-ear-right'></div>`;
Event.bind(this.layout.earRight, 'mouseenter', () => {
this.stopAutoScroll();
this.earRightTimer = setTimeout(
() => {
this.scrollToRight()
},
110
);
});
Event.bind(this.layout.earRight, 'mouseleave', () => {
clearTimeout(this.earRightTimer);
this.stopAutoScroll()
});
}
return this.layout.earRight;
}
scrollToRight(param: number, stop): void
{
const interval = param ? 2 : 20;
this.earTimer = setInterval(
() => {
this.getColumnsContainer().scrollLeft += 10;
if(param && param <= this.getColumnsContainer().scrollLeft)
{
this.stopAutoScroll();
}
},
interval
);
if(stop === 'stop')
{
setTimeout(
() => {
this.stopAutoScroll();
this.getGrid().unlock();
},
param * 2
)
}
}
scrollToLeft(): void
{
this.earTimer = setInterval(
() => {
this.getColumnsContainer().scrollLeft -= 10;
},
20
)
}
stopAutoScroll(): void
{
clearInterval(this.earTimer);
}
getScroll(): number
{
return this.scroll;
}
render(): HTMLElement
{
const title = this.title ? this.getTitleNode() : null;
const sectionContainer = Tag.render`
<div class='ui-access-rights-section'>
${title}
${this.getMainContainer()}
</div>
`;
if (this.headSection)
{
Dom.addClass(sectionContainer, 'ui-access-rights--head-section')
}
this.addHeadColumn();
const columnsFragment = document.createDocumentFragment();
const userGroups = this.grid.getUserGroups() ?? [];
for (let i = 0; i < userGroups.length; i++)
{
const column = this.getColumn(
{
headSection: this.headSection ? this.headSection : null,
userGroup: userGroups[i]
}
);
this.columns.push(column);
Dom.append(column.render(), columnsFragment);
}
Dom.append(columnsFragment, this.getColumnsContainer());
return sectionContainer;
}
getMainContainer(): HTMLElement
{
this.layout.headColumn = Tag.render`<div class='ui-access-rights-section-head'></div>`;
return Tag.render`
<div class='ui-access-rights-section-container'>
${this.layout.headColumn}
${this.getContentContainer()}
</div>
`;
}
}
const namespace = Reflection.namespace('BX.UI.AccessRights');
namespace.Section = Section;