From 061780a0d21c4a919db567a9453c231df048b0ec Mon Sep 17 00:00:00 2001 From: Paolo Date: Tue, 24 May 2022 09:45:31 +0200 Subject: [PATCH] - Added new VUE based JS public/js/components/Filter.js, public/js/components/Navigation.js and public/js/apps/LogsViewer.js - Fixed bootstrap includes in FHC-Footer and FHC-Header - Moved Job Logs Viewer to VUE --- application/views/system/logs/logsViewer.php | 40 +++--- application/views/templates/FHC-Footer.php | 2 +- application/views/templates/FHC-Header.php | 2 +- public/js/apps/LogsViewer.js | 19 +++ public/js/components/Filter.js | 132 +++++++++++++++++++ public/js/components/Navigation.js | 106 +++++++++++++++ 6 files changed, 278 insertions(+), 23 deletions(-) create mode 100644 public/js/apps/LogsViewer.js create mode 100644 public/js/components/Filter.js create mode 100644 public/js/components/Navigation.js diff --git a/application/views/system/logs/logsViewer.php b/application/views/system/logs/logsViewer.php index 2718480e9..521e867b3 100644 --- a/application/views/system/logs/logsViewer.php +++ b/application/views/system/logs/logsViewer.php @@ -2,42 +2,40 @@ $includesArray = array( 'title' => 'Logs Viewer', 'jquery3' => true, - 'jqueryui1' => true, - 'bootstrap3' => true, - 'fontawesome4' => true, - 'sbadmintemplate3' => true, + 'bootstrap5' => true, + 'fontawesome6' => true, 'tablesorter2' => true, + 'vue3' => true, 'ajaxlib' => true, - 'bootstrapper' => true, // to be used only if you know what you are doing! - 'filterwidget' => true, - 'navigationwidget' => true, + 'filtercomponent' => true, + 'navigationcomponent' => true, 'phrases' => array( 'global' => array('mailAnXversandt'), 'ui' => array('bitteEintragWaehlen') ), - 'customCSSs' => 'public/css/sbadmin2/tablesort_bootstrap.css' + 'customJSs' => array('public/js/apps/LogsViewer.js') ); $this->load->view('templates/FHC-Header', $includesArray); ?> -
+
- widgetlib->widget('NavigationWidget'); ?> + + -
-
-
-
-

- Job Logs Viewer -

-
-
-
- load->view('system/logs/logsViewerData.php'); ?> +
+
+
+

+ Job Logs Viewer +

+
+ + +
diff --git a/application/views/templates/FHC-Footer.php b/application/views/templates/FHC-Footer.php index dff868eab..b9ac0134e 100644 --- a/application/views/templates/FHC-Footer.php +++ b/application/views/templates/FHC-Footer.php @@ -52,7 +52,7 @@ if ($bootstrap3 === true) generateJSsInclude('vendor/twbs/bootstrap3/dist/js/bootstrap.min.js'); // Bootstrap 5 JS - if ($bootstrap5 === true) generateJSsInclude('vendor/twbs/bootstrap5/js/bootstrap.min.js'); + if ($bootstrap5 === true) generateJSsInclude('vendor/twbs/bootstrap5/dist/js/bootstrap.min.js'); // Securimage JS if ($captcha3 === true) generateJSsInclude('vendor/dapphp/securimage/securimage.js'); diff --git a/application/views/templates/FHC-Header.php b/application/views/templates/FHC-Header.php index eed8b6590..181796bfc 100644 --- a/application/views/templates/FHC-Header.php +++ b/application/views/templates/FHC-Header.php @@ -34,7 +34,7 @@ if ($bootstrap3 === true) generateCSSsInclude('vendor/twbs/bootstrap3/dist/css/bootstrap.min.css'); // Bootstrap 5 CSS - if ($bootstrap5 === true) generateCSSsInclude('vendor/twbs/bootstrap5/css/bootstrap.min.css'); + if ($bootstrap5 === true) generateCSSsInclude('vendor/twbs/bootstrap5/dist/css/bootstrap.min.css'); // jQuery UI CSS if ($jqueryui1 === true) generateCSSsInclude('vendor/components/jqueryui/themes/base/jquery-ui.min.css'); diff --git a/public/js/apps/LogsViewer.js b/public/js/apps/LogsViewer.js new file mode 100644 index 000000000..44e918432 --- /dev/null +++ b/public/js/apps/LogsViewer.js @@ -0,0 +1,19 @@ +const logsViewerApp = Vue.createApp({ + data() { + return { + appSideMenuEntries: {} + }; + }, + components: { + Navigation, + Filter + }, + methods: { + newSideMenuEntryHandler(payload) { + this.appSideMenuEntries = payload; + } + } +}); + +logsViewerApp.mount('#main'); + diff --git a/public/js/components/Filter.js b/public/js/components/Filter.js new file mode 100644 index 000000000..421ca2e6f --- /dev/null +++ b/public/js/components/Filter.js @@ -0,0 +1,132 @@ +const Filter = { + emits: ['nwNewEntry'], + data() { + return { + fieldsToDisplay: null, + dataset: null, + selectedFields: null + }; + }, + created() { + this.fetchFilterData(); + }, + updated() { + var filterWidgetTablesorter = $("#filterTableDataset"); + + // Checks if the table contains data (rows) + if (filterWidgetTablesorter.find("tbody:empty").length == 0 + && filterWidgetTablesorter.find("tr:empty").length == 0 + && filterWidgetTablesorter.hasClass("table-condensed")) + { + filterWidgetTablesorter.tablesorter({ + dateFormat: "ddmmyyyy", + widgets: ["zebra", "filter"], + widgetOptions: { + filter_saveFilters : true + } + }); + + $.tablesorter.updateAll(filterWidgetTablesorter[0].config, true, null); + } + }, + props: { + filterType: { + type: String, + required: true + } + }, + methods: { + clkNewEntry() { + console.log('emit'); + this.$emit( + 'nwNewEntry', + { + "link": "#", + "description": 'New side menu ' + Math.floor(Math.random() * 10), + "icon": "dashboard", + "sort": 1 + } + ); + }, + fetchFilterData() { + FHC_AjaxClient.ajaxCallGet( + "widgets/Filters/getFilter", + { + filterUniqueId: this.getFilterUniqueIdPrefix(), + filterType: this.filterType, // props!! + filterId: 170 + }, + { + successCallback: this.renderTableSorter + } + ); + }, + getFilterUniqueIdPrefix() { + return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method; + }, + renderTableSorter(data) { + + if (FHC_AjaxClient.hasData(data)) + { + this._setFieldsToDisplay(FHC_AjaxClient.getData(data)); + this.dataset = FHC_AjaxClient.getData(data).dataset; + this.selectedFields = FHC_AjaxClient.getData(data).selectedFields; + } + else + { + console.error(FHC_AjaxClient.getError(data)); + } + }, + _setFieldsToDisplay(data) { + + let arrayFieldsToDisplay = []; + + if (data.hasOwnProperty("selectedFields") && $.isArray(data.selectedFields)) + { + if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases)) + { + for (let sfc = 0; sfc < data.selectedFields.length; sfc++) + { + for (let fc = 0; fc < data.fields.length; fc++) + { + if (data.selectedFields[sfc] == data.fields[fc]) + { + arrayFieldsToDisplay[sfc] = data.columnsAliases[fc]; + } + } + } + } + else + { + arrayFieldsToDisplay = data.selectedFields; + } + } + + this.fieldsToDisplay = arrayFieldsToDisplay; + } + }, + template: ` + + + + + + + + + + +
+ ` +}; + diff --git a/public/js/components/Navigation.js b/public/js/components/Navigation.js new file mode 100644 index 000000000..852b0bd17 --- /dev/null +++ b/public/js/components/Navigation.js @@ -0,0 +1,106 @@ +const Navigation = { + data() { + return { + headerMenu: {}, + sideMenu: {} + }; + }, + created() { + this.fetchDataHeader(); + this.fetchDataMenu(); + }, + props: { + addHeaderMenuEntries: Object, + addSideMenuEntries: Object + }, + methods: { + getNavigationPage() { + return FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method; + }, + fetchDataHeader() { + // Retrives the header menu array + FHC_AjaxClient.ajaxCallGet( + 'system/Navigation/header', + { + navigation_page: this.getNavigationPage() + }, + { + successCallback: this.setHeaders + } + ); + }, + setHeaders(data) { + if (FHC_AjaxClient.hasData(data)) this.headerMenu = FHC_AjaxClient.getData(data); + }, + fetchDataMenu() { + // Retrives the side menu array + FHC_AjaxClient.ajaxCallGet( + 'system/Navigation/menu', + { + navigation_page: this.getNavigationPage() + }, + { + successCallback: this.setSideMenu + } + ); + }, + setSideMenu(data) { + if (FHC_AjaxClient.hasData(data)) this.sideMenu = FHC_AjaxClient.getData(data); + }, + getDataBsToggle(header) { + return !header.children ? null : 'dropdown'; + } + }, + computed: { + headerMenuEntries() { + if (this.headerMenu != null && this.addHeaderMenuEntries != null && Object.keys(this.addHeaderMenuEntries).length > 0) + { + this.headerMenu[this.addHeaderMenuEntries.description] = this.addHeaderMenuEntries; + } + return this.headerMenu; + }, + sideMenuEntries() { + if (this.sideMenu != null && this.addSideMenuEntries != null && Object.keys(this.addSideMenuEntries).length > 0) + { + this.sideMenu[this.addSideMenuEntries.description] = this.addSideMenuEntries; + } + return this.sideMenu; + } + }, + template: ` + + + + + + ` +}; +