summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-03 02:10:07 +0100
committerUdo Walter2019-03-03 02:10:07 +0100
commit20343840303acc60deaeadbf6187a5497482a7a3 (patch)
tree2a6369ff693a0679ee1513b47f3b62e3dc8f494b /webapp
parent[webapp/datatable] new loading bar (diff)
downloadbas-20343840303acc60deaeadbf6187a5497482a7a3.tar.gz
bas-20343840303acc60deaeadbf6187a5497482a7a3.tar.xz
bas-20343840303acc60deaeadbf6187a5497482a7a3.zip
[webapp] small bugfixes + eslint fixes + color fix
Diffstat (limited to 'webapp')
-rw-r--r--webapp/index.html2
-rw-r--r--webapp/package-lock.json28
-rw-r--r--webapp/package.json1
-rw-r--r--webapp/src/components/DataTable.vue11
-rw-r--r--webapp/src/components/DataTableSearch.vue10
-rw-r--r--webapp/src/components/GroupModuleDialog.vue46
-rw-r--r--webapp/src/components/LoadingBar.vue2
7 files changed, 56 insertions, 44 deletions
diff --git a/webapp/index.html b/webapp/index.html
index 1e30823..a432c67 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="icon" href="/static/favicon.ico"/>
<title>Dashboard</title>
- <meta name="theme-color" content="#0195ff" />
+ <meta name="theme-color" content="#0095ff" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index f8a2299..b03144b 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -4295,14 +4295,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -4317,20 +4315,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -4447,8 +4442,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"ini": {
"version": "1.3.5",
@@ -4460,7 +4454,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -4475,7 +4468,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -4483,14 +4475,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -4509,7 +4499,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -4590,8 +4579,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -4603,7 +4591,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"wrappy": "1"
}
@@ -4725,7 +4712,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
diff --git a/webapp/package.json b/webapp/package.json
index ce4055b..2dd7f72 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"axios": "^0.18.0",
+ "scrollparent": "^2.0.1",
"socket.io-client": "^2.2.0",
"vue": "^2.6.7",
"vue-codemirror": "^4.0.6",
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 4333dad..06b0900 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -5,9 +5,9 @@
"entries": "Entries",
"noResult": "No entries.",
"height": "Height",
- "regex": "Regular Expressions",
- "caseSensitive": "Case Sensitive",
- "onlyShowSelected": "Only show selected entries.",
+ "regex": "Regex",
+ "caseSensitive": "Case sensitive",
+ "onlyShowSelected": "Selected entries only",
"selected": "selected"
},
"de": {
@@ -15,9 +15,9 @@
"entries": "Einträge",
"noResult": "Keine Einträge.",
"height": "Höhe",
- "regex": "Regulärer Ausdruck",
+ "regex": "Regex",
"caseSensitive": "Groß-/Kleinschreibung beachten",
- "onlyShowSelected": "Nur ausgewählte Einträge anzeigen.",
+ "onlyShowSelected": "Nur ausgewählte Einträg",
"selected": "ausgewählt"
}
}
@@ -36,6 +36,7 @@
:case-sensitive="caseSensitive"
:only-show-selected="onlyShowSelected"
:slim="slim"
+ :dispatch-scroll="computedRowCount <= 0"
></data-table-search>
<v-divider :class="{ 'hidden-md-and-up': !slim }"></v-divider>
<v-divider v-if="!slim" vertical class="hidden-sm-and-down"></v-divider>
diff --git a/webapp/src/components/DataTableSearch.vue b/webapp/src/components/DataTableSearch.vue
index aaa2cc3..4e75d7d 100644
--- a/webapp/src/components/DataTableSearch.vue
+++ b/webapp/src/components/DataTableSearch.vue
@@ -50,6 +50,7 @@
</template>
<script>
+import ScrollParent from 'scrollparent'
export default {
name: 'DataTableSearch',
@@ -58,7 +59,8 @@ export default {
type: Array
},
headers: {
- type: Array
+ type: Array,
+ default: () => []
},
regex: {
type: Boolean,
@@ -75,6 +77,10 @@ export default {
slim: {
type: Boolean,
default: false
+ },
+ dispatchScroll: {
+ type: Boolean,
+ default: false
}
},
data () {
@@ -142,7 +148,7 @@ export default {
},
removeSearchField (s) {
this.search.splice(this.search.indexOf(s), 1)
- window.dispatchEvent(new Event('scroll'))
+ if (this.dispatchScroll) ScrollParent(this.$el).dispatchEvent(new Event('scroll'))
},
filterRows () {
// Cancel the last filtering loop
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index ffe4ef1..d322b5e 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -107,20 +107,30 @@
<v-icon left>create</v-icon>{{ $t('new') }}
</v-btn>
</v-card-title>
-
- <v-card-text v-if="action === 'add' || action === 'select'" class="table-container">
- <data-table ref="datatable" v-model="selected" :headers="headers" :items="items" :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"></data-table>
- </v-card-text>
- <v-card-text v-else-if="action === 'remove' || action === 'delete'" class="selected-list">
- <v-checkbox
- class="delete-checkbox"
- v-if="dialog.info.action === 'remove'"
- :label="$tc('deletePermanently.' + dialog.info.type, selectedCount)"
- color="error"
- v-model="deleteInsteadOfRemove"
- hide-details
- ></v-checkbox>
- <div v-for="item in dialog.info.selected" class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }}</div>
+ <v-card-text ref="cardtext" class="table-container">
+ <data-table v-if="action === 'add' || action === 'select'" ref="datatable"
+ v-model="selected"
+ :headers="headers"
+ :items="items"
+ :row-count="$vuetify.breakpoint.smAndDown ? -1 : undefined"
+ ></data-table>
+ <div v-else-if="action === 'remove' || action === 'delete'" class="selected-list">
+ <v-checkbox
+ class="delete-checkbox"
+ v-if="dialog.info.action === 'remove'"
+ :label="$tc('deletePermanently.' + dialog.info.type, selectedCount)"
+ color="error"
+ v-model="deleteInsteadOfRemove"
+ hide-details
+ ></v-checkbox>
+ <RecycleScroller
+ :items="dialog.info.selected"
+ :item-size="24"
+ page-mode
+ >
+ <div slot-scope="{ item, index }">[{{ item.id }}] {{ item.name }}</div>
+ </RecycleScroller>
+ </div>
</v-card-text>
<v-divider></v-divider>
@@ -135,6 +145,7 @@
</template>
<script>
+import ScrollParent from 'scrollparent'
import DataTable from '@/components/DataTable'
import { mapState, mapMutations } from 'vuex'
@@ -186,12 +197,18 @@ export default {
},
dialogAction () {
return this.dialog.info ? this.dialog.info.action : undefined
+ },
+ dialogType () {
+ return this.dialog.info ? this.dialog.info.type : undefined
}
},
watch: {
dialogAction () {
if (this.$refs.datatable) this.$refs.datatable.resetData()
},
+ dialogType () {
+ if (this.$refs.datatable) this.$refs.datatable.resetSearch()
+ },
dialog: {
deep: true,
handler () {
@@ -199,6 +216,7 @@ export default {
this.deleteInsteadOfRemove = false
if (this.dialog.info.action === 'select') this.selected = this.dialog.info.selected
else this.selected = []
+ if (this.$refs.cardtext) this.$nextTick(() => this.$refs.cardtext.dispatchEvent(new Event('scroll')))
}
}
}
diff --git a/webapp/src/components/LoadingBar.vue b/webapp/src/components/LoadingBar.vue
index 6f1790d..32495ef 100644
--- a/webapp/src/components/LoadingBar.vue
+++ b/webapp/src/components/LoadingBar.vue
@@ -47,7 +47,7 @@ export default {
this.loadingValue = 100
this.loadingTimeout = setTimeout(() => { this.loadingBar = false }, 500)
}
- },
+ }
},
methods: {
increaseLoadingValue () {