Base form constructor

engine/backend/modules/module_users.go

@@ -76,7 +76,16 @@ func (this *Module) Module_users_content() string {
 		breadcrumb := this.breadcrumb([]dataBreadcrumb{
 			{"Add new user", ""},
 		})
-		return breadcrumb
+		data_form := this.data_form([]dataFormField{
+			{kind: dfkHidden, name: "action", value: "users_add"},
+			{kind: dfkHidden, name: "id", value: "0"},
+			{kind: dfkText, caption: "User first name", name: "first_name"},
+			{kind: dfkText, caption: "User last name", name: "last_name"},
+			{kind: dfkEmail, caption: "User email", name: "email"},
+			{kind: dfkPassword, caption: "User password", name: "password"},
+			{kind: dfkSubmit, value: "Add", target: "add-edit-button"},
+		})
+		return breadcrumb + data_form
 	} else if this.smod == "modify" && this.imod != 0 {
 		breadcrumb := this.breadcrumb([]dataBreadcrumb{
 			{"Edit user", ""},
@@ -87,5 +96,10 @@ func (this *Module) Module_users_content() string {
 }
 
 func (this *Module) Module_users_sidebar() string {
+	if this.smod == "modify" && this.imod == 0 {
+		return `<button class="btn btn-primary" id="add-edit-button">Add</button>`
+	} else if this.smod == "modify" && this.imod != 0 {
+		return `<button class="btn btn-primary" id="add-edit-button">Save</button>`
+	}
 	return ""
 }

engine/backend/modules/modules.go

@@ -32,6 +32,33 @@ type dataBreadcrumb struct {
 	link string
 }
 
+const (
+	dfkHidden = iota
+	dfkText
+	dfkEmail
+	dfkPassword
+	dfkSubmit
+)
+
+type dataFormFieldOption struct {
+	caption string
+	value   string
+}
+
+type dataFormFieldHook func(field *dataFormField) string
+
+type dataFormField struct {
+	caption     string
+	kind        int
+	name        string
+	value       string
+	placeholder string
+	hint        string
+	target      string
+	options     []dataFormFieldOption
+	hook        dataFormFieldHook
+}
+
 type ModuleItem struct {
 	Alias   string
 	Display bool
@@ -258,6 +285,68 @@ func (this *Module) data_table(table string, order_by string, order_way string,
 	return result
 }
 
+func (this *Module) data_form(data []dataFormField) string {
+	result := `<form class="data-form" action="/cp/" method="post" autocomplete="off">`
+	result += `<div class="hidden">`
+	for _, field := range data {
+		if field.kind == dfkHidden {
+			if field.hook != nil {
+				result += field.hook(&field)
+			} else {
+				result += `<input type="hidden" name="` + field.name + `" value="` + field.value + `">`
+			}
+		}
+	}
+	result += `</div>`
+	for _, field := range data {
+		if field.kind != dfkHidden && field.kind != dfkSubmit {
+			if field.hook != nil {
+				result += field.hook(&field)
+			} else {
+				result += `<div class="form-group">`
+				result += `<div class="row">`
+				result += `<div class="col-3">`
+				result += `<label for="lbl_` + field.name + `">` + field.caption + `</label>`
+				result += `</div>`
+				result += `<div class="col-9">`
+				result += `<div>`
+				if field.kind == dfkText {
+					result += `<input class="form-control" type="text" id="lbl_` + field.name + `" name="` + field.name + `" value="` + field.value + `" placeholder="` + field.placeholder + `" autocomplete="off">`
+				} else if field.kind == dfkEmail {
+					result += `<input class="form-control" type="email" id="lbl_` + field.name + `" name="` + field.name + `" value="` + field.value + `" placeholder="` + field.placeholder + `" autocomplete="off">`
+				} else if field.kind == dfkPassword {
+					result += `<input class="form-control" type="password" id="lbl_` + field.name + `" name="` + field.name + `" value="` + field.value + `" placeholder="` + field.placeholder + `" autocomplete="off">`
+				}
+				result += `</div>`
+				if field.hint != "" {
+					result += `<div><small>` + field.hint + `</small></div>`
+				}
+				result += `</div>`
+				result += `</div>`
+				result += `</div>`
+			}
+		}
+	}
+	for _, field := range data {
+		if field.kind == dfkSubmit {
+			if field.hook != nil {
+				result += field.hook(&field)
+			} else {
+				result += `<div class="row hidden">`
+				result += `<div class="col-3">`
+				result += `&nbsp;`
+				result += `</div>`
+				result += `<div class="col-9">`
+				result += `<button type="submit" class="btn btn-primary" data-target="` + field.target + `">` + field.value + `</button>`
+				result += `</div>`
+				result += `</div>`
+			}
+		}
+	}
+	result += `</form>`
+	return result
+}
+
 func New(wrapper *wrapper.Wrapper, db *sql.DB, user *utils.MySql_user, url_args *[]string) *Module {
 	mmod := "index"
 	smod := "default"

engine/wrapper/resources/scripts/assets.cp.scripts.js

@@ -26,7 +26,7 @@ function AjaxDone(data) {
 	} catch(e) {
 		if(e instanceof SyntaxError) {
 			console.log(data);
-			ModalShowMsg('JavaScript Eval Error', e.message)
+			console.log('JavaScript Eval Error', e.message)
 		}
 	}
 }
@@ -65,6 +65,11 @@ $(document).ready(function() {
 			var button = $(this).find('button[type=submit]');
 			button.addClass('progress-bar-striped').addClass('progress-bar-animated');
 
+			// Another button
+			if(button.attr('data-target') != '') {
+				$('#' + button.attr('data-target')).addClass('progress-bar-striped').addClass('progress-bar-animated');
+			}
+
 			// Clear form messages
 			form.find('.sys-messages').html('');
 
@@ -81,11 +86,23 @@ $(document).ready(function() {
 				setTimeout(function() {
 					form.removeClass('loading').removeClass('alert-here');
 					button.removeClass('progress-bar-striped').removeClass('progress-bar-animated');
+					// Another button
+					if(button.attr('data-target') != '') {
+						$('#' + button.attr('data-target')).removeClass('progress-bar-striped').removeClass('progress-bar-animated');
+					}
 				}, 100);
 			});
 
 			e.preventDefault();
 		});
+
+		// Bind to another button
+		var button = $(this).find('button[type=submit]');
+		if(button.attr('data-target') != '') {
+			$('#' + button.attr('data-target')).click(function() {
+				button.click();
+			});
+		}
 	});
 
 	// Remove alert from modal on close

engine/wrapper/resources/styles/assets.cp.styles.css

@@ -260,4 +260,23 @@ body.cp .wrap .sidebar.sidebar-left ul.nav li.nav-item svg.sicon {
 .data-table.table_users .col_action {
 	width: 100px;
 	text-align: right;
+}
+
+/* Admin data form */
+.data-form .hidden {
+	display: none;
+}
+
+.data-form label {
+	font-weight: bold;
+	margin-top: .45rem;
+	margin-bottom: .45rem;
+}
+
+.data-form small {
+	color: #aeb8bc;
+}
+
+.data-form > div:nth-last-child(2) {
+	margin-bottom: 0px;
 }