/**
* @namespace flexygo.ui.wc
*/
var flexygo;
(function (flexygo) {
var ui;
(function (ui) {
var wc;
(function (wc) {
class LoadMenusParams {
}
wc.LoadMenusParams = LoadMenusParams;
class NavigationMenu {
}
wc.NavigationMenu = NavigationMenu;
//Definicion de la clase devuelta por el merodo toHierarchy del nestedsortable
class HierarchicalMenu {
}
wc.HierarchicalMenu = HierarchicalMenu;
/**
* Library for the FlxMenuManagerElement web component.
*
* @class FlxMenuManagerElement
* @constructor
* @return {FlxMenuManagerElement}
*/
class FlxMenuManagerElement extends HTMLElement {
constructor() {
super();
/**
* Set when component is attached to DOM
* @property connected {boolean}
*/
this.connected = false;
this.method = null;
this.deleteMethod = "DeleteMenu";
this.relocateMethod = "RelocateMenu";
this.getMetod = "GetAppMenus";
this.rootMenuId = '';
this.openMenus = null;
this.scrollY = 0;
this.sortableList = null;
//Nota: para que el metodo toArray del nestedsortable devuelva valores correctamente, los elementos de la lista deben tener un id con _
this.template = '<li id="fgnsli_{{MenuId}}" strType="{{strType}}">'
+ '<div>'
+ '<i class="{{IconClass}} icon-margin-right" />'
+ '<span>{{Title}}</span>'
+ '<div class="btn-group pull-right btn-group-sm" role="group" >'
+ '<button class="btn btn-default" data-toggle="collapse" data-action="add" data-target="#Menu{{MenuId}}"><i class="flx-icon icon-plus" /></button>'
+ '<button class="btn btn-default" data-action="toggle"><i class="flx-icon icon-order-down-2" /></button>'
+ '<button class="btn btn-default" data-action="edit">'
+ '<small><a href= "#" class="processType" data-toggle="collapse" data-target="#Menu{{MenuId}}">{{strType}}</a></small>'
+ '<i class="flx-icon icon-pencil" flx-fw="" />'
+ '</button>'
+ '<button class="btn btn-default" data-action="del"><i class="flx-icon icon-delete-2 txt-danger" /></button>'
+ '<button class="btn btn-default" data-action="security"><i class="flx-icon icon-lock-1" /></button>'
+ '</div>'
+ '</div>'
+ '<div class="row collapse editMenu" id="Menu{{MenuId}}" MenuId="{{MenuId}}">'
+ '<div class="editMenu"></div>'
+ '</div>{{getChildMenus(json)}}'
+ '</li>';
}
/**
* Fires when element is attached to DOM
* @method connectedCallback
*/
connectedCallback() {
let element = $(this);
this.connected = true;
let AppName = element.attr("AppName");
if (AppName) {
this.method = this.getMetod;
this.methodParams = { AppName: AppName };
this.appName = AppName;
}
this.init();
}
init() {
this.loadMenus();
}
refreshNavBar() {
$(document).find("flx-nav").each((i, e) => {
let navbar = $(e)[0];
if (navbar) {
navbar.refresh();
}
});
}
refresh() {
this.loadMenus();
}
loadMenus() {
$(this).empty();
flexygo.ajax.post('~/api/MenuManager', this.method, this.methodParams, (response) => {
let arrOrdered = this.sortMenus(flexygo.utils.lowerKeys(response, true), "order");
$(this).html('<div class="MenuPnl"></div>');
this.loadMenusRet(arrOrdered);
});
}
setRootMenu(ret) {
let rootMenu = null;
$.each(ret, (i, e) => {
let thisMenu = e;
if (e.parentMenuid == "") {
rootMenu = e;
}
else {
$.each(ret, (i, ee) => {
if (ee.parentMenuid === thisMenu.Menuid) {
rootMenu = thisMenu;
return false;
}
});
}
if (rootMenu) {
ret.splice(i, 1);
e.childMenus = ret;
ret = [e];
return false;
}
});
return rootMenu;
}
loadMenusRet(ret) {
let rootMenu = null;
let me = $(this);
this.rootMenuId = '';
rootMenu = this.setRootMenu(ret);
if (rootMenu) {
this.rootMenuId = rootMenu.Menuid;
}
else {
this.rootMenuId = (ret && ret.length == 1) ? ret[0].Menuid : 'root';
rootMenu = {
Menuid: this.rootMenuId,
parentMenuid: '',
childMenus: ret,
title: flexygo.localization.translate('Menumanager.title'),
order: 0,
strtype: '',
};
}
let cnt = flexygo.utils.parser.compile(rootMenu, this.template, this);
let elem = $('<ul class="sortable" />').html(cnt).first();
me.find('.MenuPnl').append(elem);
let btnroot = me.find("#fgnsli_" + this.rootMenuId).find('.btn-group').first();
btnroot.find('[data-action="del"]').first().hide();
btnroot.find('[data-action="edit"]').first().hide();
btnroot.find('[data-action="toggle"]').first().find("i").first().removeClass('icon-order-down-2').addClass('icon-order-up-2');
this.sortableList = me.find('.sortable');
this.sortableList.nestedSortable({
forcePlaceholderSize: true,
listType: 'ul',
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
maxLevels: 0,
isTree: false,
expandOnHover: 700,
startCollapsed: false,
protectRoot: true,
relocate: (e, f) => {
//console.log('Relocated item', e, f);
//La expresion es necesaria para no truncar ids negativos
let Menus = this.sortableList.nestedSortable('toHierarchy', { expression: (/(.+)[_](.+)/) });
let Menuid = f.item.attr('id');
Menuid = Menuid.substring(Menuid.indexOf('_') + 1);
let params = this.findMenu(Menus, Menuid);
if (params) {
flexygo.ajax.post('~/api/Navigation', this.relocateMethod, params, (response) => {
this.refreshNavBar();
});
}
}
}).disableSelection();
me.find('.processType').on('click', (e) => {
this.showEdit($(e.target).closest('li').children('.editMenu'), false);
});
me.find('[data-action="add"]').on('click', (e) => {
let parent = $(e.target).closest('li').children('.editMenu');
this.showEdit(parent, true);
});
me.find('[data-action="toggle"]').on('click', (e) => {
let icon = $(e.currentTarget).find('i').first();
let opened = icon.hasClass('icon-order-up-2');
let content = $(e.currentTarget).closest('li').children('ul').first();
if (opened) {
content.hide();
icon.removeClass('icon-order-up-2').addClass('icon-order-down-2');
}
else {
content.show();
icon.removeClass('icon-order-down-2').addClass('icon-order-up-2');
}
this.saveMenusState();
});
me.find('[data-action="del"]').on('click', (e) => {
let Menu = $(e.currentTarget).closest('li').children('.editMenu')[0].id;
Lobibox.confirm({
title: flexygo.localization.translate('Menumanager.deleteMenu'),
msg: flexygo.localization.translate('Menumanager.deleteMenuquestion'),
iconClass: '',
callback: (dlg, type, ev) => {
if (type == "yes") {
this.deleteMenu(Menu);
}
}
});
});
me.find('[data-action="security"]').on('click', (e) => {
let Menu = $(e.currentTarget).closest('li').children('.editMenu')[0].id.replace("Menu", "");
flexygo.nav.openPage('view', 'sysNavigationMenu', 'MenuId=\'' + Menu + '\'', null, 'popup800x600', true, $(e.currentTarget), false);
});
}
showEdit(placeHolder, isNewMenu) {
if (placeHolder.hasClass('in')) {
this.sortableList.sortable("enable");
placeHolder.empty();
//Clear edit module areyousure event handler
let btnClose = placeHolder.closest('.ui-dialog').find('.ui-dialog-titlebar-close');
if (btnClose.length > 0) {
let dlg = placeHolder.closest("main.pageContainer");
dlg.off("dialogbeforeclose");
}
return;
}
else {
this.sortableList.sortable("disable");
let editModuleName = 'sysmod-edit-generic';
let containerTemplate = '<div class="cntBody nopadding size-xs"></div><div class="cntBodyFooter"></div>';
let container = $('<flx-module class="MenuEdit"/>').html(containerTemplate).attr('modulename', editModuleName).attr('type', 'flx-edit').addClass('empty');
placeHolder.empty();
placeHolder.append(container);
let module = null;
let parent = placeHolder.attr('Menuid');
if (isNewMenu === true) {
let objDef = {
parentMenuId: parent
};
let strobjDef = JSON.stringify(objDef);
module = $('<flx-edit />').attr('ObjectName', 'sysNavigationMenu').attr('defaults', strobjDef).attr('modulename', editModuleName);
flexygo.events.on(this, "entity", "all", (e) => {
flexygo.events.off(this, "entity", "all");
if (e.type === "inserted") {
this.saveMenusState();
//Clear edit module areyousure event handler
let btnClose = placeHolder.closest('.ui-dialog').find('.ui-dialog-titlebar-close');
if (btnClose.length > 0) {
let dlg = placeHolder.closest("main.pageContainer");
dlg.off("dialogbeforeclose");
}
flexygo.ajax.post('~/api/MenuManager', this.getMetod, null, (response) => {
this.loadMenus();
this.refreshNavBar();
});
}
});
}
else {
module = $('<flx-edit />').attr('ObjectName', 'sysOfflineMenu').attr('ObjectWhere', 'Menuid=\'' + placeHolder.attr('Menuid') + '\'').attr('modulename', editModuleName);
}
container.find('.cntBody').append(module);
let ctrl = container[0];
ctrl.moduleName = editModuleName;
ctrl.canCollapse = true;
ctrl.canEnlarge = true;
ctrl.canRefresh = true;
//ctrl.canClose = false;
ctrl.canConfig = false;
//ctrl.componentString = "flx-edit";
ctrl.init();
}
}
findMenu(Menus, Menuid, parentid) {
let res = null;
$.each(Menus, (i, e) => {
if (e.id === Menuid) {
res = {
id: e.id,
parentid: parentid,
order: i
};
return false;
}
if (e.children) {
res = this.findMenu(e.children, Menuid, e.id);
if (res) {
return false;
}
}
});
return res;
}
sortMenus(Menus, orderby) {
let ordered = flexygo.utils.sortObject(Menus, orderby);
$.each(Menus, (i, e) => {
let obj = e.childMenus;
if (!(Object.keys(obj).length === 0 && obj.constructor === Object)) {
e.childMenus = this.sortMenus(e.childMenus, orderby);
}
});
return ordered;
}
getChildMenus(json) {
let cnt = '';
let ret = json.childMenus;
if (Object.keys(ret).length > 0) {
for (let nKey in ret) {
cnt += flexygo.utils.parser.compile(ret[nKey], this.template, this);
}
}
let style = "";
if (json.Menuid !== this.rootMenuId) {
style = 'style="display:none"';
}
if (cnt != "") {
return '<ul data-navMenu ' + style + '>' + cnt + "</ul>";
}
else {
return "<ul data-navMenu ></ul>";
}
}
deleteMenu(Menu) {
let params = { MenuId: Menu };
flexygo.ajax.post('~/api/Navigation', this.deleteMethod, params, (response) => {
$(this).find("#fgnsli_" + Menu.toLowerCase().replace("Menu", "")).remove();
this.refreshNavBar();
});
}
saveOpenMenu(btn) {
let icon = btn.find('i').first();
let opened = icon.hasClass('icon-order-up-2');
if (opened) {
let parent = btn.closest("li");
this.openMenus.push(parent.attr("id"));
let ul = parent.children("ul [data-navMenu]");
$.each(ul.children(), (i, e) => {
let childbtn = $(e).children().first().find('[data-action="toggle"]');
if (childbtn.length > 0) {
this.saveOpenMenu(childbtn);
}
});
}
}
saveMenusState() {
this.openMenus = [];
let me = $(this);
let btn = me.find('.sortable').children("li").children().first().find('[data-action="toggle"]');
this.saveOpenMenu(btn);
this.scrollY = me.find('.sortable').parent().scrollTop();
}
restoreMenusState() {
let me = $(this);
let list = me.find('.sortable');
if (this.openMenus) {
$.each(this.openMenus, (i, e) => {
let Menu = $("#" + e);
if (Menu) {
let btn = Menu.children().first().find('[data-action="toggle"]');
if (btn.find('i').first().hasClass('icon-order-down-2')) {
btn.trigger("click");
}
}
});
}
this.openMenus = [];
list.parent().scrollTop(this.scrollY);
}
}
wc.FlxMenuManagerElement = FlxMenuManagerElement;
})(wc = ui.wc || (ui.wc = {}));
})(ui = flexygo.ui || (flexygo.ui = {}));
})(flexygo || (flexygo = {}));
window.customElements.define("flx-Menumanager", flexygo.ui.wc.FlxMenuManagerElement);
//# sourceMappingURL=flx-offlinemenumanager.js.map
