@hotstaq/admin-panel 0.2.5 → 0.2.7

package/build-web/AdminPanelWeb_AppAPI.js

@@ -176,11 +176,98 @@ class data
 		return (promise);
 	}
 
+	/**
+	 * The JSON object to send to the server.
+	 * 
+	 * @typedef {Object} DATA_EDIT_JSON_OBJECT_TYPE
+	 * @property {string} schema The schema to edit data in.
+	 * @property {string} whereFields The where fields and their values to select from the database. A key/value object must be passed. Example: { "name": "Test_User" }
+	 * @property {string} fields The fields and their values to update in the database. A key/value object must be passed. Example: { "name": "Test_User" }
+	 */
+
+	/**
+	 * The edit method.
+	 * 
+	 * @param {DATA_EDIT_JSON_OBJECT_TYPE} jsonObj
+	 * 
+	 * @returns {string} Returns true if successful.
+	 */
+	edit (jsonObj)
+	{
+		var promise = new Promise ((resolve, reject) => 
+			{
+				const url = `${this.baseUrl}/v1/data/edit`;
+				const auth = null;
+
+				if (this.authorization != null)
+				{
+					if (this.authorization.toAuthorizationHeaderString != null)
+						auth = this.authorization.toAuthorizationHeaderString ();
+				}
+
+				
+				jsonObj = HotStaqProcessJSONObject (jsonObj);
+				HotStaqPostJSONObject ("POST", url, jsonObj, auth).then (
+					function (response)
+					{
+						var result = response.json ();
+
+						resolve (result);
+					});
+			});
+
+		return (promise);
+	}
+
+	/**
+	 * The JSON object to send to the server.
+	 * 
+	 * @typedef {Object} DATA_REMOVE_JSON_OBJECT_TYPE
+	 * @property {string} schema The schema to remove data from.
+	 * @property {string} whereFields The where fields and their values to select from the database. A key/value object must be passed. Example: { "name": "Test_User" }
+	 * @property {int} limit The max number of results to delete.
+	 */
+
+	/**
+	 * The remove method.
+	 * 
+	 * @param {DATA_REMOVE_JSON_OBJECT_TYPE} jsonObj
+	 * 
+	 * @returns {string} Returns true if successful.
+	 */
+	remove (jsonObj)
+	{
+		var promise = new Promise ((resolve, reject) => 
+			{
+				const url = `${this.baseUrl}/v1/data/remove`;
+				const auth = null;
+
+				if (this.authorization != null)
+				{
+					if (this.authorization.toAuthorizationHeaderString != null)
+						auth = this.authorization.toAuthorizationHeaderString ();
+				}
+
+				
+				jsonObj = HotStaqProcessJSONObject (jsonObj);
+				HotStaqPostJSONObject ("POST", url, jsonObj, auth).then (
+					function (response)
+					{
+						var result = response.json ();
+
+						resolve (result);
+					});
+			});
+
+		return (promise);
+	}
+
 	/**
 	 * The JSON object to send to the server.
 	 * 
 	 * @typedef {Object} DATA_LIST_JSON_OBJECT_TYPE
 	 * @property {string} schema The schema to access.
+	 * @property {array} whereFields The where fields and their values to select from the database. A key/value object must be passed. Example: { "name": "Test_User" }
 	 * @property {array} fields The list of fields in the schema to access.
 	 * @property {int} offset The offset.
 	 * @property {int} limit The max number of results to return. Default is 20.

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@hotstaq/admin-panel",
   "description": "",
-  "version": "0.2.5",
-  "main": "build/src/AppAPI.js",
+  "version": "0.2.7",
+  "main": "build/index.js",
   "scripts": {
     "start": "hotstaq --hotsite ./HotSite.json --env-file ./.env run --server-type web-api",
     "dev": "hotstaq --hotsite ./HotSite.json --development-mode run --server-type web-api --web-http-port 8080",
-    "test": "hotstaq --dev --env-file .env run --server-type web-api",
+    "test": "hotstaq --dev --env-file .env run --server-type web-api --web-test",
     "build": "tsc --build ./tsconfig.json",
-    "build-web": "hotstaq create --copy-libraries-to-location ./public/js/ app && hotstaq module build && webpack --mode=production && cp -f ./build-web/AdminPanelComponents.js ./public/js/AdminPanelComponents.js && hotstaq generate --copy-to ./public/js/",
-    "build-web-debug": "hotstaq create --copy-libraries-to-location ./public/js/ app && hotstaq module build && webpack --mode=development && cp -f ./build-web/AdminPanelComponents.js ./public/js/AdminPanelComponents.js && hotstaq generate --copy-to ./public/js/",
+    "build-web": "npm run build && hotstaq create --copy-libraries-to-location ./public/js/ app && webpack --mode=production && cp -f ./build-web/AdminPanelComponents.js ./public/js/AdminPanelComponents.js && hotstaq module build && hotstaq generate --copy-to ./public/js/",
+    "build-web-debug": "npm run build && hotstaq create --copy-libraries-to-location ./public/js/ app && cp -f ./public/js/HotStaq.js ./public/js/HotStaq.min.js && webpack --mode=development && cp -f ./build-web/AdminPanelComponents.js ./public/js/AdminPanelComponents.js && hotstaq module build && hotstaq generate --copy-to ./public/js/",
     "build-doc": "hotstaq generate --generate-type openapi-3.0.0-yaml",
     "prepublishOnly": "npm run build && npm run build-web"
   },
@@ -17,16 +17,17 @@
   "author": "FreeLight, Inc",
   "license": "MIT",
   "dependencies": {
-    "@hotstaq/dataroute": "^0.2.0",
+    "@hotstaq/dataroute": "^0.2.2",
     "@popperjs/core": "^2.11.6",
     "bootstrap": "^5.2.3",
     "chart.js": "^2.9.4",
     "dotenv": "^10.0.0",
     "feather-icons": "^4.29.0",
-    "hotstaq": "^0.8.4",
+    "hotstaq": "^0.8.12",
     "jquery": "^3.6.3"
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.2.6",
     "@types/express": "^4.17.13",
     "@types/formidable": "^1.2.4",
     "@types/fs-extra": "^9.0.12",

package/src/AppAPI.ts

@@ -1,6 +1,6 @@
 import { HotAPI, HotServer, HotClient, HotRoute, 
 	HotRouteMethod, MySQLSchema, 
-	ServerAuthorizationFunction, HotStaq, HotServerType } from "hotstaq";
+	ServerAuthorizationFunction, HotStaq, HotServerType, DeveloperMode, HotDBMySQL } from "hotstaq";
 import { DataRoute } from "@hotstaq/dataroute";
 
 /**
@@ -28,6 +28,59 @@ export class AppAPI extends HotAPI
 				return (true);
 			};
 
-		this.addRoute (new DataRoute (this));
+		this.addRoute (new DataRoute (this, async (db: HotDBMySQL) =>
+			{
+				if (this.connection.processor.mode === DeveloperMode.Development)
+				{
+					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)
+					{
+						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 id: number = result.results["insertId"];
+						}
+					}
+				}
+			}));
 	}
 }

package/src/WebExport.ts

@@ -1,11 +1,3 @@
-import { AdminButton } from "./components/admin-button";
-import { AdminDashboard } from "./components/admin-dashboard";
-import { AdminEdit } from "./components/admin-edit";
-import { AdminTable } from "./components/admin-table";
-import { AdminTableField } from "./components/admin-table-field";
-import { AdminTableRow } from "./components/admin-table-row";
-import { AdminText } from "./components/admin-text";
-
 async function buildAssets (): Promise<any>
 {
 	return ({
@@ -19,23 +11,16 @@ async function buildAssets (): Promise<any>
 			js: ["./assets/js/*.*", "./build-web/AdminPanelComponents.js"],
 			componentLibrary: "AdminPanelComponentsWeb",
 			components: [
-				AdminButton,
-				AdminDashboard,
-				AdminEdit,
-				AdminTable,
-				AdminTableField,
-				AdminTableRow,
-				AdminText]
+				"AdminButton",
+				"AdminDashboard",
+				"AdminEdit",
+				"AdminTable",
+				"AdminTableField",
+				"AdminTableRow",
+				"AdminText"]
 		});
 }
 
 export {
-		buildAssets,
-		AdminButton,
-		AdminDashboard,
-		AdminEdit,
-		AdminTable,
-		AdminTableField,
-		AdminTableRow,
-		AdminText
-	};
+	buildAssets
+};

package/src/cli.ts

@@ -1,7 +1,7 @@
 import { HotCLI } from "hotstaq";
 
 let cli: HotCLI = new HotCLI ();
-cli.setup (process.argv).then (async () =>
+cli.setup ().then (async () =>
     {
-        await cli.start ();
+        await cli.start (process.argv);
     });

package/src/components/admin-button.ts

@@ -9,11 +9,11 @@ export class AdminButton extends HotComponent
 		this.tag = "admin-button";
 	}
 
-	async buttonClicked ()
+	async buttonClicked (): Promise<void>
 	{
 	}
 
-	async output ()
+	output (): string
 	{
 		return (`<button id = "${this.htmlElements[0].id}" onclick = "this.buttonClicked ();"></button>`);
 	}

package/src/components/admin-checkbox.ts

@@ -0,0 +1,52 @@
+// import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+
+// export class AdminCheckbox extends HotComponent
+// {
+// 	/**
+// 	 * The associated database field.
+// 	 */
+// 	field: string;
+
+// 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+// 	{
+// 		super (copy, api);
+
+// 		this.tag = "admin-checkbox";
+// 		this.field = "";
+// 	}
+
+// 	/**
+// 	 * Corrects the placement of the text elements for modals.
+// 	 */
+// 	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+// 	{
+// 		let placeHereArray = parentHtmlElement.querySelectorAll (`hot-place-here[type="modal"]`);
+
+// 		if (placeHereArray.length > 0)
+// 		{
+// 			let placeHere = placeHereArray[0];
+// 			parentHtmlElement.removeChild (htmlElement);
+// 			placeHere.appendChild (htmlElement);
+
+// 			// @ts-ignore
+// 			parentHtmlElement.hotComponent.fieldElements[this.field] = htmlElement.querySelector ("input");
+// 		}
+
+// 		return (null);
+// 	}
+
+// 	output (): string | HotComponentOutput[]
+// 	{
+// 		let value: string = "";
+
+// 		if (this.value != null)
+// 		{
+// 			if ((this.value === true) || (this.value === 1))
+// 				value = "checked";
+// 		}
+
+// 		return (`<div>
+// 			<label class="form-label">${this.inner}</label><input class="form-control" type = "checkbox" ${value} />
+// 		</div>`);
+// 	}
+// }

