Merge pull request #315 from maestrano/release/1.4.10

Release - v1.4.10

Changelog.md

@@ -1,18 +1,32 @@
 # Impac! Frontend Changelog
 
-## Unreleased - development in progress
+### v1.4.10 | 2017 - Week 16
 
+#### Adds
+- [IMPAC-527] sales segmented minor display improvements: add currency to graph tooltip, & improve price range legend bootstrap col spacing for larger numbers
+- [IMPAC-529] Sales Comparison to use common-currency-conversions
+- [IMPAC-530] Aged Sales to use common-currency-conversions
+- [IMPAC-534] Aged Payables and Receivables to use common-currency-conversions directive
+- [IMPAC-535] common-currency-conversions (directive to display more information on currency conversions)
+- Add loader for KPIs on delete
 
--------------------------------------------------------------
--------------------------------------------------------------
+#### Fixes
+- [IMPAC-262] Fix new vs existing customer widget incorrect tooltip values
+- [IMPAC-397] Enforce at least 1 opportunities funnel widget option selection
+- [IMPAC-498] Improve widget drill-down selection saved ids
+- [IMPAC-536] fix param selector css bleed
+- [IMPAC-537] Fix widget content css issues: .widget-lines bootstrap cols & widget content overflow
 
-## Released
+-------------------------------------------------------------
 
 ### v1.4.9 | 2017 - Week 13
 
 #### Adds
 - [IMPAC-521] Better layout for employee details (and other widgets)
 
+#### Dependencies
+- Impac! >= v1.5.3
+
 
 -------------------------------------------------------------
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "impac-angular",
   "description": "Impac! Front-End Library",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "main": [
     "dist/impac-angular.js",
     "dist/impac-angular.less",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "impac-angular",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "author": {
     "name": "Xaun Lopez",
     "email": "[email protected]"

src/components/kpi/kpi.directive.coffee

@@ -160,7 +160,8 @@ angular
 
         $scope.deleteKpi = ->
           return if $scope.kpi.static
-          ImpacKpisSvc.delete($scope.kpi).then ((success) -> $scope.onDelete())
+          $scope.kpi.isLoading = true
+          ImpacKpisSvc.delete($scope.kpi).then((success) -> $scope.onDelete()).finally(-> $scope.kpi.isLoading = false)
 
         $scope.isTriggered = ->
           $scope.kpi.layout? && $scope.kpi.layout.triggered

src/components/widget/widget.less

@@ -115,3 +115,8 @@
     }
   }
 }
+
+// Fix overflow for large sums/text in .widget-lines-container tables
+.widget-item .widget-lines-container .widget-line > [class*='col-'] {
+  overflow-wrap: break-word;
+}

src/components/widgets-common/currency-conversions/currency-conversions.directive.coffee

@@ -0,0 +1,18 @@
+module = angular.module('impac.components.widgets-common.currency-conversions',[])
+module.directive('commonCurrencyConversions', ($templateCache, ImpacAssets) ->
+  return {
+    restrict: 'A'
+    scope: {
+      fxAmounts: '='
+      baseCurrency: '='
+      ratesDate: '='
+    }
+    template: $templateCache.get('widgets-common/currency-conversions.tmpl.html')
+
+    link: (scope, element) ->
+      scope.currencyConversionsIcon = ImpacAssets.get('currencyConversionsIcon')
+      scope.popoverTemplateUrl = $templateCache.get('widgets-common/details-popover.html')
+      scope.popoverTitle = "Currency Conversions Info"
+      scope.formattedRatesDate = moment(scope.ratesDate).format('MMMM Do YYYY')
+  }
+)

src/components/widgets-common/currency-conversions/currency-conversions.less

@@ -0,0 +1,11 @@
+.currency-conversions {
+  img {
+    width: 15px;
+    cursor: pointer;
+  }
+
+  &.popover .popover-title {
+    background-color: black;
+    color: white;
+  }
+}

src/components/widgets-common/currency-conversions/currency-conversions.tmpl.html

@@ -0,0 +1,23 @@
+<span class="currency-conversions" ng-if="fxAmounts">
+  <img ng-src="{{currencyConversionsIcon}}" popover-template="'details-popover.tmpl.html'" popover-class="currency-conversions" popover-title="{{popoverTitle}}" popover-trigger="mouseenter" popover-append-to-body="true" />
+</span>
+
+<!-- ui.bootstrap popover template -->
+<script type="text/ng-template" id="details-popover.tmpl.html">
+  <p ng-if="fxAmounts.length > 1">This value includes amounts that have been converted to {{ baseCurrency }} from different currencies:</p>
+  <p ng-if="fxAmounts.length == 1">This value includes one amount that has been converted to {{ baseCurrency }} from a different currency:</p>
+
+  <table class="table">
+    <tr>
+      <th>Original amount</th>
+      <th>Rate</th>
+    </tr>
+    <tr ng-repeat="fx in fxAmounts">
+      <td>{{ fx.amount | mnoCurrency : fx.currency }}</td>
+      <td>{{ fx.rate }}</td>
+    </tr>
+  </table>
+
+  <p ng-if="fxAmounts.length > 1">The rates used correspond to those for {{ formattedRatesDate }}.</p>
+  <p ng-if="fxAmounts.length == 1">The rate used corresponds to the rate for {{ formattedRatesDate }}.</p>
+</script>

