@hotstaq/admin-panel 0.2.12 → 0.3.0

package/src/components/admin-button.ts

@@ -2,19 +2,55 @@ import { HotStaq, Hot, HotAPI, HotComponent } from "hotstaq";
 
 export class AdminButton extends HotComponent
 {
+	/**
+	 * Executes when the button is clicked.
+	 */
+	onclick: (event: MouseEvent) => Promise<any>;
+
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
 		super (copy, api);
 
 		this.tag = "admin-button";
+		this.onclick = null;
 	}
 
 	async buttonClicked (): Promise<void>
 	{
 	}
 
+	/**
+	 * Corrects the placement of the text elements for modals.
+	 */
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		let placeHereArray = parentHtmlElement.querySelectorAll (`hot-place-here[type="modal"]`);
+
+		// Search for the input box in the modal we attached to, then store the 
+		// found input box into the fieldElements array.
+		if (placeHereArray.length > 0)
+		{
+			let placeHere = placeHereArray[0];
+			parentHtmlElement.removeChild (htmlElement);
+			placeHere.appendChild (htmlElement);
+
+			// @ts-ignore
+			parentHtmlElement.hotComponent.fieldElements[this.field] = htmlElement;
+		}
+
+		if (this.onclick != null)
+		{
+			if (typeof (this.onclick) === "string")
+				this.onclick = (<(event: MouseEvent) => Promise<any>>new Function (this.onclick));
+
+			htmlElement.addEventListener ("click", this.onclick);
+		}
+
+		return (null);
+	}
+
 	output (): string
 	{
-		return (`<button id = "${this.htmlElements[0].id}" onclick = "this.buttonClicked ();"></button>`);
+		return (`<button id = "${this.htmlElements[0].id}" onclick = "this.buttonClicked ();">${this.inner}</button>`);
 	}
 }

package/src/components/admin-dropdown.ts

@@ -0,0 +1,115 @@
+import { HotStaq, Hot, HotAPI, HotComponent } from "hotstaq";
+
+export class AdminDropdown extends HotComponent
+{
+	/**
+	 * The search string placeholder to show.
+	 */
+	placeholder: string;
+	/**
+	 * Executes when the keyboard up button is triggered.
+	 */
+	onsearch: (searchText: string, event: KeyboardEvent) => Promise<{ url: string; value: string; text: string; }[]>;
+	/**
+	 * Executes when an search result has been selected.
+	 */
+	onselect: (url: string, value: string, text: string) => Promise<void>;
+
+	constructor (copy: HotComponent | HotStaq, api: HotAPI)
+	{
+		super (copy, api);
+
+		this.tag = "admin-dropdown";
+		this.placeholder = "Search";
+		this.onsearch = null;
+		this.onselect = null;
+	}
+
+	/**
+	 * Corrects the placement of the text elements for modals.
+	 */
+	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
+	{
+		let placeHereArray = parentHtmlElement.querySelectorAll (`hot-place-here[type="modal"]`);
+
+		// Search for the input box in the modal we attached to, then store the 
+		// found input box into the fieldElements array.
+		if (placeHereArray.length > 0)
+		{
+			let placeHere = placeHereArray[0];
+			parentHtmlElement.removeChild (htmlElement);
+			placeHere.appendChild (htmlElement);
+
+			// @ts-ignore
+			parentHtmlElement.hotComponent.fieldElements[this.field] = htmlElement;
+		}
+
+		if (this.onsearch != null)
+		{
+			if (typeof (this.onsearch) === "string")
+				this.onsearch = (<(searchText: string, event: KeyboardEvent) => Promise<{ url: string; value: string; text: string; }[]>>new Function (this.onsearch));
+
+			htmlElement.querySelector ("input").addEventListener ("keyup", 
+				async (event: KeyboardEvent) =>
+				{
+					// @ts-ignore
+					const searchText = event.currentTarget.value;
+
+					let results = await this.onsearch (searchText, event);
+
+					let searchResultsDiv = $(this.htmlElements[1]).find (".searchResults");
+
+					searchResultsDiv.empty ();
+
+					for (let iIdx = 0; iIdx < results.length; iIdx++)
+					{
+						const result = results[iIdx];
+						let url: string = result.url;
+						let value: string = result.value;
+						let text: string = result.text;
+
+						searchResultsDiv.append ($(`<li><a class=\"dropdown-item\" href=\"${url}\" data-value = "${value}" onclick = \"this.parentNode.parentNode.parentNode.parentNode.hotComponent.selected (${iIdx});\">${text}</a></li>`));
+					}
+				});
+		}
+
+		return (null);
+	}
+
+	/**
+	 * Executed when an item is selected.
+	 */
+	async selected (index: number): Promise<void>
+	{
+		if (this.onselect != null)
+		{
+			if (typeof (this.onselect) === "string")
+				this.onselect = (<(url: string, value: string, text: string) => Promise<void>>new Function (this.onselect));
+
+			const url = this.htmlElements[1].querySelectorAll ("a")[index].getAttribute ("href");
+			const value = this.htmlElements[1].querySelectorAll ("a")[index].getAttribute ("data-value");
+			const text = this.htmlElements[1].querySelectorAll ("a")[index].innerHTML;
+
+			await this.onselect (url, value, text);
+		}
+	}
+
+	output (): string
+	{
+		return (
+	`<div class="dropdown">
+		<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+		  ${this.inner}
+		</button>
+		<ul class="dropdown-menu">
+			<li>
+				<div class = "input-group">
+					<input type = "text" class = "form-control" placeholder = "${this.placeholder}" value = "" />
+				</div>
+			</li>
+			<div class = "searchResults">
+			</div>
+		</ul>
+	</div>`);
+	}
+}

