@hotstaq/admin-panel 0.2.6 → 0.2.8

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,165 @@ 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";
+
+		let attachedList = document.getElementById (this.attached_list);
+		// @ts-ignore
+		let hotComponent: AdminTable = attachedList.hotComponent;
+		let checkedRows = hotComponent.getCheckedRows ();
+		let whereFields: any[] = [];
+
+		if (checkedRows.length > 0)
+		{
+			for (let i = 0; i < checkedRows.length; i++)
+			{
+				let checkedRow = checkedRows[i];
+				whereFields.push (checkedRow);
+			}
+		}
+
+		let selectedField = hotComponent.getSelected ();
+
+		if (selectedField != null)
+			whereFields = [selectedField];
+
+		if (whereFields.length > 0)
+		{
+			const confirmed: boolean = confirm ("Are you sure you want to remove this item?");
+
+			if (confirmed === true)
+			{
+				for (let i = 0; i < whereFields.length; i++)
+				{
+					let whereField = whereFields[i];
+
+					// Remove any fields that are marked as remove.
+					for (let key in whereField)
+					{
+						let fieldType = hotComponent.getFieldType (key);
+
+						if (fieldType != null)
+						{
+							if (fieldType === "remove")
+								delete whereField[key];
+						}
+					}
+
+					await Hot.jsonRequest (`${Hot.Data.baseUrl}/v1/data/remove`, {
+							schema: this.schema,
+							whereFields: whereField
+						});
+				}
+		
+				await hotComponent.refreshList ();
+			}
+		}
 	}
 
 	/**
@@ -52,23 +234,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 +347,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

@@ -1,4 +1,5 @@
 import { HotStaq, Hot, HotAPI, HotComponent, HotComponentOutput } from "hotstaq";
+import { AdminTable } from "./admin-table";
 
 export class AdminTableField extends HotComponent
 {
@@ -6,6 +7,18 @@ export class AdminTableField extends HotComponent
 	 * The table field.
 	 */
 	field: number;
