summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleEdit.vue
diff options
context:
space:
mode:
authorChristian Hofmaier2019-02-16 06:02:00 +0100
committerChristian Hofmaier2019-02-16 06:02:00 +0100
commit318085618cbb2a54e3279e5c1bd3528104e77d99 (patch)
tree6dbadae976919e560f3a3c792560dd219c3eef46 /webapp/src/components/PermissionModuleEdit.vue
parent[permissionmanager] Permission API Call for Frontend Checks (diff)
downloadbas-318085618cbb2a54e3279e5c1bd3528104e77d99.tar.gz
bas-318085618cbb2a54e3279e5c1bd3528104e77d99.tar.xz
bas-318085618cbb2a54e3279e5c1bd3528104e77d99.zip
[permissionmanager] Change recursive selection, fix layout/table issues
- remove recursive-switch for groups - add btn to add subgroups - use RecycleScroller for better performance - fix layout issue when long names were used in the summary - fix issues that data-tables were not loading correctly - you can now correctly go back to the step you were before
Diffstat (limited to 'webapp/src/components/PermissionModuleEdit.vue')
-rw-r--r--webapp/src/components/PermissionModuleEdit.vue174
1 files changed, 88 insertions, 86 deletions
diff --git a/webapp/src/components/PermissionModuleEdit.vue b/webapp/src/components/PermissionModuleEdit.vue
index 3c8e9d9..fc66e62 100644
--- a/webapp/src/components/PermissionModuleEdit.vue
+++ b/webapp/src/components/PermissionModuleEdit.vue
@@ -1,34 +1,36 @@
<i18n>
{
"en": {
- "id": "ID",
- "name": "Name",
"description": "Description",
"groupdependent": "Groupdependent",
- "submit": "Submit",
- "role": "Role",
- "permissions": "Permissions",
"groups": "Groups",
- "summary": "Summary",
+ "id": "ID",
+ "name": "Name",
+ "permissions": "Permissions",
+ "recursiveMode": "Select Groups recursive",
+ "role": "Role",
"roleName": "Role Name",
"roleNameEmptyError": "Role Name can't be empty.",
- "recursiveMode": "Select Groups recursive",
- "roleSavedSuccess": "Role saved successfully."
+ "roleSavedSuccess": "Role saved successfully.",
+ "selectChildGroups": "Click to select all subgroups.",
+ "submit": "Submit",
+ "summary": "Summary"
},
"de": {
- "id": "ID",
- "name": "Name",
"description": "Beschreibung",
"groupdependent": "Gruppengebunden",
- "submit": "Einreichen",
- "role": "Rolle",
- "permissions": "Rechte",
"groups": "Gruppen",
- "summary": "Zusammenfassung",
+ "id": "ID",
+ "name": "Name",
+ "permissions": "Rechte",
+ "recursiveMode": "Gruppen rekursiv auswählen",
+ "role": "Rolle",
"roleName": "Rollenname",
"roleNameEmptyError": "Rollenname kann nicht leer sein.",
- "recursiveMode": "Gruppen rekursiv auswählen",
- "roleSavedSuccess": "Rolle erfolgreich gespeichert."
+ "roleSavedSuccess": "Rolle erfolgreich gespeichert.",
+ "selectChildGroups": "Klicke, um alle Untergruppen auszuwählen.",
+ "submit": "Einreichen",
+ "summary": "Zusammenfassung"
}
}
</i18n>
@@ -48,7 +50,7 @@
<v-stepper-step
:complete="stepCompleted >= 1"
step="1"
- :editable="stepCompleted >= 1"
+ :editable="stepCompleted >= 0"
edit-icon="check"
>
{{ $t('role') }}
@@ -57,7 +59,7 @@
<v-stepper-step
:complete="stepCompleted >= 2"
step="2"
- :editable="stepCompleted >= 2"
+ :editable="stepCompleted >= 1"
edit-icon="check"
>
{{ $t('permissions') }}
@@ -66,7 +68,7 @@
<v-stepper-step
:complete="stepCompleted >= 3"
step="3"
- :editable="stepCompleted >= 3"
+ :editable="stepCompleted >= 2"
edit-icon="check"
>
{{ $t('groups') }}
@@ -75,7 +77,7 @@
<v-stepper-step
:complete="stepCompleted >= 4"
step="4"
- :editable="stepCompleted >= 4"
+ :editable="stepCompleted >= 3"
edit-icon="check"
>
{{ $t('summary') }}
@@ -115,15 +117,14 @@
</v-stepper-content>
<v-stepper-content step="3" class="stepper-padding-0">
- <v-flex xs4 offset-xs4>
- <v-switch
- :label="$t('recursiveMode')"
- :input-value="recursiveSwitch"
- @change="recursiveSwitch = $event"
- color="primary"
- ></v-switch>
- </v-flex>
- <data-table v-model="groupsSelected" :headers="groupHeaders" :items="groups"/>
+ <data-table v-model="groupsSelected" :headers="groupHeaders" :items="groups">
+ <div slot="actions" slot-scope="row" style="text-align: right">
+ <v-tooltip top :key="row.item" open-delay="800">
+ <v-btn slot="activator" :loading="row.item.loadingSubgroups" icon @click.stop @mousedown="loadChilds(row.item)" style="margin: 0"><v-icon>device_hub</v-icon></v-btn>
+ <span>{{ $t('selectChildGroups') }}</span>
+ </v-tooltip>
+ </div>
+ </data-table>
</v-stepper-content>
<v-stepper-content step="4">
@@ -148,37 +149,38 @@
auto-grow
disabled
></v-textarea>
-
<v-layout row wrap>
- <v-flex>
- <v-list subheader>
+ <v-flex xs12 sm6>
+ <div>
<v-subheader inset>{{ $t('permissions') }}</v-subheader>
<v-divider class="list-header-margin"></v-divider>
- <v-list-tile
- v-for="permission in permissionsSelected"
- :key="permission.id"
+ <RecycleScroller
+ :items="permissionsSelected"
+ :item-height="48"
+ page-mode
>
- <v-list-tile-content>
- <v-list-tile-title>{{ permission.name }}</v-list-tile-title>
- <v-list-tile-sub-title>{{ permission.descr }}</v-list-tile-sub-title>
- </v-list-tile-content>
- </v-list-tile>
- </v-list>
+ <div slot-scope="{ item }" class="list-item">
+ <div class="list-item-header">{{ item.name }}</div>
+ <div class="list-item-subheader">{{ item.descr }}</div>
+ </div>
+ </RecycleScroller>
+ </div>
</v-flex>
- <v-flex>
- <v-list subheader>
+ <v-flex xs12 sm6>
+ <div>
<v-subheader inset>{{ $t('groups') }}</v-subheader>
<v-divider class="list-header-margin"></v-divider>
- <v-list-tile
- v-for="group in groupsSummary"
- :key="group.id"
+ <RecycleScroller
+ :items="groupsSelected"
+ :item-height="48"
+ page-mode
>
- <v-list-tile-content>
- <v-list-tile-title>{{ group.id }} {{ group.name }}</v-list-tile-title>
- <v-list-tile-sub-title>{{ group.description }}</v-list-tile-sub-title>
- </v-list-tile-content>
- </v-list-tile>
- </v-list>
+ <div slot-scope="{ item }" class="list-item">
+ <div class="list-item-header">{{ item.id }} {{ item.name }}</div>
+ <div class="list-item-subheader">{{ item.description }}</div>
+ </div>
+ </RecycleScroller>
+ </div>
</v-flex>
</v-layout>
</v-stepper-content>
@@ -189,20 +191,18 @@
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
- <v-flex xl10 offset-xl1 lg12 text-xs-right>
- <v-btn flat @click.native="$store.commit('permissions/setEdit', false )">{{ $t('cancel') }}</v-btn>
- <v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
- <v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
- <v-btn color="primary" v-show="step == 3" @click.native="completeStepThree()">{{ $t('continue') }}</v-btn>
- <v-btn class="success" v-show="step == 4" @click="submit" type="submit">{{ $t('submit') }}</v-btn>
- </v-flex>
+ <v-spacer></v-spacer>
+ <v-btn flat @click.native="$store.commit('permissions/setEdit', false )">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
+ <v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
+ <v-btn color="primary" v-show="step == 3" @click.native="completeStepThree()">{{ $t('continue') }}</v-btn>
+ <v-btn class="success" v-show="step == 4" @click="submit" type="submit">{{ $t('submit') }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
-import _arrayIncludes from 'lodash/_arrayIncludes'
import DataTable from '@/components/DataTable'
export default {
@@ -230,7 +230,8 @@ export default {
groupHeaders: [
{ text: this.$t('id'), key: 'id' },
{ text: this.$t('name'), key: 'name' },
- { text: this.$t('description'), key: 'description' }
+ { text: this.$t('description'), key: 'description' },
+ { key: 'actions', width: '60px' }
],
roleName: '',
roleDescr: ''
@@ -279,29 +280,6 @@ export default {
this.stepCompleted = Math.max(2, this.stepCompleted)
},
completeStepThree () {
- if (this.recursiveSwitch === true) {
- var promises = []
- var childGroups = []
- var self = this
- // _arrayIncludes.js
- this.groupsSelected.forEach(function (group) {
- promises.push(self.$http('/api/groups/' + group.id + '?all').then(response => {
- response.data.subgroups.forEach(function (subgroup) {
- if (!(_arrayIncludes(self.groupsSelected, subgroup) || _arrayIncludes(childGroups, subgroup))) {
- childGroups.push(subgroup)
- }
- })
- }))
- })
-
- Promise.all(promises).then(() => {
- console.log(JSON.stringify(this.groupsSelected))
- console.log(JSON.stringify(childGroups))
- this.groupsSummary = this.groupsSelected.concat(childGroups)
- })
- } else {
- this.groupsSummary = this.groupsSelected
- }
this.step = 4
this.stepCompleted = Math.max(3, this.stepCompleted)
},
@@ -314,6 +292,14 @@ export default {
this.$http('/api/permissions').then(response => {
this.permissions = response.data
})
+ },
+ loadChilds (group) {
+ group.loadingSubgroups = true
+ this.groupsSelected.push(group)
+ this.$http('/api/groups/' + group.id + '?all').then(response => {
+ this.groupsSelected = this.groupsSelected.concat(response.data.subgroups)
+ group.loadingSubgroups = false
+ })
}
},
computed: {
@@ -325,7 +311,8 @@ export default {
edit: function (value) {
if (value) {
this.loadGroups()
- this.$refs.form.reset()
+ this.loadPermissions()
+ this.$refs.form.resetValidation()
this.permissionsSelected = []
this.groupsSelected = []
this.step = 1
@@ -342,7 +329,6 @@ export default {
}
},
created () {
- this.loadPermissions()
}
}
</script>
@@ -366,4 +352,20 @@ export default {
padding: 0px;
z-index: 1;
}
+.list-item {
+ height: 48px;
+ max-width: 500px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+.list-item-header {
+ font-size: 16px;
+}
+.theme--light .list-item > .list-item-subheader {
+ color: rgba(0,0,0,.54);
+}
+.theme--dark .list-item > .list-item-subheader {
+ color: hsla(0,0%,100%,.7);
+}
</style>