Add ability to sort models by record count

Author: nlfurniss

app/controllers/model-types.js

@@ -3,27 +3,36 @@ import { get, computed } from '@ember/object';
 import LocalStorageService from 'ember-inspector/services/storage/local';
 import { sort } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { HIDE_EMPTY_MODELS_KEY, ORDER_MODELS_BY_COUNT_KEY } from 'ember-inspector/utils/local-storage-keys';
 
 export default Controller.extend({
   application: controller(),
   navWidth: 180,
-  sortProperties: ['name'],
+  sortByNameProp: Object.freeze(['name']),
+  sortByDescCountProp: Object.freeze(['count:desc']),
   storage: service(`storage/${LocalStorageService.SUPPORTED ? 'local' : 'memory'}`),
+
   hideEmptyModelTypes: computed({
     get() {
-      return !!this.get('storage').getItem('are-model-types-hidden');
+      return getStoredPropertyValue(this.get('storage'), HIDE_EMPTY_MODELS_KEY);
     },
     set(key, value) {
-      if (!value) {
-        this.get('storage').removeItem('are-model-types-hidden');
-      } else {
-        this.get('storage').setItem('are-model-types-hidden', value);
-      }
-      return value;
+      return handleSettingProperty(this.get('storage'), HIDE_EMPTY_MODELS_KEY, value);
+    }
+  }),
+
+  orderByRecordCount: computed({
+    get() {
+      return getStoredPropertyValue(this.get('storage'), ORDER_MODELS_BY_COUNT_KEY);
+    },
+    set(key, value) {
+      return handleSettingProperty(this.get('storage'), ORDER_MODELS_BY_COUNT_KEY, value);
     }
   }),
 
-  sorted: sort('filtered', 'sortProperties'),
+  sortByName: sort('filtered', 'sortByNameProp'),
+
+  sortByDescCount: sort('filtered', 'sortByDescCountProp'),
 
   filtered: computed('model.@each.count', 'hideEmptyModelTypes', function() {
     return this.get('model').filter(item => {
@@ -37,3 +46,22 @@ export default Controller.extend({
     });
   })
 });
+
+/**
+ * Returns whether or not a given key has been set in storage.
+ * @param {*} storage
+ * @param {string} key
+ * @returns {boolean}
+ */
+function getStoredPropertyValue(storage, key) {
+  return !!storage.getItem(key);
+}
+
+function handleSettingProperty(storage, key, value) {
+  if (!value) {
+    storage.removeItem(key);
+  } else {
+    storage.setItem(key, value);
+  }
+  return value;
+}

app/templates/model-types-toolbar.hbs

@@ -5,4 +5,10 @@
         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"}}
+        Order Models By Record Count
+      </label>
+    </div>
 </div>

app/templates/model-types.hbs

@@ -1,7 +1,7 @@
 {{item-types
   header='Model Types'
   setIsDragging=(route-action 'setIsDragging')
-  sorted=(readonly sorted)
+  sorted=(readonly (if orderByRecordCount sortByDescCount sortByName))
   type='model'
   width=navWidth
 }}

app/utils/local-storage-keys.js

@@ -0,0 +1,5 @@
+// Names of keys set in the storage service.
+
+export const HIDE_EMPTY_MODELS_KEY = 'are-model-types-hidden';
+
+export const ORDER_MODELS_BY_COUNT_KEY = 'are-models-ordered-by-record-count';

tests/acceptance/data-test.js

@@ -6,6 +6,7 @@ import { setupApplicationTest } from 'ember-qunit';
 import { triggerPort } from '../helpers/trigger-port';
 import wait from 'ember-test-helpers/wait';
 import LocalStorageService from 'ember-inspector/services/storage/local';
+import { HIDE_EMPTY_MODELS_KEY, ORDER_MODELS_BY_COUNT_KEY } from 'ember-inspector/utils/local-storage-keys';
 
 let port, name;
 
@@ -33,10 +34,12 @@ module('Data Tab', function(hooks) {
 
   hooks.afterEach(function() {
     name = null;
-    // This is to ensure the hiding empty models setting does not persist across multiple test runs.
+    // This is to ensure settings in Storage do not persist across multiple test runs.
     let storageServiceToUse = LocalStorageService.SUPPORTED ? 'local' : 'memory';
     let storageService = this.owner.lookup(`service:storage/${storageServiceToUse}`);
-    storageService.removeItem('are-model-types-hidden');
+
+    storageService.removeItem(HIDE_EMPTY_MODELS_KEY);
+    storageService.removeItem(ORDER_MODELS_BY_COUNT_KEY);
   });
 
   function modelTypeFactory(options) {
@@ -196,6 +199,26 @@ module('Data Tab', function(hooks) {
     assert.dom('.js-model-type').exists({ count: 2 }, 'All models are present again');
   });
 
+  test('Order by record count', async function(assert) {
+    assert.expect(6);
+
+    await visit('/data/model-types');
+
+    assert.dom(findAll('.js-model-type-name')[0]).hasText('App.Comment');
+    assert.dom(findAll('.js-model-type-name')[1]).hasText('App.Post');
+
+    // Order models by record count.
+    await click('#options-orderByRecordCount');
+
+    assert.dom(findAll('.js-model-type-name')[0]).hasText('App.Post');
+    assert.dom(findAll('.js-model-type-name')[1]).hasText('App.Comment');
+
+    // Don't order models by record count.
+    await click('#options-orderByRecordCount');
+    assert.dom(findAll('.js-model-type-name')[0]).hasText('App.Comment');
+    assert.dom(findAll('.js-model-type-name')[1]).hasText('App.Post');
+  });
+
   test('Filtering records', async function t(assert) {
     await visit('/data/model-types');