From 841cb24e3c267be840aaee37a793562b0e6a61ba Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 2 Dec 2014 11:18:45 -0500
Subject: [PATCH] CRM-13611 - Add tabbed interface to report UI

---
 templates/CRM/Report/Form/Criteria.tpl | 11 ++--
 templates/CRM/Report/Form/Fields.tpl   | 91 +++++++++++++++++---------
 templates/CRM/Report/Form/Instance.tpl | 16 +++--
 3 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/templates/CRM/Report/Form/Criteria.tpl b/templates/CRM/Report/Form/Criteria.tpl
index d7549294ae..904ec15822 100644
--- a/templates/CRM/Report/Form/Criteria.tpl
+++ b/templates/CRM/Report/Form/Criteria.tpl
@@ -25,7 +25,7 @@
 *}
 {* Report form criteria section *}
     {if $colGroups}
-      <div id="col-groups" class="civireport-criteria" >
+  <div id="report-tab-col-groups" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom">
         {if $componentName eq 'Grant'}
             <h3>{ts}Include these Statistics{/ts}</h3>
         {else}
@@ -64,7 +64,7 @@
     {/if}
 
     {if $groupByElements}
-        <div id="group-by-elements" class="civireport-criteria" >
+        <div id="report-tab-group-by-elements" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
         <h3>{ts}Group by Columns{/ts}</h3>
         {assign  var="count" value="0"}
         <table class="report-layout">
@@ -90,7 +90,7 @@
     {/if}
 
     {if $orderByOptions}
-      <div id="order-by-elements" class="civireport-criteria" >
+      <div id="report-tab-order-by-elements" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
         <h3>{ts}Order by Columns{/ts}</h3>
 
   <table id="optionField">
@@ -161,7 +161,7 @@
     {/if}
 
     {if $otherOptions}
-        <div id="other-options" class="civireport-criteria" >
+        <div id="report-tab-other-options" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
         <h3>{ts}Other Options{/ts}</h3>
         <table class="report-layout">
           {assign var="optionCount" value=0}
@@ -182,7 +182,7 @@
     {/if}
 
     {if $filters}
-  <div id="set-filters" class="civireport-criteria" >
+  <div id="report-tab-set-filters" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
         <h3>{ts}Set Filters{/ts}</h3>
         <table class="report-layout">
       {assign var="counter" value=1}
@@ -281,4 +281,3 @@
     </script>
     {/literal}
 
-    <div>{$form.buttons.html}</div>
diff --git a/templates/CRM/Report/Form/Fields.tpl b/templates/CRM/Report/Form/Fields.tpl
index 1db83d6569..c66ac250be 100644
--- a/templates/CRM/Report/Form/Fields.tpl
+++ b/templates/CRM/Report/Form/Fields.tpl
@@ -25,49 +25,76 @@
 *}
 {if !$printOnly} {* NO print section starts *}
 {if $criteriaForm}
-<div> {* criteria section starts *}
-<div class="crm-accordion-wrapper crm-report_criteria-accordion {if $rows}collapsed{/if}">
- <div class="crm-accordion-header">
-    {ts}Report Criteria{/ts}
-   </div><!-- /.crm-accordion-header -->
- <div class="crm-accordion-body">
-        <div id="id_{$formTpl}"> {* search section starts *}
+<div class="crm-report-criteria"> {* criteria section starts *}
+      <div id="mainTabContainer">
+        {*tab navigation bar*}
+        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
+          {if $colGroups}
+            <li class="ui-state-default ui-corner-all ui-tabs-selected ui-state-active">
+              <a title="Columns" href="#report-tab-col-groups">{ts}Columns{/ts}</a>
+            </li>
+          {/if}
+          {if $groupByElements}
+            <li class="ui-state-default ui-corner-all">
+              <a title="Group By" href="#report-tab-group-by-elements">{ts}Grouping{/ts}</a>
+            </li>
+          {/if}
+          {if $orderByOptions}
+            <li class="ui-state-default ui-corner-all">
+              <a title="Order By" href="#report-tab-order-by-elements">{ts}Sorting{/ts}</a>
+            </li>
+          {/if}
+          {if $form.options.html}
+            <li class="ui-state-default ui-corner-all">
+              <a title="Other Options" href="#report-tab-other-options">{ts}Options{/ts}</a>
+            </li>
+          {/if}
+          {if $filters}
+            <li class="ui-state-default ui-corner-all">
+              <a title="Filters" href="#report-tab-set-filters">{ts}Filters{/ts}</a>
+            </li>
+          {/if}
+          {if $instanceForm OR $instanceFormError}
+            <li id="tab_settings" class="ui-state-default ui-corner-all">
+              <a title="Settings" href="#report-tab-settings">{ts}Display{/ts}</a>
+            </li>
+            <li class="ui-state-default ui-corner-all">
+              <a title="Email" href="#report-tab-email">{ts}Email{/ts}</a>
+            </li>
+            <li class="ui-state-default ui-corner-all">
+              <a title="Other" href="#report-tab-other">{ts}Access{/ts}</a>
+            </li>
+          {/if}
+        </ul>
+
+        {*criteria*}
                 {include file="CRM/Report/Form/Criteria.tpl"}
