@hotstaq/admin-panel 0.3.7 → 0.3.10

package/docker-compose.yaml

@@ -1,4 +1,3 @@
-version: "3.8"
 services:
   # Used just to make sure the database has started before continuing.
   init-app-database:

package/env-example

@@ -1,7 +1,9 @@
 HTTP_PORT=3243
+JWT_SECRET_KEY=ja789w5hja9w345h98aw3jh48aw34j898
 MYSQL_ROOT_PASSWORD=jlka7sw47aSD234
-DATABASE_SERVER=127.0.0.1
-DATABASE_PORT=3320
+DATABASE_TYPE=mariadb
+DATABASE_SERVER=localhost
+DATABASE_PORT=3322
 DATABASE_USERNAME=5NKVBAt7OrzrumQyQVs
 DATABASE_PASSWORD=1BBrZbKYRUM7oiMA5oY
 DATABASE_SCHEMA=staqapp

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hotstaq/admin-panel",
   "description": "",
-  "version": "0.3.7",
+  "version": "0.3.10",
   "main": "build/index.js",
   "scripts": {
     "start": "hotstaq --hotsite ./HotSite.json --env-file ./.env run --server-type web-api",
@@ -18,12 +18,18 @@
   "license": "MIT",
   "dependencies": {
     "@hotstaq/dataroute": "^0.2.10",
-    "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.3",
-    "chart.js": "^2.9.4",
+    "@hotstaq/userroute": "^0.6.13",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
+    "datatables.net": "^2.2.2",
+    "datatables.net-bs5": "^2.2.2",
+    "datatables.net-colreorder-bs5": "^2.0.4",
+    "datatables.net-scroller-bs5": "^2.4.3",
+    "datatables.net-searchbuilder-bs5": "^1.8.2",
+    "datatables.net-select-bs5": "^3.0.0",
     "dotenv": "^10.0.0",
     "feather-icons": "^4.29.0",
-    "jquery": "^3.6.3"
+    "jquery": "^3.7.1"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.6",
@@ -42,9 +48,10 @@
     "chokidar": "^3.5.3",
     "ts-loader": "^7.0.5",
     "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "hotstaq": "^0.8.103"
+    "hotstaq": "^0.8.118"
   }
 }

package/src/AppAPI.ts

