Resolves OFBIZ-6455:Change code in htmlFormMacroLibrary.ftl, specifically the renderLookupField macro to fire a bootstrap modal. Also deal with pagination.
git-svn-id: https://svn.apache.org/repos/asf/ofbiz/branches/boostrap_theme@1685214 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/framework/common/widget/CommonScreens.xml b/framework/common/widget/CommonScreens.xml
index 599a7c9..49d6d45 100644
--- a/framework/common/widget/CommonScreens.xml
+++ b/framework/common/widget/CommonScreens.xml
@@ -396,6 +396,8 @@
<set field="layoutSettings.javaScripts[]" value="/images/fieldlookup.js" global="true"/>
<set field="messagesTemplateLocation" from-field="layoutSettings.VT_MSG_TMPLT_LOC[0]" default-value="component://common/webcommon/includes/messages.ftl"/>
+ <set field="lookupBodyTemplateLocation" from-field="layoutSettings.VT_LKUP_TEMP_LOC[0]" default-value="component://common/webcommon/includes/lookup.ftl"/>
+ <set field="lookupFooterTemplateLocation" from-field="layoutSettings.VT_LKUP_FOOTER_LOC[0]" default-value="component://common/webcommon/includes/lookupFooter.ftl"/>
</actions>
<widgets>
<section>
@@ -403,7 +405,7 @@
<if-compare value="layer" operator="not-equals" field="parameters.presentation"/>
</condition>
<widgets>
- <platform-specific><html><html-template location="component://common/webcommon/includes/lookup.ftl" /></html></platform-specific>
+ <platform-specific><html><html-template location="${lookupBodyTemplateLocation}" /></html></platform-specific>
</widgets>
</section>
<platform-specific><html><html-template location="${messagesTemplateLocation}"/></html></platform-specific>
@@ -432,7 +434,7 @@
<if-compare value="layer" operator="not-equals" field="parameters.presentation"/>
</condition>
<widgets>
- <platform-specific><html><html-template location="component://common/webcommon/includes/lookupFooter.ftl"/></html></platform-specific>
+ <platform-specific><html><html-template location="${lookupFooterTemplateLocation}"/></html></platform-specific>
</widgets>
</section>
</widgets>
diff --git a/themes/bootstrap/data/BootstrapThemeData.xml b/themes/bootstrap/data/BootstrapThemeData.xml
index feaa83e..2ec8126 100644
--- a/themes/bootstrap/data/BootstrapThemeData.xml
+++ b/themes/bootstrap/data/BootstrapThemeData.xml
@@ -20,6 +20,8 @@
<entity-engine-xml>
<Enumeration enumId="VT_NAV_APPHDR_LOC" enumTypeId="VT_RES_TYPE" sequenceId="30" description="Location of Application header."/>
+ <Enumeration enumId="VT_LKUP_TEMP_LOC" enumTypeId="VT_RES_TYPE" sequenceId="30" description="Location of Lookup Screen Body FTL template."/>
+<Enumeration enumId="VT_LKUP_FOOTER_LOC" enumTypeId="VT_RES_TYPE" sequenceId="30" description="Location of Lookup Screen Footer FTL template."/>
<VisualTheme visualThemeId="BOOTSTRAP_BASIC" visualThemeSetId="BACKOFFICE" description="Boostrap Basic Theme - Floating Layout, Sight-Impaired Accessible, Bidirectional"/>
<VisualThemeResource visualThemeId="BOOTSTRAP_BASIC" resourceTypeEnumId="VT_NAME" resourceValue="BOOTSTRAP_BASIC" sequenceId="01"/>
@@ -39,6 +41,8 @@
<VisualThemeResource visualThemeId="BOOTSTRAP_BASIC" resourceTypeEnumId="VT_FORM_MACRO_LIB" resourceValue="component://bootstrap/includes/templates/htmlFormMacroLibrary.ftl" sequenceId="01"/>
<!-- <VisualThemeResource visualThemeId="BOOTSTRAP_BASIC" resourceTypeEnumId="VT_TREE_MACRO_LIB" resourceValue="component://bootstrap/includes/templates/htmlTreeMacroLibrary.ftl" sequenceId="01"/> -->
<VisualThemeResource visualThemeId="BOOTSTRAP_BASIC" resourceTypeEnumId="VT_MENU_MACRO_LIB" resourceValue="component://bootstrap/includes/templates/htmlMenuMacroLibrary.ftl" sequenceId="01"/>
+ <VisualThemeResource visualThemeId="BOOTSTRAP_BASIC" resourceTypeEnumId="VT_LKUP_TEMP_LOC" resourceValue="component://bootstrap/includes/lookup.ftl" sequenceId="01"/>
+<VisualThemeResource visualThemeId="BOOTSTRAP_BASIC" resourceTypeEnumId="VT_LKUP_FOOTER_LOC" resourceValue="component://bootstrap/includes/lookupFooter.ftl" sequenceId="01"/>
<VisualTheme visualThemeId="BOOTSTRAP_TOMAHAWK" visualThemeSetId="BACKOFFICE" description="Boostrap Tomahawk Theme - Based on original Tomakawk Theme"/>
<VisualThemeResource visualThemeId="BOOTSTRAP_TOMAHAWK" resourceTypeEnumId="VT_NAME" resourceValue="BOOTSTRAP_TOMAHAWK" sequenceId="01"/>
diff --git a/themes/bootstrap/includes/templates/htmlFormMacroLibrary.ftl b/themes/bootstrap/includes/templates/htmlFormMacroLibrary.ftl
index a18fbc4..45449eb 100644
--- a/themes/bootstrap/includes/templates/htmlFormMacroLibrary.ftl
+++ b/themes/bootstrap/includes/templates/htmlFormMacroLibrary.ftl
@@ -685,44 +685,10 @@
</#if>
</#if>
</#if>
- <script type="text/javascript">
- jQuery(document).ready(function(){
- var options = {
- requestUrl : "${fieldFormName}",
- inputFieldId : "${id}",
- dialogTarget : document.${formName?html}.${name?html},
- dialogOptionalTarget : <#if descriptionFieldName?has_content>document.${formName?html}.${descriptionFieldName}<#else>null</#if>,
- formName : "${formName?html}",
- width : "${width}",
- height : "${height}",
- position : "${position}",
- modal : "${fadeBackground}",
- ajaxUrl : <#if ajaxEnabled?has_content && ajaxEnabled>"${ajaxUrl}"<#else>""</#if>,
- showDescription : <#if ajaxEnabled?has_content && ajaxEnabled>"${showDescription}"<#else>false</#if>,
- presentation : "${presentation!}",
- defaultMinLength : "${defaultMinLength!2}",
- defaultDelay : "${defaultDelay!300}",
- args :
- <#rt/>
- <#if targetParameterIter?has_content>
- <#assign isFirst = true>
- <#lt/>[<#rt/>
- <#list targetParameterIter as item>
- <#if isFirst>
- <#lt/>document.${formName}.${item}<#rt/>
- <#assign isFirst = false>
- <#else>
- <#lt/> ,document.${formName}.${item}<#rt/>
- </#if>
- </#list>
- <#lt/>]<#rt/>
- <#else>[]
- </#if>
- <#lt/>
- };
- new Lookup(options).init();
- });
- </script>
+ <#assign modalId = "${id}-Modal">
+ <#assign fieldName = "${name}">
+ <a class="btn btn-primary btn-sm" href="javascript:boot_lookupModal('${modalId}','${fieldFormName}','${id}','${name}');"><span class="glyphicon glyphicon-search"></span></a>
+
</#if>
<#if readonly?has_content && readonly>
<a id="${id}_clear"
@@ -736,38 +702,98 @@
</a>
</#if>
</span>
+
+ <div class="modal fade bs-example-modal-lg" id="${modalId}" tabindex="-1" role="dialog" aria-labelledby="${modalId}" aria-hidden="true">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ </div>
+ </div>
+ </div>
+
<#if ajaxEnabled?has_content && ajaxEnabled && (presentation?has_content && presentation == "window")>
<#if ajaxUrl?index_of("_LAST_VIEW_NAME_") < 0>
<#local ajaxUrl = ajaxUrl + "&_LAST_VIEW_NAME_=" + lastViewName />
</#if>
<script language="JavaScript" type="text/javascript">ajaxAutoCompleter('${ajaxUrl}', ${showDescription}, ${defaultMinLength!2}, ${defaultDelay!300});</script><#t/>
</#if>
- <script type="text/javascript">
- jQuery(document).ready(function(){
- jQuery('.field-lookup a').html('<button class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-search"></span></button>');
- });
- </script>
+
</#macro>
<#macro renderNextPrev paginateStyle paginateFirstStyle viewIndex highIndex listSize viewSize ajaxEnabled javaScriptEnabled ajaxFirstUrl firstUrl paginateFirstLabel paginatePreviousStyle ajaxPreviousUrl previousUrl paginatePreviousLabel pageLabel ajaxSelectUrl selectUrl ajaxSelectSizeUrl selectSizeUrl commonDisplaying paginateNextStyle ajaxNextUrl nextUrl paginateNextLabel paginateLastStyle ajaxLastUrl lastUrl paginateLastLabel paginateViewSizeLabel>
<#if listSize gt viewSize>
- <#-- <div class="${paginateStyle}"> -->
- <nav class="paginate-nav">
- <ul class="pagination pull-left">
- <li class="${paginateFirstStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxFirstUrl}')<#else>submitPagination(this, '${firstUrl}')</#if>" title="${paginateFirstLabel}"><span class="glyphicon glyphicon-step-backward"></span></a><#else> disabled"><a><span class="glyphicon glyphicon-step-backward"></span></a></#if></li>
- <li class="${paginatePreviousStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxPreviousUrl}')<#else>submitPagination(this, '${previousUrl}')</#if>" title="${paginatePreviousLabel}"><span class="glyphicon glyphicon-step-backward"></span></a><#else> disabled"><a><span class="glyphicon glyphicon-backward"></span></a></#if></li>
- <li class="${paginateNextStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxNextUrl}')<#else>submitPagination(this, '${nextUrl}')</#if>" title="${paginateNextLabel}"><span class="glyphicon glyphicon-forward"></a><#else> disabled"><a><span class="glyphicon glyphicon-forward"></span></a></#if></li>
- <li class="${paginateLastStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxLastUrl}')<#else>submitPagination(this, '${lastUrl}')</#if>" title="${paginateLastLabel}"><span class="glyphicon glyphicon-step-forward"></span></a><#else> disabled"><a><span class="glyphicon glyphicon-step-forward"></span></a></#if></li>
- </ul>
- <ul class="pagination pull-right">
- <#if listSize gt 0 && javaScriptEnabled><li class="nav-page-select">${pageLabel} <select style="margin:0px;font-size:100%;" name="page" size="1" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectUrl}')<#else>submitPagination(this, '${selectUrl}'+this.value)</#if>"><#rt/>
+ <nav id="pagination-navigation" class="navbar navbar-default" role="navigation" style="border:none;">
+ <ul class="pagination pull-left" style="margin:0;">
+ <#if viewIndex gt 0>
+ <li>
+ <a href="javascript:void(0)" onclick="
+ <#if ajaxEnabled>ajaxUpdateAreas('${ajaxFirstUrl}')
+ <#else>submitPagination(this, '${firstUrl}')
+ </#if>" title="${paginateFirstLabel}">${paginateFirstLabel}
+ </a>
+ <#else>
+ <li class="disabled">
+ <a href="#">
+ <span class="glyphicon glyphicon-step-backward"></span>
+ </a>
+ </#if>
+ </li>
+ <#if viewIndex gt 1>
+ <li>
+ <a href="javascript:void(0)" onclick="
+ <#if ajaxEnabled>ajaxUpdateAreas('${ajaxPreviousUrl}')
+ <#else>submitPagination(this, '${previousUrl}')
+ </#if>" title="${paginatePreviousLabel}">${paginatePreviousLabel}
+ </a>
+ <#else>
+ <li class="disabled">
+ <a href="#">
+ <span class="glyphicon glyphicon-backward"></span>
+ </a>
+ </#if>
+ </li>
+ <#-- <li class="${paginatePreviousStyle}<#if viewIndex gt 0>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxPreviousUrl}')<#else>submitPagination(this, '${previousUrl}')</#if>" title="${paginatePreviousLabel}">${paginatePreviousLabel}</a><#else>-disabled"><span class="glyphicon glyphicon-backward"></span></#if></li> -->
+ <#if highIndex lt listSize>
+ <li>
+ <a href="javascript:void(0)" onclick="
+ <#if ajaxEnabled>ajaxUpdateAreas('${ajaxNextUrl}')
+ <#else>submitPagination(this, '${nextUrl}')
+ </#if>"
+ title="${paginateNextLabel}">${paginateNextLabel}
+ </a>
+ <#else>
+ <li class="disabled">
+ <a href="#">
+ <span class="glyphicon glyphicon-backward"></span>
+ </a>
+ </#if>
+ </li>
+ <#-- <li class="${paginateNextStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxNextUrl}')<#else>submitPagination(this, '${nextUrl}')</#if>" title="${paginateNextLabel}"><span class="glyphicon glyphicon-forward"></a><#else>-disabled"><span class="glyphicon glyphicon-forward"></span></#if></li> -->
+ <#if highIndex lt listSize>
+ <li>
+ <a href="javascript:void(0)" onclick="
+ <#if ajaxEnabled>ajaxUpdateAreas('${ajaxLastUrl}')
+ <#else>submitPagination(this, '${lastUrl}')
+ </#if>"
+ title="${paginateLastLabel}">${paginateLastLabel}
+ </a>
+ <#else>
+ <li class="disabled">
+ <a href="#">
+ <span class="glyphicon glyphicon-backward"></span>
+ </a>
+ </#if>
+ </li>
+ <#-- <li class="${paginateLastStyle}<#if highIndex lt listSize>"><a href="javascript:void(0)" onclick="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxLastUrl}')<#else>submitPagination(this, '${lastUrl}')</#if>" title="${paginateLastLabel}"><span class="glyphicon glyphicon-step-forward"></span></a><#else>-disabled"><span class="glyphicon glyphicon-step-forward"></span></#if></li> -->
+ </ul>
+ <ul class="pagination pull-right" style="margin:0;">
+ <#if listSize gt 0 && javaScriptEnabled><li class="nav-page-select">${pageLabel} <select class="form-control form-control-inline" style="margin:0px;font-size:100%;" name="page" size="1" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectUrl}')<#else>submitPagination(this, '${selectUrl}'+this.value)</#if>"><#rt/>
<#assign x=(listSize/viewSize)?ceiling>
<#list 1..x as i>
<#if i == (viewIndex+1)><option selected="selected" value="<#else><option value="</#if>${i-1}">${i}</option>
</#list>
</select></li>
</#if>
- <#if javaScriptEnabled><li class="nav-pagesize"><select name="pageSize" size="1" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectSizeUrl}')<#else>submitPagination(this, '${selectSizeUrl}')</#if>"><#rt/>
+ <#if javaScriptEnabled><li class="nav-pagesize"><select class="form-control form-control-inline" name="pageSize" size="1" onchange="<#if ajaxEnabled>ajaxUpdateAreas('${ajaxSelectSizeUrl}')<#else>submitPagination(this, '${selectSizeUrl}')</#if>"><#rt/>
<#assign availPageSizes = [20, 30, 50, 100, 200]>
<#list availPageSizes as ps>
<option <#if viewSize == ps> selected="selected" </#if> value="${ps}">${ps}</option>
@@ -777,7 +803,6 @@
<li class="nav-displaying">${commonDisplaying}</li>
</ul>
</nav>
- <#-- </div> -->
</#if>
</#macro>
diff --git a/themes/bootstrap/webapp/bootstrap/js/bootified.js b/themes/bootstrap/webapp/bootstrap/js/bootified.js
index 593be8a..d14cc99 100644
--- a/themes/bootstrap/webapp/bootstrap/js/bootified.js
+++ b/themes/bootstrap/webapp/bootstrap/js/bootified.js
@@ -90,6 +90,9 @@
if(jQuery('table tr td a.buttontext')){
jQuery('table tr td a.buttontext').removeClass("buttontext").addClass("btn btn-link btn-block").css("text-align","left");
}
+ if(jQuery('table tr td a.smallSubmit')){
+ jQuery('table tr td a.smallSubmit').removeClass("smallSubmit").addClass("btn btn-primary btn-block btn-xs").css("text-align","left");
+ }
}
/****************************
Ftl form transforms
@@ -192,10 +195,12 @@
}*/
}
});
+
//Transform lookup field button
jQuery('form span.field-lookup a').each(function(){
var $id = jQuery(this).attr('id');
- if ($id.indexOf("_lookupId_button") >= 0){
+
+ if ($id && $id.indexOf("_lookupId_button") >= 0){
jQuery(this).addClass('btn btn-primary btn-sm').html('<span class="glyphicon glyphicon-search"></span>');
}
});
@@ -296,6 +301,7 @@
jQuery('td.label').removeClass('label').addClass('table-label');
jQuery('table.basic-table').removeClass('basic-table').addClass('table table-condensed table-striped');
}
+
/**************************************************
LOAD 'EM UP
**************************************************/
@@ -306,4 +312,91 @@
OFBOOT.tableTranforms();
OFBOOT.formTranforms();
OFBOOT.miscTranforms();
-});
\ No newline at end of file
+});
+
+function boot_lookupModal(modalId,url,fieldId,fieldName){
+ jQuery('#'+ modalId).modal({
+ backdrop:'static'
+ });
+ jQuery('#'+modalId).on('shown.bs.modal', function (event){
+ event.preventDefault();
+ jQuery(console.log("Url:" + url));
+ jQuery(console.log("Modal should be next"));
+ jQuery(console.log("ModalId:" + modalId));
+
+ jQuery.ajax({
+ url: url,
+ async: false,
+ type: 'POST',
+ success: function(data) {
+ jQuery('#'+modalId).find('.modal-content').html(data);
+ }
+ });
+ //Modal Layout Fix
+ boot_fixModalLayout(modalId);
+ //Get the form ready for ajax submit
+ var thisForm = jQuery('#'+modalId+'.modal').find('form');
+ //1. Get form attributes
+ var formId = jQuery(thisForm).attr('id');
+ jQuery(console.log("Form Id - before submit:" + formId));
+ //2. Remove default onsubmit="javascript:submitFormDisableSubmits(this)" attribute.
+ valueRef = "javascript:boot_submitFormDisableSubmits(this,'"+modalId+"','"+fieldName+"','"+fieldId+"')";
+ jQuery(thisForm).attr('onsubmit',valueRef);
+ });
+}
+
+function boot_submitFormDisableSubmits(form, modalId, fieldName, fieldId){
+ jQuery("#"+ this.modalId).modal("show");
+
+ //Do ajax
+ jQuery.ajax({
+ url: jQuery(form).attr("action"),
+ data: jQuery(form).serialize(),
+ async: false,
+ type: 'POST',
+ success: function(data) {
+ jQuery('#'+modalId).find('.modal-content').html(data);
+ }
+ });
+ // Transform the set_value funtion
+ boot_fixModalLayout(modalId);
+ if('#'+ modalId + ' table'){
+ jQuery('#'+modalId+ ' table tr td a.smallSubmit').each(function(){
+ jQuery(this).removeClass("smallSubmit").addClass("btn btn-primary btn-block btn-xs").css("text-align","left");
+ //Get the html
+ var returnValue = jQuery(this).html().trim();
+ //Replace href
+ //Put value reference in string
+ valueRef = "javascript:boot_set_value('"+returnValue+"','"+fieldName+"','"+fieldId+"','"+modalId+"')";
+ jQuery(this).attr('href',valueRef);
+ });
+ }
+}
+
+function boot_set_value(returnValue,fieldName, fieldId, modalId){
+ jQuery('#'+modalId).modal('hide');
+ jQuery('#'+modalId).on('hidden.bs.modal', function (e) {
+ //Set the field value
+ jQuery('#'+ fieldId ).val(returnValue);
+ });
+}
+
+function boot_fixModalLayout(modalId){
+ jQuery(console.log("Fix modal layout called:" + modalId));
+ jQuery('#'+modalId+'.modal').find('div.form-group div.col-sm-2').each(function(){
+ jQuery(this).removeClass('col-sm-2').addClass('col-sm-3');
+ });
+ jQuery('#'+modalId+'.modal').find('div.form-group div.col-sm-4').each(function(){
+ jQuery(this).removeClass('col-sm-4').addClass('col-sm-9');
+ });
+ jQuery('#'+modalId+'.modal form input').each(function(){
+ var type = jQuery(this).attr("type");
+ if(type == "submit"){
+ jQuery(this).removeClass("smallSubmit").addClass("btn btn-primary btn-sm");
+ }
+ });
+ jQuery('#'+modalId+'.modal .panel.panel-default').css('margin-bottom','0px');
+}
+
+
+