package/src/components/admin-edit.ts

@@ -22,14 +22,14 @@ export class AdminEdit extends HotComponent
 	 * The attached schema.
 	 */
 	schema: string;
-	/**
-	 * The field elements in the edit modal.
-	 */
-	fieldElements: { [name: string]: any; };
 	/**
 	 * The modal id.
 	 */
 	modalId: string;
+	/**
+	 * The hot-class attribute to pass to add to the modal's classes.
+	 */
+	class: string;
 	/**
 	 * The bootstrap modal instance.
 	 */
@@ -49,6 +49,18 @@ export class AdminEdit extends HotComponent
 	 * The selected fields.
 	 */
 	protected selectedFields: any[];
+	/**
+	 * What to execute when the save button is clicked.
+	 */
+	onsave: (modalType: string, values: any, selectedFields: any[]) => Promise<void>;
+	/**
+	 * What to execute when the edit button is clicked.
+	 */
+	onedit: (modalType: string, selectedFields: any[]) => Promise<boolean>;
+	/**
+	 * What to execute when the delete button is clicked.
+	 */
+	ondelete: (selectedField: any) => Promise<void>;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -60,13 +72,38 @@ export class AdminEdit extends HotComponent
 		this.attached_list = "";
 		this.schema = "";
 
-		this.fieldElements = {};
-
 		this.modalId = "";
+		this.class = "";
 		this.modal = null;
 		this.modalType = "add";
 		this.closeOnSave = true;
 		this.selectedFields = [];
