Upgrade `explorer-schema` to Octane (#202)

* Upgrade `explorer-schema` to Octane
This commit is contained in:
Isaac Janzen 2022-12-16 11:51:36 -06:00 committed by GitHub
parent 8028b9f16a
commit 7d1a9d487d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 86 deletions

View File

@ -0,0 +1,34 @@
{{#if this.hideSchema}}
<DButton
@action={{this.expandSchema}}
@icon="chevron-left"
@class="no-text unhide"
/>
{{/if}}
<div class="schema">
<div class={{if this.hideSchema "hidden"}}>
<div class="schema-search inline-form full-width">
<TextField
@value={{this.filter}}
@onChange={{this.filterChanged}}
@placeholderKey="explorer.schema.filter"
/>
<DButton
@action={{this.collapseSchema}}
@icon="chevron-right"
@class="no-text"
/>
</div>
<ConditionalLoadingSpinner @condition={{this.loading}}>
<div class="schema-container">
<ul>
{{#each this.filteredTables as |table|}}
{{explorer-schema-onetable table=table}}
{{/each}}
</ul>
</div>
</ConditionalLoadingSpinner>
</div>
</div>

View File

@ -1,18 +1,17 @@
import Component from "@ember/component";
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import discourseDebounce from "discourse-common/lib/debounce";
import Component from "@glimmer/component";
import { debounce } from "discourse-common/utils/decorators";
import { isBlank, isEmpty } from "@ember/utils";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
export default Component.extend({
actions: {
collapseSchema() {
this.set("hideSchema", true);
},
},
export default class ExplorerSchema extends Component {
@tracked filter;
@tracked loading;
@tracked hideSchema = this.args.hideSchema;
@discourseComputed("schema")
transformedSchema(schema) {
for (let key in schema) {
get transformedSchema() {
const schema = this.args.schema;
for (const key in schema) {
if (!schema.hasOwnProperty(key)) {
continue;
}
@ -48,28 +47,30 @@ export default Component.extend({
});
}
return schema;
},
}
@discourseComputed("filter")
rfilter(filter) {
if (!isBlank(filter)) {
return new RegExp(filter);
}
},
filterTables(schema) {
get filteredTables() {
let tables = [];
const filter = this.rfilter,
haveFilter = !!filter;
let filter = this.filter;
for (let key in schema) {
if (!schema.hasOwnProperty(key)) {
try {
if (!isBlank(this.filter)) {
filter = new RegExp(this.filter);
}
} catch {
filter = null;
}
const haveFilter = !!filter;
for (const key in this.transformedSchema) {
if (!this.transformedSchema.hasOwnProperty(key)) {
continue;
}
if (!haveFilter) {
tables.push({
name: key,
columns: schema[key],
columns: this.transformedSchema[key],
open: false,
});
continue;
@ -79,20 +80,20 @@ export default Component.extend({
if (filter.source === key || filter.source + "s" === key) {
tables.unshift({
name: key,
columns: schema[key],
columns: this.transformedSchema[key],
open: haveFilter,
});
} else if (filter.test(key)) {
// whole table matches
tables.push({
name: key,
columns: schema[key],
columns: this.transformedSchema[key],
open: haveFilter,
});
} else {
// filter the columns
let filterCols = [];
schema[key].forEach((col) => {
this.transformedSchema[key].forEach((col) => {
if (filter.source === col.column_name) {
filterCols.unshift(col);
} else if (filter.test(col.column_name)) {
@ -109,29 +110,29 @@ export default Component.extend({
}
}
return tables;
},
}
@observes("filter")
triggerFilter() {
discourseDebounce(
this,
function () {
this.set("filteredTables", this.filterTables(this.transformedSchema));
this.set("loading", false);
},
500
);
},
@debounce(500)
updateFilter(value) {
this.filter = value;
this.loading = false;
}
@observes("filter")
setLoading() {
this.set("loading", true);
},
@action
filterChanged(value) {
this.loading = true;
this.updateFilter(value);
}
init() {
this._super(...arguments);
@action
collapseSchema() {
this.hideSchema = true;
this.args.updateHideSchema(true);
}
this.set("loading", true);
this.triggerFilter();
},
});
@action
expandSchema() {
this.hideSchema = false;
this.args.updateHideSchema(false);
}
}

View File

@ -175,10 +175,8 @@ export default Controller.extend({
},
actions: {
dummy() {},
expandSchema() {
this.set("hideSchema", false);
updateHideSchema(value) {
this.set("hideSchema", value);
},
import(files) {

View File

@ -119,17 +119,11 @@
</div>
<div class="right-panel">
{{#if hideSchema}}
{{d-button
action=(action "expandSchema")
icon="chevron-left"
class="no-text unhide"
}}
{{/if}}
<div class="schema">
{{explorer-schema schema=schema hideSchema=hideSchema}}
</div>
<ExplorerSchema
@schema={{schema}}
@hideSchema={{hideSchema}}
@updateHideSchema={{action "updateHideSchema"}}
/>
</div>
</div>

View File

@ -1,20 +0,0 @@
<div class={{if hideSchema "hidden"}}>
<div class="schema-search inline-form full-width">
{{text-field value=filter placeholderKey="explorer.schema.filter"}}
{{d-button
action=(action "collapseSchema")
icon="chevron-right"
class="no-text"
}}
</div>
{{conditional-loading-spinner condition=loading}}
<div class="schema-container">
<ul>
{{#each filteredTables as |table|}}
{{explorer-schema-onetable table=table}}
{{/each}}
</ul>
</div>
</div>