APIs

Show:
  1. /**
  2. * @namespace flexygo.ui.wc
  3. */
  4. var flexygo;
  5. (function (flexygo) {
  6. var ui;
  7. (function (ui_1) {
  8. var wc;
  9. (function (wc_1) {
  10. /**
  11. * Library for the FlxModuleManagerElement web component.
  12. *
  13. * @class FlxModuleManagerElement
  14. * @constructor
  15. * @return {FlxModuleManagerElement}
  16. */
  17. class FlxModuleManagerElement extends HTMLElement {
  18. constructor() {
  19. super();
  20. /**
  21. * Set when component is attached to DOM
  22. * @property connected {boolean}
  23. */
  24. this.connected = true;
  25. this.pagename = null;
  26. this.objectname = null;
  27. this.layoutname = null;
  28. this.modTemplate = null;
  29. //Set in develop.ts
  30. this.targetItem = null;
  31. }
  32. connectedCallback() {
  33. let element = $(this);
  34. this.connected = true;
  35. this.pagename = element.attr('PageName');
  36. this.objectname = element.attr('ObjectName');
  37. //Capture events from module or page module updating
  38. flexygo.events.on(this, "entity", "all", this.onModuleChanged);
  39. this.init();
  40. }
  41. static get observedAttributes() {
  42. return [];
  43. }
  44. disconnectedCallback() {
  45. flexygo.events.off(this, "entity", "all", this.onModuleChanged);
  46. }
  47. attributeChangedCallback(attrName, oldVal, newVal) {
  48. }
  49. init() {
  50. this.refresh();
  51. }
  52. onModuleChanged(e) {
  53. if (e.type == "inserted" || e.type == "updated") {
  54. let entity = e.sender;
  55. let me = $(this);
  56. if (entity.objectName.toLowerCase() === 'sysmodule' || entity.objectName.toLowerCase() === 'syspagemodule') {
  57. if (entity.objectName.toLowerCase() == 'syspagemodule') {
  58. let val = entity.data.RelationWhere.Value;
  59. if (val == null || val == '') {
  60. me.find('li[data-id="' + entity.data.ModuleName.Value + '"]').find('.relationwhere').removeClass('selected');
  61. }
  62. else {
  63. me.find('li[data-id="' + entity.data.ModuleName.Value + '"]').find('.relationwhere').addClass('selected');
  64. }
  65. }
  66. else if (entity.objectName.toLowerCase() == 'sysmodule') {
  67. this.updateModule(entity);
  68. }
  69. //form.closest('.ui-dialog').remove();
  70. $(document).find('flx-edit[objectname="' + entity.objectName + '"]').closest('.ui-dialog').remove();
  71. }
  72. }
  73. }
  74. refresh() {
  75. let me = $(this);
  76. let obj = new flexygo.obj.Entity('sysLayouts');
  77. this.layouts = obj.getView();
  78. let container = $('<div class="moduleManager" />');
  79. me.html(container);
  80. container.append('<div id="layoutList" class="col-12 nopadding"/>');
  81. container.append('<div class="layoutPanelOutside col-8"><div id="layoutPanel"></div></div>');
  82. 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>');
  83. 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>');
  84. this.loadLayoutPanel();
  85. this.loadNodes();
  86. this.loadCurrentPage();
  87. let btn = $('<button class="btn btn-default" type="button"><i class="flx-icon icon-open-in-new-window"></i></button>');
  88. container.find('.searchInput .input-group-btn').prepend(btn);
  89. btn.on('click', (e) => {
  90. this.addTabModule();
  91. });
  92. me.find('.searchPanel flx-text').on('keyup', (e) => {
  93. var allModules = me.find('#moduleList li[data-descrip]');
  94. if ($(e.currentTarget).val() == null || $(e.currentTarget).val() == '') {
  95. allModules.show();
  96. }
  97. else {
  98. allModules.hide();
  99. var filterValue = $(e.currentTarget).val().toLowerCase();
  100. var fModules = allModules.filter(function () {
  101. return $(this).attr('data-descrip').toLowerCase().indexOf(filterValue) > -1;
  102. });
  103. fModules.show();
  104. }
  105. });
  106. me.find('#bottomToolbar .saveButton').on('click', (e) => {
  107. this.saveModuleConfig();
  108. });
  109. me.find('#bottomToolbar .closeButton').on('click', (e) => {
  110. $(e.currentTarget).closest('.ui-dialog').remove();
  111. });
  112. setTimeout('$("#layoutList").mCustomScrollbar({axis:"x", theme: "dark", autoHideScrollbar: true});$("#moduleList").mCustomScrollbar({autoHideScrollbar: true})', 500);
  113. //Capture events from module or page module updating
  114. //$(document).off('insert.module update.module');
  115. //$(document).on('insert.module update.module', function (evName, entity, form) {
  116. // if (entity.objectName.toLowerCase() == 'syspagemodule') {
  117. // let val = entity.data.RelationWhere.Value;
  118. // if (val == null || val== '') {
  119. // ctx.webControl.find('li[data-id="'+entity.data.ModuleName.Value+'"]').find('.relationwhere').removeClass('selected');
  120. // }else{
  121. // ctx.webControl.find('li[data-id="' + entity.data.ModuleName.Value + '"]').find('.relationwhere').addClass('selected');
  122. // }
  123. // } else if (entity.objectName.toLowerCase() == 'sysmodule') {
  124. // ctx.updateModule(entity, form);
  125. // }
  126. // form.closest('.ui-dialog').remove();
  127. //})
  128. }
  129. addTabModule() {
  130. let moduleContent = $('<form class="tabForm"/>');
  131. moduleContent.append('<div><flx-text prop="Identifier" type="ident" required placeholder="' + flexygo.localization.translate('modulemanager.tabid') + '"></flx-text></div>');
  132. moduleContent.append('<div><flx-text prop="Title" type="text" required placeholder="' + flexygo.localization.translate('modulemanager.tabtitle') + '"></flx-text></div>');
  133. moduleContent.append('<div><flx-text prop="Descrip" type="text" required placeholder="' + flexygo.localization.translate('modulemanager.tabdescrip') + '"></flx-text></div>');
  134. 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>');
  135. 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>');
  136. 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>');
  137. 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>');
  138. Lobibox.window({
  139. title: flexygo.localization.translate('modulemanager.addnewtabmodule'),
  140. content: moduleContent
  141. });
  142. $('.tabForm').validate({
  143. ignore: '',
  144. unhighlight: (element, errorClass, validClass) => {
  145. $(element).parent().addClass('has-success').removeClass('has-error');
  146. },
  147. highlight: (element, errorClass, validClass) => {
  148. $(element).parent().removeClass('has-success').addClass('has-error');
  149. },
  150. errorPlacement: (error, element) => {
  151. error.insertAfter($(element).parent()[0]);
  152. },
  153. errorClass: 'txt-danger'
  154. });
  155. $('.SaveTabModule').on('click', (event) => {
  156. if ($('.tabForm').valid()) {
  157. event.stopPropagation();
  158. event.preventDefault();
  159. let newTab = new flexygo.obj.Entity('sysModule');
  160. newTab.read();
  161. //TODO add button tab
  162. //newTab.data.TypeId.Value = 'flx-moduletab';
  163. newTab.data.TypeId.Value = $('.tabForm [prop="TabMode"]').val();
  164. newTab.data.ModuleName.Value = $('.tabForm [prop="Identifier"]').val();
  165. newTab.data.ClassId.Value = $('.tabForm [prop="ClassId"]').val();
  166. newTab.data.Descrip.Value = $('.tabForm [prop="Descrip"]').val();
  167. newTab.data.Title.Value = $('.tabForm [prop="Title"]').val();
  168. newTab.data.IconName.Value = $('.tabForm [prop="IconName"]').val();
  169. newTab.data.ContainerId.Value = 'default';
  170. newTab.data.CollapsibleButton.Value = true;
  171. newTab.data.FullscreenButton.Value = true;
  172. newTab.data.RefreshButton.Value = true;
  173. if (newTab.insert()) {
  174. $(event.currentTarget).closest('.lobibox-window').find('.btn-close').click();
  175. this.updateModule(newTab);
  176. }
  177. }
  178. });
  179. }
  180. updateModule(module, form) {
  181. let me = $(this);
  182. let mod = me.find('li[data-id="' + module.data.ModuleName.Value + '"]');
  183. let list = me.find('#moduleList ul:first');
  184. if (mod.length == 0) {
  185. let newMod = $(flexygo.utils.parser.compile(module.data, this.modTemplate, flexygo));
  186. newMod.hide().find('.box-primary').addClass('new');
  187. list.prepend(newMod);
  188. this.setActionButtons(newMod);
  189. if (newMod.is('.tabItem')) {
  190. this.setSorting(newMod.find('.connectedSortable'));
  191. }
  192. newMod.show(500);
  193. }
  194. }
  195. saveModuleConfig() {
  196. let me = $(this);
  197. let layoutPositons = me.find('.module-placeholder');
  198. let pageModules = new Array();
  199. //recalc tab order
  200. let tabs = $('.moduleTab>ul');
  201. tabs.each((i, e) => {
  202. let listitems = $(e).children('li');
  203. listitems.each((index, listel) => {
  204. $(listel).attr('tabOrder', index);
  205. });
  206. });
  207. for (let jL = 0; jL < layoutPositons.length; jL++) {
  208. let modules = $(layoutPositons[jL]).find('.moduleItem');
  209. let order = 0;
  210. for (let i = 0; i < modules.length; i++) {
  211. let myMod = $(modules[i]);
  212. let tabName = null;
  213. let tabOrder = null;
  214. if (myMod.parent().closest('.tabItem').length > 0) {
  215. tabName = myMod.parent().closest('.tabItem').attr('data-id');
  216. tabOrder = myMod.attr('tabOrder');
  217. }
  218. pageModules.push({ ModuleName: myMod.attr('data-id'), LayoutPositionId: this.getModulePosition(myMod), RelationWhere: myMod.find('.relwhere').html(), Order: order, TabName: tabName, TabOrder: tabOrder });
  219. order++;
  220. }
  221. }
  222. let params = new flexygo.api.pages.savePageConfigParams();
  223. params.PageName = this.pagename;
  224. params.ObjectName = this.objectname || null;
  225. params.LayoutName = this.layoutname;
  226. params.Modules = pageModules;
  227. flexygo.ajax.post('~/api/Page', 'SavePageConfig', params, (ret) => {
  228. me.closest('.ui-dialog').remove();
  229. let wc = $('#mainSidePanel')[0];
  230. wc.hidePanels();
  231. flexygo.history.refresh(this.targetItem);
  232. });
  233. }
  234. loadCurrentPage() {
  235. let me = $(this);
  236. let params = {
  237. pageName: this.pagename
  238. };
  239. flexygo.ajax.post('~/api/Page', 'GetModuleManagerModules', params, (ret) => {
  240. me.find('#layoutList img[data-id="' + ret.LayoutName + '"]').click();
  241. let arrOrdered = flexygo.utils.sortObject(ret.Modules, 'Order');
  242. for (let key in arrOrdered) {
  243. let mod = arrOrdered[key];
  244. let item = me.find('#moduleList li[data-id="' + mod.ModuleName + '"]');
  245. item.detach();
  246. item.find('.box-primary').removeClass('box-primary').addClass('bg-primary');
  247. item.find('.relwhere').html(mod.RelationWhere);
  248. if (mod.Events && Object.keys(mod.Events).length > 0) {
  249. item.find('.events').addClass('selected');
  250. }
  251. if (mod.RelationWhere && mod.RelationWhere != '') {
  252. item.find('.relationwhere').addClass('selected');
  253. }
  254. if (mod.TabName != '') {
  255. item.attr('tabOrder', mod.TabOrder);
  256. me.find('[data-id="' + mod.TabName + '"]>div>.moduleTab>ul').append(item);
  257. }
  258. else {
  259. me.find('.' + mod.LayoutPositionId + '>ul').append(item);
  260. }
  261. }
  262. //Sort tab modules
  263. let tabs = $('.moduleTab>ul');
  264. tabs.each((i, e) => {
  265. let mylist = $(e);
  266. let listitems = mylist.children('li').get();
  267. listitems.sort((a, b) => {
  268. let compA = parseInt($(a).attr('tabOrder'));
  269. let compB = parseInt($(b).attr('tabOrder'));
  270. return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
  271. });
  272. $.each(listitems, (idx, itm) => {
  273. mylist.append(itm);
  274. });
  275. });
  276. });
  277. }
  278. loadLayoutPanel() {
  279. let me = $(this);
  280. let pageLayout = me.find('#layoutPanel');
  281. let layoutList = me.find('#layoutList');
  282. for (let i = 0; i < this.layouts.length; i++) {
  283. layoutList.append(flexygo.utils.parser.compile(this.layouts[i], '<img src="{{utils.resolveUrl(ImagePath)}}" data-id="{{LayoutName}}" title="{{LayoutDescrip}}" />', flexygo));
  284. }
  285. layoutList.find('img').on('click', (e) => {
  286. let img = $(e.currentTarget);
  287. layoutList.find('img').removeClass('selected');
  288. img.addClass('selected');
  289. let newTemplate;
  290. for (let i = 0; i < this.layouts.length; i++) {
  291. if (this.layouts[i].LayoutName == img.attr('data-id')) {
  292. newTemplate = $('<div/>').append(this.layouts[i].LayoutTemplate);
  293. this.layoutname = this.layouts[i].LayoutName;
  294. break;
  295. }
  296. }
  297. newTemplate.find('.module-placeholder').append('<ul style="" class="connectedSortable" />');
  298. let modules = me.find('.module-placeholder>ul>li');
  299. for (let i = 0; i < modules.length; i++) {
  300. let myMod = $(modules[i]);
  301. let modulePosition = this.getModulePosition(myMod);
  302. myMod.detach();
  303. if (newTemplate.find('.' + modulePosition).length > 0) {
  304. newTemplate.find('.' + modulePosition + ' ul:not(.connectedTab)').append(myMod);
  305. }
  306. else {
  307. newTemplate.find('.TopPosition ul:not(.connectedTab)').append(myMod);
  308. }
  309. }
  310. pageLayout.html(newTemplate.html());
  311. pageLayout.append('<div style="clear:both"></div>');
  312. this.setActionButtons(pageLayout.find('li'));
  313. this.setSorting(me.find(".connectedSortable"));
  314. });
  315. }
  316. loadNodes() {
  317. let me = $(this);
  318. let obj = new flexygo.obj.Entity('sysModules');
  319. //TODO button Tab
  320. this.modTemplate = '<li data-id="{{ModuleName}}" data-descrip="{{Descrip|string:lower}}" class="moduleItem nolist {{TypeId|switch:[flx-moduletab:tabItem,flx-buttontab:tabItem,else:null]}}">';
  321. this.modTemplate += '<div class="box-primary">';
  322. 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]}}';
  323. this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.security') + '" class="flx-icon icon-group-security security"></i>';
  324. this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.events') + '" class="flx-icon icon-wifi events"></i>';
  325. this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.changepagerelation') + '" class="flx-icon icon-project relationwhere"></i>';
  326. this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.configmodule') + '" class="flx-icon icon-settings configure"></i>';
  327. this.modTemplate += '<i title="' + flexygo.localization.translate('modulemanager.removemodule') + '" class="flx-icon icon-remove remove"></i>';
  328. this.modTemplate += '</div>';
  329. 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]}}';
  330. this.modTemplate += '</li>';
  331. this.modules = obj.getView('sysModuleExtended');
  332. let list = me.find('#moduleList ul');
  333. list.empty();
  334. for (let i = 0; i < this.modules.length; i++) {
  335. list.append(flexygo.utils.parser.compile(this.modules[i], this.modTemplate, flexygo));
  336. }
  337. this.setActionButtons(list.find('li'));
  338. this.setSorting(me.find(".moduleTab>ul.connectedSortable"));
  339. }
  340. setSorting(itms) {
  341. let me = $(this);
  342. itms.sortable({
  343. appendTo: "BODY",
  344. zIndex: 999999,
  345. helper: "clone",
  346. connectWith: ".connectedSortable",
  347. stop: (event, ui) => {
  348. let itm = $(ui.item);
  349. if (itm.closest('#layoutPanel').length > 0) {
  350. itm.find('.box-primary,.box-warning').removeClass('box-primary').removeClass('box-warning').addClass('bg-primary');
  351. }
  352. else {
  353. itm.find('.bg-primary').removeClass('bg-primary').addClass('box-warning');
  354. if (itm.is('.tabItem')) {
  355. let items = itm.find('.moduleItem');
  356. items.each((i, e) => {
  357. let inItem = $(e);
  358. inItem.detach();
  359. me.find('#moduleList ul:first').prepend(inItem);
  360. });
  361. }
  362. }
  363. },
  364. start: (event, ui) => {
  365. let itm = $(ui.item);
  366. if (itm.is('.tabItem')) {
  367. itm.find('.moduleTab').hide();
  368. setTimeout(() => { $('.ui-sortable-helper').find('.moduleTab').hide(); }, 100);
  369. }
  370. }
  371. }).disableSelection();
  372. }
  373. setActionButtons(items) {
  374. let me = $(this);
  375. items.find('.buttonList .remove').on('click', (e) => {
  376. let itm = $(e.currentTarget).closest('li');
  377. itm.hide();
  378. itm.detach();
  379. itm.find('.bg-primary').removeClass('bg-primary').addClass('box-warning');
  380. me.find('#moduleList ul').prepend(itm);
  381. if (itm.is('.tabItem')) {
  382. let items = itm.find('.moduleItem');
  383. items.each((i, el) => {
  384. let inItem = $(el);
  385. inItem.detach();
  386. me.find('#moduleList ul:first').prepend(inItem);
  387. });
  388. }
  389. itm.show(500);
  390. });
  391. items.find('.buttonList .configure').on('click', (e) => {
  392. flexygo.nav.openPage('edit', 'sysModule', "Modules.moduleName='" + $(e.currentTarget).closest('li').attr('data-id') + "'", null, 'popup', true);
  393. });
  394. items.find('.buttonList .events').on('click', (e) => {
  395. let modulename = $(e.currentTarget).closest('li').attr('data-id');
  396. flexygo.nav.openPage('list', 'sysModuleEvents', "Modules_Events.moduleName='" + modulename + "'", '{\'ModuleName\':\'' + modulename + '\'}', 'popup', true);
  397. });
  398. items.find('.buttonList .security').on('click', (e) => {
  399. flexygo.nav.openPageName('syspage-generic-modulesecurity', 'sysModule', "Modules.moduleName='" + $(e.currentTarget).closest('li').attr('data-id') + "'", 'null', 'popup', false, $(e.currentTarget));
  400. });
  401. items.find('.buttonList .relationwhere').on('click', (e) => {
  402. // var myFilter = $(this).closest('li').find('.relwhere');
  403. // 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);
  404. flexygo.nav.openPage('edit', 'sysPageModule', "moduleName='" + $(e.currentTarget).closest('li').attr('data-id') + "' and PageName='" + this.pagename + "'", null, 'popup', true);
  405. });
  406. items.find('.buttonList>.tabButton').on('click', (e) => {
  407. $(e.currentTarget).closest('li').find('div>.moduleTab:first').toggle(500);
  408. });
  409. }
  410. getModulePosition(module) {
  411. let classes = module.closest('.module-placeholder')[0].className.split(/\s+/);
  412. for (let i = 0; i < classes.length; i++) {
  413. if (classes[i].toLowerCase().indexOf('position') != -1) {
  414. return classes[i];
  415. }
  416. }
  417. return 'TopPosition';
  418. }
  419. }
  420. wc_1.FlxModuleManagerElement = FlxModuleManagerElement;
  421. })(wc = ui_1.wc || (ui_1.wc = {}));
  422. })(ui = flexygo.ui || (flexygo.ui = {}));
  423. })(flexygo || (flexygo = {}));
  424. window.customElements.define('flx-modulemanager', flexygo.ui.wc.FlxModuleManagerElement);
  425. //# sourceMappingURL=flx-modulemanager.js.map