+		this.onsave = null;
+		this.onedit = null;
+		this.ondelete = null;
+	}
+
+	/**
+	 * Process the hot fields.
+	 */
+	async processHotFields (onField: (htmlElement: Element, field: { name: string; type: string; }) => Promise<void>): Promise<void>
+	{
+		const elms = this.htmlElements[1].querySelectorAll ("[hot-field]");
+
+		for (let iIdx = 0; iIdx < elms.length; iIdx++)
+		{
+			const elm = elms[iIdx];
+			const field = $(elm).attr ("hot-field");
+			let fieldType = $(elm).attr ("hot-field-type");
+
+			if ((fieldType == null) || (fieldType === ""))
+				fieldType = "text";
+
+			// @ts-ignore
+			elm.fieldType = fieldType;
+
+			await onField (elm, { name: field, type: fieldType });
+		}
 	}
 
 	/**
@@ -90,13 +127,10 @@ export class AdminEdit extends HotComponent
 
 		this.modalType = "add";
 
-		// Clear the values in each field.
-		for (let key in this.fieldElements)
-		{
-			let fieldElement = this.fieldElements[key];
-
-			fieldElement.value = "";
-		}
+		await this.processHotFields (async (htmlElement: Element, field: { name: string; type: string; }) =>
+			{
+				$(htmlElement).val ("");
+			});
 
 		this.selectedFields = [];
 
@@ -131,21 +165,31 @@ export class AdminEdit extends HotComponent
 
 		if (selectedField != null)
 		{
-			for (let key in this.fieldElements)
-			{
-				let fieldElement = this.fieldElements[key];
-
-				if (fieldElement != null)
+			await this.processHotFields (async (htmlElement: Element, field: { name: string; type: string; }) =>
 				{
 					// @ts-ignore
-					let value = selectedField[key];
+					const value = selectedField[field.name];
 
-					fieldElement.value = value;
-				}
-			}
+					if (value != null)
+						$(htmlElement).val (value);
+				});
 
 			this.selectedFields = [selectedField];
 
+			if (this.onedit != null)
+			{
+				if (typeof (this.onedit) === "string")
+					this.onedit = (<(modalType: string, selectedFields: any[]) => Promise<boolean>>new Function (this.onedit));
+
+				let result = await this.onedit (this.modalType, this.selectedFields);
+
+				if (result != null)
+				{
+					if (result === false)
+						return;
+				}
+			}
+
 			bootstrap.Modal.getInstance (`#${this.modalId}`).show ();
 		}
 	}
@@ -213,12 +257,22 @@ export class AdminEdit extends HotComponent
 						}
 					}
 
-					let removeUrl: string = Hot.Data.AdminPanel.removeUrl;
+					if (this.ondelete != null)
+					{
+						if (typeof (this.ondelete) === "string")
+							this.ondelete = (<(selectedField: any) => Promise<void>>new Function (this.ondelete));
+
+						await this.ondelete (whereField);
+					}
+					else
+					{
+						let removeUrl: string = Hot.Data.AdminPanel.removeUrl;
 
-					await Hot.jsonRequest (removeUrl, {
-							schema: this.schema,
-							whereFields: whereField
-						});
+						await Hot.jsonRequest (removeUrl, {
+								schema: this.schema,
+								whereFields: whereField
+							});
+					}
 				}
 		
 				await hotComponent.refreshList ();
@@ -233,67 +287,60 @@ export class AdminEdit extends HotComponent
 	{
 		let values: any = {};
 
-		for (let key in this.fieldElements)
-		{
-			let fieldElement = this.fieldElements[key];
-
-			if (fieldElement != null)
+		await this.processHotFields (async (htmlElement: Element, field: { name: string; type: string; }) =>
 			{
-				let value = fieldElement.value;
-				let fieldType: string = fieldElement.parentNode.hotComponent.field_type;
+				if (field.type === "remove")
+					return;
 
-				if (fieldType === "remove")
-					continue;
-
-				values[key] = value;
-			}
-		}
+				values[field.name] = $(htmlElement).val ();
+			});
 
-		if (this.modalType === "add")
+		if (this.onsave != null)
 		{
-			let addUrl: string = Hot.Data.AdminPanel.addUrl;
+			if (typeof (this.onsave) === "string")
+				this.onsave = (<(modalType: string, values: any, selectedFields: any[]) => Promise<void>>new Function (this.onsave));
 
-			await Hot.jsonRequest (addUrl, {
-					schema: this.schema,
-					fields: values
-				});
+			await this.onsave (this.modalType, values, this.selectedFields);
 		}
-
-		if (this.modalType === "edit")
+		else
 		{
-			if (this.selectedFields.length === 0)
+			if (this.modalType === "add")
 			{
-				alert ("No item(s) selected!");
+				let addUrl: string = Hot.Data.AdminPanel.addUrl;
 
-				return;
+				await Hot.jsonRequest (addUrl, {
+						schema: this.schema,
+						fields: values
+					});
 			}
 
-			let selectedField = this.selectedFields[0];
-			let whereFields: any = {};
-
-			for (let key in selectedField)
+			if (this.modalType === "edit")
 			{
-				let fieldElement = this.fieldElements[key];
-				let value = selectedField[key];
-
-				if (fieldElement != null)
+				if (this.selectedFields.length === 0)
 				{
-					let fieldType: string = fieldElement.parentNode.hotComponent.field_type;
+					alert ("No item(s) selected!");
 
-					if (fieldType === "remove")
-						continue;
+					return;
 				}
 
-				whereFields[key] = value;
-			}
+				let whereFields: any = {};
 
-			let editUrl: string = Hot.Data.AdminPanel.editUrl;
+				await this.processHotFields (async (htmlElement: Element, field: { name: string; type: string; }) =>
+					{
+						if (field.type === "remove")
+							return;
 
-			await Hot.jsonRequest (editUrl, {
-					schema: this.schema,
-					whereFields: whereFields,
-					fields: values
-				});
+						whereFields[field.name] = $(htmlElement).val ();
+					});
+
+				let editUrl: string = Hot.Data.AdminPanel.editUrl;
+
+				await Hot.jsonRequest (editUrl, {
+						schema: this.schema,
+						whereFields: whereFields,
+						fields: values
+					});
+			}
 		}
 
 		let attachedList = document.getElementById (this.attached_list);
@@ -332,7 +379,7 @@ export class AdminEdit extends HotComponent
 		return ([{
 			html: `
 			<!-- ${this.title} Modal Start -->
-			<div class="modal fade" id="${this.modalId}" tabindex="-1" aria-labelledby="${this.name}ModalLabel" aria-hidden="true">
+			<div class="modal fade ${this.class}" id="${this.modalId}" tabindex="-1" aria-labelledby="${this.name}ModalLabel" aria-hidden="true">
 				<div class="modal-dialog">
 					<div class="modal-content">
 					<div class="modal-header">

package/src/components/admin-table.ts

@@ -55,9 +55,9 @@ export class AdminTable extends HotComponent
 	 */
 	protected selected: number;
 	/**
-	 * The list data to use for this table.
+	 * The list function to execute to retrieve data.
 	 */
