@bennerinformatics/ember-fw-table 2.1.4 → 2.1.6

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

@@ -64,11 +64,11 @@ const TableResort = Component.extend({
      * If defined with an action, adds a delete button to delete items
      *
      * @public
-     * @default true
+     * @default null
      * @property delete
      * @type {Action}
      */
-    delete: () => {},
+    delete: null,
 
     /**
      * The icon that will be used for the delete button. Useful if you want the button to do something other than delete.
@@ -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

@@ -187,6 +187,19 @@ const TableSortable = Component.extend({
      */
     defaultSort: null,
 
+    // enables collapse UI
+    collapsible: false,
+
+    // initial open state (optional)
+    defaultOpen: true,
+
+    // internal open/closed state
+    _internalOpen: null,
+
+    // treat non-collapsible tables as always open
+    _open: computed('collapsible', '_internalOpen', function() {
+        return this.collapsible ? !!this._internalOpen : true;
+    }),
     /**
      * Private copy of defaultSort, made an array if its not
      *
@@ -362,6 +375,10 @@ const TableSortable = Component.extend({
         if (this.noPanel) {
             this.set('classNames', null);
         }
+        // initialize collapse state once when enabled
+        if (this.collapsible && isNone(this._internalOpen)) {
+            this.set('_internalOpen', this.defaultOpen !== false);
+        }
     },
 
     actions: {
@@ -414,6 +431,12 @@ const TableSortable = Component.extend({
          */
         export() {
             exportTable(this.table, this.title);
+        },
+        /**
+        * Called by the chevron icon to collapse the current table
+        */
+        toggleCollapse() {
+            this.toggleProperty('_internalOpen');
         }
     }
 });

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

@@ -5,6 +5,9 @@
                 <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}}

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

@@ -1,5 +1,12 @@
-{{#if (or (and hasBlock showHeader) title canExport)}}
+{{#if (or collapsible (and hasBlock showHeader) title canExport)}}
     <header class="panel-heading">
+        {{#if collapsible}}
+            <a role="button"
+               aria-expanded={{if _open "true" "false"}}
+               {{action "toggleCollapse"}}>
+                <i class="fas {{if _open "fa-chevron-down" "fa-chevron-right"}} fa-fw"></i>
+            </a>
+        {{/if}}
         {{#if (and hasBlock showHeader)}}
             {{yield (action 'export') true}}
         {{else}}
@@ -17,6 +24,7 @@
         <div class="clearfix"/>
     </header>
 {{/if}}
+{{#if _open}}
 <section class="panel-body table-body">
     {{#if (and table.isEmpty (not headerEmpty))}}
         {{empty}}
@@ -47,6 +55,7 @@
         {{/light-table}}
     {{/if}}
 </section>
+{{/if}}
 {{#if (and hasBlock showFooter)}}
     <footer class="panel-footer clearfix">
         {{yield (action 'export') false}}

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