@hotstaq/admin-panel 0.3.1 → 0.3.4

package/src/components/admin-edit.ts

@@ -26,10 +26,34 @@ export class AdminEdit extends HotComponent
 	 * The modal id.
 	 */
 	modalId: string;
+	/**
+	 * The text for the add button.
+	 */
+	add_text: string;
+	/**
+	 * The location to put the add button.
+	 */
+	add_place_here: string;
+	/**
+	 * The text for the edit button.
+	 */
+	edit_text: string;
+	/**
+	 * The location to put the edit button.
+	 */
+	edit_place_here: string;
+	/**
+	 * The text for the remove button.
+	 */
+	remove_text: string;
+	/**
+	 * The location to put the remove button.
+	 */
+	remove_place_here: string;
 	/**
 	 * The hot-class attribute to pass to add to the modal's classes.
 	 */
-	class: string;
+	css_class: string;
 	/**
 	 * The bootstrap modal instance.
 	 */
@@ -50,9 +74,10 @@ export class AdminEdit extends HotComponent
 	 */
 	protected selectedFields: any[];
 	/**
-	 * What to execute when the save button is clicked.
+	 * What to execute when the save button is clicked. If this returns true, the modal will close.
+	 * If this returns false, the modal will not close.
 	 */
-	onsave: (modalType: string, values: any, selectedFields: any[]) => Promise<void>;
+	onsave: (modalType: string, values: any, selectedFields: any[]) => Promise<boolean>;
 	/**
 	 * What to execute when the edit button is clicked.
 	 */
@@ -77,7 +102,13 @@ export class AdminEdit extends HotComponent
 		this.schema = "";
 
 		this.modalId = "";
-		this.class = "";
+		this.add_text = "Add";
+		this.add_place_here = "dashboardHeader";
+		this.edit_text = "Edit";
+		this.edit_place_here = "dashboardHeader";
+		this.remove_text = "Remove";
+		this.remove_place_here = "dashboardHeader";
+		this.css_class = "";
 		this.modal = null;
 		this.modalType = "add";
 		this.closeOnSave = true;
@@ -90,7 +121,8 @@ export class AdminEdit extends HotComponent
 	/**
 	 * Process the hot fields.
 	 */
-	async processHotFields (onField: (htmlElement: Element, field: { name: string; type: string; }) => Promise<void>): Promise<void>
+	async processHotFields (onField: (htmlElement: Element, 
+		field: { name: string; type: string; input: string; }) => Promise<void>): Promise<void>
 	{
 		const elms = this.htmlElements[1].querySelectorAll ("[hot-field]");
 
@@ -99,6 +131,7 @@ export class AdminEdit extends HotComponent
 			const elm = elms[iIdx];
 			const field = $(elm).attr ("hot-field");
 			let fieldType = $(elm).attr ("hot-field-type");
+			let fieldInput = $(elm).attr ("hot-field-input");
 
 			if ((fieldType == null) || (fieldType === ""))
 				fieldType = "text";
@@ -106,7 +139,7 @@ export class AdminEdit extends HotComponent
 			// @ts-ignore
 			elm.fieldType = fieldType;
 
-			await onField (elm, { name: field, type: fieldType });
+			await onField (elm, { name: field, type: fieldType, input: fieldInput });
 		}
 	}
 
@@ -176,42 +209,57 @@ export class AdminEdit extends HotComponent
 		}
 
 		this.modalType = "edit";
-		let attachedList = document.getElementById (this.attached_list);
 
-		// @ts-ignore
-		let hotComponent: AdminTable = attachedList.hotComponent;
-		let selectedField = hotComponent.getSelected ();
+		this.selectedFields = [];
 
