summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleEdit.vue
diff options
context:
space:
mode:
authorChristian Hofmaier2018-08-10 02:28:51 +0200
committerChristian Hofmaier2018-08-10 02:28:51 +0200
commit79966027428a7d9e1425c63777647e53c9167066 (patch)
treebe23858c24b4ffedd19a6ec188fc5eb87a9c6090 /webapp/src/components/PermissionModuleEdit.vue
parent[server/config] Add server configs. (diff)
downloadbas-79966027428a7d9e1425c63777647e53c9167066.tar.gz
bas-79966027428a7d9e1425c63777647e53c9167066.tar.xz
bas-79966027428a7d9e1425c63777647e53c9167066.zip
[permissions] Add recursive group selection + tables changed to search tables
Role Table has now a new column recursiveGroups to display if recursive selection is wanted Roles and Permissions can now have longer descriptions Data-Tables are now Udos Search-Tables
Diffstat (limited to 'webapp/src/components/PermissionModuleEdit.vue')
-rw-r--r--webapp/src/components/PermissionModuleEdit.vue122
1 files changed, 72 insertions, 50 deletions
diff --git a/webapp/src/components/PermissionModuleEdit.vue b/webapp/src/components/PermissionModuleEdit.vue
index e1cf45f..8a981ca 100644
--- a/webapp/src/components/PermissionModuleEdit.vue
+++ b/webapp/src/components/PermissionModuleEdit.vue
@@ -11,7 +11,8 @@
"groups": "Groups",
"summary": "Summary",
"roleName": "Role Name",
- "roleNameEmptyError": "Role Name can't be empty."
+ "roleNameEmptyError": "Role Name can't be empty.",
+ "recursiveMode": "Select Groups recursive"
},
"de": {
"id": "ID",
@@ -24,7 +25,8 @@
"groups": "Gruppen",
"summary": "Zusammenfassung",
"roleName": "Rollenname",
- "roleNameEmptyError": "Rollenname kann nicht leer sein."
+ "roleNameEmptyError": "Rollenname kann nicht leer sein.",
+ "recursiveMode": "Gruppen rekursiv auswählen"
}
}
</i18n>
@@ -33,8 +35,9 @@
<v-dialog
:value="$store.state.permissions.edit"
@input="$store.commit('permissions/setEdit', $event)"
- max-width="700px"
+ max-width="800px"
scrollable
+ persistent
>
<v-card>
<v-card-title class="dialog-title">
@@ -78,7 +81,7 @@
</v-stepper-header>
</v-stepper>
</v-card-title>
- <v-card-text style="height: 500px;">
+ <v-card-text class="table-container">
<v-form v-model="valid" ref="form" @submit.prevent="submit" lazy-validation>
<v-stepper v-model="step" horizontal style="width: 100%; background: transparent" class="elevation-0">
<v-stepper-items>
@@ -103,64 +106,48 @@
rows="1"
auto-grow
></v-textarea>
-
</v-stepper-content>
- <v-stepper-content step="2">
- <v-data-table
- :headers="permissionHeaders"
- :items="permissions"
- item-key="id"
- hide-actions
- select-all
- :value="permissionsSelected"
- @input="setPermissionsSelected($event)"
- >
+ <v-stepper-content step="2" class="stepper-padding-0">
+ <component-search-table v-model="permissionsSelected" :headers="permissionHeaders" :items="permissions" select-all>
<template slot="items" slot-scope="props">
- <tr @click="props.selected = !props.selected">
+ <tr :style="props.color" @click="props.data.selected = !props.data.selected">
<td>
<v-checkbox
color="primary"
- v-model="props.selected"
+ v-model="props.data.selected"
hide-details
- @click.native.stop
></v-checkbox>
</td>
- <td hidden>{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
- <td>{{ props.item.descr }}</td>
- <td>{{ props.item.groupdependent }}</td>
+ <td>{{ props.data.item.name }}</td>
+ <td>{{ props.data.item.descr }}</td>
+ <td>{{ props.data.item.groupdependent }}</td>
</tr>
</template>
- </v-data-table>
+ </component-search-table>
</v-stepper-content>
- <v-stepper-content step="3">
- <v-data-table
- :headers="groupHeaders"
- :items="groups"
- item-key="id"
- hide-actions
- select-all
- :value="groupsSelected"
- @input="setGroupsSelected($event)"
- >
+ <v-stepper-content step="3" class="stepper-padding-0">
+ <v-switch
+ :label="$t('recursiveMode')"
+ :input-value="recursiveSwitch"
+ ></v-switch>
+ <component-search-table v-model="groupsSelected" :headers="groupHeaders" :items="groups" select-all>
<template slot="items" slot-scope="props">
- <tr @click="props.selected = !props.selected">
+ <tr :style="props.color" @click="props.data.selected = !props.data.selected">
<td>
<v-checkbox
color="primary"
- v-model="props.selected"
+ v-model="props.data.selected"
hide-details
- @click.native.stop
></v-checkbox>
</td>
- <td>{{ props.item.id }}</td>
- <td>{{ props.item.name }}</td>
- <td>{{ props.item.description }}</td>
+ <td>{{ props.data.item.id }}</td>
+ <td>{{ props.data.item.name }}</td>
+ <td>{{ props.data.item.description }}</td>
</tr>
</template>
- </v-data-table>
+ </component-search-table>
</v-stepper-content>
<v-stepper-content step="4">
@@ -207,7 +194,7 @@
<v-subheader inset>{{ $t('groups') }}</v-subheader>
<v-divider class="list-header-margin"></v-divider>
<v-list-tile
- v-for="group in groupsSelected"
+ v-for="group in groupsSummary"
:key="group.id"
>
<v-list-tile-content>
@@ -239,10 +226,15 @@
</template>
<script>
+import _arrayIncludes from 'lodash/_arrayIncludes'
+import ComponentSearchTable from '@/components/ComponentSearchTable'
export default {
name: 'PermissionModuleEdit',
props: ['roleId'],
+ components: {
+ ComponentSearchTable
+ },
data () {
return {
valid: true,
@@ -252,6 +244,8 @@ export default {
groups: [],
permissionsSelected: [],
groupsSelected: [],
+ groupsSummary: [],
+ recursiveSwitch: true,
permissionHeaders: [
{ text: this.$t('name'), value: 'name' },
{ text: this.$t('description'), value: 'descr' },
@@ -276,11 +270,12 @@ export default {
name: this.roleName,
descr: this.roleDescr,
permissions: filteredPermissions,
- groups: filteredGroups
+ groups: filteredGroups,
+ recursiveMode: this.recursiveSwitch
}).then(response => {
// TODO: Add backend saved successfull msg.
console.log('TODO: Implement snackbar and print role saved successfully msg.')
- this.$store.dispatch('permissions/loadData')
+ this.$store.dispatch('permissions/loadRoleData')
this.$store.commit('permissions/setEdit', false)
}).catch(error => {
console.log(error)
@@ -293,6 +288,7 @@ export default {
this.roleDescr = response.data.descr
this.permissionsSelected = response.data.permissions
this.groupsSelected = response.data.groups
+ this.recursiveSwitch = response.data.recursiveGroups
})
},
completeStepOne () {
@@ -308,15 +304,32 @@ 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/getGroup?all=true&id=' + group.id).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)
},
- setPermissionsSelected (value) {
- this.permissionsSelected = value
- },
- setGroupsSelected (value) {
- this.groupsSelected = value
- },
loadGroups () {
this.$http('/api/groups/getList').then(response => {
this.groups = response.data
@@ -341,12 +354,14 @@ export default {
this.permissionsSelected = []
this.groupsSelected = []
this.step = 1
- this.stepCompleted = 0
if (this.roleId !== 0) {
this.loadRole(this.roleId)
+ this.stepCompleted = 4
} else {
+ this.recursiveSwitch = true
this.roleName = ''
this.roleDescr = ''
+ this.stepCompleted = 0
}
}
}
@@ -359,6 +374,13 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
+.table-container {
+ padding: 0;
+ height: 700px;
+}
+.stepper-padding-0 {
+ padding: 0;
+}
.info-input {
margin: 20px;
}