import { Resources } from '../../resources/resources';
import { checkBrowserCompatibility } from '../../view/helpers';
import { Events, ApiMethods, parseJson, callApiMethod } from './components';
function arrayContains(array, value) {
for (var i = 0; i < array.length; i++) {
if (array[i] == value) {
return true;
}
}
return false;
}
/**
* Represents a component that provides both UI and programmatic interaction with PMA.core forms and data.
* @param {PMA.UI.Components.Context} context
* @param {Object} options - Reserved for future use
* @tutorial 06-forms
*/
export class Forms {
constructor(context, options) {
if (!checkBrowserCompatibility()) {
return;
}
this.listeners = {};
this.listeners[Events.FormSaved] = [];
this.listeners[Events.FormEditClick] = [];
this.context = context;
}
/**
* Renders a form field in read-only form
* @param {Object} field - A PMA.core form field structure
* @param {Object} record - A PMA.core form field value structure
* @param {string} cssClass - Extra CSS class to add to the container element
* @returns {string} The HTML output
*/
renderReadOnlyField(field, record, cssClass) {
var strVal = (record && record.FormValue ? record.FormValue : '').replace(/"/g, """);
if (strVal.length !== 0 && record && field.FieldType != Forms.FieldType.CheckBox && field.FormList && field.FormList.FormListValues && !record.IsOtherValue && !record.IsBelowDetectableLimit) {
strVal = field.FormList.FormListValues[strVal].Value;
}
if (record && record.IsBelowDetectableLimit) {
strVal = Resources.translate("Below detectable limit");
}
var html = "";
switch (field.FieldType) {
case Forms.FieldType.Paragraph:
html += '<p class="' + cssClass + '">' + strVal + '</p>';
break;
case Forms.FieldType.CheckBox:
if (field.FormList && field.FormList.FormListValues && record && !record.IsOtherValue && strVal.length !== 0 && !record.IsBelowDetectableLimit) {
var chkValues = strVal.split("|");
html += '<ul class="' + cssClass + '">';
for (let k = 0; k < chkValues.length; k++) {
html += "<li>" + field.FormList.FormListValues[chkValues[k]].Value + "</li>";
}
html += '</ul>';
}
else {
html += '<div class="' + cssClass + '">' + strVal + '</div>';
}
break;
case Forms.FieldType.Percentage:
html += '<div class="' + cssClass + '">' + strVal + '%</div>';
break;
case Forms.FieldType.HyperLink:
html += '<a class="link-field" title="' + field.Tooltip + '" href="' + field.Url + '" ' + (field.NewWindow === true ? ' target="_blank" ' : '') + '>' + field.Label + '</a>';
break;
case Forms.FieldType.Label:
break;
default:
html += '<div class="' + cssClass + '">' + strVal + '</div>';
break;
}
return html;
}
/**
* Passes a form definition and optionally form data back to the caller
* @callback Forms~getFormCallback
* @param {Object} form - The requested form definition
* @param {Object} [data] - The submitted form data
*/
/**
* A callback to filter the data retrieved from the server
* @callback Forms~filterDataCallback
* @param {Object} [data] - The retrieved form data
* @returns {Object} The filtered data
*/
/**
* Loads a form definition and optionally the available submitted data
* @param {String} serverUrl
* @param {Number} formId
* @param {Object} [dataOptions] - Used when it is desired to load submitted data as well
* @param {string} dataOptions.path - The path to load form submitted data for
* @param {boolean} [dataOptions.currentUserOnly=false] - True to load only the current user's data. The user is determined by the server's URL and the authentication providers available in the context.
* @param {string | Forms~filterDataCallback} [dataOptions.dataFilter=""] - Optional parameter to filter data results with. If the parameter is a string it is considered a username and data from this user are kept. This is useful when a particular user's data is desired, but not the currently logged on one's. If a callback function is provided it should return the filtered data
* @param {Forms~getFormCallback} [success]
* @param {function} [failure]
*/
getForm(serverUrl, formId, dataOptions, success, failure) {
var _this = this;
_this.context.getSession(serverUrl, function (sessionId) {
callApiMethod({
serverUrl: serverUrl,
method: ApiMethods.GetForm,
data: { sessionID: sessionId, id: formId },
success: function (http) {
var response = parseJson(http.responseText);
if (response) {
if (dataOptions !== null && dataOptions !== undefined && typeof dataOptions === "object") {
loadFormData.call(_this, serverUrl, sessionId, response, dataOptions.path, dataOptions.currentUserOnly === true, dataOptions.dataFilter,
function (data) {
response.FormData = data;
if (typeof success === "function") {
success.call(_this, response, data);
}
}, failure);
}
else if (typeof success === "function") {
success.call(_this, response, null);
}
}
else if (typeof failure === "function") {
failure();
}
},
failure: failure
});
}, failure);
}
/**
* Passes form definitions back to the caller
* @callback Forms~getFormsCallback
* @param {Object[]} forms - Form definition objects fetched from PMA.core
*/
/**
* Loads all the available form definitions from a PMA.core server
* @param {String} serverUrl - The PMA.core server URL
* @param {Forms~getFormsCallback} success - Called upon successful completion of the data request.
* @param {function} [failure]
*/
getForms(serverUrl, success, failure) {
var _this = this;
_this.context.getSession(serverUrl, function (sessionId) {
callApiMethod({
serverUrl: serverUrl,
method: ApiMethods.GetForms,
data: { sessionID: sessionId },
success: function (http) {
var response = parseJson(http.responseText);
if (response && typeof success === "function") {
success(response);
}
else if (typeof failure === "function") {
failure(response);
}
},
failure: failure
});
}, failure);
}
/**
* Called while rendering each field. This function gives the opportunity to the caller to make modifications per element, or return false to prevent rendering of specific fields.
* @callback Forms~renderFieldCallback
* @param {Object} form - The definition of the form that is being rendered
* @param {Object} field - The definition of the field that is being rendered
* @param {Object} field.fieldGroupClass - The CSS class to assign to the fields group element
* @param {Object} field.fieldContainerClass - The CSS class to assign to the field's container
* @param {Object} [record] - The data that will be displayed by the field. Can be null if no data is available or loaded.
* @returns {boolean} True to render this field, otherwise false
*/
/**
* Renders a form and optionally loads the available user submitted data
* @param {string} serverUrl
* @param {Number} formId
* @param {string|HTMLElement} element - The element that hosts the form. It can be either a valid CSS selector or an HTMLElement instance.
* @param {Object} [dataOptions] - Supplied only when it is desired to load form submitted data as well
* @param {string} dataOptions.path - The path to load form submitted data for
* @param {boolean} [dataOptions.currentUserOnly=false] - True to load only the current user's data. The user is determined by the server's URL and the authentication providers available in the context.
* @param {string | Forms~filterDataCallback} [dataOptions.dataFilter=""] - Optional parameter to filter data results with. If the parameter is a string it is considered a username and data from this user are kept. This is useful when a particular user's data is desired, but not the currently logged on one's. If a callback function is provided it should return the filtered data
* @param {string} [dataOptions.btnContainerClass] - CSS class to assign the to element that contains the save and reset buttons
* @param {string} [dataOptions.btnResetClass] - CSS class to assign the reset button
* @param {string} [dataOptions.btnSaveClass] - CSS class to assign the save button
* @param {Forms~renderFieldCallback} [dataOptions.fieldCb] - Called when rendering each field.
* @param {string} [dataOptions.fieldContainerClass] - CSS class to assign the to element that contains field controls
* @param {string} [dataOptions.fieldValidationClass] - CSS class to assign to error labels that are displayed upon validating the form
* @param {string} [dataOptions.formClass] - CSS class to assign to the rendered form element
* @param {string} [dataOptions.inputClass] - CSS class to assign the to input elements
* @param {boolean} [dataOptions.readOnly=false] - True to render the form in read only mode
* @param {boolean} [dataOptions.editButton=false] - True to render an edit button next to the form's name. Only applicable in read only mode
* @param {string} [dataOptions.validationClass] - CSS class to assign to generic validation messages (e.g. "The form could not be saved")
* @param {function} [success]
* @param {function} [failure]
*/
displayForm(serverUrl, formId, element, dataOptions, success, failure) {
var _this = this;
this.getForm(serverUrl, formId, dataOptions,
function (form, data) {
_this.serverUrl = serverUrl;
if (form) {
_this.form = form;
_this.form.enabled = true;
if (form.ReadOnly === true) {
dataOptions.readOnly = true;
}
}
_this.path = dataOptions.path;
_this.originalData = data;
renderForm.call(_this, element, form, dataOptions, data, success, failure);
},
failure);
}
/**
* Renders a form and optionally loads the available user submitted data without loading from the server
* @param {string|HTMLElement} element - The element that hosts the form. It can be either a valid CSS selector or an HTMLElement instance.
* @param {Object} form - The form definition object
* @param {Object} [dataOptions] - Supplied only when it is desired to load form submitted data as well
* @param {string} dataOptions.path - The path to load form submitted data for
* @param {boolean} [dataOptions.currentUserOnly=false] - True to load only the current user's data. The user is determined by the server's URL and the authentication providers available in the context.
* @param {string | Forms~filterDataCallback} [dataOptions.dataFilter=""] - Optional parameter to filter data results with. If the parameter is a string it is considered a username and data from this user are kept. This is useful when a particular user's data is desired, but not the currently logged on one's. If a callback function is provided it should return the filtered data
* @param {string} [dataOptions.btnContainerClass] - CSS class to assign the to element that contains the save and reset buttons
* @param {string} [dataOptions.btnResetClass] - CSS class to assign the reset button
* @param {string} [dataOptions.btnSaveClass] - CSS class to assign the save button
* @param {Forms~renderFieldCallback} [dataOptions.fieldCb] - Called when rendering each field.
* @param {string} [dataOptions.fieldContainerClass] - CSS class to assign the to element that contains field controls
* @param {string} [dataOptions.fieldValidationClass] - CSS class to assign to error labels that are displayed upon validating the form
* @param {string} [dataOptions.formClass] - CSS class to assign to the rendered form element
* @param {string} [dataOptions.inputClass] - CSS class to assign the to input elements
* @param {boolean} [dataOptions.readOnly=false] - True to render the form in read only mode
* @param {boolean} [dataOptions.editButton=false] - True to render an edit button next to the form's name. Only applicable in read only mode
* @param {string} [dataOptions.validationClass] - CSS class to assign to generic validation messages (e.g. "The form could not be saved")
* @param {Object} [data] - The data to load to the form displayed
* @param {function} [success]
* @param {function} [failure]
*/
renderForm(element, form, dataOptions, data, success, failure) {
if (form) {
this.form = form;
this.form.enabled = true;
if (form.ReadOnly === true) {
dataOptions.readOnly = true;
}
}
this.path = dataOptions.path;
this.originalData = data;
renderForm.call(this, element, form, dataOptions, data, success, failure);
}
/**
* Saves the currently rendered form to PMA.core
* @param {function} [success]
* @param {function} [failure]
* @fires PMA.UI.Components.Events#FormSaved
*/
saveForm(success, failure) {
var _this = this;
_this.setEnabled(false);
$("#" + _this.form.ClientID + " button[type='submit']").html(Resources.translate("Saving..."));
submitForm.call(this, function (args) {
$("#" + _this.form.ClientID + " button[type='submit']").html(Resources.translate("Save"));
_this.setEnabled(true);
_this.fireEvent(Events.FormSaved, args);
if (typeof success === "function") {
success(args);
}
},
function (args) {
$("#" + _this.form.ClientID + " button[type='submit']").html(Resources.translate("Save"));
_this.setEnabled(true);
_this.fireEvent(Events.FormSaved, args);
if (typeof failure === "function") {
failure(args);
}
});
}
/**
* Enables or disables the currently rendered form
* @param {boolean} enabled
*/
setEnabled(enabled) {
if (this.form) {
this.form.enabled = !!enabled;
$("#" + this.form.ClientID + " > fieldset").prop("disabled", !this.form.enabled);
}
else {
console.error("No form");
}
}
/**
* Gets the state of the currently rendered form
* @return {boolean}
*/
getEnabled() {
if (this.form) {
return this.form.enabled;
}
else {
console.error("No form");
}
}
/**
* Attaches an event listener
* @param {PMA.UI.Components.Events} eventName - The name of the event to listen to
* @param {function} callback - The function to call when the event occurs
*/
listen(eventName, callback) {
if (!this.listeners.hasOwnProperty(eventName)) {
console.error(eventName + " is not a valid event");
}
this.listeners[eventName].push(callback);
}
// fires an event
fireEvent(eventName, eventArgs) {
if (!this.listeners.hasOwnProperty(eventName)) {
console.error(eventName + " does not exist");
return;
}
for (var i = 0, max = this.listeners[eventName].length; i < max; i++) {
this.listeners[eventName][i].call(this, eventArgs);
}
}
/**
* Checks if the currently loaded form has any changes that have not been saved yet.
* @return {boolean}
*/
hasChanges() {
if (!this.form) {
return false;
}
return this.hasChangesProperty;
}
/**
* Resets the currently loaded form to it's initial state
*/
reset() {
if (!this.form) {
return false;
}
$("#" + this.form.ClientID + " [type='reset']").click();
}
}
/**
* Available form field types
* @readonly
* @enum {number}
*/
Forms.FieldType = {
/**
* Simple text (input)
*/
Text: 0,
/**
* Simple paragraph (label)
*/
Paragraph: 1,
/**
* Dropdown
*/
ListBox: 2,
/**
* Checkbox list
*/
CheckBox: 3,
/**
* Radio button list
*/
RadioButton: 4,
/**
* Integer input
*/
Integer: 5,
/**
* Decimal input
*/
Double: 6,
/**
* Datetime input
*/
DateTime: 7,
/**
* Percentage input
*/
Percentage: 8,
/**
* Section separator - label
*/
Label: 9,
/**
* HyperLink
*/
HyperLink: 10
};
function getCheckboxesValue(el) {
var value = "";
el.each(function () {
if (value.length > 0) {
value += "|";
}
value += this.value;
});
return value;
}
function createPostData(sessionId) {
var values = [];
var form = this.form;
for (var i = 0; i < this.form.FormFields.length; i++) {
var field = form.FormFields[i];
var fieldId = getFieldId(this.form, i);
var value = null,
below = false,
other = false,
el, otherElVal;
switch (field.FieldType) {
case Forms.FieldType.Text:
case Forms.FieldType.Paragraph:
case Forms.FieldType.DateTime:
el = $("#" + fieldId);
if (el.val() !== "") {
value = el.val();
}
break;
case Forms.FieldType.Integer:
case Forms.FieldType.Double:
case Forms.FieldType.Percentage:
el = $("#" + fieldId);
if (el.val() !== "") {
value = el.val();
}
else if (field.AllowBelowDetectableLimit === true && $("#" + fieldId + "_below:checked").length === 1) {
below = true;
}
break;
case Forms.FieldType.ListBox:
el = $("#" + fieldId);
if (el.val() !== "") {
value = el.val();
}
else if (field.AllowOther && $("#" + fieldId + "_other").val() !== "") {
value = $("#" + fieldId + "_other").val();
other = true;
}
break;
case Forms.FieldType.CheckBox:
otherElVal = $("#" + fieldId + "_other").val();
el = $("input[name='" + fieldId + "']:checked");
if (el.length !== 0) {
value = getCheckboxesValue(el);
}
else if (field.AllowOther === true && otherElVal !== "") {
value = otherElVal;
other = true;
}
break;
case Forms.FieldType.RadioButton:
otherElVal = $("#" + fieldId + "_other").val();
el = $("input[name='" + fieldId + "']:not([id$='_other_indicator']):checked");
if (el.length !== 0) {
value = el.val();
}
else if (field.AllowOther === true && otherElVal !== "") {
value = otherElVal;
other = true;
}
break;
}
values.push({
FieldId: field.FieldID,
FormValue: value,
IsBelowDetectableLimit: below,
IsOtherValue: other
});
}
return {
sessionID: sessionId,
pathOrUid: this.path,
formId: this.form.FormID,
fieldValues: values
};
}
function submitForm(success, failure) {
if (!validateForm.call(this)) {
if (typeof failure === "function") {
failure({ success: false, message: Resources.translate("Form validation error") });
}
return;
}
var _this = this;
_this.context.getSession(_this.serverUrl, function (sessionId) {
var postData = createPostData.call(_this, sessionId);
callApiMethod({
serverUrl: _this.serverUrl,
method: ApiMethods.SaveFormData,
httpMethod: "POST",
contentType: 'application/json',
data: postData,
success: function (http) {
_this.hasChangesProperty = false;
if (typeof success === "function") {
success({ success: true, message: '' });
}
},
failure: function (http) {
var errorMsg = Resources.translate("Save failed. Check the form values and try again.");
if (http && http.responseText) {
var errorObj = JSON.parse(http.responseText);
if (errorObj && errorObj.Message) {
errorMsg = errorObj.Message;
}
}
$("#" + _this.form.ClientID + "_validation").html(errorMsg);
if (typeof failure === "function") {
failure({ success: false, message: errorMsg });
}
}
});
}, function (args) {
if (typeof failure === "function") {
failure({ success: false, message: ((args && args.Message) ? args.Message : Resources.translate("Authentication error")) });
}
});
}
function clearValidationErrors() {
if (!this.form) {
return;
}
$("#" + this.form.ClientID + " [id$='_validation']").html("");
$("#" + this.form.ClientID + " *").removeClass("invalid");
}
function validateForm() {
if (!this.form) {
return false;
}
clearValidationErrors.call(this);
var form = this.form;
$("#" + form.ClientID + "_validation").html("");
var el, otherEl, isValid;
for (var i = 0; i < this.form.FormFields.length; i++) {
var field = form.FormFields[i];
var fieldId = getFieldId(this.form, i);
var validationSpan = $("#" + fieldId + "_validation");
validationSpan.html("");
switch (field.FieldType) {
case Forms.FieldType.Text:
case Forms.FieldType.Paragraph:
case Forms.FieldType.DateTime:
el = $("#" + fieldId);
if (field.Required === true && el.val() === "") {
el.addClass("invalid");
el.focus();
validationSpan.html(Resources.translate("Please enter a value"));
return false;
}
el.removeClass("invalid");
break;
case Forms.FieldType.Integer:
case Forms.FieldType.Double:
case Forms.FieldType.Percentage:
el = $("#" + fieldId);
if (field.Required === true && el.val() === "") {
isValid = false;
if (field.AllowBelowDetectableLimit === true && $("#" + fieldId + "_below:checked").length === 1) {
isValid = true;
}
if (!isValid) {
el.addClass("invalid");
el.focus();
validationSpan.html(Resources.translate("Please enter a value"));
return false;
}
}
var numVal = el.val();
if (isNaN(numVal)) {
el.addClass("invalid");
el.focus();
validationSpan.html(Resources.translate("Please enter a valid value"));
return false;
}
if (typeof numVal !== "number") {
numVal = parseFloat(numVal);
}
if (typeof field.LowerBound === "number" && numVal < field.LowerBound) {
el.addClass("invalid");
el.focus();
validationSpan.html(Resources.translate("Please enter a value larger than or equal to {LowerBound}", { LowerBound: field.LowerBound }));
return false;
}
if (typeof field.UpperBound === "number" && numVal > field.UpperBound) {
el.addClass("invalid");
el.focus();
validationSpan.html(Resources.translate("Please enter a value less than or equal to {UpperBound}", { UpperBound: field.UpperBound }));
return false;
}
el.removeClass("invalid");
break;
case Forms.FieldType.ListBox:
el = $("#" + fieldId);
if (field.Required === true && el.val() === "") {
isValid = false;
if (field.AllowOther && $("#" + fieldId + "_other").val() !== "") {
isValid = true;
}
if (!isValid) {
el.addClass("invalid");
el.focus();
validationSpan.html(Resources.translate("Please select a value"));
return false;
}
}
el.removeClass("invalid");
break;
case Forms.FieldType.CheckBox:
case Forms.FieldType.RadioButton:
// if the field is required and not option is select apart from the "other value" indicator
if (field.Required === true && $("input[name='" + fieldId + "']:not([id$='_other_indicator']):checked").length === 0) {
if (field.AllowOther !== true || $("#" + fieldId + "_other").val() === "") {
$("input[name='" + fieldId + "']").first().focus();
validationSpan.html(Resources.translate("Please select a value"));
return false;
}
}
break;
case Forms.FieldType.Label:
case Forms.FieldType.HyperLink:
break;
default:
console.error("Unknown field type " + field.FieldType);
return false;
}
}
return true;
}
function bindClearFieldValueWhenBelowCheckedEvent(field, fieldId) {
$("#" + fieldId + "_below").change(function () {
if (this.checked) {
$("#" + fieldId).val("");
}
});
}
function bindUncheckBelowEvent(field, fieldId) {
$("#" + fieldId).change(function () {
if ($(this).val() !== "") {
$("#" + fieldId + "_below").prop("checked", false);
}
});
}
function bindClearFieldValueWhenOtherChangedEvent(field, fieldId) {
$("#" + fieldId + "_other").change(function () {
if ($(this).val() !== "") {
$("#" + fieldId).val("");
$("input[name='" + fieldId + "'").prop("checked", false);
$("#" + fieldId + "_other_indicator").prop("checked", true);
}
});
}
function bindClearOtherWhenValueSelectedEvent(field, fieldId) {
$("input[name='" + fieldId + "'], #" + fieldId).change(function () {
if (this.checked || (this.tagName === "SELECT" && this.value !== "")) {
$("#" + fieldId + "_other").val("");
}
});
}
function bindFormElementEvents() {
var _this = this;
$("#" + this.form.ClientID).submit(function (evt) {
evt.preventDefault();
_this.saveForm();
}).change(function () {
_this.hasChangesProperty = true;
});
$("#" + this.form.ClientID + " legend .edit-button").click(function (evt) {
evt.preventDefault();
_this.fireEvent(Events.FormEditClick);
});
$("#" + this.form.ClientID + " [type='reset']").click(function (evt) {
clearValidationErrors.call(_this);
_this.hasChangesProperty = false;
$("#" + _this.form.ClientID + " select").val('');
$("#" + _this.form.ClientID + " input[type='text']").val('');
$("#" + _this.form.ClientID + " input[type='number']").val('');
$("#" + _this.form.ClientID + " textarea").val('');
$("#" + _this.form.ClientID + " input[type='checkbox'], #" + _this.form.ClientID + " input[type='radio']").prop('checked', false);
evt.preventDefault();
});
for (var i = 0; i < this.form.FormFields.length; i++) {
var fieldId = getFieldId(this.form, i);
var field = this.form.FormFields[i];
if (field.AllowBelowDetectableLimit) {
bindClearFieldValueWhenBelowCheckedEvent.call(_this, field, fieldId);
bindUncheckBelowEvent.call(_this, field, fieldId);
}
if (field.AllowOther) {
bindClearFieldValueWhenOtherChangedEvent.call(_this, field, fieldId);
bindClearOtherWhenValueSelectedEvent.call(_this, field, fieldId);
//bindUncheckBelowEvent.call(_this, field, fieldId);
}
}
}
function getFieldId(form, fieldIndex) {
return form.ClientID + "_field_" + form.FormFields[fieldIndex].FieldID;
}
function getDataRecord(fieldId) {
if (!this.originalData) {
return;
}
for (var i = 0; i < this.originalData.length; i++) {
var dataSet = this.originalData[i];
if (!dataSet.FieldValues || !dataSet.FieldValues.length) {
continue;
}
for (var j = 0; j < dataSet.FieldValues.length; j++) {
var f = dataSet.FieldValues[j];
if (f.FieldId === fieldId) {
return f;
}
}
}
return null;
}
function renderField(form, fieldIndex, dataOptions) {
var field = form.FormFields[fieldIndex];
var list, k;
field.Tooltip = field.Tooltip || "";
var fieldId = getFieldId(form, fieldIndex);
var record = getDataRecord.call(this, field.FieldID);
if (!record) {
record = {
IsOtherValue: false,
IsBelowDetectableLimit: false,
FormValue: null
};
}
if (typeof dataOptions.fieldCb === "function") {
if (dataOptions.fieldCb(form, field, record) === false) {
return '';
}
}
var fieldGroupClass = '';
if (field.ExtraStyle) {
fieldGroupClass += " " + field.ExtraStyle + " ";
}
if (field.fieldGroupClass) {
fieldGroupClass += " " + field.fieldGroupClass + " ";
}
var strVal = record && record.FormValue ? record.FormValue : '';
var html = '<div class="form-group ' + (field.Required === true ? "required" : "") + " " + fieldGroupClass + '" title="' + field.Tooltip + '">';
if (field.FieldType !== Forms.FieldType.HyperLink) {
html += '<label for="' + fieldId + '">' + field.Label + '</label>';
}
html += "<div class='field-container " + (dataOptions.fieldContainerClass ? dataOptions.fieldContainerClass : "") + " " + (field.fieldContainerClass ? field.fieldContainerClass : "") + " '>";
var requiredStr = "";
if (field.Required === true) {
requiredStr = ' required="required" ';
}
var inputClassStr = '';
if (dataOptions.inputClass) {
inputClassStr += " " + dataOptions.inputClass + " ";
}
if (field.fieldClass) {
inputClassStr += " " + field.fieldClass + " ";
}
if (field.FieldType === Forms.FieldType.DateTime) {
console.warn("PMA.UI.Components.Forms: No proper date time field support yet.");
}
if (dataOptions.readOnly === true) {
html += this.renderReadOnlyField(field, record, inputClassStr);
}
else {
switch (field.FieldType) {
case Forms.FieldType.Text:
html += '<input id="' + fieldId + '" name="' + fieldId + '" value="' + strVal + '" type="text" placeholder="' + field.Tooltip + '" ' + requiredStr + ' class="' + inputClassStr + '" />';
break;
case Forms.FieldType.DateTime: // no proper date time support yet
html += '<input id="' + fieldId + '" name="' + fieldId + '" value="' + strVal + '" type="text" placeholder="yyyy-MM-dd HH:mm:ss" ' + requiredStr + ' class="' + inputClassStr + '" />';
break;
case Forms.FieldType.Paragraph:
html += '<textarea id="' + fieldId + '" name="' + fieldId + '" placeholder="' + field.Tooltip + '"' + requiredStr + ' class="' + inputClassStr + '">' + strVal + '</textarea>';
break;
case Forms.FieldType.ListBox:
html += '<select id="' + fieldId + '" name="' + fieldId + '" ' + ' class="' + inputClassStr + '">';
if (field.FormList && field.FormList.FormListValues) {
html += '<option value="" ' + (strVal.length === 0 ? 'selected="selected"' : "") + '>' + field.Tooltip + '</option>';
list = field.FormList.FormListValues;
for (let k = 0; k < list.length; k++) {
html += '<option value="' + list[k].ValueID + '" ' + (strVal.length !== 0 && list[k].ValueID == strVal ? 'selected="selected"' : "") + '>' + list[k].Value + '</option>';
}
}
html += '</select>';
break;
case Forms.FieldType.CheckBox:
html += '<ul class="checkboxlist">';
var strValues = strVal.split("|");
if (field.FormList && field.FormList.FormListValues) {
list = field.FormList.FormListValues;
for (let k = 0; k < list.length; k++) {
html += '<li>';
html += '<input type="checkbox" class="' + inputClassStr + '" id="' + fieldId + '_' + list[k].ValueID + '" name="' + fieldId + '" value="' + list[k].ValueID + '" ' + (arrayContains(strValues, "" + list[k].ValueID) ? 'checked="checked"' : "") + '/>';
html += '<label for="' + fieldId + '_' + list[k].ValueID + '">' + list[k].Value + '</label>';
html += "</li>";
}
}
html += '</ul>';
break;
case Forms.FieldType.RadioButton:
html += '<ul class="radiobuttonlist">';
if (field.FormList && field.FormList.FormListValues) {
list = field.FormList.FormListValues;
/*
if (field.Required === false) {
html += '<li>';
html += '<input type="radio" id="' + fieldId + '_novalue" name="' + fieldId + '" value="" />';
html += '<label for="' + fieldId + '_novalue">' + Resources.translate("(No selection)") + '</label>';
html += "</li>";
}
*/
for (let k = 0; k < list.length; k++) {
html += '<li>';
html += '<input type="radio" class="' + inputClassStr + '" id="' + fieldId + '_' + list[k].ValueID + '" name="' + fieldId + '" value="' + list[k].ValueID + '" ' + (strVal !== "" && list[k].ValueID == strVal ? 'checked="checked"' : "") + ' />';
html += '<label for="' + fieldId + '_' + list[k].ValueID + '">' + list[k].Value + '</label>';
html += "</li>";
}
if (field.AllowOther === true) {
html += '<li>';
html += '<input type="radio" class="' + inputClassStr + '" id="' + fieldId + '_other_indicator" name="' + fieldId + '" ' + (record && record.IsOtherValue ? 'checked="checked"' : "") + ' value="other" />';
html += '<label for="' + fieldId + '_other_indicator">' + Resources.translate("Other value") + '</label>';
html += "</li>";
}
}
html += '</ul>';
break;
case Forms.FieldType.Integer:
var step = 1;
if (field.Interval) {
step = field.Interval | 0;
}
html += '<input id="' + fieldId + '" name="' + fieldId + '"' + requiredStr + ' ' + (field.LowerBound !== null ? 'min="' + field.LowerBound + '"' : "") + ' ' + (field.UpperBound !== null ? 'max="' + field.UpperBound + '"' : "") + ' type="number" step="' + step + '" value="' + strVal + '" placeholder="' + field.Tooltip + '" class="' + inputClassStr + '"/>';
break;
case Forms.FieldType.Double:
html += '<input id="' + fieldId + '" name="' + fieldId + '"' + requiredStr + ' ' + (field.LowerBound !== null ? 'min="' + field.LowerBound + '"' : "") + ' ' + (field.UpperBound !== null ? 'max="' + field.UpperBound + '"' : "") + ' type="number" step="' + (field.Interval ? field.Interval : 'any') + '" value="' + strVal + '" placeholder="' + field.Tooltip + '" class="' + inputClassStr + '" />';
break;
case Forms.FieldType.Percentage:
var minv = 0,
maxv = 100;
if (field.LowerBound !== null && (field.LowerBound | 0) >= 0) {
minv = field.LowerBound | 0;
}
if (field.UpperBound !== null && (field.UpperBound | 0) <= 0) {
maxv = field.UpperBound | 0;
}
html += '<input id="' + fieldId + '" name="' + fieldId + '"' + requiredStr + ' min="' + minv + '" max="' + maxv + '" type="number" step="' + (field.Interval ? field.Interval : 'any') + '" value="' + strVal + '" placeholder="' + field.Tooltip + '" class="' + inputClassStr + '" />';
break;
case Forms.FieldType.Label:
////html += '<div class="labelfield" id="' + fieldId + '">' + field.Label + '</div>';
break;
case Forms.FieldType.HyperLink:
html += '<a class="link-field" id="' + fieldId + '" title="' + field.Tooltip + '" href="' + field.Url + '" ' + (field.NewWindow === true ? ' target="_blank" ' : '') + '>' + field.Label + '</a>';
break;
}
if (field.AllowBelowDetectableLimit === true) {
html += '<div class="below-container">';
html += '<input id="' + fieldId + '_below" name="' + fieldId + '_below" type="checkbox" ' + (record && record.IsBelowDetectableLimit === true ? 'checked="checked"' : "") + ' value="below" />';
html += '<label for="' + fieldId + '_below">' + Resources.translate("Below detectable limit") + '</label>';
html += '<div>';
}
if (field.AllowOther === true) {
html += '<input id="' + fieldId + '_other" class="other ' + (dataOptions.inputClass ? dataOptions.inputClass : "") + '" name="' + fieldId + '_other" type="text" value="' + (strVal !== "" && record && record.IsOtherValue === true ? strVal : "") + '" placeholder="' + Resources.translate("Other value") + '" />';
}
}
html += '<span id="' + fieldId + '_validation" class="field-validation ' + (dataOptions.fieldValidationClass ? dataOptions.fieldValidationClass : "") + '"></span>';
if (field.additionalHtml) {
html += field.additionalHtml;
}
html += "</div></div>";
return html;
}
function renderForm(element, form, dataOptions, data, success, failure) {
var _this = this;
_this.form.ClientID = "frm" + ((Math.random() * 10000000) | 0);
_this.hasChangesProperty = false;
var html = "<form class='pma-ui-form " + (dataOptions.formClass ? dataOptions.formClass : "") + "' name='" + form.ClientID + "' id='" + form.ClientID + "' autocomplete='off' novalidate><fieldset>";
if (form.FormName) {
html += "<legend class='form-name'>" + form.FormName + (dataOptions.editButton === true && dataOptions.readOnly === true ? "<span class=\"edit-button\">" + Resources.translate("[Edit]") + "</span>" : "") + "</legend>";
}
/*
if (form.Description) {
html += "<div class='form-description'>" + form.Description + "</div>";
}
*/
if (form.Instructions) {
html += "<div class='form-instructions'>" + form.Instructions + "</div>";
}
form.FormFields.sort(function (a, b) {
return a.DisplayOrder - b.DisplayOrder;
});
for (var i = 0; i < form.FormFields.length; i++) {
html += renderField.call(_this, form, i, dataOptions);
}
html += "<div id='" + form.ClientID + "_validation' class='form-validation " + (dataOptions.validationClass ? dataOptions.validationClass : "") + "'></div>";
if (dataOptions.readOnly !== true) {
html += "<div class='input-container " + (dataOptions.btnContainerClass ? dataOptions.btnContainerClass : "") + "'>";
html += "<button type='submit' value='" + Resources.translate("Save") + "' class='" + (dataOptions.btnSaveClass ? dataOptions.btnSaveClass : "") + "' >" + Resources.translate("Save") + "</button>";
html += "<button type='reset' value='" + Resources.translate("Reset") + "' class='" + (dataOptions.btnResetClass ? dataOptions.btnResetClass : "") + "' >" + Resources.translate("Reset") + "</button>";
}
html += "</div>";
html += "</fieldset></form>";
$(element).html(html);
bindFormElementEvents.call(_this);
if (typeof success === "function") {
success.call(_this, _this.form, null);
}
}
function loadFormData(serverUrl, sessionId, form, path, currentUserOnly, dataFilter, success, failure) {
var _this = this;
callApiMethod({
serverUrl: serverUrl,
method: ApiMethods.GetFormData,
data: { sessionID: sessionId, pathOrUid: path, formId: form.FormID, currentUserOnly: currentUserOnly },
success: function (http) {
var response = parseJson(http.responseText);
if (typeof success === "function") {
var data = null;
if (typeof dataFilter === "string") {
for (var i = 0; i < response.length; i++) {
if (response[i].Login == dataFilter) {
data = [response[i]];
break;
}
}
}
else if (typeof dataFilter === "function") {
data = dataFilter.call(_this, response);
}
else {
data = response;
}
success.call(_this, data);
}
},
failure: failure
});
}
