@bennerinformatics/ember-fw-table 2.1.3 → 2.1.5

package/addon/components/fw-pagination-wrapper.js

@@ -414,7 +414,7 @@ export default Component.extend({
     },
 
     /**
-     * Query for settign a new sort order. Internal method.
+     * Query for setting a new sort order. Internal method.
      * @method querySort
      * @private
      * @param  {Number}  page      Page number to start
@@ -551,7 +551,7 @@ export default Component.extend({
                 page = max;
             }
 
-            // if we havve entries at the page number, use those
+            // if we have entries at the page number, use those
             // if missing, query them
             if (isNone(this.pageEntries.objectAt(page - 1))) {
                 this.incrementProperty('pagesSearching');

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

@@ -80,6 +80,16 @@ const TableResort = Component.extend({
      */
     deleteIcon: 'fa-regular fa-trash-can',
 
+    /**
+     * If true, show the order (sortKey) in the table, to the right of the handle
+     *
+     * @public
+     * @default false
+     * @property showOrder
+     * @type {Boolean}
+     */
+    showOrder: false,
+
     /**
      * String pointer to the model's sort key, will be used to sort the items and modify the key later
      *
@@ -179,8 +189,12 @@ const TableResort = Component.extend({
         if (activeFilter) {
             items = items.filter(activeFilter);
         }
-        items.forEach((item, index) => {
-            item.set(this.sortKey, index + 1);
+        let index = 1;
+        items.forEach((item) => {
+            // If items are deleted, they will typically still be included in the array at this point, so we check isDeleted
+            if (!item.isDeleted) {
+                item.set(this.sortKey, index++);
+            }
         });
     },
 

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

@@ -224,7 +224,18 @@ const TableSortable = Component.extend({
     sortOrder: computed('_defaultSort.[]', 'sortColumn', function() {
         let sortColumn = this.sortColumn;
         if (sortColumn) {
-            return [sortColumn].pushObjects(this._defaultSort);
+            // this addresses a bug where sorting by the default sort column would break
+            // in that case just sort by the selected column and ignore the default sort
+            if (this._defaultSort.any((sort) => {
+                return sort === sortColumn || sort === `${sortColumn}:desc` || `${sort}:desc` === sortColumn;
+            })) {
+                return [sortColumn];
+            }
+            // otherwise add the sort column to the front of the default sort array so the default sort is done after
+            let sortOrder = this._defaultSort.slice();
+            sortOrder.unshift(sortColumn);
+
+            return sortOrder;
         }
         return this._defaultSort;
     }),
@@ -239,7 +250,7 @@ const TableSortable = Component.extend({
     sortedData: sort('data', 'sortOrder'),
 
     /**
-     * Internal table instance, in general changes to the table should be done to columns or data so they update propery
+     * Internal table instance, in general changes to the table should be done to columns or data so they update properly
      *
      * @protected
      * @property table
@@ -375,7 +386,7 @@ const TableSortable = Component.extend({
             // determine how we are sorting
             let sortKey = column.sortKey || column.valuePath;
 
-            // if the column is now decending, sort decending
+            // if the column is now descending, sort descending
             if (!column.ascending) {
                 sortKey = `${sortKey}:desc`;
             }

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

@@ -1,10 +1,13 @@
-<SortableGroup @tagName="ul" @class="js-list-sort resort-list" @onChange={{action "reorderItems"}} as |group|>
+<ul {{sortable-group onChange=(action "reorderItems")}} class="js-list-sort resort-list">
     {{#each sortedItems as |item|}}
-        <SortableItem @tagName="li" @model={{item}} @group={{group}} @handle=".handle" @spacing={{spacing}}>
+        <li {{sortable-item model=item 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>
                 </span>
+                {{#if showOrder}}
+                    <span class="input-group-addon">{{get item sortKey}}</span>
+                {{/if}}
                 {{#if hasBlock}}
                     {{#if allowExpand}}
                         {{#if item.unexpandable}}
@@ -35,8 +38,8 @@
                     <span class="input-group-addon"/>
                 {{/if}}
             </div>
-        </SortableItem>
+        </li>
     {{else}}
         {{empty}}
     {{/each}}
-</SortableGroup>
+</ul>

package/docs/api.js

@@ -0,0 +1,61 @@
+YUI.add("yuidoc-meta", function(Y) {
+   Y.YUIDoc = { meta: {
+    "classes": [
+        "BaseCells",
+        "Export",
+        "Format",
+        "FwCellAction",
+        "FwCellBoolean",
+        "FwCellNullable",
+        "FwCellPermissionIcon",
+        "FwColumnSortable",
+        "FwColumnTitle",
+        "FwDeleteModal",
+        "FwExpandableRow",
+        "FwPaginationWrapper",
+        "FwRowToggle",
+        "FwRowToggleIndex",
+        "FwTableExpandedRow",
+        "FwTableResort",
+        "FwTableSortable",
+        "Row",
+        "Table",
+        "TableUtil"
+    ],
+    "modules": [
+        "CellComponents",
+        "ColumnComponents",
+        "Components",
+        "Introduction",
+        "Utils"
+    ],
+    "allModules": [
+        {
+            "displayName": "CellComponents",
+            "name": "CellComponents",
+            "description": "Cell Components in Ember FW Table.\n\nFor each of these cell components, you call them in the following way:\n```js\ncolumn: [\n    {\n        label: 'Actions',\n        cellComponent: 'fw-cell-action'\n    }\n]\n```"
+        },
+        {
+            "displayName": "ColumnComponents",
+            "name": "ColumnComponents",
+            "description": "Column Components in Ember FW Table.\n\nFor each of these column components, call them in the following way:\n\n```js\ncolumns: [\n    {\n        label: 'Column',\n        component: 'fw-column-title'\n    }\n]\n\n```"
+        },
+        {
+            "displayName": "Components",
+            "name": "Components",
+            "description": "Components defined by Ember FW Table."
+        },
+        {
+            "displayName": "Introduction",
+            "name": "Introduction",
+            "description": "The primary purpose of ember-fw-table is to make a simplified form of ember-light-table,\n and which is easier to use than its parent. Within it as well, we have added a few extra\n things that make more complicated aspects of tables also easier to incorporate (such as\n paginated tables). For more information on ember-light-table,\n [see their documentation](https://adopted-ember-addons.github.io/ember-light-table/docs). For a more\n comprehensive guide to Ember FW Table, see our [Ember FW Table](https://linformatics.bitbucket.io/docs/addons/client/ember-fw-table).\n This is just designed to be API docs to briefly describe various elements and how to use them."
+        },
+        {
+            "displayName": "Utils",
+            "name": "Utils",
+            "description": "Utils defined in Ember FW Table."
+        }
+    ],
+    "elements": []
+} };
+});

package/docs/assets/css/custom.css

@@ -0,0 +1,82 @@
+/*
+ * Custom styles for the YUIDoc Bootstrap Theme
+ * Authors: kevinlacotaco
+ *          tonybaroneee
+ */
+
+/* -- Navigation Bar -------------------------------------------------------- */
+
+.navbar .navbar-inner .brand {
+    height: 40px;
+    margin: 0;
+    padding: 0 5px 0 10px;
+    cursor: default;
+}
+
+.navbar-text {
+    font-size: 12px;
+    padding-left: 5px;
+    cursor: default;
+}
+.navbar-default {
+    background-color: #7E3DB7 !important;
+}
+.navbar-brand span {
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 16px !important;
+}
+.navbar-form {
+    margin-right: 3px;
+}
+.navbar-right li a {
+    color: white !important;
+}
+#options-form {
+    margin-top: 20px;
+}
+
+/* -- Sidebar --------------------------------------------------------------- */
+
+#sidebar .tab-content {
+    border: 1px solid #DFDFDF;
+    border-top: 0px;
+    padding-bottom: 5px;
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
+}
+
+#api-tabview-filter input {
+    width: 94.5%;
+}
+
+#sidebar .tab-pane li a {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+#sidebar .tab-pane li a:hover,
+#sidebar .tab-pane li a:focus {
+    outline: 0;
+    border: 0;
+    text-decoration: none;
+    color: #ffffff;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+    background-color: #0088cc;
+}
+
+/* -- Content --------------------------------------------------------------- */
+
+.content {
+    padding-bottom: 50px;
+}
+
+.content .page-header h1 small {
+    padding-left: 5px;
+}
+
+.content .well:not(.moduledesc) p {
+    margin: 9px 0;
+}