summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-01 18:49:06 +0100
committerUdo Walter2019-03-01 18:49:06 +0100
commit885669a2bc1d7d958f37fde8836b51b352368880 (patch)
tree6acceaa002b9c92261a396fb7075002424a19eea /webapp
parent[webapp/datatable] improve search performance (diff)
downloadbas-885669a2bc1d7d958f37fde8836b51b352368880.tar.gz
bas-885669a2bc1d7d958f37fde8836b51b352368880.tar.xz
bas-885669a2bc1d7d958f37fde8836b51b352368880.zip
[webapp/datatable] new loading bar
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/DashboardPage.vue4
-rw-r--r--webapp/src/components/DataTable.vue10
-rw-r--r--webapp/src/components/GroupModule.vue2
-rw-r--r--webapp/src/components/LoadingBar.vue92
4 files changed, 101 insertions, 7 deletions
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 0d6fc31..6c5d267 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -65,8 +65,8 @@
<div class="logo"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></div>
<v-spacer></v-spacer>
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
- <v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"><v-icon>invert_colors</v-icon></v-btn>
- <notifications-alerts style="margin-right: 20px"></notifications-alerts>
+ <v-btn icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"><v-icon>invert_colors</v-icon></v-btn>
+ <notifications-alerts style="margin-right: 16px"></notifications-alerts>
<v-toolbar-items>
<v-menu offset-y attach>
<v-btn class="user-button" flat slot="activator" style="text-transform: none;">
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index ab530fc..4333dad 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -123,8 +123,9 @@
</v-icon>
</div>
</div>
- <v-progress-linear v-if="loading" :indeterminate="true" :height="2" style="margin: 0"></v-progress-linear>
- <div v-else class="header-separator"></div>
+ <div class="header-separator" style="height: 2px">
+ <loading-bar :loading="loading" :transparent="false"></loading-bar>
+ </div>
</div>
</template>
<div slot-scope="{ item, index }" class="table-row"
@@ -147,11 +148,13 @@
<script>
import DataTableSearch from '@/components/DataTableSearch'
+import LoadingBar from '@/components/LoadingBar'
export default {
name: 'DataTable',
components: {
- DataTableSearch
+ DataTableSearch,
+ LoadingBar
},
props: {
headers: {
@@ -215,7 +218,6 @@ export default {
const rows = this.rows.slice(0)
for (let key in this.headerSortState) {
if (!this.headers.some(header => header.key === key)) continue
- console.log('asdf')
const direction = this.headerSortState[key]
if (direction === 'asc') rows.sort((a, b) => String(a.data[key]).localeCompare(String(b.data[key])))
if (direction === 'desc') rows.sort((b, a) => String(a.data[key]).localeCompare(String(b.data[key])))
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 8a301e3..d12be50 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -88,7 +88,7 @@ export default {
this.setActiveTab(1)
} else {
const action = type === 'group' ? 'loadGroup' : type === 'client' ? 'loadClient' : null
- if (action) this.$store.dispatch('groups/' + action, { id, tabIndex: 1, switchTab: true })
+ if (action) this.$store.dispatch('groups/' + action, { id, tabIndex: id === 0 ? 0 : 1, switchTab: true })
}
}
},
diff --git a/webapp/src/components/LoadingBar.vue b/webapp/src/components/LoadingBar.vue
new file mode 100644
index 0000000..6f1790d
--- /dev/null
+++ b/webapp/src/components/LoadingBar.vue
@@ -0,0 +1,92 @@
+<template>
+ <div v-if="loadingBar" class="loadingbar-wrapper">
+ <div :class="{ 'loadingbar-background-wrapper': !transparent }">
+ <div class="loadingbar-background" :class="color" :style="{ height: height + 'px' }"></div>
+ </div>
+ <div class="loadingbar" :class="color" :style="{ height: height + 'px', width: 'calc(100% / 100 * ' + loadingValue + ')'}"></div>
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: 'LoadingBar',
+ props: {
+ loading: {
+ type: Boolean,
+ default: false
+ },
+ height: {
+ type: Number,
+ default: 2
+ },
+ color: {
+ type: String,
+ default: 'primary'
+ },
+ transparent: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data () {
+ return {
+ loadingValue: 0,
+ loadingBar: false,
+ loadingTimeout: null
+ }
+ },
+ watch: {
+ loading (value) {
+ clearTimeout(this.loadingTimeout)
+ if (value) {
+ this.loadingValue = 0
+ this.loadingBar = true
+ this.loadingTimeout = setTimeout(this.increaseLoadingValue, 10)
+ } else {
+ this.loadingValue = 100
+ this.loadingTimeout = setTimeout(() => { this.loadingBar = false }, 500)
+ }
+ },
+ },
+ methods: {
+ increaseLoadingValue () {
+ if (this.loading && this.loadingValue <= 85) {
+ this.loadingValue += 10
+ this.loadingTimeout = setTimeout(this.increaseLoadingValue, 200)
+ }
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.loadingbar-wrapper {
+ width: 100%;
+ height: 0;
+ z-index: 1;
+ position: relative;
+}
+
+.loadingbar-background {
+ width: 100%;
+ height: 100%;
+ opacity: 0.3;
+}
+
+.loadingbar {
+ top: 0;
+ left: 0;
+ position: absolute;
+ transition: width .2s linear ;
+}
+
+.theme--dark .loadingbar-background-wrapper {
+ background-color: #424242;
+}
+
+.theme--light .loadingbar-background-wrapper {
+ background-color: #fff;
+}
+</style>