summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-02-25 20:22:13 +0100
committerUdo Walter2019-02-25 20:22:13 +0100
commit000fed17d2c3a896085f5fef6de2f46a9b4cbc7f (patch)
tree99daccb52c9101aa6bc56aef8c39516a67ab4701 /webapp
parent[webapp/datatable] fix bug caused by npm update (diff)
downloadbas-000fed17d2c3a896085f5fef6de2f46a9b4cbc7f.tar.gz
bas-000fed17d2c3a896085f5fef6de2f46a9b4cbc7f.tar.xz
bas-000fed17d2c3a896085f5fef6de2f46a9b4cbc7f.zip
[webapp/registration] switch to the new selctbox for groups selection
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue13
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue2
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue13
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue40
-rw-r--r--webapp/src/components/SelectBox.vue92
5 files changed, 102 insertions, 58 deletions
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index f01b5c7..d8e8f6e 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -44,10 +44,10 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('groups') }}</span></div>
<div class="info-text">
- <select-box v-if="editMode" v-model="groups" :items="groupList"></select-box>
+ <select-box v-if="editMode" v-model="groups" :items="groupList" class="info-input" hide-details></select-box>
<div v-else class="chip-container">
<v-chip v-for="(group, index) in client.groups" :key="group.id" v-if="index < 5" small label style="width: calc(50% - 8px)">
- {{ group.name || group.id }}
+ <span class="chip-text">{{ group.name || group.id }}</span>
</v-chip>
<span v-if="client.groups && client.groups.length > 5" class="and-more">+ {{ client.groups.length - 5 }} {{ $t('more') }}</span>
<span v-else-if="client.groups === undefined || client.groups.length === 0">-</span>
@@ -237,6 +237,15 @@ export default {
width: 100%;
}
+.chip-container >>> .v-chip__content {
+ width: 100%;
+}
+
+.chip-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.and-more {
font-size: 13px;
display: flex;
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index c721241..2faee43 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -64,7 +64,7 @@ export default {
headers () {
return [
{ key: 'id', text: this.$t('id'), width: '50px' },
- { key: 'name', text: this.$t('name'), width: '180px' },
+ { key: 'name', text: this.$t('name'), width: '200px' },
{ key: 'description', text: this.$t('description') },
{ key: 'actions', width: '60px' }
]
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 6f78d07..a174eb5 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -56,10 +56,10 @@
<div class="info-box">
<div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('parents') }}</span></div>
<div class="info-text">
- <select-box v-if="editMode" v-model="parents" :items="groupList"></select-box>
+ <select-box v-if="editMode" v-model="parents" :items="groupList" class="info-input" hide-details></select-box>
<div v-else class="chip-container">
<v-chip v-for="(parent, index) in group.parents" :key="parent.id" v-if="index < 5" small label style="width: calc(50% - 8px)">
- {{ parent.name || parent.id }}
+ <span class="chip-text">{{ parent.name || parent.id }}</span>
</v-chip>
<span v-if="group.parents && group.parents.length > 5" class="and-more">+ {{ group.parents.length - 5 }} {{ $t('more') }}</span>
<span v-else-if="group.parents === undefined || group.parents.length === 0">-</span>
@@ -295,6 +295,15 @@ export default {
width: 100%;
}
+.chip-container >>> .v-chip__content {
+ width: 100%;
+}
+
+.chip-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.and-more {
font-size: 13px;
display: flex;
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index f90295a..829a605 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -3,12 +3,11 @@
"en": {
"name": "Name",
"description": "Description",
- "type": "Script type",
+ "type": "Script Type",
"groups": "Groups",
"script": "Script",
- "titleNew": "Create hook",
- "titleExisting": "Edit hook",
- "groupRestricted": "Restrict to groups"
+ "titleNew": "Create Hook",
+ "titleExisting": "Edit Hook"
},
"de": {
"name": "Name",
@@ -17,8 +16,7 @@
"groups": "Gruppen",
"script": "Skript",
"titleNew": "Hook erstellen",
- "titleExisting": "Hook bearbeiten",
- "groupRestricted": "Auf Gruppen beschränken"
+ "titleExisting": "Hook bearbeiten"
}
}
</i18n>
@@ -30,27 +28,19 @@
</v-card-title>
<v-card-text style="height: 100%;">
<v-layout row wrap>
- <v-flex xs12 sm6>
+ <v-flex xs12 sm9>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
</v-flex>
- <v-flex xs12 sm2 offset-sm1 style="display: flex; justify-content: center">
- <v-tooltip top open-delay="800">
- <v-menu offset-y left :close-on-content-click="false" lazy slot="activator">
- <v-btn slot="activator" class="info-heading-button">
- <v-icon :left="groups.length > 0">device_hub</v-icon>{{ groups.length > 0 ? groups.length : '' }}
- </v-btn>
- <v-card>
- <data-table v-model="groups" :headers="headers" :items="groupList" slim :row-count="6"></data-table>
- </v-card>
- </v-menu>
- <span>{{ $t('groupRestricted') }}</span>
- </v-tooltip>
- </v-flex>
<v-flex xs12 sm2 offset-sm1>
- <v-select prepend-icon="label" color="primary" :items="types" :label="$t('type')" v-model="type" menu-props="offsetY"></v-select>
+ <v-select prepend-icon="file_copy" color="primary" :items="types" :label="$t('type')" v-model="type" menu-props="offsetY"></v-select>
+ </v-flex>
+ <v-flex xs12 md6>
+ <v-textarea prepend-icon="description" rows="1" auto-grow :label="$t('description')" color="primary" v-model="description"></v-textarea>
+ </v-flex>
+ <v-flex xs12 md5 offset-md1>
+ <select-box prepend-icon="device_hub" :label="$t('groups')" v-model="groups" :items="groupList"></select-box>
</v-flex>
</v-layout>
- <v-textarea prepend-icon="description" rows="3" :label="$t('description')" color="primary" v-model="description"></v-textarea>
<div class="body-1 script-heading"><v-icon>code</v-icon><span>{{ $t('script') }}</span></div>
<codemirror class="script-editor" ref="editor" v-model="script"></codemirror>
</v-card-text>
@@ -64,13 +54,13 @@
</template>
<script>
-import DataTable from '@/components/DataTable'
+import SelectBox from '@/components/SelectBox'
import { mapState } from 'vuex'
export default {
name: 'RegistrationModuleEdit',
components: {
- DataTable
+ SelectBox
},
data () {
return {
@@ -103,7 +93,7 @@ export default {
this.name = value.info.name || ''
this.description = value.info.description || ''
this.type = value.info.type || 'BASH'
- this.groups = value.info.groups ? value.info.groups.map(x => x.id) : []
+ this.groups = value.info.groups ? value.info.groups : []
this.script = value.info.script || ''
this.interval.id = setInterval(this.refreshEditor, 50)
this.interval.counter = 0
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 89afc5b..d8a4417 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -12,12 +12,13 @@
</i18n>
<template>
- <v-menu v-model="menu" offset-y :close-on-content-click="false" lazy class="select-menu non-selectable">
- <v-input class="v-text-field primary--text select-input" :class="{ 'v-input--is-focused': menu }" slot="activator"
- hide-details
- label="asdf"
- >
- <div class="select-input-content">
+ <v-input class="v-text-field select-input" :class="inputClasses" :hide-details="hideDetails" :prepend-icon="prependIcon">
+ <v-menu v-model="menu" offset-y :close-on-content-click="false" lazy class="select-menu non-selectable" :nudge-bottom="1">
+ <div slot="activator" class="select-input-content">
+ <label v-if="label !== undefined && (!singleLine || (singleLine && value.length === 0))"
+ class="select-label v-label"
+ :class="labelClasses"
+ >{{ label }}</label>
<div class="select-input-chips">
<v-chip
class="item-chip"
@@ -30,18 +31,17 @@
close
@input="removeItem(index)"
>
- <div style="overflow: hidden; text-overflow: ellipsis;">{{ item.name || item.id }}</div>
+ <div class="select-input-chip-text">{{ item.name || item.id }}</div>
</v-chip>
- <span v-if="value.length > maxShow" class="and-more">+ {{ value.length - maxShow }} {{ $t('more') }}</span>
+ <span v-if="value.length > maxShow" class="text--secondary and-more">+ {{ value.length - maxShow }} {{ $t('more') }}</span>
</div>
- <v-icon :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''" style="margin-top: 4px">arrow_drop_down</v-icon>
+ <v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
</div>
- </v-input>
-
- <v-card>
- <data-table :value="value" @input="$emit('input', $event)" :headers="headers" :items="items" slim :row-count="6"></data-table>
- </v-card>
- </v-menu>
+ <v-card>
+ <data-table :value="value" @input="$emit('input', $event)" :headers="headers" :items="items" slim :row-count="6"></data-table>
+ </v-card>
+ </v-menu>
+ </v-input>
</template>
<script>
@@ -79,6 +79,20 @@ export default {
maxRows: {
type: Number,
default: 3
+ },
+ label: {
+ type: String
+ },
+ hideDetails: {
+ type: Boolean,
+ default: false
+ },
+ singleLine: {
+ type: Boolean,
+ default: false
+ },
+ prependIcon: {
+ type: String
}
},
data () {
@@ -97,6 +111,22 @@ export default {
return [
{ key: this.textKey, text: this.computedTextHeading }
]
+ },
+ inputClasses () {
+ const classes = {}
+ if (this.menu) {
+ classes['primary--text'] = true
+ classes['v-input--is-label-active'] = true
+ classes['v-input--is-focused'] = true
+ }
+ if (this.singleLine) classes['single-line'] = true
+ return classes
+ },
+ labelClasses () {
+ const classes = {}
+ if (!this.menu || this.singleLine) classes['text--secondary'] = true
+ if (!this.singleLine && (this.menu || this.value.length > 0)) classes['v-label--active'] = true
+ return classes
}
},
watch: {
@@ -109,9 +139,6 @@ export default {
const newValue = this.value.slice(0)
newValue.splice(index, 1)
this.$emit('input', newValue)
- },
- test () {
- console.log('asdf')
}
}
}
@@ -125,25 +152,37 @@ export default {
}
.select-input {
- margin: 0;
- padding: 0;
+ margin-bottom: 0;
padding-bottom: 1px;
}
+.select-input.single-line {
+ margin-top: 0;
+ padding-top: 0;
+}
+
.select-input-content {
width: 100%;
+ min-height: 32px;
display: flex;
align-items: flex-start;
}
+.select-input-arrow {
+ margin-top: 4px
+}
+
.select-input-chips {
display: flex;
flex-wrap: wrap;
- text-transform: none;
- min-height: 34px;
flex: 1;
}
+.select-input-chip-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.item-chip >>> .v-chip__content {
width: 100%;
cursor: pointer;
@@ -160,11 +199,8 @@ export default {
margin: 4px 17px;
}
-.theme--dark .and-more {
- color: rgb(255, 255, 255);
-}
-
-.theme--light .and-more {
- color: rgba(0, 0, 0, 0.87);
+.select-label {
+ position: absolute;
+ left: 0;
}
</style>