rem /**
rem  * javaScriptValidation-Required.bbj
rem  *
rem  * This program demonstrates how to write a client-side JavaScript
rem  * validation routine for a BBjEditBox.  The JavaScript that we
rem  * provide follows a simple structure of taking the control's contents
rem  * as input, running code to determine whether the input is valid, then
rem  * return either a TRUE or FALSE to indicate that the input is valid
rem  * or invalid.
rem  *
rem  * In particular, this is a simple example that replicates the "required"
rem  * attribute for the BBjEditBox, as covered in the control's DWC-specific
rem  * documentation.
rem  *
rem  * This program also demonstrates setting custom validation messages via
rem  * the setClientValidationMessage(), and sets the last name field's
rem  * validation style to "inline" instead of the default "popover".
rem  *
rem  * It also specifies a custom icon for the last name validation
rem  * error message.
rem  *
rem  * Lastly, it sets the "validation-auto-disable" attribute on the
rem  * window so that the [Submit] button will be disabled whenever
rem  * any of the controls with client-side validation are deemed
rem  * invalid.
rem  *
rem  * @see https://basishub.github.io/basis-next/#/dwc/bbj-editbox
rem  */


rem If the app is running in BUI, switch it automatically to run in the DWC client instead
if info(3,6)="5" then
    bui! = BBjAPI().getBuiManager()
    url! = bui!.getUrl().replaceAll("apps", "webapp")
    action! = bui!.urlAction(url!)
    bui!.setEndAction(action!)
    release
endif


rem Create the main window
window! = BBjAPI().openSysGui("X0").addWindow("BBj DWC CSS Layout Samples", $00180093$)
json! = new JsonObject()
json!.addProperty("width", "100%")
json!.addProperty("height", "100%")
json!.addProperty("padding", "1em")
json!.addProperty("box-sizing", "border-box")
json!.addProperty("display", "grid")
json!.addProperty("grid-template-columns", "auto 1fr")
json!.addProperty("align-items", "center")
json!.addProperty("gap", "var(--bbj-space)")
window!.setPanelStyle("@element", json!.toString())
window!.setCallback(window!.ON_CLOSE, "onExit")


rem Build the Contact Form
lbl! = window!.addStaticText("* First Name:", $8000$)
editFirstName! = window!.addEditBox(""); editFirstName!.setPlaceholder("First name")
lbl! = window!.addStaticText("* Last Name:", $8000$)
editLastName! = window!.addEditBox(""); editLastName!.setPlaceholder("Last name")
lbl! = window!.addStaticText("Company:", $8000$)
editCompany! = window!.addEditBox(""); editCompany!.setPlaceholder("Company")
lbl! = window!.addStaticText("Email:", $8000$)
editEmail! = window!.addEditBox(""); editEmail!.setPlaceholder("Email")
lbl! = window!.addStaticText("Country:", $8000$)
editCountry! = window!.addEditBox("USA"); editCountry!.setPlaceholder("Country")
lbl! = window!.addStaticText("City:", $8000$)
editCity! = window!.addEditBox("Albuquerque"); editCity!.setPlaceholder("City")
lbl! = window!.addStaticText("State:", $8000$)
editState! = window!.addEditBox("New Mexico"); editState!.setPlaceholder("State")
lbl! = window!.addStaticText("Zip Code:", $8000$)
editZip! = window!.addEditBox("87109"); editZip!.setPlaceholder("Zip Code")

btnSubmit! = window!.addButton("Submit")
btnSubmit!.setAttribute("theme", "outlined-primary")
btnSubmit!.setAttribute("expanse", "xl")
btnSubmit!.setStyle("grid-column", "1 / 3")
btnSubmit!.setStyle("margin-top", "1em")
btnSubmit!.setCallback(BBjButton.ON_FORM_VALIDATION, "OnFormValidation")


rem Define the JavaScript function that determines if the provided input
rem is valid or not.  Since this replicates the "required" attribute, the
rem JavaScript only has to ensure that the control's contents are not empty.
js! =       "if (value.trim().length > 0) { "
js! = js! + "    return true; "
js! = js! + "} else {"
js! = js! + "    return false;"
js! = js! + "} "
editFirstName!.setClientValidationFunction(js!)
editFirstName!.setClientValidationMessage("This field is required; please enter your first name before submitting the form")

rem The first example could be written in a much more compact manner, so
rem we'll use that version for the last name.  Our function is simply
rem using the trim() method to remove leading and trailing spaces, then
rem returning the length property of the trimmed input.  That satisfies
rem our boolean return value, as an empty string has a zero length and
rem thus would be invalid.  Any other length value would resolve to true.
rem Additionally, we'll change this message to be inserted in the form
rem as an inline element instead of a popover and we'll specify a custom icon.
editLastName!.setClientValidationFunction("return value.trim().length;")
editLastName!.setClientValidationMessage("This field is required; please enter your last name before submitting the form")
editLastName!.setAttribute("validation-style", "inline")
editLastName!.setAttribute("validation-icon", "fa:fas-exclamation-circle")

rem Disable the [Submit] button until the first/last
rem name edit boxes pass their validation tests
window!.setAttribute("data-validation-auto-disable", "true")


window!.setVisible(1)
process_events


rem ================================================================================================
rem Subroutines
rem ================================================================================================

rem Handle the user exiting the app
onExit:
release


rem Handle the form validation
OnFormValidation:
    e! = BBjAPI().getSysGui().getLastEvent()
    firstName! = e!.getText(editFirstName!)
    lastName! = e!.getText(editLastName!)
    if (len(firstName!) AND len(lastName!)) then
        e!.accept(1)
        temp = msgbox("You filled in the form successfully!", BBjSysGui.MSGBOX_ICON_INFORMATION, "Form Submitted Successfully", mode="theme=success")
    else
        e!.accept(0)
        temp = msgbox("You didn't fill in your first and last names, which are required", BBjSysGui.MSGBOX_ICON_STOP, "Invalid Input", mode="theme=danger")
    endif
return


declare auto BBjTopLevelWindow window!
declare auto BBjStaticText lbl!
declare auto BBjEditBox editFirstName!
declare auto BBjEditBox editLastName!
declare auto BBjEditBox editCompany!
declare auto BBjEditBox editEmail!
declare auto BBjEditBox editCountry!
declare auto BBjEditBox editCity!
declare auto BBjEditBox editState!
declare auto BBjEditBox editZip!
declare auto BBjButton btnSubmit!
declare auto JsonObject json!
declare auto BBjFormValidationEvent e!

rem Use statements
use com.google.gson.JsonObject
use java.util.HashMap