Option to view properties as flat list (#877)

emberjs · Oct 18, 2018 · eec870f · eec870f
1 parent 2d072aa
commit eec870f
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 145 deletions.
diff --git a/app/components/mixin-detail.js b/app/components/mixin-detail.js
@@ -68,13 +68,10 @@ export default Component.extend({
     },
 
     saveProperty(property, value, dataType) {
-      let mixinIndex = this.get('mixinDetails.model.mixins').indexOf(this.get('model'));
-
       this.get('port').send('objectInspector:saveProperty', {
         objectId: this.get('objectId'),
         property,
         value,
-        mixinIndex,
         dataType
       });
     }

diff --git a/app/components/mixin-details.js b/app/components/mixin-details.js
@@ -1,5 +1,34 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { sort } from '@ember/object/computed';
+
 export default Component.extend({
+  /**
+   * Used by the `sort` computed macro.
+   *
+   * @property sortProperties
+   * @type {Array<String>}
+   */
+  sortProperties: ['name'],
+
+  /**
+   * Sort the properties by name to make them easier to find in the object inspector.
+   *
+   * @property sortedAllProperties
+   * @type {Array<Object>}
+   */
+  sortedAllProperties: sort('allProperties', 'sortProperties'),
+
+  allProperties: computed('model', function() {
+    const props = this.get('model.mixins').map(function(mixin) {
+      return mixin.properties.filter(function(p) {
+        return !p.hasOwnProperty('overridden');
+      });
+    });
+
+    return props.flat();
+  }),
+
   actions: {
     traceErrors() {
       this.get('port').send('objectInspector:traceErrors', {

diff --git a/app/components/mixin-property.js b/app/components/mixin-property.js
@@ -4,6 +4,7 @@ import { equal, alias, and } from '@ember/object/computed';
 import { next } from '@ember/runloop';
 
 export default Component.extend({
+  tagName: '',
   isEdit: false,
 
   /**

diff --git a/app/components/object-inspector.js b/app/components/object-inspector.js
@@ -12,6 +12,8 @@ export default Component.extend({
    */
   application: null,
 
+  propDisplayType: 'grouped',
+
   trail: computed('model.[]', function() {
     let nested = this.get('model').slice(1);
     if (nested.length === 0) { return ""; }
@@ -38,6 +40,10 @@ export default Component.extend({
 
     toggleInspector() {
       this.sendAction('toggleInspector', ...arguments);
+    },
+
+    setPropDisplay(type) {
+      this.set('propDisplayType', type);
     }
   }
 });
diff --git a/app/styles/object_inspector.scss b/app/styles/object_inspector.scss
@@ -11,6 +11,17 @@
   word-break: break-all;
 }
 
+.object-inspector-toolbar.toolbar {
+  // override default .toolbar height
+  // based on table view header height
+  min-height: 30px;
+  border-bottom: 1px solid var(--base03);
+
+  .toolbar__radio--first {
+    margin-left: 7px;
+  }
+}
+
 .mixin__property-dependency-list {
   position: relative;
   margin-bottom: 5px;

diff --git a/app/templates/components/mixin-details.hbs b/app/templates/components/mixin-details.hbs
@@ -17,139 +17,33 @@
   </div>
 {{/if}}
 
-{{#each model.mixins as |item|}}
-  {{#mixin-detail model=item mixinDetails=this as |mixin|}}
-    <div class="mixin {{mixin.model.type}} {{if mixin.isExpanded 'mixin_state_expanded'}} {{if mixin.model.properties.length 'mixin_props_yes' 'mixin_props_no'}} js-object-detail">
-      {{#if mixin.model.properties.length}}
-        <h2 class="mixin__name js-object-detail-name" {{action "toggleExpanded" target=mixin}}>{{mixin.model.name}}</h2>
-      {{else}}
-        <h2 class="mixin__name mixin__name--no-props js-object-detail-name">{{mixin.model.name}}</h2>
-      {{/if}}
-      {{#if mixin.isExpanded}}
-        <ul class="mixin__properties">
-          {{#each mixin.sortedProperties as |prop|}}
-            {{#mixin-property model=prop mixin=mixin as |property|}}
-              <li class="{{if property.isOverridden 'mixin__property_state_overridden'}} mixin__property js-object-property">
-                <!-- Disclosure Triangle -->
-                {{#if property.hasDependentKeys}}
-                  <button
-                    class="mixin__cp-toggle {{if property.showDependentKeys "mixin__cp-toggle--expanded"}}"
-                    {{action "toggleDeps" target=property}}>
-                    {{svg-jar "disclosure-triangle"
-                      title="Toggle dependent keys"
-                      width="9px" height="9px"}}
-                  </button>
-                {{else}}
-                  <span class="pad"></span>
-                {{/if}}
-
-                <!-- Property Icon -->
-                {{#if property.isService}}
-                  <span class="mixin__property-icon-container" title="Service">
-                    <span class="mixin__property-icon mixin__property-icon--service"></span>
-                  </span>
-                {{else if property.isComputedProperty}}
-                  <span
-                    class="mixin__property-icon-container"
-                    title="{{if property.model.code property.model.code 'code not avaliable' }}"
-                    {{action "toggleDeps" target=property}}>
-                    <span class="mixin__property-icon mixin__property-icon--computed"></span>
-                  </span>
-                {{else}}
-                  <span class="mixin__property-icon-container" title="Property">
-                    <span class="mixin__property-icon mixin__property-icon--property"></span>
-                  </span>
-                {{/if}}
-
-                <!-- Property Name -->
-                <span class="mixin__property-name js-object-property-name">
-                  {{#if property.isService}}
-                    <span
-                      title="service"
-                      class="js-property-name-service mixin__property--group">
-                      {{property.model.name}}
-                    </span>
-                  {{else}}
-                    {{#if property.hasDependentKeys}}
-                      <span
-                        title="computed"
-                        class="js-property-name-computed mixin__property--group">
-                        {{property.model.name}}
-                      </span>
-                    {{else}}
-                      {{property.model.name}}
-                    {{/if}}
-                  {{/if}}
-                </span>
-
-                <span class="mixin__property-value-separator">: </span>
-
-                <!-- Property Value -->
-                {{#unless property.isEdit}}
-                  {{#if (and property.isComputedProperty (not property.isCalculated))}}
-                    <button
-                      class="mixin__calc-btn js-calculate"
-                      title="compute property"
-                      {{action "calculate" property.model bubbles=false target=mixin}}>
-                      {{svg-jar "calculate" width="16px" height="16px"}}
-                    </button>
-                  {{else}}
-                    <span
-                      {{action "valueClick" property.model target=property}}
-                      class="{{property.model.value.type}} {{if property.isService "type-service"}} mixin__property-value js-object-property-value">
-                      {{property.model.value.inspect}}
-                    </span>
-                  {{/if}}
-                {{else}}
-                  {{#unless property.isDate}}
-                    {{property-field
-                      value=property.txtValue
-                      finished-editing="finishedEditing"
-                      save-property="saveProperty"
-                      propertyComponent=property
-                      class="mixin__property-value-txt js-object-property-value-txt"}}
-                  {{else}}
-                    {{date-property-field
-                      allowInput=true
-                      date=(readonly property.dateValue)
-                      dateFormat="Y-m-d"
-                      class="mixin__property-value-txt js-object-property-value-date"
-                      onChange=(action "dateSelected" target=property)
-                      onClose=(action "finishedEditing" target=property)}}
-                  {{/unless}}
-                {{/unless}}
-
-               <span class="mixin__property-overridden-by">(Overridden by {{property.model.overridden}})</span>
-
-               <button
-                 class="mixin__send-btn send-to-console js-send-to-console-btn"
-                 title="Send to console"
-                 {{action "sendToConsole" property.model target=mixin}}>
-                 {{svg-jar "send-with-text" width="20px" height="10px"}}
-               </button>
-             </li>
-
-              {{#if property.showDependentKeys}}
-                <li class="mixin__property-dependency-list">
-                  {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
-                  <ul>
-                    {{#each property.model.dependentKeys as |depKey index|}}
-                      <li class="mixin__property-dependency-item">
-                        {{svg-jar "dependent-key-bullet" width="9px" height="9px"}}
-                        <span class="mixin__property-dependency-name" data-label="object-property-name">
-                          {{depKey}}
-                        </span>
-                      </li>
-                    {{/each}}
-                  </ul>
-                </li>
-              {{/if}}
-            {{/mixin-property}}
-          {{else}}
-            <li class="mixin__property">No Properties</li>
-          {{/each}}
-        </ul>
-      {{/if}}
-    </div>
-  {{/mixin-detail}}
-{{/each}}
+{{#if (eq displayType "grouped")}}
+  {{#each model.mixins as |item|}}
+    {{#mixin-detail model=item mixinDetails=this as |mixin|}}
+      <div class="mixin {{mixin.model.type}} {{if mixin.isExpanded 'mixin_state_expanded'}} {{if mixin.model.properties.length 'mixin_props_yes' 'mixin_props_no'}} js-object-detail">
+        {{#if mixin.model.properties.length}}
+          <h2 class="mixin__name js-object-detail-name" {{action "toggleExpanded" target=mixin}}>{{mixin.model.name}}</h2>
+        {{else}}
+          <h2 class="mixin__name mixin__name--no-props js-object-detail-name">{{mixin.model.name}}</h2>
+        {{/if}}
+        {{#if mixin.isExpanded}}
+          <ul class="mixin__properties">
+            {{#each mixin.sortedProperties as |prop|}}
+              {{mixin-property model=prop mixin=mixin}}
+            {{else}}
+              <li class="mixin__property">No Properties</li>
+            {{/each}}
+          </ul>
+        {{/if}}
+      </div>
+    {{/mixin-detail}}
+  {{/each}}
+{{else}}
+  <div class="mixin__properties">
+    {{#mixin-detail model=this mixinDetails=this as |mixin|}}
+      {{#each sortedAllProperties as |prop|}}
+        {{mixin-property model=prop mixin=mixin}}
+      {{/each}}
+    {{/mixin-detail}}
+  </div>
+{{/if}}
diff --git a/app/templates/components/mixin-property.hbs b/app/templates/components/mixin-property.hbs
@@ -1 +1,115 @@
-{{yield this}}
+<li class="{{if isOverridden 'mixin__property_state_overridden'}} mixin__property js-object-property">
+  <!-- Disclosure Triangle -->
+  {{#if hasDependentKeys}}
+    <button
+      class="mixin__cp-toggle {{if showDependentKeys "mixin__cp-toggle--expanded"}}"
+      {{action "toggleDeps"}}>
+      {{svg-jar "disclosure-triangle"
+        title="Toggle dependent keys"
+        width="9px" height="9px"}}
+    </button>
+  {{else}}
+    <span class="pad"></span>
+  {{/if}}
+
+  <!-- Property Icon -->
+  {{#if isService}}
+    <span class="mixin__property-icon-container" title="Service">
+      <span class="mixin__property-icon mixin__property-icon--service"></span>
+    </span>
+  {{else if isComputedProperty}}
+    <span
+      class="mixin__property-icon-container"
+      title="{{if model.code model.code 'code not avaliable' }}"
+      {{action "toggleDeps"}}>
+      <span class="mixin__property-icon mixin__property-icon--computed"></span>
+    </span>
+  {{else}}
+    <span class="mixin__property-icon-container" title="Property">
+      <span class="mixin__property-icon mixin__property-icon--property"></span>
+    </span>
+  {{/if}}
+
+  <!-- Property Name -->
+  <span class="mixin__property-name js-object-property-name">
+    {{#if isService}}
+      <span
+        title="service"
+        class="js-property-name-service mixin__property--group">
+        {{model.name}}
+      </span>
+    {{else}}
+      {{#if hasDependentKeys}}
+        <span
+          title="computed"
+          class="js-property-name-computed mixin__property--group">
+          {{model.name}}
+        </span>
+      {{else}}
+        {{model.name}}
+      {{/if}}
+    {{/if}}
+  </span>
+
+  <span class="mixin__property-value-separator">: </span>
+
+  <!-- Property Value -->
+  {{#unless isEdit}}
+    {{#if (and isComputedProperty (not isCalculated))}}
+      <button
+        class="mixin__calc-btn js-calculate"
+        title="compute property"
+        {{action "calculate" model bubbles=false target=mixin}}>
+        {{svg-jar "calculate" width="16px" height="16px"}}
+      </button>
+    {{else}}
+      <span
+        {{action "valueClick" model}}
+        class="{{model.value.type}} {{if isService "type-service"}} mixin__property-value js-object-property-value">
+        {{model.value.inspect}}
+      </span>
+    {{/if}}
+  {{else}}
+    {{#unless isDate}}
+      {{property-field
+        value=txtValue
+        finished-editing="finishedEditing"
+        save-property="saveProperty"
+        propertyComponent=this
+        class="mixin__property-value-txt js-object-property-value-txt"}}
+    {{else}}
+      {{date-property-field
+        allowInput=true
+        date=(readonly dateValue)
+        dateFormat="Y-m-d"
+        class="mixin__property-value-txt js-object-property-value-date"
+        onChange=(action "dateSelected")
+        onClose=(action "finishedEditing")}}
+    {{/unless}}
+  {{/unless}}
+
+  <span class="mixin__property-overridden-by">(Overridden by {{model.overridden}})</span>
+
+  <button
+    class="mixin__send-btn send-to-console js-send-to-console-btn"
+    title="Send to console"
+    {{action "sendToConsole" model target=mixin}}>
+    {{svg-jar "send-with-text" width="20px" height="10px"}}
+  </button>
+</li>
+
+{{#if showDependentKeys}}
+  <li class="mixin__property-dependency-list">
+    {{svg-jar "dependent-key-connection" width="20px" height="10px"}}
+    <ul>
+      {{#each model.dependentKeys as |depKey index|}}
+        <li class="mixin__property-dependency-item">
+          {{svg-jar "dependent-key-bullet" width="9px" height="9px"}}
+          <span class="mixin__property-dependency-name" data-label="object-property-name">
+            {{depKey}}
+          </span>
+        </li>
+      {{/each}}
+    </ul>
+  </li>
+{{/if}}