package/src/components/admin-dashboard.ts

@@ -23,15 +23,16 @@ export class AdminDashboard extends HotComponent
 	/**
 	 * Add this table field to the table
 	 */
-	// @ts-ignore
-	async onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): Promise<HTMLElement>
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
 	{
 		// Set the base API url to use for this dashboard.
 		if (this.base != "")
 			Hot.Data.baseUrl = this.base;
+
+		return (null);
 	}
 
-	async output (): Promise<string>
+	output (): string
 	{
 		return (`
 		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

package/src/components/admin-edit.ts

@@ -1,4 +1,8 @@
-import { HotStaq, Hot, HotAPI, HotComponent } from "hotstaq";
+import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+
+import bootstrap from "bootstrap";
+
+import { AdminTable } from "./admin-table";
 
 export class AdminEdit extends HotComponent
 {
@@ -26,6 +30,25 @@ export class AdminEdit extends HotComponent
 	 * The modal id.
 	 */
 	modalId: string;
+	/**
+	 * The bootstrap modal instance.
+	 */
+	modal: bootstrap.Modal;
+	/**
+	 * If set to true, this will close the modal when save is clicked.
+	 */
+	closeOnSave: boolean;
+	/**
+	 * The type of modal to open. Can be:
+	 * * add
+	 * * edit
+	 * * remove
+	 */
+	protected modalType: string;
+	/**
+	 * The selected fields.
+	 */
+	protected selectedFields: any[];
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -40,6 +63,130 @@ export class AdminEdit extends HotComponent
 		this.fieldElements = {};
 
 		this.modalId = "";
+		this.modal = null;
+		this.modalType = "add";
+		this.closeOnSave = true;
+		this.selectedFields = [];
+	}
+
+	/**
+	 * The event that can be called when the add button is clicked.
+	 * This is called before the add modal opens.
+	 */
+	onAddClicked: () => Promise<boolean> = null;
+
+	/**
+	 * Executes when the add button is clicked.
+	 */
+	async addClicked (): Promise<void>
+	{
+		if (this.onAddClicked != null)
+		{
+			let result = await this.onAddClicked ();
+
+			if (result === false)
+				return;
+		}
+
+		this.modalType = "add";
+
+		// Clear the values in each field.
+		for (let key in this.fieldElements)
+		{
+			let fieldElement = this.fieldElements[key];
+
+			fieldElement.value = "";
+		}
+
+		this.selectedFields = [];
+
+		bootstrap.Modal.getInstance (`#${this.modalId}`).show ();
+	}
+
+	/**
+	 * The event that can be called when the edit button is clicked.
+	 * This is called before the edit modal opens.
+	 */
+	onEditClicked: () => Promise<boolean> = null;
+
+	/**
+	 * Executes when the edit button is clicked.
+	 */
+	async editClicked (): Promise<void>
+	{
+		if (this.onEditClicked != null)
+		{
+			let result = await this.onEditClicked ();
+
+			if (result === false)
+				return;
+		}
+
+		this.modalType = "edit";
+		let attachedList = document.getElementById (this.attached_list);
+
+		// @ts-ignore
+		let hotComponent: AdminTable = attachedList.hotComponent;
+		let selectedField = hotComponent.getSelected ();
+
+		if (selectedField != null)
+		{
+			for (let key in this.fieldElements)
+			{
+				let fieldElement = this.fieldElements[key];
+
+				if (fieldElement != null)
+				{
+					// @ts-ignore
+					let value = selectedField[key];
+
+					fieldElement.value = value;
+				}
+			}
+
+			this.selectedFields = [selectedField];
+
+			bootstrap.Modal.getInstance (`#${this.modalId}`).show ();
+		}
+	}
+
+	/**
+	 * The event that can be called when the remove button is clicked.
+	 * This is called before the remove modal opens.
+	 */
+	onRemoveClicked: () => Promise<boolean> = null;
+
+	/**
+	 * Executes when the remove button is clicked.
+	 */
+	async removeClicked (): Promise<void>
+	{
+		if (this.onRemoveClicked != null)
+		{
+			let result = await this.onRemoveClicked ();
+
+			if (result === false)
+				return;
+		}
+
+		this.modalType = "remove";
+
+		// @ts-ignore
+		let hotComponent: AdminTable = attachedList.hotComponent;
+		let checkedRows = hotComponent.getCheckedRows ();
+
+		if (checkedRows != null)
+		{
+			const confirmed: boolean = confirm ("Are you sure you want to remove this item?");
+
+			if (confirmed === true)
+			{
+				await Hot.jsonRequest (`${Hot.Data.baseUrl}/v1/data/remove`, {
+						schema: this.schema,
+						whereFields: checkedRows
+					});
+			}
+		}
 	}
 
 	/**
@@ -52,26 +199,89 @@ export class AdminEdit extends HotComponent
 		for (let key in this.fieldElements)
 		{
 			let fieldElement = this.fieldElements[key];
-			let value = fieldElement.value;
 
-			values[key] = value;
+			if (fieldElement != null)
+			{
+				let value = fieldElement.value;
+				let fieldType: string = fieldElement.parentNode.hotComponent.field_type;
+
+				if (fieldType === "remove")
+					continue;
+
+				values[key] = value;
+			}
 		}
 
-		await Hot.jsonRequest (`${Hot.Data.baseUrl}/v1/data/add`, {
-				schema: this.schema,
-				fields: values
-			});
+		if (this.modalType === "add")
+		{
+			await Hot.jsonRequest (`${Hot.Data.baseUrl}/v1/data/add`, {
+					schema: this.schema,
+					fields: values
+				});
+		}
 
-		let attachedList = document.getElementById (this.attached_list);
+		if (this.modalType === "edit")
+		{
+			if (this.selectedFields.length === 0)
+			{
+				alert ("No item(s) selected!");
 
-		// @ts-ignore
-		await attachedList.hotComponent.refreshList ();
+				return;
+			}
+
+			let selectedField = this.selectedFields[0];
+			let whereFields: any = {};
+
+			for (let key in selectedField)
+			{
+				let fieldElement = this.fieldElements[key];
+				let value = selectedField[key];
+
+				if (fieldElement != null)
+				{
+					let fieldType: string = fieldElement.parentNode.hotComponent.field_type;
+
+					if (fieldType === "remove")
+						continue;
+				}
+
+				whereFields[key] = value;
+			}
 
+			await Hot.jsonRequest (`${Hot.Data.baseUrl}/v1/data/edit`, {
+					schema: this.schema,
+					whereFields: whereFields,
+					fields: values
+				});
+		}
+
+		let attachedList = document.getElementById (this.attached_list);
 		// @ts-ignore
-		$(`#${this.modalId}`).modal ("hide");
+		let table: AdminTable = attachedList.hotComponent;
+
+		await table.refreshList ();
+
+		if (this.closeOnSave === true)
+		{
+			bootstrap.Modal.getInstance (`#${this.modalId}`).hide ();
+		}
+	}
+
+	/**
+	 * Get the list of data from the server.
+	 */
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		this.modal = new bootstrap.Modal ($(`#${this.modalId}`)[0], {
+				"backdrop": true,
+				"keyboard": true,
+				"focus": true
+			});
+
+		return (null);
 	}
 
