Tidy up data tab (emberjs#1034)

* Add is-empty helper * explicit this for data tab * Remove record-filter component * Tidy up Records controller * Revert some changes
patricklx · Sep 19, 2022 · bd3882f · bd3882f
1 parent 2933c43
commit bd3882f
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 74 deletions.
diff --git a/app/components/record-filter.js b/app/components/record-filter.js
diff --git a/app/controllers/records.js b/app/controllers/records.js
@@ -1,8 +1,7 @@
 import { isEmpty } from '@ember/utils';
-import { observer, computed, get, set } from '@ember/object';
+import { action, observer, computed, get } from '@ember/object';
 import Controller, { inject as controller } from '@ember/controller';
 import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
-import { none } from '@ember/object/computed';
 
 export default Controller.extend({
   application: controller(),
@@ -13,19 +12,14 @@ export default Controller.extend({
 
   filterValue: null,
 
-  noFilterValue: none('filterValue'),
-
   modelChanged: observer('model', function() {
     this.set('searchValue', '');
   }),
 
   recordToString(record) {
-    let search = '';
-    let searchKeywords = get(record, 'searchKeywords');
-    if (searchKeywords) {
-      search = get(record, 'searchKeywords').join(' ');
-    }
-    return search.toLowerCase();
+    return (
+      get(record, 'searchKeywords') || []
+    ).join(' ').toLowerCase();
   },
 
   /**
@@ -39,7 +33,6 @@ export default Controller.extend({
    *     valuePath: 'title',
    *     name: 'Title'
    *   }]
-   * ```
    *
    * @property schema
    * @type {Object}
@@ -51,7 +44,7 @@ export default Controller.extend({
     }));
   }),
 
-  filtered: computed('searchValue', 'model.@each.{columnValues,filterValues}', 'filterValue', function() {
+  filteredRecords: computed('searchValue', 'model.@each.{columnValues,filterValues}', 'filterValue', function() {
     let search = this.searchValue;
     let filter = this.filterValue;
 
@@ -76,28 +69,13 @@ export default Controller.extend({
     this.filters = [];
   },
 
-  actions: {
-    /**
-     * Called whenever the filter is updated.
-     *
-     * @method setFilter
-     * @param {String} val
-     */
-    setFilter(val) {
-      val = val || null;
-      this.set('filterValue', val);
-    },
+  setFilter: action(function(val) {
+    val = val || null;
+    this.set('filterValue', val);
+  }),
 
-    /**
-     * Inspect a specific record. Called when a row
-     * is clicked.
-     *
-     * @method inspectModel
-     * @property {Object}
-     */
-    inspectModel([record]) {
-      set(this, 'selection', record);
-      this.port.send('data:inspectModel', { objectId: get(record, 'objectId') });
-    }
-  }
+  inspectModel: action(function([record]) {
+    this.set('selection', record);
+    this.port.send('data:inspectModel', { objectId: get(record, 'objectId') });
+  }),
 });
diff --git a/app/templates/components/record-filter.hbs b/app/templates/components/record-filter.hbs
diff --git a/app/templates/model-types-toolbar.hbs b/app/templates/model-types-toolbar.hbs
@@ -8,21 +8,21 @@
 
   <div class="toolbar__checkbox js-filter-hide-empty-model-types">
     <label for="options-hideEmptyModelTypes">
-      {{input
-        type="checkbox"
-        checked=hideEmptyModelTypes
-        id="options-hideEmptyModelTypes"
-      }}
+      <Input
+        @type="checkbox"
+        @checked={{this.hideEmptyModelTypes}}
+        @id="options-hideEmptyModelTypes"
+      />
       Hide Empty Model Types
     </label>
   </div>
   <div class="toolbar__checkbox js-filter-order-records-by-count">
     <label for="options-orderByRecordCount">
-      {{input
-        type="checkbox"
-        checked=orderByRecordCount
-        id="options-orderByRecordCount"
-      }}
+      <Input
+        @type="checkbox"
+        @checked={{this.orderByRecordCount}}
+        @id="options-orderByRecordCount"
+      />
       Order Models By Record Count
     </label>
   </div>

diff --git a/app/templates/model-types.hbs b/app/templates/model-types.hbs
@@ -3,7 +3,7 @@
   @setIsDragging={{action "setIsDragging" target=application}}
   @sorted={{readonly (if this.orderByRecordCount this.sortByDescCount this.sortByName)}}
   @type="model"
-  @width={{navWidth}}
+  @width={{this.navWidth}}
 >
   {{outlet}}
 </ItemTypes>
diff --git a/app/templates/records-toolbar.hbs b/app/templates/records-toolbar.hbs
@@ -7,24 +7,18 @@
   <Ui::ToolbarDivider />
 
   <button
-    class="{{if noFilterValue "active"}} toolbar__radio js-filter"
-    {{action "setFilter"}}
+    class="{{if (is-empty this.filterValue) "active"}} toolbar__radio js-filter"
+    {{on "click" (fn this.setFilter "")}}
   >
     All
   </button>
 
-  {{#each filters as |item|}}
-    {{#record-filter
-      model=item
-      filterValue=filterValue
-    as |filter|
-    }}
-      <button
-        class="{{if filter.checked "active"}} toolbar__radio js-filter"
-        {{action "setFilter" filter.model.name}}
-      >
-        {{filter.model.desc}}
-      </button>
-    {{/record-filter}}
+  {{#each this.filters as |filter|}}
+    <button
+      class="{{if (eq this.filterValue filter.name) "active"}} toolbar__radio js-filter"
+      {{on "click" (fn this.setFilter filter.name)}}
+    >
+      {{filter.desc}}
+    </button>
   {{/each}}
 </div>
diff --git a/app/templates/records.hbs b/app/templates/records.hbs
@@ -1,6 +1,6 @@
 {{#ember-table as |t|}}
   {{#t.head
-    columns=columns
+    columns=this.columns
     sorts=sorts
     onUpdateSorts=(action (mut sorts))
   as |h|
@@ -10,10 +10,10 @@
     {{/h.row}}
   {{/t.head}}
   {{#t.body
-    rows=filtered
+    rows=this.filteredRecords
     checkboxSelectionMode="none"
-    selection=selection
-    onSelect=(action "inspectModel")
+    selection=this.selection
+    onSelect=this.inspectModel
   as |b|
   }}
     {{#b.row