@bennerinformatics/ember-fw-table 2.0.18 → 2.0.19

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-pagination-wrapper.hbs

@@ -1,74 +1,74 @@
-{{!-- Search buttons, whole search component is in block --}}
-{{yield (hash
-    search=(action 'search')
-    export=(action 'export')
-) false}}
-
-{{!-- Table contents, show loading spinner if in progress --}}
-<div class={{tableWrapperClass}}>
-    {{#if searchingTable}}
-        {{fw-loading-spinner}}
-    {{else if pageEntries}}
-        {{!-- Page numbers --}}
-        {{#if showPages}}
-            <div class="text-center" style="overflow:auto">
-                {{page-numbers
-                    content=(hash)
-                    showFL=true
-                    currentPage=page
-                    numPagesToShow=maxPageButtons
-                    totalPages=totalPages
-                    action=(action 'setPage')
-                }}
-            </div>
-        {{/if}}
-        {{!-- If we are searching a page, show its loading spinner --}}
-        {{#if pagesSearching}}
-            {{fw-loading-spinner}}
-        {{else}}
-            {{!-- If given a column getter, use that for columns --}}
-            {{#if tableColumns}}
-                {{fw-table-sortable
-                    filteredEntries
-                    tableColumns
-                    title=fullTableTitle
-                    class='sticky-table'
-                    defaultSort=(array tableSortKey defaultSortKey)
-                    responsive=true
-                    empty=emptyText
-                    hideEmpty=hideEmpty
-                    canExport=(if showExport 'Export Page' false)
-                    deleteTable=deletePage
-                    deleteTablePermission=deletePagePermission
-                    deleteOverrideTitle='Delete Page'
-                    onSort=(action 'sortColumn')
-                    tableActions=tableActions
-                }}
-            {{else}}
-                {{!-- Let the user provide the table --}}
-                {{yield (hash
-                    sort=(action 'sortColumn')
-                ) (hash
-                    title=fullTableTitle
-                    suffix=tableSuffix
-                    entries=filteredEntries
-                    sortKey=tableSortKey
-                )}}
-            {{/if}}
-
-            {{!-- Second page numbers --}}
-            {{#if showPages}}
-                <div class="text-center" style="overflow:auto">
-                    {{page-numbers
-                        content=(hash)
-                        showFL=true
-                        currentPage=page
-                        numPagesToShow=maxPageButtons
-                        totalPages=totalPages
-                        action=(action 'setPage')
-                    }}
-                </div>
-            {{/if}}
-        {{/if}}
-    {{/if}}
-</div>
+{{!-- Search buttons, whole search component is in block --}}
+{{yield (hash
+    search=(action 'search')
+    export=(action 'export')
+) false}}
+
+{{!-- Table contents, show loading spinner if in progress --}}
+<div class={{tableWrapperClass}}>
+    {{#if searchingTable}}
+        {{fw-loading-spinner}}
+    {{else if pageEntries}}
+        {{!-- Page numbers --}}
+        {{#if (and showPages showPagesTop)}}
+            <div class="text-center" style="overflow:auto">
+                {{page-numbers
+                    content=(hash)
+                    showFL=true
+                    currentPage=page
+                    numPagesToShow=maxPageButtons
+                    totalPages=totalPages
+                    action=(action 'setPage')
+                }}
+            </div>
+        {{/if}}
+        {{!-- If we are searching a page, show its loading spinner --}}
+        {{#if pagesSearching}}
+            {{fw-loading-spinner}}
+        {{else}}
+            {{!-- If given a column getter, use that for columns --}}
+            {{#if tableColumns}}
+                {{fw-table-sortable
+                    filteredEntries
+                    tableColumns
+                    title=fullTableTitle
+                    class='sticky-table'
+                    defaultSort=(array tableSortKey defaultSortKey)
+                    responsive=true
+                    empty=emptyText
+                    hideEmpty=hideEmpty
+                    canExport=(if showExport 'Export Page' false)
+                    deleteTable=deletePage
+                    deleteTablePermission=deletePagePermission
+                    deleteOverrideTitle='Delete Page'
+                    onSort=(action 'sortColumn')
+                    tableActions=tableActions
+                }}
+            {{else}}
+                {{!-- Let the user provide the table --}}
+                {{yield (hash
+                    sort=(action 'sortColumn')
+                ) (hash
+                    title=fullTableTitle
+                    suffix=tableSuffix
+                    entries=filteredEntries
+                    sortKey=tableSortKey
+                )}}
+            {{/if}}
+
+            {{!-- Second page numbers --}}
+            {{#if (and showPages showPagesBottom)}}
+                <div class="text-center" style="overflow:auto">
+                    {{page-numbers
+                        content=(hash)
+                        showFL=true
+                        currentPage=page
+                        numPagesToShow=maxPageButtons
+                        totalPages=totalPages
+                        action=(action 'setPage')
+                    }}
+                </div>
+            {{/if}}
+        {{/if}}
+    {{/if}}
+</div>

package/addon/templates/components/fw-table-expanded-row.hbs

@@ -1,23 +1,23 @@
-{{!-- If column has a hideLabel set to true, just spit back the value of whatever the user gave it --}}
-{{#if column.hideLabel}}
-    {{#if column.cellComponent}}
-        {{!-- Pass in all the normal component values, but add an extra boolean so they know it is a hidden row --}}
-        {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue isExpandedRow=true}}
-    {{else}}
-        {{value}}
-    {{/if}}
-{{else}}
-    {{!-- Only print the cell if the column label is defined--}}
-    {{#if column.label}}
-        <dt class="{{column.classNames}}" title="{{column.label}}">{{column.label}}:</dt>
-        <dd class="{{column.cellClassNames}}">
-            {{!-- If the cell has a custom component, use that --}}
-            {{#if column.cellComponent}}
-                {{!-- Pass in all the normal component values, but add an extra boolean so they know it is a hidden row --}}
-                {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue isExpandedRow=true}}
-            {{else}}
-                {{value}}
-            {{/if}}
-        </dd>
-    {{/if}}
-{{/if}}
+{{!-- If column has a hideLabel set to true, just spit back the value of whatever the user gave it --}}
+{{#if column.hideLabel}}
+    {{#if column.cellComponent}}
+        {{!-- Pass in all the normal component values, but add an extra boolean so they know it is a hidden row --}}
+        {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue isExpandedRow=true}}
+    {{else}}
+        {{value}}
+    {{/if}}
+{{else}}
+    {{!-- Only print the cell if the column label is defined--}}
+    {{#if column.label}}
+        <dt class="{{column.classNames}}" title="{{column.label}}">{{column.label}}:</dt>
+        <dd class="{{column.cellClassNames}}">
+            {{!-- If the cell has a custom component, use that --}}
+            {{#if column.cellComponent}}
+                {{!-- Pass in all the normal component values, but add an extra boolean so they know it is a hidden row --}}
+                {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue isExpandedRow=true}}
+            {{else}}
+                {{value}}
+            {{/if}}
+        </dd>
+    {{/if}}
+{{/if}}

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

@@ -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="fa-regular fa-trash-can fa-2"></i>
+                            <i class={{deleteIcon}}></i>
                         </span>
                     {{/if}}
                 {{else}}

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);
+}

package/addon/utils/export.js

@@ -1,72 +1,76 @@
-import EmberObject from '@ember/object';
-import {isEmpty, isNone} from '@ember/utils';
-import Papa from 'papaparse';
-
-/**
- * Creates a CSV file from a data array and a title
- * @param  {Array} data        Array of table cells
- * @param  {Title} [name=null] Name to export
- */
-export function createCSV(data, name = null) {
-    // first step, we need to extra the cells into "Cell","Cell 2" format, use JSON.stringify as it makes most escapes
-    // regex removes the brackets, as its an array we are calling stringify on
-    let rows = Papa.unparse(data);
-
-    // next, join that using newlines and export as data CSV
-    let encodedUri = `data:text/csv;charset=utf-8,${encodeURIComponent(rows)}`;
-
-    // downloading is a bit weird. We create a link element with the name and URL then click the element
-    let link = document.createElement('a');
-    link.setAttribute('href', encodedUri);
-    link.setAttribute('download', `${name || 'Export'}.csv`);
-    document.body.appendChild(link); // Required for FF
-    link.click(); // This will download the data file
-}
-
-/**
- * Exports an Ember Light Table to CSV
- * @param  {Table} table             Table class, just needs to include rows and columns
- * @param  {String} [title='Export'] Title to use for exporting
- */
-export default function exportTable(table, title = 'Export') {
-    // start by filtering out columns which opted out of exporting. Examples include action buttons and the row toggle
-    let columns = table.get('columns').filter(({canExport}) => {
-        // if canExport is defined, require it to be true
-        return isNone(canExport) || canExport;
-    });
-
-    // ensure we have columns and data
-    if (isEmpty(columns)) {
-        return;
-    }
-
-    // start the data with just the labels from the columns
-    let data = [columns.map(({exportLabel, label}) => exportLabel || label)];
-
-    // next, populate data by iterating through the current rows
-    table.get('rows').forEach((row) => {
-        // in each row, iterate through the columns
-        let rowData = columns.map((column) => {
-            let {valuePath, format} = column;
-            // flat value pulled from the model
-            let rawValue = valuePath ? row.get(valuePath) : '';
-            let value = rawValue;
-            // if we have a format function and a value, run the function
-            if (format && typeof format === 'function') {
-                // so, typically there is a cell object which contains data as the functions "this"
-                // but we are in a action so simulate it by passing in the data we expect the function to have
-                // while we are here, might as well pass in an export parameter so they can modify behavior for export if desired
-                value = format.call(EmberObject.create({column, row, table, rawValue, export: true}), rawValue);
-            }
-
-            // return the value, though convert null/undefined into a string
-            return isNone(value) ? '' : value;
-        });
-
-        // add that data into the main array
-        data.pushObject(rowData);
-    });
-
-    // finally, pass our 2 dimensional array to the function to convert to a file download
-    createCSV(data, title);
-}
+import EmberObject from '@ember/object';
+import {isEmpty, isNone} from '@ember/utils';
+import Papa from 'papaparse';
+/**
+ * Used internally only. DESCRIPTION NEEDED
+ * @class Export
+ * @module Utils
+ */
+/**
+ * Creates a CSV file from a data array and a title
+ * @param  {Array} data        Array of table cells
+ * @param  {Title} [name=null] Name to export
+ */
+export function createCSV(data, name = null) {
+    // first step, we need to extra the cells into "Cell","Cell 2" format, use JSON.stringify as it makes most escapes
+    // regex removes the brackets, as its an array we are calling stringify on
+    let rows = Papa.unparse(data);
+
+    // next, join that using newlines and export as data CSV
+    let encodedUri = `data:text/csv;charset=utf-8,${encodeURIComponent(rows)}`;
+
+    // downloading is a bit weird. We create a link element with the name and URL then click the element
+    let link = document.createElement('a');
+    link.setAttribute('href', encodedUri);
+    link.setAttribute('download', `${name || 'Export'}.csv`);
+    document.body.appendChild(link); // Required for FF
+    link.click(); // This will download the data file
+}
+
+/**
+ * Exports an Ember Light Table to CSV
+ * @param  {Table} table             Table class, just needs to include rows and columns
+ * @param  {String} [title='Export'] Title to use for exporting
+ */
+export default function exportTable(table, title = 'Export') {
+    // start by filtering out columns which opted out of exporting. Examples include action buttons and the row toggle
+    let columns = table.get('columns').filter(({canExport}) => {
+        // if canExport is defined, require it to be true
+        return isNone(canExport) || canExport;
+    });
+
+    // ensure we have columns and data
+    if (isEmpty(columns)) {
+        return;
+    }
+
+    // start the data with just the labels from the columns
+    let data = [columns.map(({exportLabel, label}) => exportLabel || label)];
+
+    // next, populate data by iterating through the current rows
+    table.get('rows').forEach((row) => {
+        // in each row, iterate through the columns
+        let rowData = columns.map((column) => {
+            let {valuePath, format} = column;
+            // flat value pulled from the model
+            let rawValue = valuePath ? row.get(valuePath) : '';
+            let value = rawValue;
+            // if we have a format function and a value, run the function
+            if (format && typeof format === 'function') {
+                // so, typically there is a cell object which contains data as the functions "this"
+                // but we are in a action so simulate it by passing in the data we expect the function to have
+                // while we are here, might as well pass in an export parameter so they can modify behavior for export if desired
+                value = format.call(EmberObject.create({column, row, table, rawValue, export: true}), rawValue);
+            }
+
+            // return the value, though convert null/undefined into a string
+            return isNone(value) ? '' : value;
+        });
+
+        // add that data into the main array
+        data.pushObject(rowData);
+    });
+
+    // finally, pass our 2 dimensional array to the function to convert to a file download
+    createCSV(data, title);
+}

package/addon/utils/formats.js

@@ -1,42 +1,46 @@
-/* global moment */
-import {htmlSafe} from '@ember/string';
-import {isNone} from '@ember/utils';
-
-/**
- * Format function which replaces the value with a basic Yes/No format for if its true or false
- * @param  {Any} value Value to test
- * @return {String}    "Yes" if the value is truthy, "No" otherwise
- */
-export function formatBoolean(value) {
-    return value ? 'Yes' : 'No';
-}
-
-/**
- * Generates a format function which returns the value or an italic default text
- * @param  {String} [nullText='None'] Text if the value is null
- * @return {Function}                 Function to pass into the column format
- */
-export function formatNullable(nullText = 'None') {
-    return function(value) {
-        if (isNone(value)) {
-            return this.get('export') ? '' : htmlSafe(`<i>${nullText}</i>`);
-        }
-        return value;
-    };
-}
-
-/**
- * Generates a function which formats a moment based on the specified format
- * @param  {String} format       moment format
- * @param  {String} exportFormat moment format used on exporting
- * @return {Function}      Function to pass into a column which formats by a moment
- */
-export function formatMoment(format, exportFormat = null) {
-    return function(date) {
-        if (moment.isMoment(date)) {
-            // if we are exporting and have an export format, use that
-            let useFormat = exportFormat && this.get('export') ? exportFormat : format;
-            return date.format(useFormat);
-        }
-    };
-}
+/* global moment */
+import {htmlSafe} from '@ember/string';
+import {isNone} from '@ember/utils';
+/**
+ * DESCRIPTION NEEDED
+ * @class Format
+ * @module Utils
+ */
+/**
+ * Format function which replaces the value with a basic Yes/No format for if its true or false
+ * @param  {Any} value Value to test
+ * @return {String}    "Yes" if the value is truthy, "No" otherwise
+ */
+export function formatBoolean(value) {
+    return value ? 'Yes' : 'No';
+}
+
+/**
+ * Generates a format function which returns the value or an italic default text
+ * @param  {String} [nullText='None'] Text if the value is null
+ * @return {Function}                 Function to pass into the column format
+ */
+export function formatNullable(nullText = 'None') {
+    return function(value) {
+        if (isNone(value)) {
+            return this.get('export') ? '' : htmlSafe(`<i>${nullText}</i>`);
+        }
+        return value;
+    };
+}
+
+/**
+ * Generates a function which formats a moment based on the specified format
+ * @param  {String} format       moment format
+ * @param  {String} exportFormat moment format used on exporting
+ * @return {Function}      Function to pass into a column which formats by a moment
+ */
+export function formatMoment(format, exportFormat = null) {
+    return function(date) {
+        if (moment.isMoment(date)) {
+            // if we are exporting and have an export format, use that
+            let useFormat = exportFormat && this.get('export') ? exportFormat : format;
+            return date.format(useFormat);
+        }
+    };
+}