- Added new directory public/js/apps/LogsViewer/

- Moved public/js/apps/LogsViewer.js to public/js/apps/LogsViewer/
- Added new JS file public/js/apps/LogsViewer/TabulatorSetup.js to setup the tabulator in the LogsViewer app
- Added new property tabulatorEvents to the FilterCmpt to subscribe events for the tabulator

application/views/system/logs/logsViewer.php

@@ -12,7 +12,7 @@
 			'global' => array('mailAnXversandt'),
 			'ui' => array('bitteEintragWaehlen')
 		),
-		'customJSModules' => array('public/js/apps/LogsViewer.js')
+		'customJSModules' => array('public/js/apps/LogsViewer/LogsViewer.js')
 	);
 
 	$this->load->view('templates/FHC-Header', $includesArray);
@@ -35,19 +35,8 @@
 				<!-- Filter component -->
 				<core-filter-cmpt
 					filter-type="LogsViewer"
-					:tabulator-options="{
-						height: 500,
-						layout: 'fitColumns',
-						columns: [
-							{title: 'Log ID', field: 'LogId'},
-							{title: 'Request ID', field: 'RequestId'},
-							{title: 'Execution time', field: 'ExecutionTime'},
-							{title: 'Executed by', field: 'ExecutedBy'},
-							{title: 'Description', field: 'Description'},
-							{title: 'Data', field: 'Data'},
-							{title: 'Web service type', field: 'WebserviceType'}
-						]
-					}"
+					:tabulator-options="logsViewerTabulatorOptions"
+					:tabulator-events="logsViewerTabulatorEventHandlers"
 					@nw-new-entry="newSideMenuEntryHandler">
 				</core-filter-cmpt>
 			</div>

public/js/apps/LogsViewer/LogsViewer.js

@@ -15,13 +15,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {CoreFilterCmpt} from '../components/filter/Filter.js';
-import {CoreNavigationCmpt} from '../components/navigation/Navigation.js';
+import {LogsViewerTabulatorOptions} from './TabulatorSetup.js';
+import {LogsViewerTabulatorEventHandlers} from './TabulatorSetup.js';
+
+import {CoreFilterCmpt} from '../../components/filter/Filter.js';
+import {CoreNavigationCmpt} from '../../components/navigation/Navigation.js';
 
 const logsViewerApp = Vue.createApp({
 	data() {
 		return {
-			appSideMenuEntries: {}
+			appSideMenuEntries: {},
+			logsViewerTabulatorOptions: LogsViewerTabulatorOptions,
+			logsViewerTabulatorEventHandlers: LogsViewerTabulatorEventHandlers
 		};
 	},
 	components: {

public/js/apps/LogsViewer/TabulatorSetup.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ *
+ */
+export const LogsViewerTabulatorOptions = {
+	height: 500,
+	layout: 'fitColumns',
+	columns: [
+		{title: 'Log ID', field: 'LogId'},
+		{title: 'Request ID', field: 'RequestId'},
+		{title: 'Execution time', field: 'ExecutionTime'},
+		{title: 'Executed by', field: 'ExecutedBy'},
+		{title: 'Description', field: 'Description'},
+		{title: 'Data', field: 'Data'},
+		{title: 'Web service type', field: 'WebserviceType'}
+	]
+};
+
+/**
+ *
+ */
+export const LogsViewerTabulatorEventHandlers = [
+	{
+		event: "rowClick",
+		handler: function(e, row) {
+			alert(row.getData().Data);
+		}
+	}
+];
+

public/js/components/filter/Filter.js

@@ -32,7 +32,8 @@ export const CoreFilterCmpt = {
 			type: String,
 			required: true
 		},
-		tabulatorOptions: Object
+		tabulatorOptions: Object,
+		tabulatorEvents: Array
 	},
 	data() {
 		return {
@@ -133,6 +134,17 @@ export const CoreFilterCmpt = {
 			"#filterTableDataset",
 			tabulatorOptions
 		);
+
+		// 
+		if (Array.isArray(this.tabulatorEvents) && this.tabulatorEvents.length > 0)
+		{
+			// 
+			for (let i = 0; i < this.tabulatorEvents.length; i++)
+			{
+				//
+				this.tabulator.on(this.tabulatorEvents[i].event, this.tabulatorEvents[i].handler);
+			}
+		}
 	},
 	methods: {
 		/**