@bennerinformatics/ember-fw-table 2.0.19 → 2.0.21

package/addon/documentation.js

@@ -1,98 +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
- */
+/* 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-delete-modal.hbs

@@ -1,12 +1,7 @@
-{{fw-fullscreen-modal "confirm-choice"
-    size="md"
-    model=(hash
+<FwFullscreenModal @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
-}}
+    }} @close={{close}} @scrollTop={{scrollTop}} />

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

@@ -1,74 +1,45 @@
-{{!-- 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>
+{{!-- 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}}
+        <FwLoadingSpinner />
+    {{else if pageEntries}}
+        {{!-- Page numbers --}}
+        {{#if (and showPages showPagesTop)}}
+            <div class="text-center" style="overflow:auto">
+                <PageNumbers @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}}
+            <FwLoadingSpinner />
+        {{else}}
+            {{!-- If given a column getter, use that for columns --}}
+            {{#if tableColumns}}
+                <FwTableSortable @data={{filteredEntries}} @columns={{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">
+                    <PageNumbers @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-expanded-rows.hbs

@@ -1,7 +1,7 @@
 {{#if hasColumns}}
     <dl class="dl-horizontal">
         {{#each columns as |column|}}
-            {{fw-table-expanded-row tableActions=tableActions table=table row=row column=column rawValue=(get row column.valuePath)}}
+            <FwTableExpandedRow @tableActions={{tableActions}} @table={{table}} @row={{row}} @column={{column}} @rawValue={{get row column.valuePath}} />
         {{/each}}
     </dl>
 {{/if}}

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

@@ -1,6 +1,6 @@
-{{#sortable-group tagName="ul" class="js-list-sort resort-list" onChange=(action "reorderItems") as |group|}}
+<SortableGroup @tagName="ul" @class="js-list-sort resort-list" @onChange={{action "reorderItems"}} as |group|>
     {{#each sortedItems as |item|}}
-        {{#sortable-item tagName="li" model=item group=group handle=".handle" spacing=spacing}}
+        <SortableItem @tagName="li" @model={{item}} @group={{group}} @handle=".handle" @spacing={{spacing}}>
             <div class="input-group">
                 <span class="input-group-addon handle draggable">
                     <i class="fa-solid fa-ellipsis-vertical fa-2"></i>
@@ -35,8 +35,8 @@
                     <span class="input-group-addon"/>
                 {{/if}}
             </div>
-        {{/sortable-item}}
+        </SortableItem>
     {{else}}
         {{empty}}
     {{/each}}
-{{/sortable-group}}
+</SortableGroup>

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

@@ -5,14 +5,7 @@
         {{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'
-                }}
+                <FwPromiseButton @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'}}>
@@ -37,35 +30,20 @@
             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|
-            }}
+            <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}} @resizeOnDrag={{resizeOnDrag}} />
+            <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}}
+                    <body.expanded-row as |row|>
+                        <FwTableExpandedRows @tableActions={{tableActions}} @table={{table}} @row={{row}} />
+                    </body.expanded-row>
                 {{/if}}
 
                 {{#if table.isEmpty}}
-                    {{#body.no-data}}
+                    <body.no-data>
                         {{empty}}
-                    {{/body.no-data}}
+                    </body.no-data>
                 {{/if}}
-            {{/t.body}}
+            </t.body>
         {{/light-table}}
     {{/if}}
 </section>

package/addon/utils/base-cells.js

@@ -1,40 +1,40 @@
-/**
- * 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);
-}
+/**
+ * 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);
+}