Merge pull request #114 from MyPureCloud/custom-components

Custom components

Author: michaelmcauley

README.md

@@ -289,6 +289,33 @@ Alternatively, you skip calling `this.bubbleAction` in the cell component's Java
 
 This will directly bubble the action with name `myActionName` to the parent of the `fixtable-grid` component, passing along any additional arguments that follow the action name.
 
+### Additional Custom Components
+
+#### Footer Component
+
+You can supply your own `footerComponent` which will be rendered in place of the default `fixtable-footer` component. The following properties will be made available to your custom footer:
+
+* `currentPage` - integer value of the currently selected page (starting at 1)
+* `totalRows` - integer value of the total number of rows; if you're using server-side paging, this will be equal to `totalRowsOnServer`, otherwise it's the number of rows in the current filtered content array
+* `totalPages` - integer value of the number of available pages given the current `pageSize` and `totalRows`
+* `selectedDataRows` - array of the currently selected row objects
+* `pageSize` - integer value of the number of items in each page
+* `pageSizeOptions` - array of integers which can optionally be used to provide the user an affordance for changing `pageSize`
+* `isLoading` - boolean value to indicate when a new page is being loaded (it's up to your `onReloadContent` method to update this value)
+* `goToNextPage` - action which your component may invoke to increment the currentPage
+* `goToPreviousPage` - action which your component may invoke to decrement the currentPage
+* `bubbleAction` - action which your component may invoke to bubble actions up to the consumer of the fixtable-grid (this works the same as custom cell components; see [Bubbling Actions from Custom Cell components](#bubbling-actions-from-custom-cell-components) above)
+
+#### Empty State Component
+
+You can supply your own `emptyStateComponent` which will be rendered in place of the default `fixtable-empty-state` component when the content array is empty. You can also supply an object using the `emptyStateComponentValues` property with dynamic values to be passed along to your component as `values`.
+
+The default empty state component simply shows a message, centered vertically and horizontally within Fixtable. This message defaults to "No data available", but you can override it by using the `emptyStateComponentValues` property to set an object with a `nullMessage` property. For example:
+
+```
+{{fixtable-grid emptyStateComponentValues={nullMessage: "Nothing to see here!"}}}
+```
+
 ### Filtering
 
 Fixtable supports filtering the displayed rows, either by search text or by selected option. To set this up, add a filter property to the column definition.
@@ -609,6 +636,10 @@ Because "expanded" rows are actually rendered as two table rows, Fixtable takes
 * `hover` - present on both row elements when the user's cursor is hovering over _either_ row element (you should use this class rather than relying on the `:hover` pseudo-class if you want to use hover styles with expanded rows)
 * `active` - present on both row elements if the row is selected (see [Row Selection](#row-selection) above)
 
+### Debugging
+
+Fixtable-Ember utilizes the core [Fixtable](https://github.com/MyPureCloud/fixtable-core) library to handle the low-level DOM manipulation required for the fixed-header effect, ensuring Fixtable is styled to match your application's tables, etc. If you notice rendering issues, they're likely to originate in this core library and not Fixtable-Ember itself. If you set the `debugMode` property to `true` on your `fixtable-grid` component, it will enable debug logs on its internal `Fixtable` object which may be helpful in diagnosing issues.
+
 ## Development / Contributing
 
 ### Installation

addon/components/fixtable-empty-state.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import layout from '../templates/components/fixtable-empty-state';
+
+export default Ember.Component.extend({
+  layout
+});

addon/components/fixtable-footer.js

@@ -3,7 +3,6 @@ import layout from '../templates/components/fixtable-footer';
 
 export default Ember.Component.extend({
   layout,
-  classNames: ['fixtable-footer'],
   currentPage: null,
   totalPages: null,
   pageSize: null,

addon/components/fixtable-grid.js

@@ -16,7 +16,7 @@ export default Ember.Component.extend({
   layout: layout,
   fixtable: null,
   columnsByKey: null,
-  nullMessage: "No data available",
+  debugMode: false,
 
   // paging
   clientPaging: false,
@@ -42,6 +42,18 @@ export default Ember.Component.extend({
   selectedRowMap: null, // maps row indices to selected state
   suppressSelectToggle: false,
 
+  // custom components
+  emptyStateComponent: 'fixtable-empty-state',
+  emptyStateComponentValues: {nullMessage: 'No data available'},
+  footerComponent: 'fixtable-footer',
+
+  // backwards-compatibility for old nullMessage option
+  // TODO: remove this in fixtable-ember v4.0.0
+  nullMessageChanged: Ember.observer('nullMessage', function () {
+    Ember.Logger.warn('Deprecation warning: use emptyStateComponentValues instead of nullMessage. Support will be dropped in fixtable-ember v4.x. See https://github.com/MyPureCloud/fixtable-ember#empty-state-component for more info.');
+    this.set('emptyStateComponentValues.nullMessage', this.get('nullMessage'));
+  }),
+
   externalFilters: null,
 
   currentPage: defaultPage,
@@ -339,9 +351,12 @@ export default Ember.Component.extend({
   },
 
   notifyRowSelectionChanged(selectedDataRows) {
+    this.set('selectedDataRows', selectedDataRows.map((row) => {
+      return row.object;
+    }));
     let handler = this.get('onSelectionChanged');
     if (typeof handler === 'function') {
-      handler(selectedDataRows.map((row) => {return row.object;}));
+      handler(this.get('selectedDataRows'));
     }
   },
 
@@ -438,7 +453,7 @@ export default Ember.Component.extend({
 
   initializeFixtable() {
     // initialize the Fixtable script
-    let fixtable = new Fixtable(this.$('.fixtable')[0]);
+    let fixtable = new Fixtable(this.$('.fixtable')[0], this.get('debugMode'));
 
     // account for the row selection checkbox column, if present
     let indexOffset = 1;

addon/templates/components/fixtable-empty-state.hbs

@@ -0,0 +1,3 @@
+<h4>
+    {{values.nullMessage}}
+</h4>

addon/templates/components/fixtable-grid.hbs

@@ -108,14 +108,16 @@
         <span class="sr-only">Loading...</span>
       {{else}}
         {{#unless visibleContent.length}}
-            <h4>{{nullMessage}}</h4>
+            {{component emptyStateComponent values=emptyStateComponentValues}}
         {{/unless}}
       {{/if}}
     </div>
   </div>
-  {{#if showPaginationFooter}}
-    {{fixtable-footer
-      currentPage=currentPage totalPages=totalPages pageSize=pageSize pageSizeOptions=pageSizeOptions
+  <div class="fixtable-footer {{unless showPaginationFooter 'fixtable-footer-hidden'}}">
+    {{component footerComponent
+      currentPage=currentPage totalPages=totalPages totalRows=totalRows
+      isLoading=isLoading pageSize=pageSize pageSizeOptions=pageSizeOptions
+      selectedDataRows=selectedDataRows bubbleAction=(action sendAction)
       goToNextPage="goToNextPage" goToPreviousPage="goToPreviousPage"}}
-  {{/if}}
+  </div>
 </div>

app/components/fixtable-empty-state.js

@@ -0,0 +1 @@
+export { default } from 'fixtable-ember/components/fixtable-empty-state';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fixtable-ember",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Ember wrapper for the Fixtable table library",
   "directories": {
     "doc": "doc",

tests/integration/components/fixtable-footer-test.js

@@ -14,7 +14,6 @@ test('it renders', function(assert) {
   this.set('pageSize', 25);
   this.set('pageSizeOptions', [25, 50, 100]);
 
-  this.render(hbs`{{fixtable-footer currentPage=currentPage totalPages=totalPages pageSize=pageSize pageSizeOptions=pageSizeOptions}}`);
-
+  this.render(hbs`{{fixtable-footer class='fixtable-footer' currentPage=currentPage totalPages=totalPages pageSize=pageSize pageSizeOptions=pageSizeOptions}}`);
   assert.ok(this.$('.fixtable-footer').length); // there is an element with the fixtable-footer class
 });

vendor/styles/fixtable-ember.css

@@ -29,6 +29,10 @@
   background-color: white;
 }
 
+.fixtable .fixtable-footer-hidden {
+    display: none;
+}
+
 .fixtable .fixtable-footer {
   padding: 5px;
 }