-		if (selectedField != null)
+		if (this.attached_list !== "")
 		{
-			await this.processHotFields (
-				async (htmlElement: Element, field: { name: string; type: string; }) =>
-				{
-					// @ts-ignore
-					const value = selectedField[field.name];
-
-					if (value != null)
-						$(htmlElement).val (value);
-				});
+			let attachedList = document.getElementById (this.attached_list);
 
-			this.selectedFields = [selectedField];
+			// @ts-ignore
+			let hotComponent: AdminTable = attachedList.hotComponent;
+			let selectedField = hotComponent.getSelected ();
 
-			if (this.onedit != null)
+			if (selectedField != null)
 			{
-				if (typeof (this.onedit) === "string")
-					this.onedit = (<(modalType: string, selectedFields: any[]) => Promise<boolean>>new Function (this.onedit));
+				await this.processHotFields (
+					async (htmlElement: Element, field: { name: string; type: string; input: string; }) =>
+					{
+						// @ts-ignore
+						let value = selectedField[field.name];
+
+						if (field.input != null)
+						{
+							if (field.input !== "")
+							{
+								let func = new Function (field.input);
+								value = await func.call (this, value);
+							}
+						}
 
-				let result = await this.onedit (this.modalType, this.selectedFields);
+						if (value != null)
+							$(htmlElement).val (value);
+					});
 
-				if (result != null)
-				{
-					if (result === false)
-						return;
-				}
+				this.selectedFields = [selectedField];
 			}
+		}
 