+	/**
+	 * 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;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -13,6 +26,8 @@ export class AdminTableField extends HotComponent
 
 		this.tag = "admin-table-field";
 		this.field = 0;
+		this.field_type = "text";
+		this.no_output = "0";
 	}
 
 	/**
@@ -20,8 +35,19 @@ export class AdminTableField extends HotComponent
 	 */
 	onPostPlace (parentHtmlElement: HTMLElement, htmlElement: HTMLElement): HTMLElement
 	{
+		let hotComponent: AdminTable = null;
+
 		// @ts-ignore
-		let hotComponent = parentHtmlElement.parentNode.parentNode.parentNode.hotComponent;
+		if (parentHtmlElement.parentNode.parentNode.hotComponent != null)
+		{
+			// @ts-ignore
+			hotComponent = parentHtmlElement.parentNode.parentNode.hotComponent;
+		}
+		else
+		{
+			// @ts-ignore - looool. Add a better way to get the parent HotComponent.
+			hotComponent = parentHtmlElement.parentNode.parentNode.parentNode.parentNode.hotComponent;
+		}
 
 		if (hotComponent != null)
 			hotComponent.addHeaderDataOnly (this, htmlElement);
@@ -31,6 +57,14 @@ export class AdminTableField extends HotComponent
 
 	output (): string | HotComponentOutput[]
 	{
+		if (this.no_output === "1")
+		{
+			return ([{
+				html: `<div></div>`,
+				placeHereParent: "afterTable"
+			}]);
+		}
+
 		return ([{
 			html: `<th>${this.inner}</th>`,
 			documentSelector: "[hot-place-here='header']"

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];

package/src/components/admin-table.ts

@@ -37,7 +37,17 @@ export class AdminTable extends HotComponent
 	 *   "html": "<tr><td>John Smith</td><td>john.smith@test.com</td></tr>"
 	 * }
 	 */
-	rowElements: { fields: any[]; html: string; }[] = [];
+	rowElements: { fields: any[]; element: HTMLElement; }[] = [];
+	/**
+	 * The selected row indicies. Each index maps to the rowElements array.
+	 * 
+	 * @fixme Add support for this in the future.
+	 */
+	//protected selectedRows: number[];
+	/**
+	 * The most recently selected row index. The index maps to the rowElements array.
+	 */
+	protected selected: number;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -49,6 +59,8 @@ export class AdminTable extends HotComponent
 		this.headerElements = {};
 		this.headerIndicies = [];
 		this.rowElements = [];
+		//this.selectedRows = [];
+		this.selected = -1;
 	}
 
 	/**
@@ -58,6 +70,9 @@ export class AdminTable extends HotComponent
 	{
 		let header = this.htmlElements[0].getElementsByTagName ("thead")[0];
 
+		if (this.headerIndicies.length < 1)
+			this.headerIndicies.push (null);
+
 		// @ts-ignore
 		this.headerIndicies.push (tableFieldElement.hotComponent.field);
 		header.appendChild (tableFieldElement);
@@ -68,10 +83,158 @@ export class AdminTable extends HotComponent
 	 */
 	addHeaderDataOnly (tableField: AdminTableField, htmlElement: HTMLElement)
 	{
+		if (this.headerIndicies.length < 1)
+			this.headerIndicies.push (null);
+
 		this.headerIndicies.push (tableField.field);
 		this.headerElements[tableField.field] = htmlElement;
 	}
 
+	/**
+	 * Get the field type of a field.
+	 */
+	getFieldType (fieldName: string): string
+	{
+		if (this.headerElements[fieldName] != null)
+		{
+			let hotComponent: AdminTableField = this.headerElements[fieldName].hotComponent;
+
+			if (hotComponent != null)
+				return (hotComponent.field_type);
+		}
+
+		return (null);
+	}
+
+	/**
+	 * Executes this event when a row is selected. If this returns false, the row will not be selected.
+	 */
+	onSelectedRow: (rowIndex: number) => Promise<boolean> = null;
+
+	/**
+	 * Executes when a row is selected.
+	 */
+	async selectRow (htmlElement: HTMLElement, rowIndex: number): Promise<void>
+	{
+		if (this.onSelectedRow != null)
+		{
+			let result = await this.onSelectedRow (rowIndex);
+
+			if (result === false)
+				return;
+		}
+
+		// In the future, we will support multiple rows being selected. For now 
+		// this will ensure that only one row is selected at a time.
+		{
+			let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
+			let rows = tbody.getElementsByTagName ("tr");
+
+			for (let iIdx = 0; iIdx < rows.length; iIdx++)
+			{
+				let row: HTMLTableRowElement = rows[iIdx];
+
+				if (row.classList.contains ("table-primary") === true)
+					row.classList.remove ("table-primary");
+			}
+
+			htmlElement.classList.add ("table-primary");
+		}
+
+		this.selected = rowIndex;
+
+		/*this.selectedRows = [];
+		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
+
+		// Find all the checkboxes in tbody.
+		let checkboxes = tbody.getElementsByTagName ("input");
+
+		for (let iIdx = 0; iIdx < checkboxes.length; iIdx++)
+		{
+			let checkbox: HTMLInputElement = checkboxes[iIdx];
+
+			if (checkbox.checked != null)
+			{
+				if (checkbox.checked === true)
+				{
+					// Get the data-index attribute.
+					let dataIndexStr: string = checkbox.parentElement.parentElement.getAttribute ("data-index");
+					let dataIndex: number =  parseInt (dataIndexStr);
+
+					this.selectedRows.push (dataIndex);
+				}
+			}
+		}*/
+	}
+
+	/**
+	 * Get the selected data.
+	 */
+	getSelected (): any[]
+	{
+		let index: number = this.selected;
+
+		if (index < 0)
+			return (null);
+
+		return (this.rowElements[index].fields);
+	}
+
+	/**
+	 * Get the selected data.
+	 */
+	/*getSelectedRows (): any[]
+	{
+		let rows: any[] = [];
+
+		for (let iIdx = 0; iIdx < this.selectedRows.length; iIdx++)
+		{
+			let index: number = this.selectedRows[iIdx];
+			rows.push (this.rowElements[index].fields);
+		}
+
+		return (rows);
+	}*/
+
+	/**
+	 * Get the data for each row that has been checked.
+	 */
+	getCheckedRows (): any[]
+	{
+		let rows: any[] = [];
+		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
+
+		// Find all the checkboxes in tbody.
+		let checkboxes = tbody.getElementsByTagName ("input");
+
+		for (let iIdx = 0; iIdx < checkboxes.length; iIdx++)
+		{
+			let checkbox: HTMLInputElement = checkboxes[iIdx];
+
+			if (checkbox.checked != null)
+			{
+				if (checkbox.checked === true)
+				{
+					// Get the data-index attribute.
+					let dataIndexStr: string = checkbox.parentElement.parentElement.getAttribute ("data-index");
+					let dataIndex: number =  parseInt (dataIndexStr);
+
+					rows.push (this.rowElements[dataIndex].fields);
+				}
+			}
+		}
+
+		return (rows);
+	}
+
+	/**
+	 * Get a row's data.
+	 */
+	getRow (index: number): any[]
+	{
+		return (this.rowElements[index].fields);
+	}
+
 	/**
 	 * Add a row to the table.
 	 * 
@@ -80,20 +243,38 @@ export class AdminTable extends HotComponent
 	addRow (fields: { [name: string]: any }[])
 	{
 		let tbody = this.htmlElements[1].getElementsByTagName ("tbody")[0];
-		let rowStr = "<tr>";
+		let index: number = this.rowElements.length;
+		let rowStr = `<tr onclick = "this.parentNode.parentNode.parentNode.parentNode.hotComponent.selectRow (this, ${index});">`;
+
+		rowStr += `<td><input type = "checkbox" /></td>`;
 
 		for (let iIdx = 0; iIdx < this.headerIndicies.length; iIdx++)
 		{
+			// @ts-ignore - @fixme I messed this up, will fix.
 			let key = this.headerIndicies[iIdx];
 			let value = fields[key];
 
 			if (this.headerElements[key] != null)
-				rowStr += `<td>${value}</td>`;
+			{
+				// @ts-ignore - @fixme I messed this up, will fix.
+				let fieldType: string = this.getFieldType (key);
+
+				if (fieldType == null)
+					fieldType = "text";
+
+				if (fieldType !== "remove")
+					rowStr += `<td data-index = "${index}">${value}</td>`;
+			}
 		}
 
 		rowStr += "</tr>";
 
-		HotStaq.addHtml (tbody, rowStr);
+		let newObj = HotStaq.addHtml (tbody, rowStr);
+
+		this.rowElements.push ({
+				fields: fields,
+				element: (<HTMLElement>newObj)
+			});
 	}
 
 	/**
@@ -145,11 +326,15 @@ export class AdminTable extends HotComponent
 			<h2>${this.title}</h2>
 			<div class="table-responsive">
 			<table id = "${this.htmlElements[0].id}Table" class="table table-striped table-sm">
-				<thead hot-place-here = "header">
+				<thead>
+					<tr hot-place-here = "header">
+						<th></th>
+					</tr>
 				</thead>
 				<tbody hot-place-here = "results">
 				</tbody>
 			</table>
+			<hot-place-here name = "afterTable"></hot-place-here>
 			</div>
 		</div>`);
 	}

package/src/components/admin-text.ts

@@ -6,6 +6,18 @@ 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;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -13,6 +25,8 @@ export class AdminText extends HotComponent
 
 		this.tag = "admin-text";
 		this.field = "";
+		this.field_type = "text";
+		this.no_output = "0";
 	}
 
 	/**
@@ -22,6 +36,8 @@ export class AdminText extends HotComponent
 	{
 		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];
@@ -42,6 +58,9 @@ export class AdminText extends HotComponent
 		if (this.value != null)
 			value = this.value;
 
+		if (this.no_output === "1")
+			return (`<div><input class="form-control" type = "hidden" value = "${value}" /></div>`);
+
 		return (`<div>
 			<label class="form-label">${this.inner}</label><input class="form-control" type = "text" value = "${value}" />
 		</div>`);

package/src/index.ts

@@ -0,0 +1,17 @@
+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";
+
+export {
+		AdminButton,
+		AdminDashboard,
+		AdminEdit,
+		AdminTable,
+		AdminTableField,
+		AdminTableRow,
+		AdminText
+	};