Merge pull request #1 from C2FO/c2fo

C2fo

addon/components/models-table-server-paginated.js

@@ -134,6 +134,48 @@ export default ModelsTable.extend({
     return Math.min(pageMax, itemsCount);
   }),
 
+  _buildColumnMap() {
+    const attrs = this.get('data.type.attributes');
+    let columnMap = {};
+
+    if (Ember.typeOf(attrs) !== 'undefined') {
+      attrs.forEach(attr => {
+        columnMap[attr.name] = this._buildColumn(attr);
+      });
+    }
+
+    return columnMap;
+  },
+
+  /**
+   * Builds a column configuration from a model's attributes.
+   * Used to create configurations for ```this.defaultColumns``` and overrides the default method
+   * to enable configuration of a model-table's propertyName through model.attr options.
+   *
+   * @param modelAttr
+   * @returns {{propertyName}}
+   * @private
+   */
+  _buildColumn(modelAttr) {
+    const data = this.get('data');
+    const options = Ember.get(modelAttr, 'options');
+    let colOptions = {
+      propertyName: modelAttr.name
+    };
+
+    if (data.get(`query.${modelAttr.name}`)) {
+      colOptions.filterString = data.get(`query.${modelAttr.name}`);
+    }
+
+    if (modelAttr && options) {
+      if (options.cellTemplate) {
+        colOptions.template = cellTemplate;
+      }
+    }
+
+    return colOptions;
+  },
+
   /**
    * This function actually loads the data from the server.
    * It takes the store, modelName and query from the passed in data-object and adds page, sorting & filtering to it.
@@ -169,11 +211,17 @@ export default ModelsTable.extend({
     }
 
     // Add global filter
-    let globalFilter = get(this, 'filterQueryParameters.globalFilter');
+    const filterParam = get(this, 'filterQueryParameters.globalFilter');
+    let searchableItems = this.get('visibleProcessedColumns') || [];
+    if (this.get('doFilteringByHiddenColumns')) {
+      searchableItems = this.get('columns') || [];
+    }
     if (filterString) {
-      query[globalFilter] = filterString;
+      query[filterParam] = filterString;
+      query[filterParam+'Keys'] = searchableItems.map(col=>{ return col.propertyName });
     } else {
-      delete query[globalFilter];
+      delete query[filterParam];
+      delete query[filterParam+'Keys'];
     }
 
     // Add per-column filter

addon/components/models-table.js

@@ -303,7 +303,102 @@ export default Component.extend({
    * @name ModelsTable#columns
    * @default []
    */
