Restyling of data explorer

This commit is contained in:
Kane York 2015-07-08 16:46:36 -07:00
parent 6ac463290e
commit dad55e085b
9 changed files with 176 additions and 123 deletions

View File

@ -1,5 +1,6 @@
export default Ember.Component.extend({
classNameBindings: [':schema-table', 'open'],
tagName: 'li',
open: Em.computed.alias('table.open'),

View File

@ -47,7 +47,7 @@ export default Ember.Component.extend({
tables.push({
name: key,
columns: schema[key],
open: haveFilter
open: false
});
continue;
}

View File

@ -10,7 +10,7 @@ export default Ember.ArrayController.extend({
showResults: false,
loading: false,
explain: true,
explain: false,
saveDisabled: Ember.computed.not('selectedItem.dirty'),
runDisabled: Ember.computed.alias('selectedItem.dirty'),
@ -42,6 +42,21 @@ export default Ember.ArrayController.extend({
);
}.property(),
save() {
const self = this;
this.set('loading', true);
return this.get('selectedItem').save().then(function() {
const query = self.get('selectedItem');
query.markNotDirty();
self.set('editName', false);
}).catch(function(x) {
popupAjaxError(x);
throw x;
}).finally(function() {
self.set('loading', false);
});
},
actions: {
dummy() {},
@ -70,6 +85,14 @@ export default Ember.ArrayController.extend({
this.get('selectedItem').saveDefaults();
},
save() {
this.save();
},
saverun() {
this.save().then(() => this.send('run'));
},
create() {
const self = this;
this.set('loading', true);
@ -82,18 +105,6 @@ export default Ember.ArrayController.extend({
});
},
save() {
const self = this;
this.set('loading', true);
this.get('selectedItem').save().then(function() {
const query = self.get('selectedItem');
query.markNotDirty();
self.set('editName', false);
}).catch(popupAjaxError).finally(function() {
self.set('loading', false);
});
},
discard() {
const self = this;
this.set('loading', true);

View File

@ -1,36 +1,39 @@
{{#if selectedItem}}
<div class="pull-right">
<span class="schema-title">
{{i18n "explorer.schema.title"}}<br>
{{{i18n "explorer.schema.type_help"}}}
</span>
<div class="schema">
{{explorer-schema schema=schema}}
</div>
<div class="name">
{{#if editName}}
{{text-field value=selectedItem.name}}
{{else}}
<h2>{{selectedItem.name}}</h2>
{{d-button action="editName" icon="pencil" class="no-text btn-small"}}
{{/if}}
</div>
<div class="pull-left">
<div class="name">
{{#if editName}}
{{text-field value=selectedItem.name}}
{{else}}
<h2>{{selectedItem.name}}</h2>
{{d-button action="editName" icon="pencil" class="no-text btn-small"}}
{{/if}}
</div>
<div class="desc">
{{#if controller.editName}}
{{textarea value=selectedItem.description}}
{{else}}
{{selectedItem.description}}
{{/if}}
</div>
<div class="sql">
{{textarea value=selectedItem.sql}}
</div>
<div class="desc">
{{#if controller.editName}}
{{textarea value=selectedItem.description}}
{{else}}
{{selectedItem.description}}
{{/if}}
</div>
<div class="query-editor">
<div class="editor-panel">
<div class="sql">
{{textarea value=selectedItem.sql class="grippie-target"}}
</div>
</div>
<div class="right-panel">
<div class="schema grippie-target">
{{explorer-schema schema=schema}}
</div>
</div>
<div class="grippie"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="pull-left">
{{d-button action="save" label="explorer.save" disabled=saveDisabled}}
{{d-button action="save" label="explorer.save" disabled=saveDisabled class="btn-primary"}}
{{d-button action="download" label="explorer.export" disabled=runDisabled icon="download"}}
</div>
<div class="pull-right">

View File

@ -47,7 +47,15 @@
<div class="bool-options">
<label>{{input type="checkbox" checked=explain name="explain"}} {{i18n "explorer.explain_label"}}</label>
</div>
{{d-button action="run" label="explorer.run" disabled=runDisabled}}
{{#if runDisabled}}
{{#if saveDisabled}}
{{d-button label="explorer.run" disabled="true" class="btn-primary"}}
{{else}}
{{d-button action="saverun" label="explorer.saverun"}}
{{/if}}
{{else}}
{{d-button action="run" label="explorer.run" disabled=runDisabled class="btn-primary"}}
{{/if}}
</div>
<hr>

View File

@ -8,28 +8,26 @@
</div>
<div class="schema-table-cols">
{{#if table.open}}
<dl>
{{#each table.columns as |col|}}
<div class="schema-table-col">
<div>
<dt class="{{if col.sensitive "sensitive"}}" title="{{if col.sensitive (i18n "explorer.schema.sensitive")}}">
{{#if col.sensitive}}
<span class="schema-colname sensitive" title="{{i18n "explorer.schema.sensitive"}}">
<i class="fa fa-warning"></i>
{{col.column_name}}
</span>
{{else}}
<span class="schema-colname" >
{{col.column_name}}
<i class="fa fa-warning"></i>
{{/if}}
{{col.column_name}}
</dt>
<dd>
{{col.data_type}}
{{#if col.notes}}
<br>
<span class="schema-typenotes">
{{col.notes}}
</span>
{{/if}}
<span class="schema-type">
{{col.data_type}}
{{#if col.notes}}
<span class="schema-typenotes">
{{col.notes}}
</span>
{{/if}}
</span>
</dd>
</div>
{{/each}}
</dl>
{{/if}}
</div>

View File

@ -1,7 +1,12 @@
<span class="schema-title">
{{i18n "explorer.schema.title"}} - {{{i18n "explorer.schema.type_help"}}}
</span>
{{text-field value=filter placeholderKey="explorer.schema.filter"}}
{{conditional-loading-spinner condition=loading}}
<div class="schema-container">
{{#each tables as |table|}}
{{explorer-schema-onetable table=table}}
{{/each}}
<ul>
{{#each tables as |table|}}
{{explorer-schema-onetable table=table}}
{{/each}}
</ul>
</div>

View File

@ -2,6 +2,89 @@
color: $danger;
}
.query-editor {
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
margin-bottom: 15px;
.editor-panel {
float: left;
width: 65%;
.sql textarea {
padding: 4px;
height: calc(400px - 8px - 2px);
width: 100%;
font-family: monospace;
box-shadow: none;
border: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
margin: 0;
border-radius: 0;
transition: initial;
}
}
.right-panel {
float: right;
width: calc(35% - 10px);
.schema {
border-left: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
color: dark-light-diff($primary, $secondary, 20%, -20%);
font-size: 11px;
.schema-table-name {
font-weight: bold;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
padding-left: 5px;
.fa {
width: 6px;
}
}
ul {
list-style-type: none;
margin: 0;
}
dl {
margin: 0;
}
dl > div > * {
padding-top: 2px;
padding-bottom: 2px;
}
dl > div {
clear:both;
}
dt {
display: inline-block;
vertical-align: text-top;
overflow-wrap: break-word;
width: 110px;
margin-left: 5px;
&.sensitive {
color: $danger;
}
}
dd {
display: inline-block;
vertical-align: text-top;
width: 70px;
color: $tertiary;
margin: 0;
padding-left: 7px;
border-left: 1px dotted dark-light-diff($primary, $secondary, 80%, -20%);
.schema-typenotes {
color: dark-light-diff($primary, $secondary, 50%, -20%);
font-style: italic;
}
}
}
}
.grippie {
clear: both;
}
}
.query-edit {
.name h2 {
display: inline-block;
@ -12,76 +95,19 @@
&:not(.editing) .desc {
margin: 10px 0;
}
.sql textarea {
width: 500px;
height: 350px;
font-family: monospace;
border-color: $tertiary;
}
.clear { clear: both; }
}
.schema {
border: 1px solid black;
overflow-y: scroll;
> div {
width: 306px;
}
max-height: 400px;
.clear { clear: both; }
margin-bottom: 10px;
}
.schema-title {
display: block;
margin: auto;
text-align: center;
}
.schema input {
padding: 4px;
margin: 3px;
width: calc(100% - 7px - 7px - 1px);
}
.schema .schema-table:first-child {
border-top: 1px solid;
}
.schema-table-name {
background: dark-light-diff($primary, $secondary, 80%, -20%);
border-color: dark-light-diff($primary, $secondary, 60%, -20%);
font-weight: bold;
border-bottom: 1px solid;
padding-left: 5px;
}
.schema-table-cols {
}
.schema-table-col {
background: $secondary;
border-color: dark-light-diff($primary, $secondary, 60%, -20%);
border-bottom: 1px solid;
padding-left: 10px;
}
.schema-colname {
font-weight: bold;
display: inline-block;
width: 150px;
word-wrap: break-word;
vertical-align: text-top;
background: dark-light-diff($primary, $secondary, 98%, -20%);
&.sensitive {
color: $danger;
}
}
.schema-type {
display: inline-block;
max-width: 140px;
vertical-align: text-top;
}
.schema-typenotes {
color: dark-light-diff($primary, $secondary, 50%, -20%);
font-style: italic;
}
.query-params {
border: 1px solid dark-light-diff($primary, $secondary, 60%, -20%);

View File

@ -32,14 +32,15 @@ en:
title: "Database Schema"
filter: "Search..."
sensitive: "The contents of this column may contain particularly sensitive or private information."
type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html' target='_blank'>Types explanation</a>"
type_help: "<a href='http://www.postgresql.org/docs/9.3/static/datatype.html#DATATYPE-TABLE' target='_blank'>Types</a>"
export: "Export"
save: "Save Changes"
saverun: "Save Changes and Run Query"
run: "Run Query"
undo: "Revert"
delete: "Delete"
recover: "Undelete Query"
download_json: "Save Query Results"
download_json: "Download Results"
run_time: "Query completed in {{value}} ms."
column: "Column {{number}}"
explain_label: "Include query plan?"