-	listdata: string;
+	onlist: () => Promise<any[]>;;
 	/**
 	 * The list url to use for this table. Hot.Data.AdminPanel.listUrl will not be used in this case.
 	 */
@@ -87,7 +87,7 @@ export class AdminTable extends HotComponent
 			};
 		this.rowElements = [];
 		//this.selectedRows = [];
-		this.listdata = "";
+		this.onlist = null;
 		this.listurl = "";
 		this.checkbox = true;
 		this.onselectedrow = null;
@@ -286,6 +286,8 @@ export class AdminTable extends HotComponent
 
 		if (this.checkbox === true)
 			rowStr += `<td><input type = "checkbox" /></td>`;
+		else
+			rowStr += `<td></td>`;
 
 		for (let iIdx = 0; iIdx < this.headers.indicies.length; iIdx++)
 		{
@@ -370,6 +372,8 @@ export class AdminTable extends HotComponent
 	 */
 	async clearRows ()
 	{
+		this.rowElements = [];
+
 		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
 
 		tbody.innerHTML = "";
@@ -382,12 +386,12 @@ export class AdminTable extends HotComponent
 	{
 		let list = null;
 
-		if (this.listdata !== "")
+		if (this.onlist != null)
 		{
-			if (typeof (this.listdata) === "string")
-				this.listdata = JSON.parse (this.listdata);
+			if (typeof (this.onlist) === "string")
+				this.onlist = (<() => Promise<any[]>>new Function (this.onlist));
 
-			list = this.listdata;
+			list = await this.onlist ();
 		}
 		else
 		{
@@ -426,10 +430,7 @@ export class AdminTable extends HotComponent
 
 	output (): string | HotComponentOutput[]
 	{
-		let emptyCheckboxHeader: string = "";
-
-		if (this.checkbox === true)
-			emptyCheckboxHeader = "<th></th>";
+		let emptyCheckboxHeader: string = "<th></th>";
 
 		return (`
 		<div id = "${this.htmlElements[0].id}">

package/src/components/admin-text.ts

@@ -2,31 +2,23 @@ import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq"
 
 export class AdminText extends HotComponent
 {
-	/**
-	 * The associated database field.
-	 */
-	field: string;
-	/**
-	 * The type of field. Can be:
-	 * * text
-	 * * remove
-	 * 
-	 * Default: text
-	 */
-	field_type: string;
 	/**
 	 * If set to 1, this will not output the field.
 	 */
 	no_output: string;
+	/**
+	 * The classes to set for the input.
+	 * @default "form-control"
+	 */
+	class: string;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
 		super (copy, api);
 
 		this.tag = "admin-text";
-		this.field = "";
-		this.field_type = "text";
 		this.no_output = "0";
+		this.class = "form-control"
 	}
 
 	/**
@@ -59,10 +51,17 @@ export class AdminText extends HotComponent
 			value = this.value;
 
 		if (this.no_output === "1")
-			return (`<div><input class="form-control" type = "hidden" value = "${value}" /></div>`);
+			return (`<div><input class="${this.class}" type = "hidden" value = "${value}" /></div>`);
+
+		const field = this.htmlElements[0].getAttribute ("hot-field");
+		let field_type = this.htmlElements[0].getAttribute ("hot-field-type");
+
+		if (field_type == null)
+			field_type = "text";
 
 		return (`<div>
-			<label class="form-label">${this.inner}</label><input class="form-control" type = "text" value = "${value}" />
+			<label class="form-label">${this.inner}</label>
+			<input class="${this.class}" type = "text" hot-field = "${field}" hot-field-type = "${field_type}" value = "${value}" />
 		</div>`);
 	}
 }

package/src/index.ts

@@ -1,4 +1,5 @@
 import { AdminButton } from "./components/admin-button";
+import { AdminDropdown } from "./components/admin-dropdown";
 import { AdminDashboard } from "./components/admin-dashboard";
 import { AdminEdit } from "./components/admin-edit";
 import { AdminTable } from "./components/admin-table";
@@ -8,6 +9,7 @@ import { AdminText } from "./components/admin-text";
 
 export {
 		AdminButton,
+		AdminDropdown,
 		AdminDashboard,
 		AdminEdit,
 		AdminTable,