@hotstaq/admin-panel 0.2.6 → 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.6",
-  "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 --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.1",
+    "@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.11",
+    "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/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/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-edit.ts

@@ -1,5 +1,9 @@
 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,23 +199,86 @@ 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);
 	}
 
 	output (): string | HotComponentOutput[]
@@ -102,8 +312,15 @@ export class AdminEdit extends HotComponent
 			documentSelector: "body"
 		},
 		{
-			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>`,
+			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}-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

@@ -20,8 +20,8 @@ export class AdminTableField extends HotComponent
 	 */
 	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);

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

@@ -32,6 +32,9 @@ export class AdminTableRow extends HotComponent
 	{
 		let rowHtml = "";
 
+		if (this.fields.length > 0)
+			rowHtml += `<td><input type = "checkbox" /></td>`;
+
 		for (let iIdx = 0; iIdx < this.fields.length; iIdx++)
 		{
 			let fieldObj = this.fields[iIdx];