[WIP] flexbox tables with dummy app to play with

addon/components/upf-checkbox.js

@@ -1,6 +1,11 @@
 import Component from '@ember/component';
+import { equal } from '@ember/object/computed';
 
 export default Component.extend({
   classNames: ['upf-checkbox'],
-  classNameBindings: ['hasLabel:upf-checkbox--has-label']
+  classNameBindings: [
+    'hasLabel:upf-checkbox--has-label', 'sizeSmall:upf-checkbox--sm'
+  ],
+
+  sizeSmall: equal('size', 'sm')
 });

addon/components/upf-table/cell.js

@@ -0,0 +1,107 @@
+import Component from '@ember/component';
+import { computed, defineProperty, observer } from '@ember/object';
+import { or } from '@ember/object/computed';
+import { capitalize } from '@ember/string';
+import { isEmpty } from '@ember/utils';
+
+const AVAILABLE_RENDERERS = [
+  'text', 'numeric', 'money', 'date'
+];
+
+export default Component.extend({
+  classNames: ['upf-hypertable__cell'],
+  classNameBindings: [
+    'header:upf-hypertable__cell--header',
+    'item.selected:upf-hypertable__cell--selected',
+    'loading:upf-hypertable__cell--loading',
+    '_sorted:upf-hypertable__cell--sorted',
+    '_filtered:upf-hypertable__cell--filtered',
+    'isNumeric:upf-hypertable__cell--numeric',
+    'isMoney:upf-hypertable__cell--numeric'
+  ],
+
+  header: false,
+  selection: false,
+  loading: false,
+
+  _sorted: false,
+  _filtered: false,
+  _showFiltersPanel: false,
+
+  _sortingIconClass: computed('_sorted', function() {
+    if (this._sorted) {
+      let [_, direction] = this.column.sortBy.split(':');
+
+      return (direction === 'asc') ? 'fa-long-arrow-up' : 'fa-long-arrow-down';
+    }
+  }),
+
+  _typeInferredRenderingComponent: computed('column.type', function() {
+    if (AVAILABLE_RENDERERS.includes(this.column.type)) {
+      return `upf-table/cell/renderers/${this.column.type}`;
+    }
+  }),
+
+  _renderingComponent: or(
+    'column.renderingComponent', '_typeInferredRenderingComponent'
+  ),
+
+  _filtersRenderingComponent: computed('column.type', function() {
+    if (AVAILABLE_RENDERERS.includes(this.column.type)) {
+      return `upf-table/cell/filters-renderers/${this.column.type}`;
+    }
+  }),
+
+  _filtersChanged: observer('column.filters.@each', function () {
+    this.set('_filtered', !isEmpty(this.column.filters));
+  }),
+
+  _tableStateListener() {
+    this.set('_sorted', !isEmpty(this.column.sortBy));
+    this.set('_filtered', !isEmpty(this.column.filters));
+  },
+
+  _filtersPanelListener() {
+    if (this.column.property !== this.manager.applyingFiltersOn) {
+      this.set('showFiltersPanel', false);
+    }
+  },
+
+  didReceiveAttrs() {
+    if (this.column) {
+      AVAILABLE_RENDERERS.forEach((rendererType) => {
+        defineProperty(
+          this,
+          `is${capitalize(rendererType)}`,
+          computed('column.type', function() {
+            return this.column.type === rendererType;
+          })
+        );
+      });
+
+      if (this.header) {
+        this.addObserver(
+          'manager.columns.@each.sortBy',
+          this,
+          this._tableStateListener
+        );
+
+        this.addObserver(
+          'manager.applyingFiltersOn',
+          this,
+          this._filtersPanelListener
+        );
+      }
+
+      this.set('_sorted', !isEmpty(this.column.sortBy));
+      this.set('_filtered', !isEmpty(this.column.filters));
+    }
+  },
+
+  actions: {
+    toggleFiltersPanel() {
+      this.toggleProperty('showFiltersPanel');
+      this.set('manager.applyingFiltersOn', this.column.property);
+    }
+  }
+});

addon/components/upf-table/cell/filters-renderers/date.js

