mirror of https://github.com/Fabio286/antares.git
refactor(UI): improved breadcrumbs and tabs
This commit is contained in:
parent
f0fa7c81b7
commit
ed6e7fa72d
|
@ -186,6 +186,7 @@
|
|||
:is-selected="selectedTab === tab.uid"
|
||||
:table="tab.table"
|
||||
:schema="tab.schema"
|
||||
:element-type="tab.element"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
|
@ -383,15 +384,25 @@ export default {
|
|||
flex: initial;
|
||||
|
||||
> a {
|
||||
padding: 0.2rem 0.8rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.btn-clear {
|
||||
margin-left: 0.5rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
||||
.btn-clear {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-add {
|
||||
|
@ -410,6 +421,10 @@ export default {
|
|||
|
||||
&.active a {
|
||||
opacity: 1;
|
||||
|
||||
.btn-clear {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.tools-dropdown {
|
||||
|
|
|
@ -294,7 +294,7 @@ export default {
|
|||
this.$emit('show-schema-context', { event, schema });
|
||||
},
|
||||
showTableContext (event, table) {
|
||||
this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
|
||||
// this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
|
||||
this.$emit('show-table-context', { event, table });
|
||||
},
|
||||
showMiscContext (event, misc) {
|
||||
|
|
|
@ -163,8 +163,15 @@ export default {
|
|||
return this.workspace.uid === this.selectedWorkspace;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isSelected (val) {
|
||||
if (val)
|
||||
this.changeBreadcrumbs({ schema: this.schema, query: `Query #${this.tab.index}` });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.query = this.tab.content;
|
||||
this.changeBreadcrumbs({ schema: this.schema, query: `Query #${this.tab.index}` });
|
||||
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
|
@ -186,7 +193,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
addNotification: 'notifications/addNotification'
|
||||
addNotification: 'notifications/addNotification',
|
||||
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
|
||||
}),
|
||||
async runQuery (query) {
|
||||
if (!query || this.isQuering) return;
|
||||
|
|
|
@ -71,6 +71,7 @@
|
|||
:row="row"
|
||||
:fields="fieldsObj"
|
||||
:key-usage="keyUsage"
|
||||
:element-type="elementType"
|
||||
:class="{'selected': selectedRows.includes(row._id)}"
|
||||
@select-row="selectRow($event, row._id)"
|
||||
@update-field="updateField($event, row)"
|
||||
|
@ -123,7 +124,8 @@ export default {
|
|||
results: Array,
|
||||
connUid: String,
|
||||
mode: String,
|
||||
isSelected: Boolean
|
||||
isSelected: Boolean,
|
||||
elementType: { type: String, default: 'table' }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
|
@ -260,7 +260,8 @@ export default {
|
|||
props: {
|
||||
row: Object,
|
||||
fields: Object,
|
||||
keyUsage: Array
|
||||
keyUsage: Array,
|
||||
elementType: { type: String, default: 'table' }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
@ -334,6 +335,8 @@ export default {
|
|||
return this.keyUsage.map(key => key.field);
|
||||
},
|
||||
isEditable () {
|
||||
if (this.elementType === 'view') return false;
|
||||
|
||||
if (this.fields) {
|
||||
const nElements = Object.keys(this.fields).reduce((acc, curr) => {
|
||||
acc.add(this.fields[curr].table);
|
||||
|
|
|
@ -131,6 +131,7 @@
|
|||
:conn-uid="connection.uid"
|
||||
:is-selected="isSelected"
|
||||
mode="table"
|
||||
:element-type="elementType"
|
||||
@update-field="updateField"
|
||||
@delete-selected="deleteSelected"
|
||||
@hard-sort="hardSort"
|
||||
|
@ -183,7 +184,8 @@ export default {
|
|||
connection: Object,
|
||||
isSelected: Boolean,
|
||||
table: String,
|
||||
schema: String
|
||||
schema: String,
|
||||
elementType: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
@ -261,9 +263,11 @@ export default {
|
|||
}
|
||||
},
|
||||
isSelected (val) {
|
||||
if (val && this.lastTable !== this.table) {
|
||||
this.getTableData();
|
||||
this.lastTable = this.table;
|
||||
if (val) {
|
||||
this.changeBreadcrumbs({ schema: this.schema, [this.elementType]: this.table });
|
||||
|
||||
if (this.lastTable !== this.table)
|
||||
this.getTableData();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -277,7 +281,8 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
addNotification: 'notifications/addNotification'
|
||||
addNotification: 'notifications/addNotification',
|
||||
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
|
||||
}),
|
||||
async getTableData (sortParams) {
|
||||
if (!this.table) return;
|
||||
|
@ -287,6 +292,8 @@ export default {
|
|||
if (this.lastTable !== this.table)
|
||||
this.results = [];
|
||||
|
||||
this.lastTable = this.table;
|
||||
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
|
|
|
@ -63,6 +63,12 @@
|
|||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-clear {
|
||||
&:hover {
|
||||
background: rgba($light-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
|
|
|
@ -472,7 +472,8 @@ export default {
|
|||
procedure: null,
|
||||
function: null,
|
||||
scheduler: null,
|
||||
view: null
|
||||
view: null,
|
||||
query: null
|
||||
};
|
||||
|
||||
const hasLastChildren = Object.keys(lastBreadcrumbs).filter(b => b !== 'schema').some(b => lastBreadcrumbs[b]);
|
||||
|
|
Loading…
Reference in New Issue