-        </div> {* search div section ends *}
-  </div><!-- /.crm-accordion-body -->
-</div><!-- /.crm-accordion-wrapper -->
-</div> {* criteria section ends *}
+
+        {*settings*}
+        {if $instanceForm OR $instanceFormError}
+          {include file="CRM/Report/Form/Instance.tpl"}
 {/if}
+      </div> {* end mainTabContainer *}
 
-{if $instanceForm OR $instanceFormError} {* settings section starts *}
-<div class="crm-accordion-wrapper crm-report_setting-accordion {if $rows}collapsed{/if}">
- <div class="crm-accordion-header" {if $updateReportButton} onclick="cj('#update-button').hide(); return false;" {/if} >
-    {if $mode eq 'template'}{ts}Create Report{/ts}{else}{ts}Report Settings{/ts}{/if}
-     </div><!-- /.crm-accordion-header -->
- <div class="crm-accordion-body">
-        <div id="id_{$instanceForm}">
-                <div id="instanceForm">
-                    {include file="CRM/Report/Form/Instance.tpl"}
                     {assign var=save value="_qf_"|cat:$form.formName|cat:"_submit_save"}
                     {assign var=next value="_qf_"|cat:$form.formName|cat:"_submit_next"}
                         <div class="crm-submit-buttons">
+                            {$form.buttons.html}
                             {$form.$save.html}
                             {if $mode neq 'template' && $form.$next}
                                 {$form.$next.html}
                             {/if}
                         </div>
-                </div>
-        </div>
- </div><!-- /.crm-accordion-body -->
-</div><!-- /.crm-accordion-wrapper -->
-{if $updateReportButton}
-<div id='update-button' class="crm-submit-buttons">
-   {$form.$save.html}
-   {if $mode neq 'template' && $form.$next} {* Removed Save a Copy button here since user doesn't have chance to set a new title. *}
-       <span class="description">{ts}To save a copy with updated criteria click Report Settings above and update the Report Title. Then click Save a Copy.{/ts}</span>
+</div> {* criteria section ends *}
    {/if}
-</div>
-{/if}
-{/if} {* settings section ends *}
+
+{literal}
+<script type="text/javascript">
+CRM.$(function($) {
+  $("#mainTabContainer").tabs();
+});
+
+</script>
+{/literal}
 
 {/if} {* NO print section ends *}
diff --git a/templates/CRM/Report/Form/Instance.tpl b/templates/CRM/Report/Form/Instance.tpl
index 0e6e1e7362..203f72182e 100644
--- a/templates/CRM/Report/Form/Instance.tpl
+++ b/templates/CRM/Report/Form/Instance.tpl
@@ -23,7 +23,8 @@
  | see the CiviCRM license FAQ at http://civicrm.org/licensing        |
  +--------------------------------------------------------------------+
 *}
-<h3>{ts}General Settings{/ts}</h3>
+<div id="report-tab-settings" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
+<h3>{ts}Display Settings{/ts}</h3>
 <table class="form-layout">
     <tr class="crm-report-instanceForm-form-block-title">
         <td class="report-label" width="20%">{$form.title.label} {help id="id-report_title" file="CRM/Report/Form/Settings.hlp"}</td>
@@ -42,10 +43,11 @@
         <td>{$form.report_footer.html}</td>
     </tr>
 </table>
-<br/>
+</div>
 
-<h3>{ts}Email Delivery Settings{/ts} {help id="id-email_settings" file="CRM/Report/Form/Settings.hlp"}</h3>
-<table class="form-layout">
+<div id="report-tab-email" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
+  <h3 class="email-delivery-settings-title">{ts}Email Delivery Settings{/ts} {help id="id-email_settings" file="CRM/Report/Form/Settings.hlp"}</h3>
+  <table class="form-layout email-delivery-settings-fields">
     <tr class="crm-report-instanceForm-form-block-email_subject">
         <td class="report-label" width="20%">{$form.email_subject.label}</td>
         <td>{$form.email_subject.html|crmAddClass:huge}</td>
@@ -59,9 +61,10 @@
         <td>{$form.email_cc.html|crmAddClass:huge}</td>
     </tr>
 </table>
-<br/>
+</div>
 
-<h3>{ts}Other Settings{/ts}</h3>
+<div id="report-tab-other" class="civireport-criteria ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
+<h3>{ts}User Access{/ts}</h3>
 <table class="form-layout">
     <tr class="crm-report-instanceForm-form-block-is_navigation">
   <td class="report-label">{$form.is_navigation.label}</td>
@@ -104,6 +107,7 @@
       <td>{$form.row_count.html}</td>
     </tr>
 </table>
+</div>
 
 {include file="CRM/common/showHideByFieldValue.tpl"
     trigger_field_id    ="is_navigation"
-- 
2.25.1