-  columns: A([]),
+  // columns: A([]),
+
+  // defaultColumns is an array of propertyNames (string or object) where order will
+  // dictate the order displayed.  If a bad '<propertyName>' or {propertyName:'value'}
+  // is given, it is skipped and a warning will display in the browser's developer console.
+  // If no defaultColumns are given, all table columns will be shown.
+  //
+  // Examples:
+  // array of property names (['id', 'createdAt', 'moreStuff']) that each match a column.
+  // - or -
+  // array of ember-model-table "columns" (http://onechiporenko.github.io/ember-models-table/)
+  // {propertyName:'id', title: 'my cool title', template: 'component/data-table/cell-template'}}
+  defaultColumns: A([]),
+
+  // Columns is required by the ember-models-table component.  DataTable will auto create columns
+  // based on 'this.data' and the this.defaultColumns array.  If this behavior is not desired,
+  // overriding this property is allowed.
+  columns: computed('data', 'defaultColumns', {
+    get() {
+      let columns = [];
+      let usedNames = [];
+      let columnMap = this._buildColumnMap();
+      const defaultColumns = this.get('defaultColumns') || [];
+
+      defaultColumns.forEach(col => {
+        // col objects merge col and ```columnMap[col] || {}```;
+        // the object should follow ember-models-data column definition.
+        if (Ember.typeOf(col) == 'string') {
+          if (columnMap[col]) {
+            columns.push(columnMap[col]);
+            usedNames.push(col);
+          } else {
+            Ember.warn(`No propertyName found for ${col}`, false, {id: 'data-table.columns-builder'});
+          }
+        } else {
+          if (columnMap[col.propertyName]) {
+            let d = Ember.copy(columnMap[col.propertyName]);
+            columns.push(Ember.merge(d, col));
+            usedNames.push(col.propertyName);
+          } else {
+            Ember.warn(`No propertyName found for ${col.propertyName}`, false, {id: 'data-table.columns-builder'});
+          }
+        }
+      });
+
+      // remove used properties so they aren't double inserted.
+      usedNames.forEach(n => { delete columnMap[n] });
+
+      // initialColumns should be a list of strings that correspond to propertyNames.
+      Object.keys(columnMap).forEach(col => {
+        if (defaultColumns.length > 0) {
+          columnMap[col].isHidden = true;
+        }
+        columns.push(columnMap[col]);
+      });
+
+      return A(columns);
+    }
+  }),
+
+  _buildColumnMap(){
+    let columnMap = {};
+    const data = this.get('data') || [];
+    if (!Ember.isEmpty(data)) {
+      Object.keys(this.get('data')[0]).forEach(attr => {
+        columnMap[attr] = this._buildColumn(attr);
+      });
+    }
+    return columnMap;
+  },
+
+  /**
+   * takes a model at
+   * @param attr
+   * @returns {{propertyName}}
+   * @private
+   */
+  _buildColumn(attr) {
+    const data = this.get('data');
+    const options = Ember.get(attr, 'options');
+    let colOptions = {
+      propertyName: attr
+    };
+
+    if (data.get(`query.${attr.name}`)) {
+      colOptions.filterString = data.get(`query.${attr.name}`);
+    }
+
+    if (attr && options) {
+      if (options.template) {
+        colOptions.template = template;
+      }
+    }
+
+    return colOptions;
+  },
 
   /**
    * @type {Ember.Object[]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-models-table",
-  "version": "1.11.0-beta.2",
+  "version": "100.0.1",
   "description": "Table with pagination, sorting and filtering",
   "keywords": [
     "ember-addon"

tests/dummy/app/router.js

@@ -23,6 +23,7 @@ export default Router.map(function() {
     this.route('add-remove-column');
     this.route('grouped-headers');
     this.route('server-table');
+    this.route('server-table-default-columns');
     this.route('route-cells');
     this.route('expandable-rows');
     this.route('display-data-changed-action');

tests/dummy/app/routes/examples/server-table-default-columns.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+import generateContent from '../../utils/c';
+
+export default Ember.Route.extend({
+
+  model() {
+    return this.get('store').query('user', {});
+  },
+
+  setupController(controller) {
+
+    controller.set('otherData', generateContent(10));
+    controller.set('defaultColumns', [
+        //id
+        'index',
+        'firstName',
+        {propertyName: 'lastName', title: 'Family Name', className: 'text-success'},
+    ]);
+
+    return this._super(...arguments);
+  }
+
+});

tests/dummy/app/templates/examples/server-table-default-columns.hbs

@@ -0,0 +1,24 @@
+<div class="row">
+  <div class="col-md-12">
+    <h4>`models-table-server-paginated` example</h4>
+    <p>Component is extended into the `my-server-table` (see <code>tests/dummy/app/components/my-server-table.js</code>)</p>
+    <p>Another way to setup your table is to provide the default</p>
+  </div>
+  <div class="col-md-8">
+    {{! models-table data=otherData defaultColumns=defaultColumns}}
+    {{my-server-table data=model defaultColumns=defaultColumns}}
+  </div>
+  <div class="col-md-4">
+    <p>Component usage:</p>
+    <pre><code class="handlebars">\{{my-server-table
+data=model defaultColumns=defaultColumns}}</code></pre>
+    <p><code>defaultPropertyNames</code>:</p>
+    <pre><code class="javascript">{{to-string this 'defaultColumns'}}</code></pre>
+
+    <p><code>model</code>:</p>
+    <pre><code class="javascript">{{to-string this 'model.toJSON()'}}</code></pre>
+
+    <p><code>data</code>:</p>
+    <pre><code class="javascript">{{to-string this 'otherData'}}</code></pre>
+  </div>
+</div>