@@ -0,0 +1,69 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  classNames: ['available-filters'],
+
+  sortingOptions: {
+    'Oldest — Newest': 'alphanumerical:asc',
+    'Newest — Oldest': 'alphanumerical:desc'
+  },
+
+  filteringOptions: {
+    'Fixed': 'fixed',
+    'Moving': 'moving'
+  },
+
+  filterOption: 'moving', // or 'moving'
+
+  currentMovingDateOption: computed('column.filters.@each.value.alias', function() {
+    let filter = this.column.filters.find((f) => f.type === 'range');
+
+    return (filter) ? filter.value.alias : null;
+  }),
+
+  movingDateOptions: {
+    'Today': 'today',
+    'Yesterday': 'yesterday'
+  },
+
+  _buildDateRange(from) {
+    switch(from) {
+      case 'today':
+        return {
+          alias: 'today',
+          from: moment().startOf('day').format('X'),
+          to: moment().endOf('day').format('X')
+        }
+      case 'yesterday':
+        return {
+          alias: 'yesterday',
+          from: moment().subtract(1, 'day').startOf('day').format('X'),
+          to: moment().subtract(1, 'day').endOf('day').format('X')
+        }
+      default:
+        break;
+    }
+  },
+
+  actions: {
+    sortingOptionChanged(value) {
+      this.manager.updateSortBy(this.column, value);
+    },
+
+    filterOptionChanged(value) {
+      this.set('filterOption', value);
+    },
+
+    selectMovingDate(value) {
+      this.manager.addFilters(
+        this.column, 'range', this._buildDateRange(value)
+      );
+    },
+
+    // Mixin Candidate
+    clearFilters() {
+      this.manager.clearFilters(this.column);
+    }
+  }
+});

addon/components/upf-table/cell/filters-renderers/money.js

@@ -0,0 +1,16 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['available-filters'],
+
+  sortingOptions: {
+    '0 — 9': 'alphanumerical:asc',
+    '9 — 0': 'alphanumerical:desc'
+  },
+
+  actions: {
+    sortingOptionChanged(value) {
+      this.manager.updateSortBy(this.column, value);
+    }
+  }
+});

addon/components/upf-table/cell/filters-renderers/numeric.js

@@ -0,0 +1,16 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['available-filters'],
+
+  sortingOptions: {
+    '0 — 9': 'alphanumerical:asc',
+    '9 — 0': 'alphanumerical:desc'
+  },
+
+  actions: {
+    sortingOptionChanged(value) {
+      this.manager.updateSortBy(this.column, value);
+    }
+  }
+});

addon/components/upf-table/cell/filters-renderers/text.js

@@ -0,0 +1,16 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['available-filters'],
+
+  sortingOptions: {
+    'A — Z': 'alphanumerical:asc',
+    'Z — A': 'alphanumerical:desc'
+  },
+
+  actions: {
+    sortingOptionChanged(value) {
+      this.manager.updateSortBy(this.column, value);
+    }
+  }
+});

addon/components/upf-table/cell/renderers/date.js

@@ -0,0 +1,31 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { empty, or } from '@ember/object/computed';
+import { typeOf } from '@ember/utils';
+
+import moment from 'moment';
+
+export default Component.extend({
+  tagName: '',
+
+  value: computed('item', 'column.property', function() {
+    return this.item.get(this.column.property);
+  }),
+
+  emptyValue: empty('value'),
+
+  _defaultDateFormat: 'MM/DD/YYYY',
+  _dateFormat: or('column.date_format', '_defaultDateFormat'),
+
+  _formattedDate: computed('value', '_dateFormat', function() {
+    let _date;
+
+    if (typeOf(this.value) === 'date') {
+      _date = moment(this.value);
+    } else {
+      _date = moment.unix(this.value)
+    }
+
+    return _date.format(this._dateFormat);
+  })
+});

addon/components/upf-table/cell/renderers/money.js

@@ -0,0 +1,23 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { empty } from '@ember/object/computed';
+
+export default Component.extend({
+  tagName: '',
+
+  currency: computed('column', 'column.currency_key', function() {
+    if (this.column && !this.column.currency_key) {
+      throw new Error(
+        '[upf-table/cell-renderers][money] You are trying to render Money without a currency'
+      );
+    }
+
+    return this.item.get(this.column.currency_key);
+  }),
+
+  amount: computed('item', 'column.property', function() {
+    return this.item.get(this.column.property);
+  }),
+
+  emptyAmount: empty('amount')
+});

addon/components/upf-table/cell/renderers/numeric.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { empty } from '@ember/object/computed';
+
+export default Component.extend({
+  tagName: '',
+
+  value: computed('item', 'column.property', function() {
+    return this.item.get(this.column.property);
+  }),
+
+  emptyValue: empty('value')
+});

addon/components/upf-table/cell/renderers/text.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { empty } from '@ember/object/computed';
+
+export default Component.extend({
+  value: computed('item', 'column.property', function() {
+    return this.item.get(this.column.property);
+  }),
+
+  emptyValue: empty('value')
+});