- /**
- * @namespace flexygo.ui.wc
- */
- var flexygo;
- (function (flexygo) {
- var ui;
- (function (ui_1) {
- var wc;
- (function (wc_1) {
- /**
- * Library for the FlxModuleManagerElement web component.
- *
- * @class FlxModuleManagerElement
- * @constructor
- * @return {FlxModuleManagerElement}
- */
- class FlxModuleManagerElement extends HTMLElement {
- constructor() {
- super();
- /**
- * Set when component is attached to DOM
- * @property connected {boolean}
- */
- this.connected = true;
- this.pagename = null;
- this.objectname = null;
- this.layoutname = null;
- this.modTemplate = null;
- //Set in develop.ts
- this.targetItem = null;
- }
- connectedCallback() {
- let element = $(this);
- this.connected = true;
- this.pagename = element.attr('PageName');
- this.objectname = element.attr('ObjectName');
- //Capture events from module or page module updating
- flexygo.events.on(this, "entity", "all", this.onModuleChanged);
- this.init();
- }
- static get observedAttributes() {
- return [];
- }
- disconnectedCallback() {
- flexygo.events.off(this, "entity", "all", this.onModuleChanged);
- }
- attributeChangedCallback(attrName, oldVal, newVal) {
- }
- init() {
- this.refresh();
- }
- onModuleChanged(e) {
- if (e.type == "inserted" || e.type == "updated") {
- let entity = e.sender;
- let me = $(this);
- if (entity.objectName.toLowerCase() === 'sysmodule' || entity.objectName.toLowerCase() === 'syspagemodule') {
- if (entity.objectName.toLowerCase() == 'syspagemodule') {
- let val = entity.data.RelationWhere.Value;
- if (val == null || val == '') {
- me.find('li[data-id="' + entity.data.ModuleName.Value + '"]').find('.relationwhere').removeClass('selected');
- }
- else {
- me.find('li[data-id="' + entity.data.ModuleName.Value + '"]').find('.relationwhere').addClass('selected');
- }
- }
- else if (entity.objectName.toLowerCase() == 'sysmodule') {
- this.updateModule(entity);
- }
- //form.closest('.ui-dialog').remove();
- $(document).find('flx-edit[objectname="' + entity.objectName + '"]').closest('.ui-dialog').remove();
- }
- }
- }
- refresh() {
- let me = $(this);
- let obj = new flexygo.obj.Entity('sysLayouts');
- this.layouts = obj.getView();
- let container = $('<div class="moduleManager" />');
- me.html(container);
- container.append('<div id="layoutList" class="col-12 nopadding"/>');
- container.append('<div class="layoutPanelOutside col-8"><div id="layoutPanel"></div></div>');
- container.append('<div id="modulePanel" class="col-4"><div class="searchPanel"><flx-text class="searchInput" placeholder="' + flexygo.localization.translate('modulemanager.searchmodules') + '" iconclass="flx-icon icon-search" allowNewObject="sysModule" /></div><div style="clear:both"></div><div id="moduleList"><ul class="connectedSortable"></ul></div></div>');
- container.append('<div id="bottomToolbar"><button class="btn btn-default bg-info saveButton"><i class="flx-icon icon-save"></i> ' + flexygo.localization.translate('modulemanager.save') + '</button> <button class="btn btn-default bg-danger closeButton"><i class="flx-icon icon-remove"></i> ' + flexygo.localization.translate('modulemanager.cancel') + '</button></div>');
- this.loadLayoutPanel();
- this.loadNodes();
- this.loadCurrentPage();
- let btn = $('<button class="btn btn-default" type="button"><i class="flx-icon icon-open-in-new-window"></i></button>');
- container.find('.searchInput .input-group-btn').prepend(btn);
- btn.on('click', (e) => {
- this.addTabModule();
- });
- me.find('.searchPanel flx-text').on('keyup', (e) => {
- var allModules = me.find('#moduleList li[data-descrip]');
- if ($(e.currentTarget).val() == null || $(e.currentTarget).val() == '') {
- allModules.show();
- }
- else {
- allModules.hide();
- var filterValue = $(e.currentTarget).val().toLowerCase();
- var fModules = allModules.filter(function () {
- return $(this).attr('data-descrip').toLowerCase().indexOf(filterValue) > -1;
- });
- fModules.show();
- }
- });
- me.find('#bottomToolbar .saveButton').on('click', (e) => {
- this.saveModuleConfig();
- });
- me.find('#bottomToolbar .closeButton').on('click', (e) => {
- $(e.currentTarget).closest('.ui-dialog').remove();
- });
- setTimeout('$("#layoutList").mCustomScrollbar({axis:"x", theme: "dark", autoHideScrollbar: true});$("#moduleList").mCustomScrollbar({autoHideScrollbar: true})', 500);
- //Capture events from module or page module updating
- //$(document).off('insert.module update.module');
- //$(document).on('insert.module update.module', function (evName, entity, form) {
- // if (entity.objectName.toLowerCase() == 'syspagemodule') {
- // let val = entity.data.RelationWhere.Value;
- // if (val == null || val== '') {
- // ctx.webControl.find('li[data-id="'+entity.data.ModuleName.Value+'"]').find('.relationwhere').removeClass('selected');
- // }else{
- // ctx.webControl.find('li[data-id="' + entity.data.ModuleName.Value + '"]').find('.relationwhere').addClass('selected');
- // }
- // } else if (entity.objectName.toLowerCase() == 'sysmodule') {
- // ctx.updateModule(entity, form);
- // }
- // form.closest('.ui-dialog').remove();
- //})
- }
- addTabModule() {
- let moduleContent = $('<form class="tabForm"/>');
- moduleContent.append('<div><flx-text prop="Identifier" type="ident" required placeholder="' + flexygo.localization.translate('modulemanager.tabid') + '"></flx-text></div>');
- moduleContent.append('<div><flx-text prop="Title" type="text" required placeholder="' + flexygo.localization.translate('modulemanager.tabtitle') + '"></flx-text></div>');
- moduleContent.append('<div><flx-text prop="Descrip" type="text" required placeholder="' + flexygo.localization.translate('modulemanager.tabdescrip') + '"></flx-text></div>');
- moduleContent.append('<div><flx-dbcombo prop="IconName" objectname="sysObject" required prop="pageIcon" placeholder="' + flexygo.localization.translate('modulemanager.selecttabicon') + '" viewname="iconsView" sqlvaluefield="IconName" sqldisplayfield="IconName" ><template><div class="size-s" ><i class="{{CssClass}} icon-margin-right" ></i>{{IconName}}</div></template></flx-dbcombo></div>');
- moduleContent.append('<div><flx-dbcombo prop="ClassId" objectname="sysModule" required viewname="sysModuleClasses" sqlvaluefield="ClassId" sqldisplayfield="Descrip" placeholder="' + flexygo.localization.translate('modulemanager.classification') + '"></flx-dbcombo></div>');
- moduleContent.append('<div><flx-dbcombo prop="TabMode" objectname="sysModule" required viewname="sysTabModes" sqlvaluefield="TypeId" sqldisplayfield="Descrip" placeholder="' + flexygo.localization.translate('modulemanager.tabMode') + '"></flx-dbcombo></div>');
- moduleContent.append('<button required class="SaveTabModule btn btn-default bg-info saveButton"><i class="flx-icon icon-save"></i> ' + flexygo.localization.translate('modulemanager.save') + '</button>');
- Lobibox.window({
- title: flexygo.localization.translate('modulemanager.addnewtabmodule'),
- content: moduleContent
- });
- $('.tabForm').validate({
- ignore: '',
- unhighlight: (element, errorClass, validClass) => {
- $(element).parent().addClass('has-success').removeClass('has-error');
- },
- highlight: (element, errorClass, validClass) => {
- $(element).parent().removeClass('has-success').addClass('has-error');
- },
- errorPlacement: (error, element) => {
- error.insertAfter($(element).parent()[0]);
- },
- errorClass: 'txt-danger'
- });
- $('.SaveTabModule').on('click', (event) => {
- if ($('.tabForm').valid()) {
- event.stopPropagation();
- event.preventDefault();
- let newTab = new flexygo.obj.Entity('sysModule');
- newTab.read();
- //TODO add button tab
- //newTab.data.TypeId.Value = 'flx-moduletab';
- newTab.data.TypeId.Value = $('.tabForm [prop="TabMode"]').val();
- newTab.data.ModuleName.Value = $('.tabForm [prop="Identifier"]').val();
- newTab.data.ClassId.Value = $('.tabForm [prop="ClassId"]').val();
- newTab.data.Descrip.Value = $('.tabForm [prop="Descrip"]').val();
- newTab.data.Title.Value = $('.tabForm [prop="Title"]').val();
- newTab.data.IconName.Value = $('.tabForm [prop="IconName"]').val();
- newTab.data.ContainerId.Value = 'default';
- newTab.data.CollapsibleButton.Value = true;
- newTab.data.FullscreenButton.Value = true;
- newTab.data.RefreshButton.Value = true;
- if (newTab.insert()) {
- $(event.currentTarget).closest('.lobibox-window').find('.btn-close').click();
- this.updateModule(newTab);
- }
- }
- });
- }
- updateModule(module, form) {
- let me = $(this);
- let mod = me.find('li[data-id="' + module.data.ModuleName.Value + '"]');
- let list = me.find('#moduleList ul:first');
- if (mod.length == 0) {
- let newMod = $(flexygo.utils.parser.compile(module.data, this.modTemplate, flexygo));
- newMod.hide().find('.box-primary').addClass('new');
- list.prepend(newMod);
- this.setActionButtons(newMod);
- if (newMod.is('.tabItem')) {
- this.setSorting(newMod.find('.connectedSortable'));
- }
- newMod.show(500);
- }
- }
- saveModuleConfig() {
- let me = $(this);
- let layoutPositons = me.find('.module-placeholder');
- let pageModules = new Array();
- //recalc tab order
- let tabs = $('.moduleTab>ul');
- tabs.each((i, e) => {
- let listitems = $(e).children('li');
- listitems.each((index, listel) => {
- $(listel).attr('tabOrder', index);
- });
- });
- for (let jL = 0; jL < layoutPositons.length; jL++) {
- let modules = $(layoutPositons[jL]).find('.moduleItem');
- let order = 0;
- for (let i = 0; i < modules.length; i++) {
- let myMod = $(modules[i]);
- let tabName = null;
- let tabOrder = null;
- if (myMod.parent().closest('.tabItem').length > 0) {
- tabName = myMod.parent().closest('.tabItem').attr('data-id');
- tabOrder = myMod.attr('tabOrder');
- }
- pageModules.push({ ModuleName: myMod.attr('data-id'), LayoutPositionId: this.getModulePosition(myMod), RelationWhere: myMod.find('.relwhere').html(), Order: order, TabName: tabName, TabOrder: tabOrder });
- order++;
- }
- }
- let params = new flexygo.api.pages.savePageConfigParams();
- params.PageName = this.pagename;
- params.ObjectName = this.objectname || null;
- params.LayoutName = this.layoutname;
- params.Modules = pageModules;
- flexygo.ajax.post('~/api/Page', 'SavePageConfig', params, (ret) => {
- me.closest('.ui-dialog').remove();
- let wc = $('#mainSidePanel')[0];
- wc.hidePanels();
- flexygo.history.refresh(this.targetItem);
- });
- }
- loadCurrentPage() {
- let me = $(this);
- let params = {
- pageName: this.pagename
- };
- flexygo.ajax.post('~/api/Page', 'GetModuleManagerModules', params, (ret) => {
- me.find('#layoutList img[data-id="' + ret.LayoutName + '"]').click();
- let arrOrdered = flexygo.utils.sortObject(ret.Modules, 'Order');
- for (let key in arrOrdered) {
- let mod = arrOrdered[key];
- let item = me.find('#moduleList li[data-id="' + mod.ModuleName + '"]');
- item.detach();
- item.find('.box-primary').removeClass('box-primary').addClass('bg-primary');
- item.find('.relwhere').html(mod.RelationWhere);
- if (mod.Events && Object.keys(mod.Events).length > 0) {
- item.find('.events').addClass('selected');
- }
- if (mod.RelationWhere && mod.RelationWhere != '') {
- item.find('.relationwhere').addClass('selected');
- }
- if (mod.TabName != '') {
- item.attr('tabOrder', mod.TabOrder);
- me.find('[data-id="' + mod.TabName + '"]>div>.moduleTab>ul').append(item);
- }
- else {
- me.find('.' + mod.LayoutPositionId + '>ul').append(item);
- }
- }
- //Sort tab modules
- let tabs = $('.moduleTab>ul');
- tabs.each((i, e) => {
- let mylist = $(e);
- let listitems = mylist.children('li').get();
- listitems.sort((a, b) => {
- let compA = parseInt($(a).attr('tabOrder'));
- let compB = parseInt($(b).attr('tabOrder'));
- return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
- });
- $.each(listitems, (idx, itm) => {
- mylist.append(itm);
- });
- });
- });
- }
- loadLayoutPanel() {
- let me = $(this);
- let pageLayout = me.find('#layoutPanel');
- let layoutList = me.find('#layoutList');
- for (let i = 0; i < this.layouts.length; i++) {
- layoutList.append(flexygo.utils.parser.compile(this.layouts[i], '<img src="{{utils.resolveUrl(ImagePath)}}" data-id="{{LayoutName}}" title="{{LayoutDescrip}}" />', flexygo));
- }
- layoutList.find('img').on('click', (e) => {
- let img = $(e.currentTarget);
- layoutList.find('img').removeClass('selected');
- img.addClass('selected');
- let newTemplate;
- for (let i = 0; i < this.layouts.length; i++) {
- if (this.layouts[i].LayoutName == img.attr('data-id')) {
- newTemplate = $('<div/>').append(this.layouts[i].LayoutTemplate);
- this.layoutname = this.layouts[i].LayoutName;
- break;
- }
- }
- newTemplate.find('.module-placeholder').append('<ul style="" class="connectedSortable" />');
- let modules = me.find('.module-placeholder>ul>li');
- for (let i = 0; i < modules.length; i++) {
- let myMod = $(modules[i]);
- let modulePosition = this.getModulePosition(myMod);
- myMod.detach();
- if (newTemplate.find('.' + modulePosition).length > 0) {
- newTemplate.find('.' + modulePosition + ' ul:not(.connectedTab)').append(myMod);
- }
- else {
- newTemplate.find('.TopPosition ul:not(.connectedTab)').append(myMod);
- }
- }
- pageLayout.html(newTemplate.html());
- pageLayout.append('<div style="clear:both"></div>');
- this.setActionButtons(pageLayout.find('li'));
- this.setSorting(me.find(".connectedSortable"));
- });
- }
- loadNodes() {
- let me = $(this);
- let obj = new flexygo.obj.Entity('sysModules');
- //TODO button Tab
- this.modTemplate = '<li data-id="{{ModuleName}}" data-descrip="{{Descrip|string:lower}}" class="moduleItem nolist {{TypeId|switch:[flx-moduletab:tabItem,flx-buttontab:tabItem,else:null]}}">';
- this.modTemplate += '<div class="box-primary">';
- this.modTemplate += '<div class="buttonList">{{TypeId|switch:[flx-moduletab:<i title="Expand tab content" class="flx-icon icon-open-in-new-window tabButton"></i>,flx-buttontab:<i title="Expand tab content" class="flx-icon icon-open-in-new-window tabButton"></i>,else:null]}}';
- this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.security') + '" class="flx-icon icon-group-security security"></i>';
- this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.events') + '" class="flx-icon icon-wifi events"></i>';
- this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.changepagerelation') + '" class="flx-icon icon-project relationwhere"></i>';
- this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.configmodule') + '" class="flx-icon icon-settings configure"></i>';
- this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.removemodule') + '" class="flx-icon icon-remove remove"></i>';
- this.modTemplate += '</div>';
- this.modTemplate += '<div class="listDescrip"><i title="{{TypeDescrip}}" class="{{TypeIconClass}} icon-lg"></i> <span class="modDesc">{{Descrip}}</span><span class="hidden relwhere"></span></div>{{TypeId|switch:[flx-moduletab:<div class="moduleTab" ><ul class="connectedTab connectedSortable"></ul></div>,flx-buttontab:<div class="moduleTab" ><ul class="connectedTab connectedSortable"></ul></div>,else:null]}}';
- this.modTemplate += '</li>';
- this.modules = obj.getView('sysModuleExtended');
- let list = me.find('#moduleList ul');
- list.empty();
- for (let i = 0; i < this.modules.length; i++) {
- list.append(flexygo.utils.parser.compile(this.modules[i], this.modTemplate, flexygo));
- }
- this.setActionButtons(list.find('li'));
- this.setSorting(me.find(".moduleTab>ul.connectedSortable"));
- }
- setSorting(itms) {
- let me = $(this);
- itms.sortable({
- appendTo: "BODY",
- zIndex: 999999,
- helper: "clone",
- connectWith: ".connectedSortable",
- stop: (event, ui) => {
- let itm = $(ui.item);
- if (itm.closest('#layoutPanel').length > 0) {
- itm.find('.box-primary,.box-warning').removeClass('box-primary').removeClass('box-warning').addClass('bg-primary');
- }
- else {
- itm.find('.bg-primary').removeClass('bg-primary').addClass('box-warning');
- if (itm.is('.tabItem')) {
- let items = itm.find('.moduleItem');
- items.each((i, e) => {
- let inItem = $(e);
- inItem.detach();
- me.find('#moduleList ul:first').prepend(inItem);
- });
- }
- }
- },
- start: (event, ui) => {
- let itm = $(ui.item);
- if (itm.is('.tabItem')) {
- itm.find('.moduleTab').hide();
- setTimeout(() => { $('.ui-sortable-helper').find('.moduleTab').hide(); }, 100);
- }
- }
- }).disableSelection();
- }
- setActionButtons(items) {
- let me = $(this);
- items.find('.buttonList .remove').on('click', (e) => {
- let itm = $(e.currentTarget).closest('li');
- itm.hide();
- itm.detach();
- itm.find('.bg-primary').removeClass('bg-primary').addClass('box-warning');
- me.find('#moduleList ul').prepend(itm);
- if (itm.is('.tabItem')) {
- let items = itm.find('.moduleItem');
- items.each((i, el) => {
- let inItem = $(el);
- inItem.detach();
- me.find('#moduleList ul:first').prepend(inItem);
- });
- }
- itm.show(500);
- });
- items.find('.buttonList .configure').on('click', (e) => {
- flexygo.nav.openPage('edit', 'sysModule', "Modules.moduleName='" + $(e.currentTarget).closest('li').attr('data-id') + "'", null, 'popup', true);
- });
- items.find('.buttonList .events').on('click', (e) => {
- let modulename = $(e.currentTarget).closest('li').attr('data-id');
- flexygo.nav.openPage('list', 'sysModuleEvents', "Modules_Events.moduleName='" + modulename + "'", '{\'ModuleName\':\'' + modulename + '\'}', 'popup', true);
- });
- items.find('.buttonList .security').on('click', (e) => {
- flexygo.nav.openPageName('syspage-generic-modulesecurity', 'sysModule', "Modules.moduleName='" + $(e.currentTarget).closest('li').attr('data-id') + "'", 'null', 'popup', false, $(e.currentTarget));
- });
- items.find('.buttonList .relationwhere').on('click', (e) => {
- // var myFilter = $(this).closest('li').find('.relwhere');
- // flexygo.msg.prompt('Additional filter', 'This sentence add an aditional filter to the module only in this page', function (val) { myFilter.html(val); if(val==''){myFilter.closest('li[data-id]').find('.relationwhere').removeClass('selected')}else{myFilter.closest('li[data-id]').find('.relationwhere').addClass('selected')} }, 'Type an SQL Filter', myFilter.html(), 4);
- flexygo.nav.openPage('edit', 'sysPageModule', "moduleName='" + $(e.currentTarget).closest('li').attr('data-id') + "' and PageName='" + this.pagename + "'", null, 'popup', true);
- });
- items.find('.buttonList>.tabButton').on('click', (e) => {
- $(e.currentTarget).closest('li').find('div>.moduleTab:first').toggle(500);
- });
- }
- getModulePosition(module) {
- let classes = module.closest('.module-placeholder')[0].className.split(/\s+/);
- for (let i = 0; i < classes.length; i++) {
- if (classes[i].toLowerCase().indexOf('position') != -1) {
- return classes[i];
- }
- }
- return 'TopPosition';
- }
- }
- wc_1.FlxModuleManagerElement = FlxModuleManagerElement;
- })(wc = ui_1.wc || (ui_1.wc = {}));
- })(ui = flexygo.ui || (flexygo.ui = {}));
- })(flexygo || (flexygo = {}));
- window.customElements.define('flx-modulemanager', flexygo.ui.wc.FlxModuleManagerElement);
- //# sourceMappingURL=flx-modulemanager.js.map
-