@bennerinformatics/ember-fw-table 2.0.21 → 2.1.0

package/README.md

@@ -1,5 +1,11 @@
 # ember-fw-table
 
+We have a couple of documentation websites, which may help in using this package:
+
+[Ember FW Table Docs](https://linformatics.bitbucket.io/docs/addons/client/ember-fw-table) give a more robust guide to some of the important features of the package.
+
+[Ember FW Table API Docs](https://linformatics.bitbucket.io/docs/addons/client-api/ember-fw-table) are api documentation for each of our components, which are generated from code comments. 
+
 This README outlines the details of collaborating on this Ember addon.
 
 ## Installation

package/addon/classes/Row.js

@@ -9,20 +9,20 @@ import {showExpanded} from '../utils/table';
  * @return {computed}   Computed property
  */
 function canExpand(keys) {
-    return computed('table.{alwaysExpand,hasExpandedColumns}', ...keys, function() {
+    return computed('table.{alwaysExpand,hasExpandedColumns,expandedColumns}', ...keys, function() {
         // start with some short exits
         // no expanded columns is false
-        if (!this.get('table.hasExpandedColumns')) {
+        if (!this.table.hasExpandedColumns) {
             return false;
         }
         // if it has an expanded column that always shows, automatically true
-        if (this.get('table.alwaysExpand')) {
+        if (this.table.alwaysExpand) {
             return true;
         }
 
         // try and find any column that has something
-        return this.get('table.expandedColumns').any((column) => {
-            return showExpanded(this.get('table'), this, column);
+        return this.table.expandedColumns.any((column) => {
+            return showExpanded(this.table, this, column);
         });
     });
 }
@@ -49,10 +49,10 @@ export default class Row extends LightRow.extend({
     /** Disables expanded state if canExpand is false */
     expanded: computed('canExpand', '_expanded', {
         get() {
-            return this.get('canExpand') && this.get('_expanded');
+            return this.canExpand && this.get('_expanded');
         },
         set(_, value) {
-            value &= this.get('canExpand');
+            value &= this.canExpand;
             this.set('_expanded', value);
             return value;
         }
@@ -63,12 +63,18 @@ export default class Row extends LightRow.extend({
      */
     // eslint-disable-next-line ember/no-observers
     updateColumns: observer('table.expandedKeys', function() {
-        defineProperty(this, 'canExpand', canExpand(this.get('table.expandedKeys')));
-    })
-}) {
-    constructor({content, table}) {
-        super(content);
-        this.set('table', table);
+        defineProperty(this, 'canExpand', canExpand(this.table.expandedKeys));
+    }),
+
+    init({content, table}) {
+        this._super(...arguments);
+        this.table = table;
         defineProperty(this, 'canExpand', canExpand(table.get('expandedKeys')));
     }
+}) {
+    // constructor({content, table}) {
+    //     super(content);
+    //     this.table = table;
+    //     defineProperty(this, 'canExpand', canExpand(table.get('expandedKeys')));
+    // }
 }

package/addon/classes/Table.js

@@ -14,7 +14,7 @@ import {isEmpty, isNone} from '@ember/utils';
  * @return {Array}           Array of table rows
  */
 function createRows(rows = [], table) {
-    return rows.map((r) => new Row({content: r, table}));
+    return rows.map((r) => Row.create({content: r, table}));
 }
 
 /**
@@ -41,7 +41,7 @@ export class Table extends LightTable.extend({
      * @type {Ember.Array}
      */
     visibleColumnGroups: computed('tableColumns.[]', 'tableColumns.@each.{isHidden,isVisibleGroupColumn}', function() {
-        return this.get('tableColumns').filter((c) => {
+        return this.tableColumns.filter((c) => {
             return c.get('isVisibleGroupColumn') || (!c.get('isGroupColumn') && !c.get('isHidden'));
         });
     }).readOnly(),
@@ -51,7 +51,7 @@ export class Table extends LightTable.extend({
      * @type {Ember.Array}
      */
     visibleSubColumns: computed('tableColumns.@each.visibleSubColumns', function() {
-        return emberArray([].concat(...this.get('tableColumns').getEach('visibleSubColumns')));
+        return emberArray([].concat(...this.tableColumns.getEach('visibleSubColumns')));
     }).readOnly(),
 
     /**
@@ -59,7 +59,7 @@ export class Table extends LightTable.extend({
      * @type {Ember.Array}
      */
     allColumns: computed('tableColumns.@each.subColumns', function() {
-        return this.get('tableColumns').reduce((arr, c) => {
+        return this.tableColumns.reduce((arr, c) => {
             arr.pushObjects(c.get('isGroupColumn') ? c.get('subColumns') : [c]);
             return arr;
         }, emberArray([]));
@@ -88,12 +88,12 @@ export class Table extends LightTable.extend({
     }).readOnly(),
 
     alwaysExpand: computed('expandedColumns.@each.canExpand', function() {
-        return this.get('expandedColumns').any((column) => column.get('showExpanded') === true);
+        return this.expandedColumns.any((column) => column.get('showExpanded') === true);
     }),
 
     expandedKeys: computed('expandedColumns.[]', function() {
         let keys = [];
-        this.get('expandedColumns').forEach((column) => {
+        this.expandedColumns.forEach((column) => {
             // check if we have a specific expansion property
             let showExpanded = column.get('showExpanded');
             if (typeof showExpanded === 'string') {
@@ -117,7 +117,7 @@ export class Table extends LightTable.extend({
      * @type {Boolean}
      */
     hasExpandedColumns: computed('expandedColumns', function() {
-        return !isEmpty(this.get('expandedColumns'));
+        return !isEmpty(this.expandedColumns);
     }),
 
     /**
@@ -127,13 +127,18 @@ export class Table extends LightTable.extend({
      * @return {Array} rows
      */
     setRows(rows = []) {
-        return this.get('rows').setObjects(createRows(rows, this));
-    }
-}) {
-    constructor({columns, rows}) {
-        super(columns, []);
+        return this.rows.setObjects(createRows(rows, this));
+    },
+
+    init({columns, rows}) {
+        this._super(...arguments);
         this.setRows(rows);
     }
+}) {
+    // constructor({columns, rows}) {
+    //     super(columns, []);
+    //     this.setRows(rows);
+    // }
 }
 
 /**
@@ -143,5 +148,5 @@ export class Table extends LightTable.extend({
  * @return {Table}         Table class to use in ember-light-table
  */
 export default function newTable(columns, rows) {
-    return new Table({columns, rows});
+    return Table.create({columns, rows});
 }

package/addon/components/fw-cell-action.js

@@ -2,13 +2,17 @@ import Component from '@ember/component';
 import layout from '../templates/components/fw-cell-action';
 
 /**
- * This cell contains buttons to edit and delete a model, which can have actions passed in
- * The edit action is expected to be passed in as tableActions.edit, while delete as tableActions.delete
+ * This cell contains buttons to edit and delete a model, which can have actions passed in.
+ * The edit action is expected to be passed in as `tableActions.edit`, while delete as `tableActions.delete`.
+ * This component will only give you two actions, so if you need a more complicated component than edit and delete,
+ * you will need to create your own cell component.
+ * Setting the variable `small` in the column will cause the buttons to display smaller.
  *
- * Setting the variable "small" in the column will cause the buttons to display smaller
- * The easiest way to add this cell is through the base cell in utils, for more information, [click here](../classes/BaseCells.html)
+ * The easiest way to add this cell is through the base cell in utils, for more information, [click here](../classes/BaseCells.html). In most cases, it is best
+ * to use the util rather than this cell component directly.
  * @public
- * @class FW-Cell-Action
+ * @class FwCellAction
+ * @module CellComponents
  */
 export default Component.extend({
     layout

package/addon/components/fw-cell-boolean.js

@@ -2,10 +2,11 @@ import Component from '@ember/component';
 import layout from '../templates/components/fw-cell-boolean';
 
 /**
- * Displays a cell containing a boolean as either "Yes" or "No"
+ * Displays a cell containing a boolean as either "Yes" or "No".
  * @public
- * @deprecated Use utils/formats.formatBoolean
- * @class FW-Cell-Boolean
+ * @deprecated You should use the [`formatBoolean` in the Format Util](../classes/BaseCells.html) instead.
+ * @class FwCellBoolean
+ * @module CellComponents
  */
 export default Component.extend({
     layout

package/addon/components/fw-cell-nullable.js

@@ -3,9 +3,12 @@ import layout from '../templates/components/fw-cell-nullable';
 
 /**
  * Creates a table cell that displays a default value if null.
- * That value defaults to "None", but can be changed by setting the nullText property in a column
+ * That value defaults to "None", but can be changed by setting the `nullText` property in a column.
+ * @deprecated You should use the [`formatNullable` in the Format Util](../classes/BaseCells.html) instead.
  * @public
- * @class FW-Cell-Nullable
+ * @class FwCellNullable
+ * @module CellComponents
+ *
  */
 export default Component.extend({
     layout

package/addon/components/fw-cell-permission-icon.js

@@ -2,10 +2,26 @@ import Component from '@ember/component';
 import layout from '../templates/components/fw-cell-permission-icon';
 
 /**
- * Displays a cell containing a boolean as either "Yes" or "No"
+ * This component displays the permission icon for the table on the Permissions page. It should be used in the following way:
+ * ```js
+ * columns: [{
+ *   label: 'Admin',
+ *   valuePath: 'admin',
+ *   cellComponent: 'fw-cell-permission-icon',
+ *   align: 'center',
+ *   width: '80px'
+ * }]
+ * ```
+ * This component will take the value, and display the proper Fontawesome icon based on its value. The value should be one of the following three numbers:
+ *
+ * - 0 means that that role does not have access to that feature, and it will display a red X.
+ * - 1 means that that feature is controlled by access control, not by Group Control, and it will display a lock icon in the primary color of the app
+ * - 2 means that that role has access to that feature, and will display a green check mark.
+ * - If the value is anything else, the cell will just be empty
+ *
  * @public
- * @deprecated Use utils/formats.formatBoolean
- * @class FW-Cell-Permission-Icon
+ * @class FwCellPermissionIcon
+ * @module CellComponents
  */
 export default Component.extend({
     layout

package/addon/components/fw-column-sortable.js

@@ -3,11 +3,19 @@ import {computed} from '@ember/object';
 import layout from '../templates/components/fw-column-sortable';
 
 /**
- * Displays a column title which can show a sorting icon
+ * Displays a column title which can show a sorting icon if a network request is still active. This can be used for your columns when using the [FwPaginationWrapper](../classes/FwPaginationWrapper.html),
+ * so that sorting works properly. It should be set as the columns component (not the cellComponent), like so:
+ * ```js
+ *  columns: [{
+ *   label: 'Name',
+ *   valuePath: 'name',
+ *   component: 'fw-column-sortable'
+ *  }...]
+ * ```
+ * If you do this, when you are sorting the table within the paginated wrapper, it will display a spinning icon letting the user know that the sort is loading.
  * @public
- * @class FW-Column-Sortable
- * @module Components
- * @submodule Internal
+ * @class FwColumnSortable
+ * @module ColumnComponents
  */
 export default Component.extend({
     layout,

package/addon/components/fw-column-title.js

@@ -2,11 +2,19 @@ import Sortable from './fw-column-sortable';
 import layout from '../templates/components/fw-column-title';
 
 /**
- * Displays a column title which will truncate with an ellipsis if too long
+ * This column component extends [`fw-column-sortable` component](../classes/FwColumnSortable.html), so it will display a sort-icon, but it also display a column title
+ * which will truncate with an ellipsis if too long. This can be used for your columns when using the [FwPaginationWrapper](../classes/FwPaginationWrapper.html),
+ * so that sorting works properly. It should be set as the columns component (not the cellComponent), like so:
+ * ```js
+ *  columns: [{
+ *   label: 'Name',
+ *   valuePath: 'name',
+ *   component: 'fw-column-title'
+ *  }...]
+ * ```
  * @public
- * @class FW-Column-Title
- * @module Components
- * @submodule Internal
+ * @class FwColumnTitle
+ * @module ColumnComponents
  */
 export default Sortable.extend({
     layout

package/addon/components/fw-delete-modal.js

@@ -3,58 +3,77 @@ import {computed} from '@ember/object';
 import layout from '../templates/components/fw-delete-modal';
 import RSVP from 'rsvp';
 /**
- * NEEDS WORK.
- * @class FW-Delete-Modal
+ * The FwDeleteModal component is a pseudo component/modal hybrid because it opens a modal and internally uses the `FwFullscreenModal` component, specifically
+ * the [`confirm-choice` modal](https://linformatics.bitbucket.io/docs/addons/client-api/ember-fw/classes/Confirm-ChoiceModal.html) in the "sm" size. However, `FwDeleteModal` requires even less
+ * set up than that, thus it has the extremely niche case of opening a delete modal, and cannot really be expanded even to an "are you sure you want to archive?" modal. However, it
+ * is very useful for what it is intended. How you use it is you follow the instructions for actions in [Calling the Modal](https://linformatics.bitbucket.io/docs/addons/client/ember-fw/concepts/modals#calling-the-modal), but using
+ * `FwDeleteModal` instead of `FwFullscreenModal`. The only properties you can pass in to either `confirm-choice` or `FwFullscreenModal` itself are those listed below. An example of how to use it would be:
+ * ```handlebars
+ * {{#if shouldRender}}
+ *    <FwDeleteModal @model={{modelToDelete}} @type="modelName" @close={{action "toggleShouldRender"}} />
+ * {{/if}}
+ * ```
+ * When the user confirms the choice to delete, this component will automatically call `destroyRecord` on that model, deleting it for you.
+ * @public
+ * @class FwDeleteModal
+ * @module Components
  */
 export default Component.extend({
     layout,
     /**
-     * Action called to close the modal
+     * Action called to close the modal.
+     * @property close
      * @type {Action}
      */
     close: null,
 
     /**
-     * Model which will be deleted
+     * Model which will be deleted.
+     * @property model
      * @type {DS.Model}
      */
     model: null,
 
     /**
-     * Message displayed in the confirmation. If unset use the default
+     * Message displayed in the confirmation. If unset use the default (which looks at type property).
+     * @property message
+     * @default "Are you sure you want to delete this {type}? It cannot be undone."
      * @type {String}
      */
     message: null,
 
     /**
-     * Model type being deleted, used to create the message
+     * Model type being deleted, used to create the message.
+     * @property type
      * @type {String}
      */
     type: null,
 
     /**
-     * Determines whether opening this modal caused the web browser to scroll to the top
+     * Determines whether opening this modal caused the web browser to scroll to the top.
+     * @property scrollTop
+     * @default false
      * @type {Boolean}
      */
     scrollTop: false,
 
     _message: computed('message', 'type', function() {
         // if we have a message, use that
-        let message = this.get('message');
+        let message = this.message;
         if (message) {
             return message;
         }
 
         // if no message, determine the type and use the default
-        let type = this.get('type') || 'model';
+        let type = this.type || 'model';
         return `Are you sure you want to delete this ${type}? It cannot be undone.`;
     }),
 
     actions: {
         // deletes the contained model
         deleteModel() {
-            if (this.get('model')) {
-                return RSVP.resolve(this.get('model').destroyRecord());
+            if (this.model) {
+                return RSVP.resolve(this.model.destroyRecord());
             }
         }
     }

package/addon/components/fw-expandable-row.js

@@ -1,5 +1,10 @@
 import LightRow from 'ember-light-table/components/lt-row';
 
+/**
+ * This is a component internal to ember-fw-table, and should not be called outside. It extends the `lt-row` component from Ember Light Table, and simply allows it to be expandable.
+ * @private
+ * @class FwExpandableRow
+ */
 export default LightRow.extend({
     classNameBindings: ['row.canExpand:is-expandable']
 });