-			bootstrap.Modal.getInstance (`#${this.modalId}`).show ();
+		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 ();
 	}
 
 	/**
@@ -235,36 +283,41 @@ export class AdminEdit extends HotComponent
 
 		this.modalType = "remove";
 
-		let attachedList = document.getElementById (this.attached_list);
-		// @ts-ignore
-		let hotComponent: AdminTable = attachedList.hotComponent;
-		let checkedRows = hotComponent.getCheckedRows ();
 		let whereFields: any[] = [];
+		let hotComponent: AdminTable = null;
 
-		if (checkedRows.length > 0)
+		if (this.attached_list !== "")
 		{
-			for (let i = 0; i < checkedRows.length; i++)
+			let attachedList = document.getElementById (this.attached_list);
+			// @ts-ignore
+			hotComponent = attachedList.hotComponent;
+			let checkedRows = hotComponent.getCheckedRows ();
+
+			if (checkedRows.length > 0)
 			{
-				let checkedRow = checkedRows[i];
-				whereFields.push (checkedRow);
+				for (let i = 0; i < checkedRows.length; i++)
+				{
+					let checkedRow = checkedRows[i];
+					whereFields.push (checkedRow);
+				}
 			}
-		}
 
-		let selectedField = hotComponent.getSelected ();
+			let selectedField = hotComponent.getSelected ();
+
+			if (selectedField != null)
+				whereFields = [selectedField];
+		}
 
-		if (selectedField != null)
-			whereFields = [selectedField];
+		const confirmed: boolean = confirm ("Are you sure you want to remove this item?");
 
-		if (whereFields.length > 0)
+		if (confirmed === true)
 		{
-			const confirmed: boolean = confirm ("Are you sure you want to remove this item?");
-
-			if (confirmed === true)
+			for (let i = 0; i < whereFields.length; i++)
 			{
-				for (let i = 0; i < whereFields.length; i++)
-				{
-					let whereField = whereFields[i];
+				let whereField = whereFields[i];
 
+				if (hotComponent != null)
+				{
 					// Remove any fields that are marked as remove.
 					for (let key in whereField)
 					{
@@ -276,27 +329,48 @@ export class AdminEdit extends HotComponent
 								delete whereField[key];
 						}
 					}
+				}
 
-					if (this.ondelete != null)
-					{
-						if (typeof (this.ondelete) === "string")
-							this.ondelete = (<(selectedField: any) => Promise<void>>new Function (this.ondelete));
+				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 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 ();
 			}
+
+			if (whereFields.length === 0)
+			{
+				if (this.ondelete != null)
+				{
+					if (typeof (this.ondelete) === "string")
+						this.ondelete = (<(selectedField: any) => Promise<void>>new Function (this.ondelete));
+
+					await this.ondelete (null);
+				}
+				else
+				{
+					let removeUrl: string = Hot.Data.AdminPanel.removeUrl;
+
+					await Hot.jsonRequest (removeUrl, {
+							schema: this.schema,
+							whereFields: null
+						});
+				}
+			}
+	
+			if (hotComponent != null)
+				await hotComponent.refreshList ();
 		}
 	}
 
@@ -312,15 +386,33 @@ export class AdminEdit extends HotComponent
 				if (field.type === "remove")
 					return;
 
-				values[field.name] = $(htmlElement).val ();
+				let value = $(htmlElement).val ();
+
+				if ($(htmlElement).attr ("hot-value") != null)
+					value = $(htmlElement).attr ("hot-value");
+
+				if (field.type === "array")
+				{
+					if (values[field.name] == null)
+						values[field.name] = [];
+
+					values[field.name].push (value);
+
+					return;
+				}
+
+				values[field.name] = value;
 			});
 
 		if (this.onsave != null)
 		{
 			if (typeof (this.onsave) === "string")
-				this.onsave = (<(modalType: string, values: any, selectedFields: any[]) => Promise<void>>new Function (this.onsave));
+				this.onsave = (<(modalType: string, values: any, selectedFields: any[]) => Promise<boolean>>new Function (this.onsave));
+
+			let result = await this.onsave (this.modalType, values, this.selectedFields);
 
-			await this.onsave (this.modalType, values, this.selectedFields);
+			if (result === false)
+				return;
 		}
 		else
 		{
@@ -349,8 +441,23 @@ export class AdminEdit extends HotComponent
 					{
 						if (field.type === "remove")
 							return;
-
-						whereFields[field.name] = $(htmlElement).val ();
+		
+						let value = $(htmlElement).val ();
+		
+						if ($(htmlElement).attr ("hot-value") != null)
+							value = $(htmlElement).attr ("hot-value");
+		
+						if (field.type === "array")
+						{
+							if (whereFields[field.name] == null)
+								whereFields[field.name] = [];
+		
+							whereFields[field.name].push (value);
+		
+							return;
+						}
+		
+						whereFields[field.name] = value;
 					});
 
 				let editUrl: string = Hot.Data.AdminPanel.editUrl;
@@ -363,11 +470,14 @@ export class AdminEdit extends HotComponent
 			}
 		}
 
-		let attachedList = document.getElementById (this.attached_list);
-		// @ts-ignore
-		let table: AdminTable = attachedList.hotComponent;
+		if (this.attached_list !== "")
+		{
+			let attachedList = document.getElementById (this.attached_list);
+			// @ts-ignore
+			let table: AdminTable = attachedList.hotComponent;
 
-		await table.refreshList ();
+			await table.refreshList ();
+		}
 
 		if (this.closeOnSave === true)
 		{
@@ -396,10 +506,10 @@ export class AdminEdit extends HotComponent
 
 		this.modalId = `${this.name}Modal`;
 
-		return ([{
+		let outputObj = [{
 			html: `
 			<!-- ${this.title} Modal Start -->
-			<div class="modal fade ${this.class}" id="${this.modalId}" tabindex="-1" aria-labelledby="${this.name}ModalLabel" aria-hidden="true">
+			<div class="modal fade ${this.css_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">
@@ -418,18 +528,32 @@ export class AdminEdit extends HotComponent
 			</div>
 			<!-- ${this.title} Modal End -->`,
 			documentSelector: "body"
-		},
+		}];
+
+		if (this.add_place_here !== "")
 		{
-			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="dashboardHeader"]`
-		},
+			outputObj.push ({
+				html: `<button id = "${this.modalId}-add-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.addClicked ();">${this.add_text}</button>`,
+				documentSelector: `hot-place-here[name="${this.add_place_here}"]`
+			});
+		}
+
+		if (this.edit_place_here !== "")
 		{
-			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="dashboardHeader"]`
-		},
+			outputObj.push ({
+				html: `<button id = "${this.modalId}-edit-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.editClicked ();">${this.edit_text}</button>`,
+				documentSelector: `hot-place-here[name="${this.edit_place_here}"]`
+			});
+		}
+
+		if (this.remove_place_here !== "")
 		{
-			html: `<button id = "${this.modalId}-remove-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.removeClicked ();">Remove</button>`,
-			documentSelector: `hot-place-here[name="dashboardHeader"]`
-		}]);
+			outputObj.push ({
+				html: `<button id = "${this.modalId}-remove-btn" type="button" class="btn btn-sm btn-outline-secondary" onclick = "this.removeClicked ();">${this.remove_text}</button>`,
+				documentSelector: `hot-place-here[name="${this.remove_place_here}"]`
+			});
+		}
+
+		return (outputObj);
 	}
 }

package/src/components/admin-table.ts

@@ -277,6 +277,12 @@ export class AdminTable extends HotComponent
 	 */
 	addRow (fields: { [name: string]: any }[])
 	{
+		if (fields == null)
+			return;
+
+		if (fields.length == 0)
+			return;
+
 		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});">`;
