@hotstaq/admin-panel 0.3.6 → 0.3.9

package/src/components/admin-table.ts

@@ -2,6 +2,51 @@ import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq"
 import { AdminTableField } from "./admin-table-field";
 import { AdminEdit } from "./admin-edit";
 
+import DataTable, { Api, ConfigColumns } from "datatables.net";
+import dt5 from 'datatables.net-bs5';
+import dtc from 'datatables.net-colreorder-bs5';
+import dts from 'datatables.net-scroller-bs5';
+import dtsb from 'datatables.net-searchbuilder-bs5';
+import dtsel from 'datatables.net-select-bs5';
+
+/**
+ * The properties for the list search.
+ */
+export interface IListSearchProperties
+{
+	/**
+	 * The search.
+	 */
+	search?: string;
+	/**
+	 * The start index.
+	 */
+	offset?: number;
+	/**
+	 * The length.
+	 */
+	limit?: number;
+}
+
+/**
+ * The API response that is expected to be returned.
+ */
+export interface IAPIResponse
+{
+	/**
+	 * The length of the data.
+	 */
+	length: number;
+	/**
+	 * The data to return.
+	 */
+	data: any[];
+	/**
+	 * The error message, if any.
+	 */
+	error?: string;
+}
+
 export class AdminTable extends HotComponent
 {
 	/**
@@ -58,7 +103,7 @@ export class AdminTable extends HotComponent
 	/**
 	 * The list function to execute to retrieve data.
 	 */
-	onlist: () => Promise<any[]>;;
+	onlist: (search: IListSearchProperties) => Promise<IAPIResponse>;
 	/**
 	 * The list url to use for this table. Hot.Data.AdminPanel.listUrl will not be used in this case.
 	 */
@@ -81,6 +126,14 @@ export class AdminTable extends HotComponent
 	 * The attached edit form, if any.
 	 */
 	attachedEdit: AdminEdit;
+	/**
+	 * The associated DataTable.
+	 */
+	dataTable: DataTable<Api>;
+	/**
+	 * Indicates if the list is refreshing.
+	 */
+	isListRefreshing: boolean;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -103,6 +156,8 @@ export class AdminTable extends HotComponent
 		this.onselectedrow = null;
 		this.attachedEdit = null;
 		this.selected = -1;
+		this.dataTable = null;
+		this.isListRefreshing = false;
 	}
 
 	/**
@@ -195,7 +250,7 @@ export class AdminTable extends HotComponent
 		if (this.singleclickedit === true)
 		{
 			if (this.attachedEdit != null)
-				await this.attachedEdit.editClicked ();
+				await this.attachedEdit.editClicked (this);
 		}
 
 		/*this.selectedRows = [];
@@ -232,7 +287,10 @@ export class AdminTable extends HotComponent
 		if (index < 0)
 			return (null);
 
-		return (this.rowElements[index].fields);
+		// @ts-ignore
+		const result = this.dataTable.row(index).data();
+
+		return (result);
 	}
 
 	/**
@@ -305,15 +363,16 @@ export class AdminTable extends HotComponent
 
 		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
 		let index: number = this.rowElements.length;
-		let rowStr = `<tr onclick = "this.parentNode.parentNode.parentNode.parentNode.hotComponent.selectRow (this, ${index});">`;
+		//let rowStr = `<tr onclick = "this.parentNode.parentNode.parentNode.parentNode.hotComponent.selectRow (this, ${index});">`;
 
 		if (typeof (this.checkbox) === "string")
 			this.checkbox = HotStaq.parseBoolean (this.checkbox);
 
-		if (this.checkbox === true)
+		/*if (this.checkbox === true)
 			rowStr += `<td><input type = "checkbox" /></td>`;
 		else
-			rowStr += `<td></td>`;
+			rowStr += `<td></td>`;*/
+		let rowsFields: any[] = [];
 
 		for (let iIdx = 0; iIdx < this.headers.indicies.length; iIdx++)
 		{
@@ -343,6 +402,8 @@ export class AdminTable extends HotComponent
 				value = tempValue;
 			}
 
+			let rowObj = null;
+
 			if (this.headers.elements[key] != null)
 			{
 				// @ts-ignore - @fixme I messed this up, will fix.
@@ -373,26 +434,40 @@ export class AdminTable extends HotComponent
 
 							defaultOutput = false;
 							const newOutput: string = orgField.onoutput (index, value);
-							rowStr += newOutput;
+							//rowStr += newOutput;
+							rowObj = { index: index, value: newOutput };
 						}
 					}
 
 					if (defaultOutput === true)
