From d329b754462d0a423ba8ef0e15f8df363973d3b0 Mon Sep 17 00:00:00 2001
From: Xaun Lopez <xaunlopez@gmail.com>
Date: Mon, 5 Mar 2018 16:15:55 +0000
Subject: [PATCH 1/6] [IMPAC-793] Dynamically load generic templates

---
 .../dashboard/dashboard.directive.coffee      |  2 +-
 src/components/widget/widget.directive.coffee | 30 ++++++++---
 .../chart-threshold.component.coffee          |  2 +-
 .../info-panel/info-panel.directive.coffee    |  6 +--
 .../top-buttons/top-buttons.directive.coffee  |  2 +-
 .../accounts-cash-balance.directive.coffee    |  2 +-
 .../accounts-cash-balance.less                |  0
 .../accounts-cash-balance.tmpl.html           |  0
 .../accounts-cash-projection.directive.coffee |  2 +-
 .../accounts-cash-projection.less             |  0
 .../accounts-cash-projection.tmpl.html        |  0
 .../hist-mode/hist-mode.directive.coffee      |  2 +-
 src/impac-angular.module.js                   | 10 +++-
 src/services/dashboards/dashboards.svc.coffee | 14 ++---
 src/services/utilities/utilities.svc.coffee   | 25 ---------
 .../widgets-templates.svc.coffee              | 52 +++++++++++++++++++
 16 files changed, 99 insertions(+), 50 deletions(-)
 rename src/components/{widgets => widgets-layouts/custom}/accounts-cash-balance/accounts-cash-balance.directive.coffee (97%)
 rename src/components/{widgets => widgets-layouts/custom}/accounts-cash-balance/accounts-cash-balance.less (100%)
 rename src/components/{widgets => widgets-layouts/custom}/accounts-cash-balance/accounts-cash-balance.tmpl.html (100%)
 rename src/components/{widgets => widgets-layouts/custom}/accounts-cash-projection/accounts-cash-projection.directive.coffee (98%)
 rename src/components/{widgets => widgets-layouts/custom}/accounts-cash-projection/accounts-cash-projection.less (100%)
 rename src/components/{widgets => widgets-layouts/custom}/accounts-cash-projection/accounts-cash-projection.tmpl.html (100%)
 create mode 100644 src/services/widgets-templates/widgets-templates.svc.coffee

