@bennerinformatics/ember-fw-table 2.0.17 → 2.0.19

package/addon/components/fw-table-expanded-row.js

@@ -1,22 +1,24 @@
-import Component from '@ember/component';
-import {computed} from '@ember/object';
-import layout from '../templates/components/fw-table-expanded-row';
-
-/**
- * This component is used internally as the logic behind the rows displayed inside rows
- * It is not included in the exports as it is not intended to be called directly
- * @protected
- */
-export default Component.extend({
-    layout,
-
-    value: computed('rawValue', function() {
-        let rawValue = this.get('rawValue');
-        let format = this.get('column.format');
-
-        if (format && typeof format === 'function') {
-            return format.call(this, rawValue);
-        }
-        return rawValue;
-    })
-});
+import Component from '@ember/component';
+import {computed} from '@ember/object';
+import layout from '../templates/components/fw-table-expanded-row';
+
+/**
+ * This component is used internally as the logic behind the rows displayed inside rows
+ * It is not included in the exports as it is not intended to be called directly
+ * @protected
+ * @module Components
+ * @submodule Internal
+ */
+export default Component.extend({
+    layout,
+
+    value: computed('rawValue', function() {
+        let rawValue = this.get('rawValue');
+        let format = this.get('column.format');
+
+        if (format && typeof format === 'function') {
+            return format.call(this, rawValue);
+        }
+        return rawValue;
+    })
+});

package/addon/components/fw-table-resort.js