-						rowStr += `<td data-index = "${index}">${value}</td>`;
+					{
+						//rowStr += `<td data-index = "${index}">${value}</td>`;
+						rowObj = value;
+					}
 				}
 			}
+
+			rowsFields.push (rowObj);
 		}
 
-		rowStr += "</tr>";
+		if (this.rows == null)
+			this.rows = [];
+
+		// @ts-ignore
+		//this.dataTable.row.add (rowsFields);
+		//this.rows.push (rowsFields);
+		/*rowStr += "</tr>";
 
 		let newObj = HotStaq.addHtml (tbody, rowStr);
 
 		this.rowElements.push ({
 				fields: fields,
 				element: (<HTMLElement>newObj)
-			});
+			});*/
 	}
 
+	rows: any[];
+
 	/**
 	 * Clear the list of rows.
 	 */
@@ -400,22 +475,50 @@ export class AdminTable extends HotComponent
 	{
 		this.rowElements = [];
 
-		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
+		/*let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
 
-		tbody.innerHTML = "";
+		tbody.innerHTML = "";*/
+		// @ts-ignore
+		this.dataTable.clear ();
 	}
 
 	/**
 	 * Refresh the list.
+	 * 
+	 * @returns The total number of rows available in the list.
 	 */
-	async refreshList (list: any[] = null)
+	async refreshList (list: IAPIResponse = null): Promise<IAPIResponse>
 	{
+		this.isListRefreshing = true;
+
+		let search: IListSearchProperties = {
+				search: "",
+				offset: 0,
+				limit: 10
+			};
+
+		if (this.dataTable != null)
+		{
+			// @ts-ignore
+			const searchStr: string = this.dataTable.search ();
+			// @ts-ignore
+			const info = this.dataTable.page.info ();
+
+			search = {
+				search: searchStr || "",
+				// @ts-ignore
+				offset: info.start || 0,
+				// @ts-ignore
+				limit: info.length || 10
+			};
+		}
+
 		if (this.onlist != null)
 		{
 			if (typeof (this.onlist) === "string")
-				this.onlist = (<() => Promise<any[]>>new Function (this.onlist));
+				this.onlist = (<(search: IListSearchProperties) => Promise<IAPIResponse>>new Function (this.onlist));
 
-			list = await this.onlist ();
+			list = await this.onlist (search);
 		}
 		else
 		{
@@ -427,7 +530,8 @@ export class AdminTable extends HotComponent
 			if (listUrl !== "")
 			{
 				list = await Hot.jsonRequest (listUrl, {
-						schema: this.schema
+						schema: this.schema,
+						search: search
 					});
 			}
 		}
@@ -436,13 +540,36 @@ export class AdminTable extends HotComponent
 
 		if (list != null)
 		{
-			for (let iIdx = 0; iIdx < list.length; iIdx++)
+			if (list.error != null)
 			{
-				let fields = list[iIdx];
+				console.error (`List error: ${list.error}`);
+				this.isListRefreshing = false;
 
-				this.addRow (fields);
+				return (null);
 			}
+
+			/*for (let iIdx = 0; iIdx < list.data.length; iIdx++)
+			{
+				let fields = list.data[iIdx];
+
+				this.addRow (fields);
+			}*/
 		}
+
+		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
+		// @ts-ignore
+		tbody.hotComponent = this;
+		$(tbody).on ('click', 'tr', function ()
+			{
+				const hotComponent: AdminTable = this.parentNode.hotComponent;
+				// @ts-ignore
+				const index = hotComponent.dataTable.row (this).index ();
+				hotComponent.selectRow (this, index);
+			});
+
+		this.isListRefreshing = false;
+
+		return (list);
 	}
 
 	/**
@@ -452,7 +579,72 @@ export class AdminTable extends HotComponent
 	{
 		setTimeout (async () =>
 			{
-				await this.refreshList ();
+
+				const table = $(htmlElement).find("table");
+
+				let columns: ConfigColumns[] = [];
+				$(table).find ("thead th").each (function ()
+					{
+						const text = $(this).text ();
+						const data = $(this).data ("field");
+						let dataType = $(this).data ("field-type");
+
+						if ((text == null) || (text === ""))
+							return;
+
+						if ((data == null) || (data === ""))
+							return;
+
+						if (dataType === "text")
+							dataType = "string";
+
+						columns.push({
+								title: text,
+								data: data
+							});
+					});
+
+				$(table).find ("thead").remove ();
+
+				// @ts-ignore
+				this.dataTable = new DataTable (table[0], {
+					processing: true,
+					serverSide: true,
+					colReorder: true,
+					scroller: true,
+					select: true,
+					dom: 'Qlfrtip',
+					columns: columns,
+					data: [],
+					ajax: async (data, callback, settings) =>
+						{
+							if (this.isListRefreshing === true)
+								return;
+
+							const currentData = await this.refreshList ();
+							const callbackObj: any = {
+									data: [],
+									recordsTotal: 0,
+									recordsFiltered: 0
+								};
+
+							if (! (currentData instanceof Array))
+							{
+								if (currentData.length != null)
+								{
+									callbackObj.recordsTotal = currentData.length;
+									callbackObj.recordsFiltered = currentData.length;
+								}
+
+								if (currentData.data != null)
+									callbackObj.data = currentData.data;
+							}
+							else
+								callbackObj.data = currentData;
+
+							callback (callbackObj);
+						}
+					});
 			}, 50);
 
 		return (null);

package/src/components/admin-text.ts

@@ -50,13 +50,14 @@ export class AdminText extends HotComponent
 
 		const field = this.htmlElements[0].getAttribute ("hot-field");
 		let field_type = this.htmlElements[0].getAttribute ("hot-field-type");
+		let htmlType = this.htmlElements[0].getAttribute ("type") || "text";
 
 		if (field_type == null)
 			field_type = "text";
 
 		return (`<div>
 			<label class="form-label">${this.inner}</label>
-			<input class="${this.css_class}" type = "text" hot-field = "${field}" hot-field-type = "${field_type}" value = "${value}" />
+			<input class="${this.css_class}" type = "${htmlType}" hot-field = "${field}" hot-field-type = "${field_type}" value = "${value}" />
 		</div>`);
 	}
 }

package/start.sh

@@ -6,4 +6,4 @@ if [ ! -f "./.env" ]; then
     exit 1
 fi
 
-docker-compose --env-file ./.env up -d
+docker compose --env-file ./.env up -d

package/stop.sh

@@ -6,4 +6,4 @@ if [ ! -f "./.env" ]; then
     exit 1
 fi
 
-docker-compose --env-file ./.env down
+docker compose --env-file ./.env down

package/webpack-api.config.js

@@ -46,7 +46,13 @@ module.exports = {
 			Utils: "empty"
 		},
 		externals: {
-			hotstaq: "HotStaqWeb"
+			hotstaq: "HotStaqWeb",
+			'datatables.net': 'DataTable',
+			'datatables.net-bs5': 'dt5',
+			'datatables.net-colreorder-bs5': 'dtc',
+			'datatables.net-scroller-bs5': 'dts',
+			'datatables.net-searchbuilder-bs5': 'dtsb',
+			'datatables.net-select-bs5': 'dtsel'
 		},
 		output: {
 			filename: "admin-panel.js",
@@ -54,4 +60,4 @@ module.exports = {
 			library: "admin-panelWeb",
 			libraryTarget: "umd"
 		}
-	};
+	};

package/webpack.config.cjs

@@ -75,7 +75,13 @@ module.exports = {
 			"node:stream": "{}",
 			"node:url": "{}",
 			"node:util": "{}",
-			"node:zlib": "{}"
+			"node:zlib": "{}",
+			'datatables.net': 'DataTable',
+			'datatables.net-bs5': 'dt5',
+			'datatables.net-colreorder-bs5': 'dtc',
+			'datatables.net-scroller-bs5': 'dts',
+			'datatables.net-searchbuilder-bs5': 'dtsb',
+			'datatables.net-select-bs5': 'dtsel'
 		},
 		output: {
 			filename: "AdminPanelComponents.js",

package/dbstart.sh

@@ -1,14 +0,0 @@
-#!/usr/bin/env bash
-
-RUN_DAEMON="-d"
-MARIADB_DB_PORT=3320
-
-RUN_DAEMON_OPT=$1
-
-if [ "$RUN_DAEMON_OPT" == "no-daemon" ]; then
-    RUN_DAEMON=""
-fi
-
-docker rm -f mariadb-staqapp-tests 2>/dev/null || true
-
-docker run ${RUN_DAEMON} --name="mariadb-staqapp-tests" -p ${MARIADB_DB_PORT}:3306 -e MYSQL_ROOT_PASSWORD=cdO1KjwiC8ksOqCV1s0 -e MYSQL_DATABASE=staqapp -e MYSQL_USER=5NKVBAt7OrzrumQyQVs -e MYSQL_PASSWORD=1BBrZbKYRUM7oiMA5oY mariadb:10.6

package/dbstop.sh

@@ -1,3 +0,0 @@
-#!/usr/bin/env bash
-
-docker rm -f mariadb-staqapp-tests