diff --git a/src/components/dashboard/dashboard.directive.coffee b/src/components/dashboard/dashboard.directive.coffee
index 5fe2b5f9..9f706ff7 100644
--- a/src/components/dashboard/dashboard.directive.coffee
+++ b/src/components/dashboard/dashboard.directive.coffee
@@ -238,7 +238,7 @@ module.controller('ImpacDashboardCtrl', ($scope, $http, $q, $filter, $uibModal,
         return []
 
     $scope.addWidget = (widgetTemplate) ->
-      params = _.pick(widgetTemplate, ['endpoint', 'name', 'width', 'metadata'])
+      params = _.pick(widgetTemplate, ['endpoint', 'name', 'width', 'metadata', 'layouts'])
 
       angular.element('#widget-selector').css('cursor', 'progress')
       angular.element('#widget-selector .section-lines .line-item').css('cursor', 'progress')
diff --git a/src/components/widget/widget.directive.coffee b/src/components/widget/widget.directive.coffee
index 2f90ca26..17507326 100644
--- a/src/components/widget/widget.directive.coffee
+++ b/src/components/widget/widget.directive.coffee
@@ -63,7 +63,7 @@ module.controller('ImpacWidgetCtrl', ($scope, $log, $q, $timeout, ImpacWidgetsSv
     ImpacDashboardsSvc.tick()
 )
 
-module.directive('impacWidget', ($templateCache, ImpacUtilities, ImpacWidgetsSvc) ->
+module.directive('impacWidget', ($log, $templateCache, ImpacUtilities, ImpacWidgetsSvc, ImpacWidgetsTemplates, toastr) ->
   return {
     restrict: 'A',
     scope: {
@@ -75,16 +75,22 @@ module.directive('impacWidget', ($templateCache, ImpacUtilities, ImpacWidgetsSvc
     },
     controller: 'ImpacWidgetCtrl',
     link: (scope, element) ->
-
       # initialize scope attributes
       # --------------------------------------
-      scope.widget.isLoading = true
-      scope.widget.settings = []
-      scope.pdfMode = false
-      scope.cssClass = ImpacUtilities.fetchWidgetCssClass(scope.widget)
-      scope.templatePath = ImpacUtilities.fetchWidgetTemplatePath(scope.widget)
+      onInit = ->
+        scope.showInfoPanel = false
+        scope.pdfMode = false
+        scope.widget.isLoading = true
+        scope.widget.settings = []
+        # Unused so far -->
+        scope.widget.hasEditAbility = true
+        scope.widget.hasDeleteAbility = true
+        # <--
+
+        scope.cssClass = ImpacWidgetsTemplates.filename(scope.widget)
+        scope.templatePath = ImpacWidgetsTemplates.templatePath(scope.widget)
+        _handleNoTemplateFound() unless scope.templatePath
 
-      scope.showInfoPanel = false
       scope.isInfoPanelDisplayed = ->
         scope.showInfoPanel
 
@@ -106,6 +112,14 @@ module.directive('impacWidget', ($templateCache, ImpacUtilities, ImpacWidgetsSvc
         ImpacWidgetsSvc.delete(scope.widget)
         .then(null, (e) -> scope.widget.errors = ImpacUtilities.processRailsError(e))
 
+      _handleNoTemplateFound = ->
+        toastr.warning('See browser console for more details', "No template found for #{scope.widget.name}")
+        $log.error("No template or generic layout template found for #{scope.widget.name}, either add a custom template or blacklist the widget via the ImpacTheming service.")
+        scope.deleteWidget()
+
+      onInit()
+
+      return
     ,template: $templateCache.get('widget/widget.tmpl.html')
   }
 )
diff --git a/src/components/widgets-common/chart-threshold/chart-threshold.component.coffee b/src/components/widgets-common/chart-threshold/chart-threshold.component.coffee
index 6eed97c6..266730cd 100644
--- a/src/components/widgets-common/chart-threshold/chart-threshold.component.coffee
+++ b/src/components/widgets-common/chart-threshold/chart-threshold.component.coffee
@@ -16,7 +16,7 @@ module.component('chartThreshold', {
     kpiCreateLabel: '<?'
     thresholdColor: '@'
     onComplete: '&?'
-  controller: ($timeout, $log, ImpacKpisSvc, ImpacUtilities, toastr)->
+  controller: ($timeout, $log, ImpacKpisSvc, toastr)->
     ctrl = this
 
     ctrl.$onInit = ->
diff --git a/src/components/widgets-common/info-panel/info-panel.directive.coffee b/src/components/widgets-common/info-panel/info-panel.directive.coffee
index da1c1034..131f7fe9 100644
--- a/src/components/widgets-common/info-panel/info-panel.directive.coffee
+++ b/src/components/widgets-common/info-panel/info-panel.directive.coffee
@@ -1,6 +1,6 @@
 module = angular.module('impac.components.widgets-common.info-panel',[])
 
-module.directive('commonInfoPanel', ($templateCache, ImpacUtilities) ->
+module.directive('commonInfoPanel', ($templateCache, ImpacWidgetsTemplates) ->
   return {
     restrict: 'A'
     scope: {
@@ -8,7 +8,7 @@ module.directive('commonInfoPanel', ($templateCache, ImpacUtilities) ->
       onClose: '&'
     }
     template: $templateCache.get('widgets-common/info-panel.tmpl.html')
-    
+
     link: (scope) ->
 
       w = scope.parentWidget
@@ -19,7 +19,7 @@ module.directive('commonInfoPanel', ($templateCache, ImpacUtilities) ->
         scope.onClose()
 
       scope.getWidgetTemplateName = ->
-        cssClass = ImpacUtilities.fetchWidgetCssClass(w)
+        cssClass = ImpacWidgetsTemplates.filename(w)
         return "" unless cssClass
 
         cssClassArray = cssClass.split('-')
diff --git a/src/components/widgets-common/top-buttons/top-buttons.directive.coffee b/src/components/widgets-common/top-buttons/top-buttons.directive.coffee
index 7ef8a2ab..ef6dda82 100644
--- a/src/components/widgets-common/top-buttons/top-buttons.directive.coffee
+++ b/src/components/widgets-common/top-buttons/top-buttons.directive.coffee
@@ -1,5 +1,5 @@
 module = angular.module('impac.components.widgets-common.top-buttons', [])
-module.controller('CommonTopButtonsCtrl', ($scope, $rootScope, $log, ImpacWidgetsSvc, ImpacAssets, ImpacUtilities) ->
+module.controller('CommonTopButtonsCtrl', ($scope, $rootScope, $log, ImpacWidgetsSvc, ImpacAssets) ->
 
   w = $scope.parentWidget
   w.isEditMode = false
diff --git a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee b/src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.directive.coffee
similarity index 97%
rename from src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee
rename to src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.directive.coffee
index b214fb59..d4a9ee89 100644
--- a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee
+++ b/src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.directive.coffee
@@ -1,4 +1,4 @@
-module = angular.module('impac.components.widgets.accounts-cash-balance', [])
+module = angular.module('impac.components.widgets-layouts.accounts-cash-balance', [])
 module.controller('WidgetAccountsCashBalanceCtrl', ($scope, $q, $timeout, $filter, ImpacTheming, ImpacAssets, ImpacWidgetsSvc, HighchartsFactory) ->
 
   w = $scope.widget
diff --git a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.less b/src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.less
similarity index 100%
rename from src/components/widgets/accounts-cash-balance/accounts-cash-balance.less
rename to src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.less
diff --git a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html b/src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.tmpl.html
similarity index 100%
rename from src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html
rename to src/components/widgets-layouts/custom/accounts-cash-balance/accounts-cash-balance.tmpl.html
diff --git a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee b/src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.directive.coffee
similarity index 98%
rename from src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee
rename to src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.directive.coffee
index 107f9dc4..71275120 100644
--- a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee
+++ b/src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.directive.coffee
@@ -1,4 +1,4 @@
-module = angular.module('impac.components.widgets.accounts-cash-projection', [])
+module = angular.module('impac.components.widgets-layouts.accounts-cash-projection', [])
 module.controller('WidgetAccountsCashProjectionCtrl', ($scope, $q, $filter, $timeout  , ImpacKpisSvc, ImpacWidgetsSvc, ImpacAssets, HighchartsFactory, BoltResources) ->
 
   # == Context and Helpers ========================================================================
diff --git a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.less b/src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.less
similarity index 100%
rename from src/components/widgets/accounts-cash-projection/accounts-cash-projection.less
rename to src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.less
diff --git a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.tmpl.html b/src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.tmpl.html
similarity index 100%
rename from src/components/widgets/accounts-cash-projection/accounts-cash-projection.tmpl.html
rename to src/components/widgets-layouts/custom/accounts-cash-projection/accounts-cash-projection.tmpl.html
diff --git a/src/components/widgets-settings/hist-mode/hist-mode.directive.coffee b/src/components/widgets-settings/hist-mode/hist-mode.directive.coffee
index 0afaab3b..66172f5d 100644
--- a/src/components/widgets-settings/hist-mode/hist-mode.directive.coffee
+++ b/src/components/widgets-settings/hist-mode/hist-mode.directive.coffee
@@ -1,6 +1,6 @@
 module = angular.module('impac.components.widgets-settings.hist-mode',[])
 
-module.controller('SettingHistModeCtrl', ($scope, $translate, $timeout, ImpacWidgetsSvc, ImpacTheming, ImpacUtilities) ->
+module.controller('SettingHistModeCtrl', ($scope, $translate, $timeout, ImpacWidgetsSvc, ImpacTheming) ->
 
   w = $scope.parentWidget
   w.isHistoryMode = w.metadata && w.metadata.hist_parameters && w.metadata.hist_parameters.mode == 'history'
diff --git a/src/impac-angular.module.js b/src/impac-angular.module.js
index aa127dfc..ca473f9f 100644
--- a/src/impac-angular.module.js
+++ b/src/impac-angular.module.js
@@ -35,6 +35,7 @@ angular.module('impac.components',
     'impac.components.alerts-config',
     'impac.components.widget',
     'impac.components.widgets',
+    'impac.components.widgets-layouts',
     'impac.components.widgets-settings',
     'impac.components.widgets-common',
     'impac.components.common',
@@ -48,7 +49,6 @@ angular.module('impac.components.widgets',
     'impac.components.widgets.accounts-assets-liability-summary',
     'impac.components.widgets.accounts-balance-sheet',
     'impac.components.widgets.accounts-balance',
-    'impac.components.widgets.accounts-cash-projection',
     'impac.components.widgets.accounts-cash-summary',
     'impac.components.widgets.accounts-comparison',
     'impac.components.widgets.accounts-custom-calculation',
@@ -60,7 +60,6 @@ angular.module('impac.components.widgets',
     'impac.components.widgets.accounts-assets-vs-liabilities',
     'impac.components.widgets.accounts-detailed-classifications',
     'impac.components.widgets.accounts-ratios',
-    'impac.components.widgets.accounts-cash-balance',
     'impac.components.widgets.accounts-live-balance',
     'impac.components.widgets.hr-employee-details',
     'impac.components.widgets.hr-employees-list',
@@ -97,6 +96,12 @@ angular.module('impac.components.widgets',
     'impac.components.widgets.sales-new-vs-existing-customers'
   ]
 );
+angular.module('impac.components.widgets-layouts',
+  [
+    'impac.components.widgets-layouts.accounts-cash-balance',
+    'impac.components.widgets-layouts.accounts-cash-projection'
+  ]
+);
 angular.module('impac.components.widgets-settings',
   [
     'impac.components.widgets-settings.account',
@@ -165,6 +170,7 @@ angular.module('impac.services',
     'impac.services.dashboards',
     'impac.services.dashboard-templates',
     'impac.services.widgets',
+    'impac.services.widgets-templates',
     'impac.services.developer',
     'impac.services.pusher',
     'impac.services.alerts',
diff --git a/src/services/dashboards/dashboards.svc.coffee b/src/services/dashboards/dashboards.svc.coffee
index e8703b24..56baf51f 100644
--- a/src/services/dashboards/dashboards.svc.coffee
+++ b/src/services/dashboards/dashboards.svc.coffee
@@ -1,6 +1,6 @@
 angular
   .module('impac.services.dashboards', [])
-  .service 'ImpacDashboardsSvc', ($q, $http, $log, $timeout, ImpacMainSvc, ImpacRoutes, ImpacTheming, ImpacDeveloper, ImpacUtilities) ->
+  .service 'ImpacDashboardsSvc', ($q, $http, $log, $timeout, ImpacMainSvc, ImpacRoutes, ImpacTheming, ImpacDeveloper, ImpacWidgetsTemplates) ->
     #====================================
     # Initialization and getters
     #====================================
@@ -241,15 +241,17 @@ angular
 
     # Remove blacklisted templates, authorize whitelisted ones
     isTemplateAllowed = (template) ->
-      # Directly returns false if the template is not defined in the library
-      return false unless ImpacUtilities.fetchWidgetTemplatePath(template)
-
       settings = ImpacTheming.get().widgetSelectorConfig
-      templateUid = ImpacUtilities.fetchWidgetCssClass(template)
+      templateUid = ImpacWidgetsTemplates.filename(template)
 
-      if b_path = template.metadata && template.metadata.bolt_path
+      if b_path = _.get(template, 'metadata.bolt_path')
         bolt = _.find ImpacRoutes.bolts(), (bolt) -> bolt.path == b_path
         templateUid = "#{bolt.provider}/#{bolt.name}/#{template.endpoint}"
+      else
+        # For legacy widgets..
+        # Directly returns false if the template is not defined in the library
+        return false unless ImpacWidgetsTemplates.templatePath(template)
+
 
       if !_.isEmpty(settings.whitelist)
         _.includes(settings.whitelist, templateUid)
diff --git a/src/services/utilities/utilities.svc.coffee b/src/services/utilities/utilities.svc.coffee
index 8d7bb079..aae24e3f 100644
--- a/src/services/utilities/utilities.svc.coffee
+++ b/src/services/utilities/utilities.svc.coffee
@@ -145,31 +145,6 @@ angular
 
       return messages
 
-    # Retrieves the widget content css class name based on metadata or endpoint
-    @fetchWidgetCssClass = (widget) ->
-      # 'accounts/accounting_values/ebitda' => ['accounts','accounting_values']
-      templateNameArray =
-        if widget.metadata && widget.metadata.template
-          widget.metadata.template.split('/').slice(0,2)
-
-        else if widget.endpoint && widget.metadata && widget.metadata.bolt_path
-          bolt = _.find ImpacRoutes.bolts(), (bolt) -> bolt.path == widget.metadata.bolt_path
-          bolt && [bolt.category, widget.endpoint]
-
-        else if widget.endpoint
-          widget.endpoint.split('/').slice(0,2)
-
-      return false unless templateNameArray?
-
-      # ['accounts','accounting_values'] => 'accounts-accounting-values'
-      return templateNameArray.join('-').replace(/_/g, '-')
-
-    # Retrieves the HTML template path based on metadata or endpoint (only if the template exists)
-    @fetchWidgetTemplatePath = (widget) ->
-      return false unless cssClass = _self.fetchWidgetCssClass(widget)
-      templatePath = "widgets/#{cssClass}.tmpl.html"
-      return ($templateCache.get(templatePath) && templatePath)
-
     # Returns a random number between min (inclusive) and max (exclusive)
     @getRandomInteger = (min, max)->
       Math.random() * (max - min) + min
diff --git a/src/services/widgets-templates/widgets-templates.svc.coffee b/src/services/widgets-templates/widgets-templates.svc.coffee
new file mode 100644
index 00000000..143ea7b7
--- /dev/null
+++ b/src/services/widgets-templates/widgets-templates.svc.coffee
@@ -0,0 +1,52 @@
+# Get dynamic file paths & filenames from widget data.
+angular
+  .module('impac.services.widgets-templates', [])
+  .service('ImpacWidgetsTemplates', ($templateCache, ImpacRoutes) ->
+
+    _self = @
+
+    # Outputs the filename string based on widget data in kebab-case convention.
+    @filename = (widget)->
+      # 'accounts/accounting_values/ebitda' => ['accounts','accounting_values']
+      templateNameArray =
+        if template = _.get(widget, 'metadata.template')
+          template.split('/').slice(0,2)
+
+        else if widget.endpoint && bolt_path = _.get(widget, 'metadata.bolt_path')
+          bolt = _.find ImpacRoutes.bolts(), (bolt) -> bolt.path == bolt_path
+          bolt && [bolt.category, widget.endpoint]
+
+        else if widget.endpoint
+          widget.endpoint.split('/').slice(0,2)
+
+      return false unless templateNameArray?
+
+      # ['accounts','accounting_values'] => 'accounts-accounting-values'
+      return _.kebabCase(templateNameArray)
+
+    # Retrieve the full template path for bolt & legacy widgets (only if template exists).
+    @templatePath = (widget)->
+      if _.isEmpty(widget.layouts)
+        legacyTemplatePath(widget)
+      else
+        boltTemplatePath(widget)
+
+    # Private
+
+    legacyTemplatePath = (widget) ->
+      return false unless filename = _self.filename(widget)
+      templatePath = "widgets/#{filename}.tmpl.html"
+      return ($templateCache.get(templatePath) && templatePath)
+
+    # Custom templates live in widgets-layouts/custom dir, though gulp omits nested
+    # structures from the templateCachekey for brevity.
+    boltTemplatePath = (widget)->
+      for layout in widget.layouts
+        customPath = "widgets-layouts/#{_self.filename(widget)}.tmpl.html"
+        return customPath if $templateCache.get(customPath)
+        path = "widgets-layouts/#{_.kebabCase(layout)}.tmpl.html"
+        return path if $templateCache.get(path)
+      false
+
+    return
+  )

From adc2ba455c989e3116697adee7c3fd778ef36261 Mon Sep 17 00:00:00 2001
From: Xaun Lopez <xaunlopez@gmail.com>
Date: Mon, 5 Mar 2018 16:44:09 +0000
Subject: [PATCH 2/6] Update Changelog for IMPAC-793

---
 Changelog.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Changelog.md b/Changelog.md
index 65d88647..db7be226 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -3,6 +3,7 @@
 ### v1.8.0 | 2018 - Week 10
 
 #### Adds
+- [IMPAC-793] Load dynamic generic layout templates for Bolt widgets
 
 #### Fixes
 

From c50e8c599c1a4d9e8672575db3288afe5254d55c Mon Sep 17 00:00:00 2001
From: Xaun Lopez <xaunlopez@gmail.com>
Date: Wed, 7 Mar 2018 17:44:38 +0000
Subject: [PATCH 3/6] [IMPAC-791] Add widget-layouts/table

---
 Changelog.md                                  |   1 +
 .../table/table.directive.coffee              | 110 ++++++++++++++++++
 .../widgets-layouts/table/table.less          |  31 +++++
 .../widgets-layouts/table/table.tmpl.html     |  74 ++++++++++++
 src/impac-angular.module.js                   |   1 +
 5 files changed, 217 insertions(+)
 create mode 100644 src/components/widgets-layouts/table/table.directive.coffee
 create mode 100644 src/components/widgets-layouts/table/table.less
 create mode 100644 src/components/widgets-layouts/table/table.tmpl.html

diff --git a/Changelog.md b/Changelog.md
index db7be226..832eb84f 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -4,6 +4,7 @@
 
 #### Adds
 - [IMPAC-793] Load dynamic generic layout templates for Bolt widgets
+- [IMPAC-791] Add generic table layout template
 
 #### Fixes
 
diff --git a/src/components/widgets-layouts/table/table.directive.coffee b/src/components/widgets-layouts/table/table.directive.coffee
new file mode 100644
index 00000000..88285f8c
--- /dev/null
+++ b/src/components/widgets-layouts/table/table.directive.coffee
@@ -0,0 +1,110 @@
+#
+# Component generated by Impac! Widget Generator!
+#
+module = angular.module('impac.components.widgets-layouts.table', [])
+module.controller('WidgetTableCtrl', ($scope, $q, $filter, ImpacWidgetsSvc) ->
+
+  w = $scope.widget
+
+  # Define settings
+  # --------------------------------------
+  $scope.orgDeferred = $q.defer();
+
+  settingsPromises = [
+    $scope.orgDeferred.promise,
+  ]
+
+  # Widget specific methods
+  # --------------------------------------
+  w.initContext = ->
+    $scope.table = _.get(w, 'content.table', {})
+    return if _.isEmpty($scope.table.rows)
+    $scope.currency = _.get(w, 'metadata.currency')
+    $scope.unCollapsed = _.get(w, 'metadata.unCollapsed') || []
+    $scope.ascending = true
+    $scope.sortedColumn = $scope.table.headers.cells[0]
+    $scope.colSize = $scope.table.headers.cells.length
+    $scope.colWidth = "#{100 / $scope.colSize}%"
+    return
+
+  $scope.cellValue = (v)->
+    if _.isNumber(v) then $filter('mnoCurrency')(v, $scope.currency) else v
+
+  $scope.toggleCollapsed = (table, $event) ->
+    $event.stopPropagation()
+    id = table.headers.id
+    return unless id?
+    if _.find($scope.unCollapsed, ((name) -> id == name))
+      $scope.unCollapsed = _.reject($scope.unCollapsed, (name) -> name == id)
+    else
+      $scope.unCollapsed.push(id)
+    ImpacWidgetsSvc.updateWidgetSettings(w,false)
+
+  $scope.isCollapsed = (table) ->
+    id = table.headers.id
+    return unless id?
+    if _.find($scope.unCollapsed, ((name) -> id == name))
+      return false
+    else
+      return true
+
+  $scope.sort = (col, $index) ->
+    if $scope.sortedColumn == col
+      $scope.ascending = !$scope.ascending
+    else
+      $scope.ascending = true
+      $scope.sortedColumn = col
+    sortData($scope.table.rows, $index)
+
+  sortData = (rows, colIndex)->
+    rows.single = sortSingleRows(rows.single, colIndex) if rows.single
+    if rows.grouped
+      for table in rows.grouped
+        sortData(table.rows, colIndex)
+    return
+
+  sortSingleRows = (rows, colIndex) ->
+    _.sortByOrder(rows, ((r)-> r.cells[colIndex]), [$scope.ascending])
+
+  # Mini-settings objects
+  # handles the saving of collapsed / uncollapsed list groups.
+  # --------------------------------------
+  unCollapsedSetting = {}
+  unCollapsedSetting.initialized = false
+
+  unCollapsedSetting.initialize = ->
+    unCollapsedSetting.initialized = true
+
+  unCollapsedSetting.toMetadata = ->
+    {unCollapsed: $scope.unCollapsed}
+
+  w.settings.push(unCollapsedSetting)
+
+  # Widget is ready: can trigger the "wait for settings to be ready"
+  # --------------------------------------
+  $scope.widgetDeferred.resolve(settingsPromises)
+)
+module.directive('widgetTable', ->
+  return {
+    restrict: 'A',
+    controller: 'WidgetTableCtrl'
+  }
+)
+module.directive('indentTableRow', ->
+  return {
+    restrict: 'A',
+    link: (_$scope, $element) ->
+      if $element.is(':first-child')
+        # Get list of ancestor tables up until the root table
+        ancestorTables = $element.closest('table').parentsUntil('#table-layout', 'table')
+        # Indent <th> equal to the length of ancestors
+        nestLevel = ancestorTables.get().length
+        # Indent <td> equal to the length of ancestors plus 1
+        nestLevel++ if $element.is('td')
+
+        $element.css({ 'padding-left': "#{nestLevel * 20}px" })
+
+      return
+  }
+)
+
diff --git a/src/components/widgets-layouts/table/table.less b/src/components/widgets-layouts/table/table.less
new file mode 100644
index 00000000..f2e0c1ef
--- /dev/null
+++ b/src/components/widgets-layouts/table/table.less
@@ -0,0 +1,31 @@
+.analytics .widget-item .content .table-layout {
+
+  table {
+    width: 100%;
+    max-width: 100%;
+
+    th,
+    td:not(.nested-table) {
+      color: @mediumblue;
+      border-bottom: solid 1px @lightgray;
+      padding: 5px 0;
+    }
+
+    th[ng-click] {
+      cursor: pointer;
+    }
+  }
+
+  #table-layout {
+    & > thead tr:first-child {
+      .font(12px,500,@impac-widget-text-color-medium);
+      text-transform: uppercase;
+      border-bottom: 2px solid @lightgray;
+      padding: 5px 0;
+    }
+
+    .nested-table {
+      i.fa { padding-right: 5px; }
+    }
+  }
+}
diff --git a/src/components/widgets-layouts/table/table.tmpl.html b/src/components/widgets-layouts/table/table.tmpl.html
new file mode 100644
index 00000000..f1e5a16c
--- /dev/null
+++ b/src/components/widgets-layouts/table/table.tmpl.html
@@ -0,0 +1,74 @@
+<!--
+  Component generated by Impac! Widget Generator!
+-->
+<div widget-table class="table-layout">
+  <!-- Settings Panel -->
+  <div ng-show="widget.isEditMode" class="edit">
+    <h4>Widget settings</h4>
+
+    <div setting-organizations parent-widget="widget" class="part" deferred="::orgDeferred" />
+
+    <!-- Buttons displayed on the lower  -->
+    <div class="bottom-buttons" align="right">
+      <button class="btn btn-default" ng-click="initSettings()">Cancel</button>
+      <button class="btn btn-warning" ng-click="updateSettings()">Save</button>
+    </div>
+  </div>
+
+  <!-- Content Panel -->
+  <div ng-hide="widget.isEditMode">
+    <div ng-hide="widget.demoData" class="widget-lines-container">
+      <!-- Widget Header -->
+      <div class="row header widget-line">
+        <div class="col-md-6 text-left"></div>
+        <div class="col-md-6 text-right">
+          <p>dates..</p>
+          <!-- <div common-time-period-info context="timePeriodInfoParams" /> -->
+        </div>
+      </div>
+
+      <!-- Table Layout -->
+      <table id="table-layout">
+        <thead>
+          <tr>
+            <th width="{{colWidth}}" ng-repeat="cell in table.headers.cells" ng-click="sort(cell, $index)">
+              <span ng-bind="cell"></span>
+              <i ng-show="sortedColumn == cell" class="fa" ng-class="ascending ? 'fa-sort-alpha-asc' : 'fa-sort-alpha-desc'" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="groupedTable in table.rows.grouped">
+            <td class="nested-table" colspan="{{colSize}}" ng-include="'grouped-table.tmpl.html'"></td>
+          </tr>
+          <tr ng-repeat="row in table.rows.single">
+            <td ng-repeat="cell in row.cells" ng-bind="cellValue(cell)"></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div ng-show="widget.demoData" common-data-not-found />
+  </div>
+</div>
+
+<script type="text/ng-template" id="grouped-table.tmpl.html">
+  <table>
+    <thead>
+      <tr>
+        <th width="{{colWidth}}" ng-repeat="headerCell in groupedTable.headers.cells" ng-click="toggleCollapsed(groupedTable, $event)" indent-table-row>
+          <i class="fa" ng-if="$first" ng-class="isCollapsed(groupedTable) ? 'fa-plus-square-o' : 'fa-minus-square-o'" />
+          <strong ng-bind="headerCell"></strong>
+        </th>
+      </tr>
+    </thead>
+    <tbody uib-collapse="isCollapsed(groupedTable)">
+      <tr ng-repeat="groupedTable in groupedTable.rows.grouped">
+        <td class="nested-table" colspan="{{colSize}}" ng-include="'grouped-table.tmpl.html'"></td>
+      </tr>
+      <tr ng-repeat="row in groupedTable.rows.single">
+        <td ng-repeat="cell in row.cells" indent-table-row ng-bind="cellValue(cell)"></td>
+      </tr>
+    </tbody>
+  </table>
+</script>
diff --git a/src/impac-angular.module.js b/src/impac-angular.module.js
index ca473f9f..7b1d243c 100644
--- a/src/impac-angular.module.js
+++ b/src/impac-angular.module.js
@@ -98,6 +98,7 @@ angular.module('impac.components.widgets',
 );
 angular.module('impac.components.widgets-layouts',
   [
+    'impac.components.widgets-layouts.table',
     'impac.components.widgets-layouts.accounts-cash-balance',
     'impac.components.widgets-layouts.accounts-cash-projection'
   ]

From 923097400cfa392258ba6a4212930c9d6661f98d Mon Sep 17 00:00:00 2001
From: Xaun Lopez <xaunlopez@gmail.com>
Date: Thu, 15 Mar 2018 11:44:34 +0000
Subject: [PATCH 4/6] [IMPAC-791] Add time-period-info to table layout

---
 .../widgets-layouts/table/table.directive.coffee         | 9 +++++++++
 src/components/widgets-layouts/table/table.tmpl.html     | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets-layouts/table/table.directive.coffee b/src/components/widgets-layouts/table/table.directive.coffee
index 88285f8c..17a0e00f 100644
--- a/src/components/widgets-layouts/table/table.directive.coffee
+++ b/src/components/widgets-layouts/table/table.directive.coffee
@@ -9,17 +9,26 @@ module.controller('WidgetTableCtrl', ($scope, $q, $filter, ImpacWidgetsSvc) ->
   # Define settings
   # --------------------------------------
   $scope.orgDeferred = $q.defer();
+  $scope.timePeriodDeferred = $q.defer()
 
   settingsPromises = [
     $scope.orgDeferred.promise,
+    $scope.timePeriodDeferred.promise
   ]
 
+  # Configure the commonTimePeriodInfo directive
+  $scope.timePeriodInfoParams = {
+    accountingBehaviour: 'pnl'
+    histParams: {}
+  }
+
   # Widget specific methods
   # --------------------------------------
   w.initContext = ->
     $scope.table = _.get(w, 'content.table', {})
     return if _.isEmpty($scope.table.rows)
     $scope.currency = _.get(w, 'metadata.currency')
+    $scope.timePeriodInfoParams.histParams = _.get(w, 'metadata.hist_parameters', {})
     $scope.unCollapsed = _.get(w, 'metadata.unCollapsed') || []
     $scope.ascending = true
     $scope.sortedColumn = $scope.table.headers.cells[0]
diff --git a/src/components/widgets-layouts/table/table.tmpl.html b/src/components/widgets-layouts/table/table.tmpl.html
index f1e5a16c..3df1ba6c 100644
--- a/src/components/widgets-layouts/table/table.tmpl.html
+++ b/src/components/widgets-layouts/table/table.tmpl.html
@@ -7,6 +7,7 @@
     <h4>Widget settings</h4>
 
     <div setting-organizations parent-widget="widget" class="part" deferred="::orgDeferred" />
+    <div setting-time-period parent-widget="widget" class="part" deferred="::timePeriodDeferred" hist-params="widget.metadata.hist_parameters" />
 
     <!-- Buttons displayed on the lower  -->
     <div class="bottom-buttons" align="right">
@@ -22,8 +23,7 @@ <h4>Widget settings</h4>
       <div class="row header widget-line">
         <div class="col-md-6 text-left"></div>
         <div class="col-md-6 text-right">
-          <p>dates..</p>
-          <!-- <div common-time-period-info context="timePeriodInfoParams" /> -->
+          <div common-time-period-info context="timePeriodInfoParams" />
         </div>
       </div>
 

From 595d9aacf9482148660573b743c63be50abd1dc9 Mon Sep 17 00:00:00 2001
From: Xaun Lopez <xaunlopez@gmail.com>
Date: Wed, 21 Mar 2018 09:54:45 +0000
Subject: [PATCH 5/6] [IMPAC-791] Add mnoCurrency filter to header values

---
 src/components/widgets-layouts/table/table.directive.coffee | 3 ++-
 src/components/widgets-layouts/table/table.tmpl.html        | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/widgets-layouts/table/table.directive.coffee b/src/components/widgets-layouts/table/table.directive.coffee
index 17a0e00f..15f2e920 100644
--- a/src/components/widgets-layouts/table/table.directive.coffee
+++ b/src/components/widgets-layouts/table/table.directive.coffee
@@ -37,7 +37,8 @@ module.controller('WidgetTableCtrl', ($scope, $q, $filter, ImpacWidgetsSvc) ->
     return
 
   $scope.cellValue = (v)->
-    if _.isNumber(v) then $filter('mnoCurrency')(v, $scope.currency) else v
+    num = parseFloat(v)
+    if _.isNumber(num) && !_.isNaN(num) then $filter('mnoCurrency')(v, $scope.currency) else v
 
   $scope.toggleCollapsed = (table, $event) ->
     $event.stopPropagation()
diff --git a/src/components/widgets-layouts/table/table.tmpl.html b/src/components/widgets-layouts/table/table.tmpl.html
index 3df1ba6c..15d4a904 100644
--- a/src/components/widgets-layouts/table/table.tmpl.html
+++ b/src/components/widgets-layouts/table/table.tmpl.html
@@ -32,7 +32,7 @@ <h4>Widget settings</h4>
         <thead>
           <tr>
             <th width="{{colWidth}}" ng-repeat="cell in table.headers.cells" ng-click="sort(cell, $index)">
-              <span ng-bind="cell"></span>
+              <span ng-bind="cellValue(cell)"></span>
               <i ng-show="sortedColumn == cell" class="fa" ng-class="ascending ? 'fa-sort-alpha-asc' : 'fa-sort-alpha-desc'" />
             </th>
           </tr>
@@ -56,9 +56,9 @@ <h4>Widget settings</h4>
   <table>
     <thead>
       <tr>
-        <th width="{{colWidth}}" ng-repeat="headerCell in groupedTable.headers.cells" ng-click="toggleCollapsed(groupedTable, $event)" indent-table-row>
+        <th width="{{colWidth}}" ng-repeat="cell in groupedTable.headers.cells" ng-click="toggleCollapsed(groupedTable, $event)" indent-table-row>
           <i class="fa" ng-if="$first" ng-class="isCollapsed(groupedTable) ? 'fa-plus-square-o' : 'fa-minus-square-o'" />
-          <strong ng-bind="headerCell"></strong>
+          <strong ng-bind="cellValue(cell)"></strong>
         </th>
       </tr>
     </thead>

From 418178961454884f54dc4b01158dc46ec7073a40 Mon Sep 17 00:00:00 2001
From: Xaun Lopez <xaunlopez@gmail.com>
Date: Wed, 21 Mar 2018 09:55:12 +0000
Subject: [PATCH 6/6] [IMPAC-791] Text align right for not first-child cols

---
 src/components/widgets-layouts/table/table.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/widgets-layouts/table/table.less b/src/components/widgets-layouts/table/table.less
index f2e0c1ef..5500d447 100644
--- a/src/components/widgets-layouts/table/table.less
+++ b/src/components/widgets-layouts/table/table.less
@@ -9,6 +9,10 @@
       color: @mediumblue;
       border-bottom: solid 1px @lightgray;
       padding: 5px 0;
+
+      &:not(:first-child) {
+        text-align: right;
+      }
     }
 
     th[ng-click] {