summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleEdit.vue
diff options
context:
space:
mode:
authorChristian Hofmaier2018-08-05 05:32:00 +0200
committerChristian Hofmaier2018-08-05 05:32:00 +0200
commit1326c4f0ac3a0045ea02c9ab9180ded4392fdeb6 (patch)
treeb5589d78af8d97897446f1282c99ea9791bb5954 /webapp/src/components/PermissionModuleEdit.vue
parent[external-backends] Added comments for the API functions and in the external-... (diff)
downloadbas-1326c4f0ac3a0045ea02c9ab9180ded4392fdeb6.tar.gz
bas-1326c4f0ac3a0045ea02c9ab9180ded4392fdeb6.tar.xz
bas-1326c4f0ac3a0045ea02c9ab9180ded4392fdeb6.zip
Add Role Create/Edit
Diffstat (limited to 'webapp/src/components/PermissionModuleEdit.vue')
-rw-r--r--webapp/src/components/PermissionModuleEdit.vue123
1 files changed, 98 insertions, 25 deletions
diff --git a/webapp/src/components/PermissionModuleEdit.vue b/webapp/src/components/PermissionModuleEdit.vue
index 5e892de..9de6b99 100644
--- a/webapp/src/components/PermissionModuleEdit.vue
+++ b/webapp/src/components/PermissionModuleEdit.vue
@@ -62,19 +62,30 @@
<v-stepper-items>
<v-stepper-content step="1">
- <p> 2 Input Boxen (Name, Description) </p>
<v-text-field
v-model="roleName"
:label="$t('roleName')"
+ prepend-icon="label"
+ class="info-input"
+ color="primary"
:rules="[() => !!roleName || $t('roleNameEmptyError')]"
ref="roleName"
- prepend-icon="assignment_ind"
></v-text-field>
+
+ <v-textarea
+ v-model="roleDescr"
+ :label="$t('description')"
+ prepend-icon="description"
+ class="info-input"
+ color="primary"
+ rows="1"
+ auto-grow
+ ></v-textarea>
+
</v-stepper-content>
<v-stepper-content step="2">
<v-data-table
- class="group-table"
:headers="permissionHeaders"
:items="permissions"
item-key="id"
@@ -103,17 +114,61 @@
</v-stepper-content>
<v-stepper-content step="3">
- <p> Data-Table aller Gruppen</p>
+ <v-data-table
+ :headers="groupHeaders"
+ :items="groups"
+ item-key="id"
+ hide-actions
+ select-all
+ :value="groupsSelected"
+ @input="setGroupsSelected($event)"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="props.selected = !props.selected">
+ <td>
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.native.stop
+ ></v-checkbox>
+ </td>
+ <td>{{ props.item.id }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>{{ props.item.description }}</td>
+ </tr>
+ </template>
+ </v-data-table>
</v-stepper-content>
<v-stepper-content step="4">
- {{roleName}}
- {{roleDescr}}
+ <v-text-field
+ v-model="roleName"
+ :label="$t('roleName')"
+ prepend-icon="label"
+ class="info-input"
+ color="primary"
+ :rules="[() => !!roleName || $t('roleNameEmptyError')]"
+ ref="roleName"
+ disabled
+ ></v-text-field>
+
+ <v-textarea
+ v-model="roleDescr"
+ :label="$t('description')"
+ prepend-icon="description"
+ class="info-input"
+ color="primary"
+ rows="1"
+ auto-grow
+ disabled
+ ></v-textarea>
+
<v-layout row wrap>
<v-flex>
- <v-list two-line subheader>
+ <v-list subheader>
<v-subheader inset>{{ $t('permissions') }}</v-subheader>
- <v-divider></v-divider>
+ <v-divider class="list-header-margin"></v-divider>
<v-list-tile
v-for="permission in permissionsSelected"
:key="permission.id"
@@ -126,15 +181,16 @@
</v-list>
</v-flex>
<v-flex>
- <v-list two-line subheader>
+ <v-list subheader>
<v-subheader inset>{{ $t('groups') }}</v-subheader>
- <v-divider></v-divider>
+ <v-divider class="list-header-margin"></v-divider>
<v-list-tile
v-for="group in groupsSelected"
:key="group.id"
>
<v-list-tile-content>
- <v-list-tile-title>{{ group.name }}</v-list-tile-title>
+ <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>
@@ -161,7 +217,6 @@
</template>
<script>
-import { mapState } from 'vuex'
export default {
name: 'PermissionModuleEdit',
@@ -171,6 +226,8 @@ export default {
valid: true,
step: 1,
stepCompleted: 0,
+ permissions: [],
+ groups: [],
permissionsSelected: [],
groupsSelected: [],
permissionHeaders: [
@@ -180,7 +237,8 @@ export default {
],
groupHeaders: [
{ text: 'ID', value: 'id' },
- { text: 'Name', value: 'name' }
+ { text: 'Name', value: 'name' },
+ { text: 'Description', value: 'description' }
],
roleName: '',
roleDescr: ''
@@ -204,9 +262,6 @@ export default {
this.$store.commit('permissions/setEdit', false)
}).catch(error => {
console.log(error)
- // if (error.response.data.status === '') {
- // }
- // this.$refs.form.validate()
})
}
},
@@ -214,8 +269,8 @@ export default {
this.$http('/api/permissions/getRoleById?id=' + this.roleId).then(response => {
this.roleName = response.data.name
this.roleDescr = response.data.descr
- // this.permissionsSelected = response.data.permissions.id
- // this.groupsSelected = response.data.groups.id
+ this.permissionsSelected = response.data.permissions
+ this.groupsSelected = response.data.groups
})
},
completeStepOne () {
@@ -236,10 +291,22 @@ export default {
},
setPermissionsSelected (value) {
this.permissionsSelected = value
+ },
+ setGroupsSelected (value) {
+ this.groupsSelected = value
+ },
+ loadGroups () {
+ this.$http('/api/groups/getAll').then(response => {
+ this.groups = response.data
+ })
+ },
+ loadPermissions () {
+ this.$http('/api/permissions/getPermissionList').then(response => {
+ this.permissions = response.data
+ })
}
},
computed: {
- ...mapState('permissions', ['permissions']),
edit: function () {
return this.$store.state.permissions.edit
}
@@ -247,27 +314,33 @@ export default {
watch: {
edit: function (value) {
if (value) {
+ this.loadGroups()
this.$refs.form.reset()
+ this.permissionsSelected = []
+ this.groupsSelected = []
+ this.step = 1
+ this.stepCompleted = 0
if (this.roleId !== 0) {
this.loadRole(this.roleId)
} else {
this.roleName = ''
this.roleDescr = ''
- this.permissionsSelected = []
- this.groupsSelected = []
}
- this.step = 1
- this.stepCompleted = 0
}
}
},
created () {
- this.$store.dispatch('permissions/loadPermissionData')
+ this.loadPermissions()
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
+.info-input {
+ margin: 20px;
+}
+.list-header-margin {
+ margin-bottom: 10px;
+}
</style>