refactor(vouchers): show/hide registry search bar

This commit refactors the voucher registry search bar to only be visible
when there are filters applied.  Unfortunately the only supported
voucher filters at this point are `bhDateInterval`.  This selection
should be greatly expanded in the future.

Closes #241.

client/src/partials/vouchers/index.html

@@ -1,16 +1,55 @@
-<!-- breadcrumb header -->
-<bh-breadcrumb
-  path   = "VoucherCtrl.bcPaths"
-  button = "VoucherCtrl.bcButtons"
-  print  = "VoucherCtrl.buttonPrint"
-  download = "VoucherCtrl.dropdownDownload">
-</bh-breadcrumb>
-
-<div class="flex-util">
-  <label class="label label-primary" ng-show="VoucherCtrl.dateInterval">
+<div class="flex-header">
+  <div class="bhima-title">
+    <ol class="headercrumb">
+      <li class="static" translate>TREE.FINANCE</li>
+      <li class="title" translate>TREE.VOUCHER_REGISTRY</li>
+    </ol>
+
+    <div class="toolbar">
+      <div class="toolbar-item">
+        <button
+          type="button"
+          ng-click="VoucherCtrl.search()"
+          data-method="search"
+          class="btn btn-default">
+          <i class="fa fa-search"></i> <span translate>FORM.BUTTONS.SEARCH</span>
+        </button>
+      </div>
+
+      <div class="toolbar-item">
+        <bh-pdf-print
+          pdf-url="/reports/finance/vouchers"
+          options="VoucherCtrl.dateInterval"
+          disable-cache="true">
+        </bh-pdf-print>
+      </div>
+
+      <div class="toolbar-item">
+        <bh-renderer-dropdown
+          report-url="/reports/finance/vouchers"
+          report-options="VoucherCtrl.dateInterval">
+        </bh-renderer-dropdown>
+      </div>
+
+      <div class="toolbar-item">
+        <button
+          type="button"
+          ng-click="VoucherCtrl.toggleFilter()"
+          data-method="filter"
+          class="btn btn-default"
+          ng-class="{ 'btn-info' : VoucherCtrl.filterEnabled }">
+          <i class="fa fa-filter"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="flex-util" ng-if="VoucherCtrl.dateInterval">
+  <label class="label label-primary">
     <i class="fa fa-filter"></i>
-    {{ VoucherCtrl.dateInterval.dateFrom | date: 'dd MMM yyyy' }} -
-    {{ VoucherCtrl.dateInterval.dateTo | date: 'dd MMM yyyy' }}
+    {{ VoucherCtrl.dateInterval.dateFrom | date }} -
+    {{ VoucherCtrl.dateInterval.dateTo | date }}
   </label>
 </div>
 
@@ -20,19 +59,17 @@
     <!-- vouchers list  -->
     <div
       id="voucherGrid"
-      class="grid-util-full-height"
+      class="grid-full-height"
+      ng-style="VoucherCtrl.filterBarHeight"
       ui-grid="VoucherCtrl.gridOptions"
       ui-grid-auto-resize
       ui-grid-resize-columns
       ui-grid-grouping>
-    </div>
 
     <bh-grid-loading-indicator
       loading-state="VoucherCtrl.loading"
       empty-state="VoucherCtrl.gridOptions.data.length === 0"
-      error-state="VoucherCtrl.hasError"
-      >
+      error-state="VoucherCtrl.hasError">
     </bh-grid-loading-indicator>
-
   </div>
 </div>

client/src/partials/vouchers/index.js

@@ -22,26 +22,8 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
   vm.transactionTypes = {};
   vm.gridApi = {};
   vm.gridOptions = {};
-
-  /* paths in the headercrumb */
-  vm.bcPaths = [
-    { label : 'TREE.FINANCE' },
-    { label : 'TREE.VOUCHER_REGISTRY' }
-  ];
-
-  /** buttons in the headercrumb */
-  vm.bcButtons = [
-    { icon: 'fa fa-search', label: $translate.instant('FORM.LABELS.SEARCH'),
-      action: search, color: 'btn-default'
-    },
-    { icon: 'fa fa-filter', color: 'btn-default',
-      action: toggleFilter,
-    }
-  ];
-
-  /** button Print */
-  vm.buttonPrint = { pdfUrl: '/reports/finance/vouchers' };
-
+  vm.search = search;
+  vm.toggleFilter = toggleFilter;
 
   /** search filters */
   vm.searchFilter = [
@@ -52,9 +34,6 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
   // init the filter service
   var filtering  = new Filtering(vm.gridOptions);
 
-  /** dropdown download */
-  vm.dropdownDownload = { reportUrl : '/reports/finance/vouchers' };
-
   vm.gridOptions = {
     appScopeProvider : vm,
     showColumnFooter : true,
@@ -70,7 +49,7 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
       treeAggregationLabel: '', footerCellClass : 'text-center',
     },
     { field : 'type_id', displayName : 'TABLE.COLUMNS.TYPE', headerCellFilter: 'translate',
-      sort: { priority: 0, direction : 'asc' },  
+      sort: { priority: 0, direction : 'asc' },
       cellTemplate: 'partials/templates/grid/voucherType.tmpl.html',
       treeAggregationType: uiGridGroupingConstants.aggregation.SUM,
       customTreeAggregationFinalizerFn: typeAggregation,
@@ -115,12 +94,6 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
   // API register function
   function onRegisterApi(gridApi) {
     vm.gridApi = gridApi;
-    vm.gridApi.grid.registerDataChangeCallback(expandAllRows);
-  }
-
-  // expand all rows
-  function expandAllRows() {
-    vm.gridApi.treeBase.expandAllRows();
   }
 
   // Grid Aggregation
@@ -149,10 +122,8 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
 
   // enable filter
   function toggleFilter() {
-    vm.filterEnabled = !vm.filterEnabled;
-    vm.bcButtons[1].color = vm.filterEnabled ? 'btn-default active' : 'btn-default';
-    vm.gridOptions.enableFiltering = vm.filterEnabled;
-    vm.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
+    vm.gridOptions.enableFiltering = vm.filterEnabled = !vm.filterEnabled;
+    vm.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
   }
 
   // search voucher
@@ -166,16 +137,20 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
         toggleLoadingIndicator();
         return Vouchers.read(null, vm.dateInterval);
       })
-      .then(function (list) {
-        vm.gridOptions.data = list;
+      .then(function (vouchers) {
+        vm.gridOptions.data = vouchers;
+        vm.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
       })
       .catch(function (err) {
         if (err && !err.code) { return; }
         Notify.handleError(err);
       })
       .finally(function () {
         toggleLoadingIndicator();
-      });
+
+        vm.filterBarHeight = (vm.dateInterval) ?
+          { 'height' : 'calc(100vh - 105px)' } : {};
+        });
   }
 
   // showReceipt
@@ -212,14 +187,14 @@ function VoucherController(Vouchers, $translate, Notify, Filtering, uiGridGroupi
     toggleLoadingIndicator();
 
     Vouchers.transactionType()
-      .then(function (result) {
-        vm.transactionTypes = result;
+      .then(function (store) {
+        vm.transactionTypes = store;
       })
       .catch(Notify.handleError);
 
     Vouchers.read()
-      .then(function (list) {
-        vm.gridOptions.data = list;
+      .then(function (vouchers) {
+        vm.gridOptions.data = vouchers;
       })
       .catch(errorHandler)
       .finally(toggleLoadingIndicator);