@@ -382,10 +388,8 @@ export class AdminTable extends HotComponent
 	/**
 	 * Refresh the list.
 	 */
-	async refreshList ()
+	async refreshList (list: any[] = null)
 	{
-		let list = null;
-
 		if (this.onlist != null)
 		{
 			if (typeof (this.onlist) === "string")
@@ -395,23 +399,29 @@ export class AdminTable extends HotComponent
 		}
 		else
 		{
-			let listUrl: string = Hot.Data.AdminPanel.listUrl;
+			let listUrl: string = "";
 
 			if (this.listurl !== "")
 				listUrl = this.listurl;
 
-			list = await Hot.jsonRequest (listUrl, {
-					schema: this.schema
-				});
+			if (listUrl !== "")
+			{
+				list = await Hot.jsonRequest (listUrl, {
+						schema: this.schema
+					});
+			}
 		}
 
 		this.clearRows ();
 
-		for (let iIdx = 0; iIdx < list.length; iIdx++)
+		if (list != null)
 		{
-			let fields = list[iIdx];
+			for (let iIdx = 0; iIdx < list.length; iIdx++)
+			{
+				let fields = list[iIdx];
 
-			this.addRow (fields);
+				this.addRow (fields);
+			}
 		}
 	}
 

package/src/components/admin-text.ts

@@ -10,7 +10,7 @@ export class AdminText extends HotComponent
 	 * The classes to set for the input.
 	 * @default "form-control"
 	 */
-	class: string;
+	css_class: string;
 
 	constructor (copy: HotComponent | HotStaq, api: HotAPI)
 	{
@@ -18,7 +18,7 @@ export class AdminText extends HotComponent
 
 		this.tag = "admin-text";
 		this.no_output = "0";
-		this.class = "form-control"
+		this.css_class = "form-control"
 	}
 
 	/**
@@ -46,7 +46,7 @@ export class AdminText extends HotComponent
 			value = this.value;
 
 		if (this.no_output === "1")
-			return (`<div><input class="${this.class}" type = "hidden" value = "${value}" /></div>`);
+			return (`<div><input class="${this.css_class}" type = "hidden" value = "${value}" /></div>`);
 
 		const field = this.htmlElements[0].getAttribute ("hot-field");
 		let field_type = this.htmlElements[0].getAttribute ("hot-field-type");
@@ -56,7 +56,7 @@ export class AdminText extends HotComponent
 
 		return (`<div>
 			<label class="form-label">${this.inner}</label>
-			<input class="${this.class}" type = "text" hot-field = "${field}" hot-field-type = "${field_type}" value = "${value}" />
+			<input class="${this.css_class}" type = "text" hot-field = "${field}" hot-field-type = "${field_type}" value = "${value}" />
 		</div>`);
 	}
 }