fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

feat: loading animation in properties tabs

This commit is contained in:
Fabio Di Stasio 2021-01-22 18:27:45 +01:00
parent 4bc9bbfb34
commit 1cf6485896
7 changed files with 73 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/components/BaseLoader.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="empty">
<div class="loading loading-lg" />
</div>
</template>
<script>
export default {
name: 'BaseLoader'
};
</script>
<style scoped>
.empty {
position: absolute;
display: flex;
height: 100%;
flex-direction: column;
left: 0;
justify-content: center;
right: 0;
}
</style>

13
src/renderer/components/WorkspacePropsTab.vue
View File

@ -51,7 +51,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="workspace-query-results column col-12"> <div class="workspace-query-results column col-12 p-relative">
<BaseLoader v-if="isLoading" />
<WorkspacePropsTable <WorkspacePropsTable
v-if="localFields" v-if="localFields"
ref="indexTable" ref="indexTable"
@ -106,6 +107,7 @@
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import { uidGen } from 'common/libs/uidGen'; import { uidGen } from 'common/libs/uidGen';
import Tables from '@/ipc-api/Tables'; import Tables from '@/ipc-api/Tables';
import BaseLoader from '@/components/BaseLoader';
import WorkspacePropsTable from '@/components/WorkspacePropsTable'; import WorkspacePropsTable from '@/components/WorkspacePropsTable';
import WorkspacePropsOptionsModal from '@/components/WorkspacePropsOptionsModal'; import WorkspacePropsOptionsModal from '@/components/WorkspacePropsOptionsModal';
import WorkspacePropsIndexesModal from '@/components/WorkspacePropsIndexesModal'; import WorkspacePropsIndexesModal from '@/components/WorkspacePropsIndexesModal';
@ -114,6 +116,7 @@ import WorkspacePropsForeignModal from '@/components/WorkspacePropsForeignModal'
export default { export default {
name: 'WorkspacePropsTab', name: 'WorkspacePropsTab',
components: { components: {
BaseLoader,
WorkspacePropsTable, WorkspacePropsTable,
WorkspacePropsOptionsModal, WorkspacePropsOptionsModal,
WorkspacePropsIndexesModal, WorkspacePropsIndexesModal,
@ -126,7 +129,7 @@ export default {
data () { data () {
return { return {
tabUid: 'prop', tabUid: 'prop',
isQuering: false, isLoading: false,
isSaving: false, isSaving: false,
isOptionsModal: false, isOptionsModal: false,
isIndexesModal: false, isIndexesModal: false,
@ -205,8 +208,10 @@ export default {
}), }),
async getFieldsData () { async getFieldsData () {
if (!this.table) return; if (!this.table) return;
this.localFields = [];
this.newFieldsCounter = 0; this.newFieldsCounter = 0;
this.isQuering = true; this.isLoading = true;
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions)); this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
const params = { const params = {
@ -281,7 +286,7 @@ export default {
this.addNotification({ status: 'error', message: err.stack }); this.addNotification({ status: 'error', message: err.stack });
} }
this.isQuering = false; this.isLoading = false;
}, },
async saveChanges () { async saveChanges () {
if (this.isSaving) return; if (this.isSaving) return;

13
src/renderer/components/WorkspacePropsTabFunction.vue
View File

@ -43,7 +43,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="workspace-query-results column col-12 mt-2"> <div class="workspace-query-results column col-12 mt-2 p-relative">
<BaseLoader v-if="isLoading" />
<label class="form-label ml-2">{{ $t('message.functionBody') }}</label> <label class="form-label ml-2">{{ $t('message.functionBody') }}</label>
<QueryEditor <QueryEditor
v-if="isSelected" v-if="isSelected"
@ -74,6 +75,7 @@
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import BaseLoader from '@/components/BaseLoader';
import QueryEditor from '@/components/QueryEditor'; import QueryEditor from '@/components/QueryEditor';
import WorkspacePropsFunctionOptionsModal from '@/components/WorkspacePropsFunctionOptionsModal'; import WorkspacePropsFunctionOptionsModal from '@/components/WorkspacePropsFunctionOptionsModal';
import WorkspacePropsFunctionParamsModal from '@/components/WorkspacePropsFunctionParamsModal'; import WorkspacePropsFunctionParamsModal from '@/components/WorkspacePropsFunctionParamsModal';
@ -82,6 +84,7 @@ import Functions from '@/ipc-api/Functions';
export default { export default {
name: 'WorkspacePropsTabFunction', name: 'WorkspacePropsTabFunction',
components: { components: {
BaseLoader,
QueryEditor, QueryEditor,
WorkspacePropsFunctionOptionsModal, WorkspacePropsFunctionOptionsModal,
WorkspacePropsFunctionParamsModal WorkspacePropsFunctionParamsModal
@ -93,7 +96,7 @@ export default {
data () { data () {
return { return {
tabUid: 'prop', tabUid: 'prop',
isQuering: false, isLoading: false,
isSaving: false, isSaving: false,
isOptionsModal: false, isOptionsModal: false,
isParamsModal: false, isParamsModal: false,
@ -166,7 +169,9 @@ export default {
}), }),
async getFunctionData () { async getFunctionData () {
if (!this.function) return; if (!this.function) return;
this.isQuering = true;
this.isLoading = true;
this.localFunction = { sql: '' };
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
@ -189,7 +194,7 @@ export default {
} }
this.resizeQueryEditor(); this.resizeQueryEditor();
this.isQuering = false; this.isLoading = false;
}, },
async saveChanges () { async saveChanges () {
if (this.isSaving) return; if (this.isSaving) return;

12
src/renderer/components/WorkspacePropsTabRoutine.vue
View File

@ -43,7 +43,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="workspace-query-results column col-12 mt-2"> <div class="workspace-query-results column col-12 mt-2 p-relative">
<BaseLoader v-if="isLoading" />
<label class="form-label ml-2">{{ $t('message.routineBody') }}</label> <label class="form-label ml-2">{{ $t('message.routineBody') }}</label>
<QueryEditor <QueryEditor
v-if="isSelected" v-if="isSelected"
@ -75,6 +76,7 @@
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import QueryEditor from '@/components/QueryEditor'; import QueryEditor from '@/components/QueryEditor';
import BaseLoader from '@/components/BaseLoader';
import WorkspacePropsRoutineOptionsModal from '@/components/WorkspacePropsRoutineOptionsModal'; import WorkspacePropsRoutineOptionsModal from '@/components/WorkspacePropsRoutineOptionsModal';
import WorkspacePropsRoutineParamsModal from '@/components/WorkspacePropsRoutineParamsModal'; import WorkspacePropsRoutineParamsModal from '@/components/WorkspacePropsRoutineParamsModal';
import Routines from '@/ipc-api/Routines'; import Routines from '@/ipc-api/Routines';
@ -83,6 +85,7 @@ export default {
name: 'WorkspacePropsTabRoutine', name: 'WorkspacePropsTabRoutine',
components: { components: {
QueryEditor, QueryEditor,
BaseLoader,
WorkspacePropsRoutineOptionsModal, WorkspacePropsRoutineOptionsModal,
WorkspacePropsRoutineParamsModal WorkspacePropsRoutineParamsModal
}, },
@ -93,7 +96,7 @@ export default {
data () { data () {
return { return {
tabUid: 'prop', tabUid: 'prop',
isQuering: false, isLoading: false,
isSaving: false, isSaving: false,
isOptionsModal: false, isOptionsModal: false,
isParamsModal: false, isParamsModal: false,
@ -166,7 +169,8 @@ export default {
}), }),
async getRoutineData () { async getRoutineData () {
if (!this.routine) return; if (!this.routine) return;
this.isQuering = true; this.localRoutine = { sql: '' };
this.isLoading = true;
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
@ -189,7 +193,7 @@ export default {
} }
this.resizeQueryEditor(); this.resizeQueryEditor();
this.isQuering = false; this.isLoading = false;
}, },
async saveChanges () { async saveChanges () {
if (this.isSaving) return; if (this.isSaving) return;

11
src/renderer/components/WorkspacePropsTabScheduler.vue
View File

@ -114,7 +114,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="workspace-query-results column col-12 mt-2"> <div class="workspace-query-results column col-12 mt-2 p-relative">
<BaseLoader v-if="isLoading" />
<label class="form-label ml-2">{{ $t('message.schedulerBody') }}</label> <label class="form-label ml-2">{{ $t('message.schedulerBody') }}</label>
<QueryEditor <QueryEditor
v-if="isSelected" v-if="isSelected"
@ -137,6 +138,7 @@
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import BaseLoader from '@/components/BaseLoader';
import QueryEditor from '@/components/QueryEditor'; import QueryEditor from '@/components/QueryEditor';
import WorkspacePropsSchedulerTimingModal from '@/components/WorkspacePropsSchedulerTimingModal'; import WorkspacePropsSchedulerTimingModal from '@/components/WorkspacePropsSchedulerTimingModal';
import Schedulers from '@/ipc-api/Schedulers'; import Schedulers from '@/ipc-api/Schedulers';
@ -144,6 +146,7 @@ import Schedulers from '@/ipc-api/Schedulers';
export default { export default {
name: 'WorkspacePropsTabScheduler', name: 'WorkspacePropsTabScheduler',
components: { components: {
BaseLoader,
QueryEditor, QueryEditor,
WorkspacePropsSchedulerTimingModal WorkspacePropsSchedulerTimingModal
}, },
@ -154,7 +157,7 @@ export default {
data () { data () {
return { return {
tabUid: 'prop', tabUid: 'prop',
isQuering: false, isLoading: false,
isSaving: false, isSaving: false,
isTimingModal: false, isTimingModal: false,
originalScheduler: null, originalScheduler: null,
@ -226,7 +229,7 @@ export default {
}), }),
async getSchedulerData () { async getSchedulerData () {
if (!this.scheduler) return; if (!this.scheduler) return;
this.isQuering = true; this.isLoading = true;
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
@ -249,7 +252,7 @@ export default {
} }
this.resizeQueryEditor(); this.resizeQueryEditor();
this.isQuering = false; this.isLoading = false;
}, },
async saveChanges () { async saveChanges () {
if (this.isSaving) return; if (this.isSaving) return;

15
src/renderer/components/WorkspacePropsTabTrigger.vue
View File

@ -95,7 +95,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="workspace-query-results column col-12 mt-2"> <div class="workspace-query-results column col-12 mt-2 p-relative">
<BaseLoader v-if="isLoading" />
<label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label> <label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label>
<QueryEditor <QueryEditor
v-if="isSelected" v-if="isSelected"
@ -110,13 +111,15 @@
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex';
import QueryEditor from '@/components/QueryEditor'; import QueryEditor from '@/components/QueryEditor';
import { mapGetters, mapActions } from 'vuex';
import BaseLoader from '@/components/BaseLoader';
import Triggers from '@/ipc-api/Triggers'; import Triggers from '@/ipc-api/Triggers';
export default { export default {
name: 'WorkspacePropsTabTrigger', name: 'WorkspacePropsTabTrigger',
components: { components: {
BaseLoader,
QueryEditor QueryEditor
}, },
props: { props: {
@ -126,7 +129,7 @@ export default {
data () { data () {
return { return {
tabUid: 'prop', tabUid: 'prop',
isQuering: false, isLoading: false,
isSaving: false, isSaving: false,
originalTrigger: null, originalTrigger: null,
localTrigger: { sql: '' }, localTrigger: { sql: '' },
@ -197,7 +200,9 @@ export default {
}), }),
async getTriggerData () { async getTriggerData () {
if (!this.trigger) return; if (!this.trigger) return;
this.isQuering = true;
this.localTrigger = { sql: '' };
this.isLoading = true;
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
@ -220,7 +225,7 @@ export default {
} }
this.resizeQueryEditor(); this.resizeQueryEditor();
this.isQuering = false; this.isLoading = false;
}, },
async saveChanges () { async saveChanges () {
if (this.isSaving) return; if (this.isSaving) return;

12
src/renderer/components/WorkspacePropsTabView.vue
View File

@ -156,7 +156,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="workspace-query-results column col-12 mt-2"> <div class="workspace-query-results column col-12 mt-2 p-relative">
<BaseLoader v-if="isLoading" />
<label class="form-label ml-2">{{ $t('message.selectStatement') }}</label> <label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
<QueryEditor <QueryEditor
v-if="isSelected" v-if="isSelected"
@ -172,12 +173,14 @@
<script> <script>
import { mapGetters, mapActions } from 'vuex'; import { mapGetters, mapActions } from 'vuex';
import BaseLoader from '@/components/BaseLoader';
import QueryEditor from '@/components/QueryEditor'; import QueryEditor from '@/components/QueryEditor';
import Views from '@/ipc-api/Views'; import Views from '@/ipc-api/Views';
export default { export default {
name: 'WorkspacePropsTabView', name: 'WorkspacePropsTabView',
components: { components: {
BaseLoader,
QueryEditor QueryEditor
}, },
props: { props: {
@ -187,7 +190,7 @@ export default {
data () { data () {
return { return {
tabUid: 'prop', tabUid: 'prop',
isQuering: false, isLoading: false,
isSaving: false, isSaving: false,
originalView: null, originalView: null,
localView: { sql: '' }, localView: { sql: '' },
@ -251,7 +254,8 @@ export default {
}), }),
async getViewData () { async getViewData () {
if (!this.view) return; if (!this.view) return;
this.isQuering = true; this.isLoading = true;
this.localView = { sql: '' };
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
@ -274,7 +278,7 @@ export default {
} }
this.resizeQueryEditor(); this.resizeQueryEditor();
this.isQuering = false; this.isLoading = false;
}, },
async saveChanges () { async saveChanges () {
if (this.isSaving) return; if (this.isSaving) return;