Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flat Display of Object Properties #877

Merged
merged 1 commit into from
Oct 18, 2018
+226 −145
Merged

Flat Display of Object Properties #877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions app/components/mixin-detail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
}
Expand Down
29 changes: 29 additions & 0 deletions app/components/mixin-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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', {
Expand Down
1 change: 1 addition & 0 deletions app/components/mixin-property.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { equal, alias, and } from '@ember/object/computed';
import { next } from '@ember/runloop';

export default Component.extend({
tagName: '',
isEdit: false,

/**
Expand Down
6 changes: 6 additions & 0 deletions app/components/object-inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ""; }
Expand All @@ -38,6 +40,10 @@ export default Component.extend({

toggleInspector() {
this.sendAction('toggleInspector', ...arguments);
},

setPropDisplay(type) {
this.set('propDisplayType', type);
}
}
});
11 changes: 11 additions & 0 deletions app/styles/object_inspector.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
166 changes: 30 additions & 136 deletions app/templates/components/mixin-details.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
116 changes: 115 additions & 1 deletion app/templates/components/mixin-property.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Loading