@@ -5,19 +5,18 @@ import layout from '../templates/components/fw-table-resort';
 
 /**
  * This table contains logic to resort a "table" of models
- *  * ```handlebars
+ * ```handlebars
  * {{fw-table-resort items titleKey='name' sortKey='sorted'}}
  * ```
  *
  * If used in a block format instead, it is possible to fully define the title area, such as to replace it with input fields, which also adds a cheveron to expand if desired
- *  * ```handlebars
+ * ```handlebars
  *  {{#fw-table-resort sortKey='sorted' as |item expanded|}}
  *      {{input item.name}}
  *  {{/fw-table-resort}}
  *  ```
  *
- * @class TableResort
- * @module ember-fw-table
+ * @class FW-Table-Resort
  * @public
  */
 const TableResort = Component.extend({
@@ -60,6 +59,16 @@ const TableResort = Component.extend({
      */
     delete: () => {},
 
+    /**
+     * The icon that will be used for the delete button. Useful if you want the button to do something other than delete.
+     *
+     * @public
+     * @default fa-regular fa-trash-can
+     * @property deleteIcon
+     * @type {String}
+     */
+    deleteIcon: 'fa-regular fa-trash-can',
+
     /**
      * String pointer to the model's sort key, will be used to sort the items and modify the key later
      *

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

@@ -11,12 +11,12 @@ import RSVP from 'rsvp';
 /**
  * This table contains logic to show a table as a panel in an app. This table features sorting rows can be expanded
  * to show hidden data
- *  * ```handlebars
+ *  ```handlebars
  * {{fw-table-sortable data columns title='Table'}}
  * ```
  *
  * If used in a block format instead, it is possible to fully define the title area, replacing the title parameter. The export action is passed as a yield parameter to redefine the export button
- *  * ```handlebars
+ *  ```handlebars
  *  {{#fw-table-sortable data columns as |export|}}
  *      <strong class='panel-title'>Table</strong>
  *  {{/fw-table-sortable}}
@@ -29,9 +29,8 @@ import RSVP from 'rsvp';
  * Alternatively, setting this to `true` or `false` will force the state regardless of a property.
  * By default will show if the property from `valuePath` is not null
  *
- * @class TableSortable
+ * @class FW-Table-Sortable
  * @extends EmberLightTable
- * @module ember-fw-table
  * @public
  */
 const TableSortable = Component.extend({

package/addon/documentation.js

@@ -0,0 +1,98 @@
+/* Below is the main documentation for the addon. This file is only for documentation, it doesn't actually do anything. */
+/**
+ * The primary purpose of ember-fw-table is to make a simplified form of ember-light-table,
+ *  and which is easier to use than its parent. Within it as well, we have added a few extra
+ *  things that make more complicated aspects of tables also easier to incorporate (such as
+ *  paginated tables). For more information on ember-light-table,
+ *  [see their documentation](https://adopted-ember-addons.github.io/ember-light-table/docs).
+ *
+ * Because of the design of this addon, it is much simpler than some of Informatics other
+ * addons. All of the "internal" elements of this addon, which are used within the addon, but
+ * are not designed to be used outside, are in an "Internal" submodule.
+ * * [Components](Components.html)
+ *      - [Main Components](Main.html)
+ *      - [Internal Components](Internal.html)
+ *      - [Cell Components](Cell.html)
+ * * [Utils](Utils.html)
+ *
+ * @module Introduction
+ * @main Introduction
+ */
+ /**
+  * Ember-FW-Table defines many different components that can be used throughout the Informatics apps. To understand what a component is,
+  * [click here](https://guides.emberjs.com/v2.18.0/components/) for Ember's own documentation on components. The main focus of this app
+  * is of course the main table Here contains a list
+  * of all of the different components that are defined by ember-fw. Ember-fw also adds the ability for more advanced components
+  * (which are components that require more than just a simple call to use), such as [Notifications](../classes/NotificationsService.html)
+  *  and [Modals](Modals.html).
+  *
+  * @module Components
+  * @main Components
+  */
+/**
+ * Since the main component that is imported with this addon is to do with the table,
+ * there are many components that can be explained in detail, but are really only internal to
+ * the addon itself, and probably shouldn't be used without a serious reason. Those listed below
+ * are technically able to be used by any app which import the addon, but will probably only be
+ * helpful documentation for the developer who develops the ember-fw-table addon.
+ *
+ * @module Components
+ * @submodule Internal
+ * @main Internal
+ */
+
+/**
+ * There are a few other components which are added in this addon, which are built to be used within
+ * the app. Of course the largest of these is the fw-table-sortable, after which the addon derives
+ * its name, but there are also other supplemental components designed for use with the app.
+ *
+ * ***
+ *
+ * ###Classes
+ * * [FW-Table-Sortable](../classes/FW-Table-Sortable.html)
+ * * [FW-Table-Resort](../classes/FW-Table-Resort.html)
+ * * [FW-Pagination-Wrapper](../classes/FW-Pagination-Wrapper.html)
+ * * [FW-Delete-Modal](../classes/FW-Delete-Modal.html)
+ *
+ * @module Components
+ * @submodule Main
+ * @main Main
+ */
+
+/**
+ * Some components in this addon were designed to be used with the `cellComponent` value used in the table.
+ * For information on how `cellComponent` works, [click here](https://adopted-ember-addons.github.io/ember-light-table/docs/classes/Column.html#property_cellComponent).
+ *
+ * For each of these cell components, you call them in the following way:
+ * ```js
+ * column: [
+ *     {
+ *         label: 'Actions',
+ *         cellComponent: 'fw-cell-action'
+ *     }
+ * ]
+ * ```
+ *
+ * ***
+ *
+ * ### Classes
+ * * [FW-Cell-Action](../classes/FW-Cell-Action.html)
+ * * [FW-Cell-Boolean](../classes/FW-Cell-Boolean.html)
+ * * [FW-Cell-Nullable](../classes/FW-Cell-Nullable.html)
+ * * [FW-Cell-Permission-Icon](../classes/FW-Cell-Permission-Icon.html)
+ * * [FW-Row-Toggle](../classes/FW-Row-Toggle.html)
+ * * [FW-Row-Toggle-Index](../classes/FW-Row-Toggle-Index.html)
+ *
+ * @module Components
+ * @submodule Cell
+ * @main Cell
+ */
+
+/**
+ * Utils is short for Utilities, and they are essentially whatever you need them to be. It is simply a way to import a function that does a certain task.
+ * In ember-fw-table, we have a few utils files that have been defined, and each has a couple different functions that are semi-related to each other. So each "class"
+ * within the utils module actually is simply a group of related functions exported that can be used after they are imported.
+ *
+ * @module Utils
+ * @main Utils
+ */

package/addon/templates/components/fw-cell-action.hbs

@@ -1,12 +1,12 @@
 {{#if tableActions.edit}}
     <button class='btn btn-sm btn-primary' title='Edit' {{action tableActions.edit row.content bubbles=false}}>
-        <i class='fas fa-pencil-alt'/>
+        <i class='fa-solid fa-pencil'/>
         {{unless column.small 'Edit'}}
     </button>
 {{/if}}
 {{#if tableActions.delete}}
     <button class='btn btn-sm btn-danger' title='Delete' {{action tableActions.delete row.content bubbles=false}}>
-        <i class='far fa-trash-alt'/>
+        <i class='fa-regular fa-trash-can'/>
         {{unless column.small 'Delete'}}
     </button>
 {{/if}}

package/addon/templates/components/fw-cell-permission-icon.hbs

@@ -1,9 +1,9 @@
-{{#if (eq value 2)}}
-    <span class="text-success" title="Has Permission"><i class="fas fa-check"></i></span>
-{{/if}}
-{{#if (eq value 1)}}
-    <span class="text-primary" title="Permission Determined By Access Control"><i class="fas fa-lock"></i></span>
-{{/if}}
-{{#if (eq value 0)}}
-    <span class="text-danger" title="Doesn't Have Permission"><i class="fas fa-times"></i></span>
-{{/if}}
+{{#if (eq value 2)}}
+    <span class="text-success" title="Has Permission"><i class="fa-solid fa-check"></i></span>
+{{/if}}
+{{#if (eq value 1)}}
+    <span class="text-primary" title="Permission Determined By Access Control"><i class="fa-solid fa-lock"></i></span>
+{{/if}}
+{{#if (eq value 0)}}
+    <span class="text-danger" title="Doesn't Have Permission"><i class="fa-solid fa-xmark"></i></span>
+{{/if}}

package/addon/templates/components/fw-delete-modal.hbs

@@ -1,12 +1,12 @@
-{{fw-fullscreen-modal "confirm-choice"
-    size="md"
-    model=(hash
-        confirmButtonText="Delete"
-        confirmButtonStyle="danger"
-        confirmButtonIcon="far fa-trash-alt"
-        onconfirm=(action 'deleteModel')
-        message=_message
-    )
-    close=close
-    scrollTop=scrollTop
-}}
+{{fw-fullscreen-modal "confirm-choice"
+    size="md"
+    model=(hash
+        confirmButtonText="Delete"
+        confirmButtonStyle="danger"
+        confirmButtonIcon="fa-regular fa-trash-can"
+        onconfirm=(action 'deleteModel')
+        message=_message
+    )
+    close=close
+    scrollTop=scrollTop
+}}

package/addon/templates/components/fw-pagination-wrapper.hbs

@@ -10,7 +10,7 @@
         {{fw-loading-spinner}}
     {{else if pageEntries}}
         {{!-- Page numbers --}}
-        {{#if showPages}}
+        {{#if (and showPages showPagesTop)}}
             <div class="text-center" style="overflow:auto">
                 {{page-numbers
                     content=(hash)
@@ -57,7 +57,7 @@
             {{/if}}
 
             {{!-- Second page numbers --}}
-            {{#if showPages}}
+            {{#if (and showPages showPagesBottom)}}
                 <div class="text-center" style="overflow:auto">
                     {{page-numbers
                         content=(hash)

package/addon/templates/components/fw-table-resort.hbs

@@ -3,17 +3,17 @@
         {{#sortable-item tagName="li" model=item group=group handle=".handle" spacing=spacing}}
             <div class="input-group">
                 <span class="input-group-addon handle draggable">
-                    <i class="fas fa-ellipsis-v fa-2"></i>
+                    <i class="fa-solid fa-ellipsis-vertical fa-2"></i>
                 </span>
                 {{#if hasBlock}}
                     {{#if allowExpand}}
                         {{#if item.unexpandable}}
                             <span class="input-group-addon">
-                                <i class="fas fa-chevron-right faded"></i>
+                                <i class="fa-solid fa-chevron-right faded"></i>
                             </span>
                         {{else}}
                             <span class="input-group-addon clickable" {{action "toggleExpanded" item}}>
-                                <i class={{if item.expanded "fas fa-chevron-down" "fas fa-chevron-right"}}></i>
+                                <i class={{if item.expanded "fa-solid fa-chevron-down" "fa-solid fa-chevron-right"}}></i>
                             </span>
                         {{/if}}
                     {{/if}}
@@ -28,7 +28,7 @@
                         <span class="input-group-addon">&nbsp;&nbsp;&nbsp;</span>
                     {{else}}
                         <span class="input-group-addon clickable" {{action "deleteItem" item}}>
-                            <i class="far fa-trash-alt fa-2"></i>
+                            <i class={{deleteIcon}}></i>
                         </span>
                     {{/if}}
                 {{else}}

package/addon/templates/components/fw-table-sortable.hbs

@@ -1,76 +1,76 @@
-{{#if (or (and hasBlock showHeader) title canExport)}}
-    <header class="panel-heading">
-        {{#if (and hasBlock showHeader)}}
-            {{yield (action 'export') true}}
-        {{else}}
-            <strong class="panel-title">{{or title 'Table'}}</strong>
-            {{#if (and deleteTable deleteTablePermission)}}
-                {{fw-promise-button
-                    class="btn btn-xs pull-right"
-                    buttonIcon='far fa-trash-alt'
-                    buttonText=deleteTitle
-                    buttonStyle='danger'
-                    promise=(action deleteTable data)
-                    type='submit'
-                }}
-            {{/if}}
-            {{#if canExport}}
-                <button class="btn btn-xs btn-primary pull-right" {{action 'export'}}>
-                    <i class="far fa-file-excel"/>
-                    {{exportTitle}}
-                </button>
-            {{/if}}
-        {{/if}}
-        <div class="clearfix"/>
-    </header>
-{{/if}}
-<section class="panel-body table-body">
-    {{#if (and table.isEmpty (not headerEmpty))}}
-        {{empty}}
-    {{else}}
-        {{#light-table
-            table
-            height=fixedHeight
-            tableClassNames=(concat "table table-striped table-bordered " tableClassNames)
-            tableActions=tableActions
-            responsive=responsive
-            breakpoints=breakpoints
-            as |t|
-        }}
-            {{t.head
-                onColumnClick=(action 'sort')
-                iconAscending='fas fa-sort-up'
-                iconDescending='fas fa-sort-down'
-                iconSortable='fas fa-sort'
-                sortOnClick=false
-                fixed=(if fixedHeight true false)
-            }}
-            {{#t.body
-                canExpand=hasExpandedColumns
-                onRowClick=(action 'expand')
-                expandOnClick=false
-                multiRowExpansion=false
-                rowComponent=(component 'fw-expandable-row')
-                canSelect=false
-                as |body|
-            }}
-                {{#if table.hasExpandedColumns}}
-                    {{#body.expanded-row as |row|}}
-                        {{fw-table-expanded-rows tableActions=tableActions table=table row=row}}
-                    {{/body.expanded-row}}
-                {{/if}}
-
-                {{#if table.isEmpty}}
-                    {{#body.no-data}}
-                        {{empty}}
-                    {{/body.no-data}}
-                {{/if}}
-            {{/t.body}}
-        {{/light-table}}
-    {{/if}}
-</section>
-{{#if (and hasBlock showFooter)}}
-    <footer class="panel-footer clearfix">
-        {{yield (action 'export') false}}
-    </footer>
-{{/if}}
+{{#if (or (and hasBlock showHeader) title canExport)}}
+    <header class="panel-heading">
+        {{#if (and hasBlock showHeader)}}
+            {{yield (action 'export') true}}
+        {{else}}
+            <strong class="panel-title">{{or title 'Table'}}</strong>
+            {{#if (and deleteTable deleteTablePermission)}}
+                {{fw-promise-button
+                    class="btn btn-xs pull-right"
+                    buttonIcon='fa-regular fa-trash-can'
+                    buttonText=deleteTitle
+                    buttonStyle='danger'
+                    promise=(action deleteTable data)
+                    type='submit'
+                }}
+            {{/if}}
+            {{#if canExport}}
+                <button class="btn btn-xs btn-primary pull-right" {{action 'export'}}>
+                    <i class="fa-regular fa-file-excel"/>
+                    {{exportTitle}}
+                </button>
+            {{/if}}
+        {{/if}}
+        <div class="clearfix"/>
+    </header>
+{{/if}}
+<section class="panel-body table-body">
+    {{#if (and table.isEmpty (not headerEmpty))}}
+        {{empty}}
+    {{else}}
+        {{#light-table
+            table
+            height=fixedHeight
+            tableClassNames=(concat "table table-striped table-bordered " tableClassNames)
+            tableActions=tableActions
+            responsive=responsive
+            breakpoints=breakpoints
+            as |t|
+        }}
+            {{t.head
+                onColumnClick=(action 'sort')
+                iconAscending='fa-solid fa-sort-up'
+                iconDescending='fa-solid fa-sort-down'
+                iconSortable='fa-solid fa-sort'
+                sortOnClick=false
+                fixed=(if fixedHeight true false)
+            }}
+            {{#t.body
+                canExpand=hasExpandedColumns
+                onRowClick=(action 'expand')
+                expandOnClick=false
+                multiRowExpansion=false
+                rowComponent=(component 'fw-expandable-row')
+                canSelect=false
+                as |body|
+            }}
+                {{#if table.hasExpandedColumns}}
+                    {{#body.expanded-row as |row|}}
+                        {{fw-table-expanded-rows tableActions=tableActions table=table row=row}}
+                    {{/body.expanded-row}}
+                {{/if}}
+
+                {{#if table.isEmpty}}
+                    {{#body.no-data}}
+                        {{empty}}
+                    {{/body.no-data}}
+                {{/if}}
+            {{/t.body}}
+        {{/light-table}}
+    {{/if}}
+</section>
+{{#if (and hasBlock showFooter)}}
+    <footer class="panel-footer clearfix">
+        {{yield (action 'export') false}}
+    </footer>
+{{/if}}

package/addon/utils/base-cells.js

@@ -1,35 +1,40 @@
-/**
- * Creates a generic row toggle object
- * @param  {Object} extra Additional values to add to the row toggle. Breakpoints is the most common one
- * @return {Object}       Object to use as a row toggle column
- */
-export function rowToggle(extra = {}) {
-    let {valuePath} = extra;
-    return Object.assign({
-        label: valuePath ? '#' : '',
-        width: valuePath ? '40px' : '35px',
-        align: valuePath ? 'toggle' : 'center',
-        sortable: !!valuePath,
-        canExport: false,
-        showExpanded: false,
-        cellComponent: valuePath ? 'fw-row-toggle-index' : 'fw-row-toggle'
-    }, extra);
-}
-
-/**
- * Creates a generic action cell
- * @param  {Object} extra Additional values to add to the action buttons. Small is useful to shrink it with breakpoints
- * @return {Object}       Object to use as an actions button column
- */
-export function actions(extra = {}) {
-    let {small} = extra;
-    return Object.assign({
-        label: 'Actions',
-        // if small is set, shrink the width
-        width: small ? '95px' : '170px',
-        sortable: false,
-        canExport: false,
-        showExpanded: false,
-        cellComponent: 'fw-cell-action'
-    }, extra);
-}
+/**
+ * DESCRIPTION NEEDED
+ * @class BaseCells
+ * @module Utils
+ */
+/**
+ * Creates a generic row toggle object
+ * @param  {Object} extra Additional values to add to the row toggle. Breakpoints is the most common one
+ * @return {Object}       Object to use as a row toggle column
+ */
+export function rowToggle(extra = {}) {
+    let {valuePath} = extra;
+    return Object.assign({
+        label: valuePath ? '#' : '',
+        width: valuePath ? '40px' : '35px',
+        align: valuePath ? 'toggle' : 'center',
+        sortable: !!valuePath,
+        canExport: false,
+        showExpanded: false,
+        cellComponent: valuePath ? 'fw-row-toggle-index' : 'fw-row-toggle'
+    }, extra);
+}
+
+/**
+ * Creates a generic action cell
+ * @param  {Object} extra Additional values to add to the action buttons. Small is useful to shrink it with breakpoints
+ * @return {Object}       Object to use as an actions button column
+ */
+export function actions(extra = {}) {
+    let {small} = extra;
+    return Object.assign({
+        label: 'Actions',
+        // if small is set, shrink the width
+        width: small ? '95px' : '170px',
+        sortable: false,
+        canExport: false,
+        showExpanded: false,
+        cellComponent: 'fw-cell-action'
+    }, extra);
+}