-	async output ()
+	output (): string | HotComponentOutput[]
 	{
 		if (this.name === "")
 			throw new Error (`You must specify a name for each admin-edit element!`);
@@ -99,12 +309,19 @@ export class AdminEdit extends HotComponent
 				</div>
 			</div>
 			<!-- ${this.title} Modal End -->`,
-			parentSelector: "body"
+			documentSelector: "body"
+		},
+		{
+			html: `<button id = "${this.modalId}-add-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.addClicked ();">Add</button>`,
+			documentSelector: `hot-place-here[name="buttons"]`
+		},
+		{
+			html: `<button id = "${this.modalId}-edit-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.editClicked ();">Edit</button>`,
+			documentSelector: `hot-place-here[name="buttons"]`
 		},
 		{
-			html: `<button id = "${this.modalId}-add-btn" type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#${this.modalId}">Add</button>`,
-			//`<button id = "${this.modalId}-add-btn" type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" onclick = "$('#${this.modalId}').modal ('show');">Add</button>`,
-			parentSelector: `hot-place-here[name="buttons"]`
+			html: `<button id = "${this.modalId}-edit-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.removeClicked ();">Remove</button>`,
+			documentSelector: `hot-place-here[name="buttons"]`
 		}]);
 	}
 }

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

@@ -1,4 +1,4 @@
-import { HotStaq, Hot, HotAPI, HotComponent } from "hotstaq";
+import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
 
 export class AdminTableField extends HotComponent
 {
@@ -18,21 +18,22 @@ export class AdminTableField extends HotComponent
 	/**
 	 * Add this table field to the table
 	 */
-	// @ts-ignore
-	async onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): Promise<HTMLElement>
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
 	{
-		// @ts-ignore
-		let hotComponent = parentHtmlElement.parentNode.parentNode.parentNode.hotComponent;
+		// @ts-ignore - looool. Add a better way to get the parent HotComponent.
+		let hotComponent = parentHtmlElement.parentNode.parentNode.parentNode.parentNode.hotComponent;
 
 		if (hotComponent != null)
 			hotComponent.addHeaderDataOnly (this, htmlElement);
+
+		return (null);
 	}
 
-	async output ()
+	output (): string | HotComponentOutput[]
 	{
 		return ([{
 			html: `<th>${this.inner}</th>`,
-			placeHereParent: "header"
+			documentSelector: "[hot-place-here='header']"
 		}]);
 	}
 }