src/components/widgets-common/editable-title/editable-title.less

@@ -1,10 +1,8 @@
-.analytics .widget-item {
-  .editable-title {
-    width: 100%;
-    flex: 1;
-    overflow: hidden;
-    height: 22px;
-  }
+.analytics .widget-item .editable-title {
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  height: 22px;
 
   .title {
     text-transform: @impac-widget-title-text-transform;
@@ -45,5 +43,4 @@
       }
     }
   }
-  // }
 }

src/components/widgets-settings/param-selector/param-selector.less

@@ -29,10 +29,16 @@
     overflow-x: hidden;
     .box-shadow(rgb(0, 0, 0) 0px 3px 15px -3px);
 
-    div {
+    .param-selector-label {
       padding: 3px 5px;
+      .font(inherit,500,black);
+      cursor: text;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      line-height: 1.9;
     }
-    div:hover {
+    .param-selector-label:hover {
       cursor: pointer;
       background-color: @impac-widget-param-selector-color;
       color: white;

src/components/widgets-settings/param-selector/param-selector.tmpl.html

@@ -1,8 +1,8 @@
 <span class="settings param-selector">
 	<a ng-click="toggleShowOptions()">{{selected.label | titleize | truncate : getTruncateValue() : "..." : false}} <i class="fa fa-chevron-down" /></a>
 	<div class="options-container" collapse="!showOptions">
-		<div ng-repeat="option in options" ng-click="selectOption(option)">
+		<div ng-repeat="option in options" ng-click="selectOption(option)" class="param-selector-label">
 			{{option.label | titleize}}
 		</div>
 	</div>
-</span>
+</span>

src/components/widgets/accounts-balance-sheet/accounts-balance-sheet.less

@@ -2,7 +2,7 @@
   .tall-widget();
   .widget-lines-container {
     .scrollable(scroll);
-    max-height: 515px;
+    max-height: 490px;
     @media (max-width: @screen-xs-max) {
       .row.widget-line {
         &:not(:last-child) { border-bottom: dashed 1px @impac-widget-borders-color; }

src/components/widgets/accounts-cash-summary/accounts-cash-summary.directive.coffee

@@ -35,13 +35,9 @@ module.controller('WidgetAccountsCashSummaryCtrl', ($scope, $q, ChartFormatterSv
         $scope.selectedElement = _.find(w.content.summary, (statement)->
           statement.name == w.metadata.selectedElement
         )
-        if !$scope.selectedElement
-          # Attempt to find the selectedElement by statement account id
-          angular.forEach(w.content.summary, (statement) ->
-            $scope.selectedElement ||= _.find(statement.accounts, (account)->
-              account.id == w.metadata.selectedElement
-            ) if statement.accounts?
-          )
+        # Attempt to find the selectedElement by statement account id
+        $scope.selectedElement ||= fetchElement(w.content.summary)
+
       sortData()
 
   $scope.getLastDate = ->
@@ -79,26 +75,35 @@ module.controller('WidgetAccountsCashSummaryCtrl', ($scope, $q, ChartFormatterSv
   $scope.getName = (element) ->
     element.name.replace(/_/g, " ") if element? && element.name?
 
+  $scope.sort = (col) ->
+    if $scope.sortedColumn == col
+      $scope.ascending = !$scope.ascending
+    else
+      $scope.ascending = true
+      $scope.sortedColumn = col
+    sortData()
 
-  $scope.toggleSelectedElement = (element) ->
-    if $scope.isSelected(element)
+  # --->
+  # TODO selectedElement and collapsed should be factorized as settings or 'commons'
+  $scope.toggleSelectedElement = (element, statementName = null) ->
+    if $scope.isSelected(element, statementName)
       $scope.selectedElement = null
       if w.isExpanded()
         w.toggleExpanded()
       else
         ImpacWidgetsSvc.updateWidgetSettings(w,false)
     else
       $scope.selectedElement = angular.copy(element)
+      $scope.selectedElement.category = statementName
       w.format()
       if !w.isExpanded()
         w.toggleExpanded()
       else
         ImpacWidgetsSvc.updateWidgetSettings(w,false)
 
-  $scope.isSelected = (element) ->
+  $scope.isSelected = (element, statementName = null) ->
     element? && $scope.selectedElement? && (
-      matcher = (if element.id? then 'id' else 'name')
-      $scope.selectedElement[matcher] == element[matcher]
+      matchElementToSelectedElement(element, statementName, $scope.selectedElement)
     )
 
   $scope.toggleCollapsed = (element) ->
@@ -122,6 +127,44 @@ module.controller('WidgetAccountsCashSummaryCtrl', ($scope, $q, ChartFormatterSv
   $scope.getSelectLineColor = (elem) ->
     ChartFormatterSvc.getColor(0)
 
+  fetchElement = (statements)->
+    for statement in statements
+      continue unless statement.accounts?
+      element = _.find(statement.accounts, (acc) -> getIdentifier(acc, statement.name) == w.metadata.selectedElement)
+      if element?
+        element = angular.merge(angular.copy(element), category: statement.name)
+        return element
+
+  matchElementToSelectedElement = (element, elementCategory = null, sElem)->
+    getIdentifier(element, elementCategory) == getIdentifier(sElem)
+
+  getIdentifier = (element, category = null)->
+    id = element.id || element.name
+    category ||= element.category
+    return id unless category
+    "#{category}-#{id}"
+
+  # <---
+
+  sortAccountsBy = (getElem) ->
+    angular.forEach(w.content.summary, (sElem) ->
+      if sElem.accounts
+        sElem.accounts.sort (a, b) ->
+          res = if getElem(a) > getElem(b) then 1
+          else if getElem(a) < getElem(b) then -1
+          else 0
+          res *= -1 unless $scope.ascending
+          return res
+    )
+
+  sortData = ->
+    if $scope.sortedColumn == 'account'
+      sortAccountsBy( (el) -> el.name )
+    else if $scope.sortedColumn == 'total'
+      sortAccountsBy( (el) -> $scope.getLastValue(el) )
+    else if $scope.sortedColumn == 'variance'
+      sortAccountsBy( (el) -> $scope.getLastVariance(el) )
+
   # Chart formating function
   # --------------------------------------
   $scope.drawTrigger = $q.defer()
@@ -149,34 +192,6 @@ module.controller('WidgetAccountsCashSummaryCtrl', ($scope, $q, ChartFormatterSv
       # calls chart.draw()
       $scope.drawTrigger.notify(chartData)
 
-  sortAccountsBy = (getElem) ->
-    angular.forEach(w.content.summary, (sElem) ->
-      if sElem.accounts
-        sElem.accounts.sort (a, b) ->
-          res = if getElem(a) > getElem(b) then 1
-          else if getElem(a) < getElem(b) then -1
-          else 0
-          res *= -1 unless $scope.ascending
-          return res
-    )
-
-  sortData = ->
-    if $scope.sortedColumn == 'account'
-      sortAccountsBy( (el) -> el.name )
-    else if $scope.sortedColumn == 'total'
-      sortAccountsBy( (el) -> $scope.getLastValue(el) )
-    else if $scope.sortedColumn == 'variance'
-      sortAccountsBy( (el) -> $scope.getLastVariance(el) )
-
-  $scope.sort = (col) ->
-    if $scope.sortedColumn == col
-      $scope.ascending = !$scope.ascending
-    else
-      $scope.ascending = true
-      $scope.sortedColumn = col
-    sortData()
-
-
   # Mini-settings
   # --------------------------------------
   unCollapsedSetting = {}
@@ -198,7 +213,7 @@ module.controller('WidgetAccountsCashSummaryCtrl', ($scope, $q, ChartFormatterSv
 
   selectedElementSetting.toMetadata = ->
     return {selectedElement: null} unless $scope.selectedElement?
-    {selectedElement: $scope.selectedElement.id || $scope.selectedElement.name }
+    {selectedElement: getIdentifier($scope.selectedElement) }
 
 
   w.settings.push(selectedElementSetting)

src/components/widgets/accounts-cash-summary/accounts-cash-summary.tmpl.html

@@ -61,7 +61,7 @@ <h4>Widget settings</h4>
               <!-- Accounts lines -->
               <div class="row" collapse="isCollapsed(statement)">
                 <div class="col-xs-12">
-                  <div class="row widget-line" ng-click="toggleSelectedElement(account)" ng-repeat="account in statement.accounts" >
+                  <div class="row widget-line" ng-click="toggleSelectedElement(account, statement.name)" ng-repeat="account in statement.accounts" >
                     <div class="col-xs-5 col-xs-offset-1">
                       {{account.name}}
                     </div>
@@ -72,7 +72,7 @@ <h4>Widget settings</h4>
                       {{getLastVariance(account)}}
                     </div>
 
-                    <div class="selection-tag" ng-if="isSelected(account)" style="background-color: {{ getSelectLineColor(account) }}"/>
+                    <div class="selection-tag" ng-if="isSelected(account, statement.name)" style="background-color: {{ getSelectLineColor(account) }}"/>
                   </div>
                 </div>
               </div>