@@ -1,17 +1,44 @@
-import { HotAPI, HotServer, HotClient, HotRoute, 
-	HotRouteMethod, MySQLSchema, 
-	ServerAuthorizationFunction, HotStaq, HotServerType, DeveloperMode, HotDBMySQL } from "hotstaq";
-import { DataRoute } from "@hotstaq/dataroute";
+import { HotAPI, HotServer, HotClient, MySQLSchema, HotServerType, HotDBMySQL, HotLog, ServerRequest} from "hotstaq";
+import { AdminRoute, User, UserRoute } from "@hotstaq/userroute";
+
+/**
+ * An admin route that can be used for any user.
+ */
+export class FriendlyAdminRoute extends AdminRoute
+{
+	constructor (api: HotAPI, routeName: string = "admins")
+	{
+		super (api, routeName);
+	}
+
+	/**
+	 * This disables the need to check for authentication.
+	 */
+	protected async checkAuth (req: ServerRequest): Promise<void>
+	{
+	}
+}
 
 /**
  * The App's API and routes.
  */
 export class AppAPI extends HotAPI
 {
-	constructor (baseUrl: string, connection: HotServer | HotClient, db: any = null)
+	/**
+	 * The logger.
+	 */
+	logger: HotLog;
+	/**
+	 * The database connection.
+	 */
+	db: HotDBMySQL;
+
+	constructor (baseUrl: string, connection: HotServer | HotClient, db: HotDBMySQL = null)
 	{
 		super(baseUrl, connection, db);
 
+		this.logger = connection.logger;
+
 		this.onPreRegister = async (): Promise<boolean> =>
 			{
 				if (connection.type !== HotServerType.Generate)
@@ -23,64 +50,34 @@ export class AppAPI extends HotAPI
 			};
 		this.onPostRegister = async (): Promise<boolean> =>
 			{
-				// Sync database tables here.
+				await User.syncTables (this.db, true);
 
-				return (true);
-			};
+				const maxUsers: number = 53;
 
-		this.addRoute (new DataRoute (this, async (db: HotDBMySQL) =>
-			{
-				if (this.connection.processor.mode === DeveloperMode.Development)
+				for (let iIdx = 0; iIdx < maxUsers; iIdx++)
 				{
-					await db.query (
-						`create table if not exists users (
-							id             INT(10)        NOT NULL AUTO_INCREMENT,
-							name           VARCHAR(256)   DEFAULT '',
-							email          VARCHAR(256)   DEFAULT '',
-							password       VARCHAR(256)   DEFAULT '',
-							verified       INT(1)         DEFAULT '0',
-							registered     DATETIME       DEFAULT NOW(),
-							enabled        INT(1)         DEFAULT '1',
-							PRIMARY KEY (id)
-						)`);
-
-					let results: any = await db.queryOne (`select COUNT(*) from users;`);
-
-					if (results.results["COUNT(*)"] < 1)
+					try
 					{
-						let testUsers = [{
-									name: "John",
-									email: "test1@freelight.org",
-									password: "a867h398jdg",
-									verified: true
-								},
-								{
-									name: "Jane",
-									email: "test2@freelight.org",
-									password: "ai97w3a98w3498",
-									verified: true
-								}
-							];
-
-						for (let iIdx = 0; iIdx < testUsers.length; iIdx++)
-						{
-							let testUser = testUsers[iIdx];
-							let verified: number = 0;
-
-							if (testUser.verified === true)
-								verified = 1;
-
-							let result: any = await db.query (
-								`INSERT INTO users (name, email, password, verified) VALUES (?, ?, ?, ?);`, 
-								[testUser.name, testUser.email, testUser.password, verified]);
-
-							if (result.error != null)
-								throw new Error (result.error);
+						let testUser = new User ({
+								displayName: `John${iIdx}`,
+								email: `test${iIdx}@freelight.org`,
+								password: "a867h398jdg",
+								verified: ((iIdx % 2) === 0) ? true : false
+							});
 
-							let id: number = result.results["insertId"];
-						}
+						await testUser.register (this.db);
+						this.logger.info (`Registered user: ${testUser.displayName}`);
+					}
+					catch (ex)
+					{
+						this.logger.error (`Error registering user: ${ex}`);
 					}
 				}
-			}));
+
+				return (true);
+			};
+
+		this.addRoute (new UserRoute (this, "users"));
+		this.addRoute (new FriendlyAdminRoute (this, "admins"));
 	}
 }

package/src/WebExport.ts

@@ -3,9 +3,14 @@ async function buildAssets (): Promise<any>
 	return ({
 			import: ["@popperjs/core", 
 				{ name: "jquery", files: ["jquery.min.js"] }, 
-				"chart.js", 
-				"feather-icons", 
-				{ name: "bootstrap", files: ["bootstrap.min.js", "bootstrap.min.css"] }],
+				"feather-icons",
+				{ name: "bootstrap", files: ["bootstrap.min.js", "bootstrap.min.css"] }, 
+				"datatables.net", 
+				"datatables.net-bs5",
+				"datatables.net-colreorder-bs5",
+				"datatables.net-scroller-bs5",
+				"datatables.net-searchbuilder-bs5",
+				"datatables.net-select-bs5"],
 			html: ["./assets/html/*.*"],
 			css: ["./assets/css/*.*"],
 			js: ["./assets/js/*.*", "./build-web/AdminPanelComponents.js"],

package/src/components/admin-table-field.ts

@@ -76,7 +76,7 @@ export class AdminTableField extends HotComponent
 		}
 
 		return ([{
-			html: `<th>${this.inner}</th>`,
+			html: `<th data-field = "${this.field}" data-field-type = "${this.field_type}">${this.inner}</th>`,
 			placeHereParent: "header"
 		}]);
 	}

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;
 	}
 
 	/**
@@ -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,76 @@ 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;
+								callbackObj.recordsTotal = currentData.length;
+								callbackObj.recordsFiltered = currentData.length;
+							}
+
+							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