summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/PermissionModuleGrantRevoke.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/PermissionModuleGrantRevoke.vue')
-rw-r--r--webapp/src/components/PermissionModuleGrantRevoke.vue49
1 files changed, 26 insertions, 23 deletions
diff --git a/webapp/src/components/PermissionModuleGrantRevoke.vue b/webapp/src/components/PermissionModuleGrantRevoke.vue
index 06868d5..24a9ab4 100644
--- a/webapp/src/components/PermissionModuleGrantRevoke.vue
+++ b/webapp/src/components/PermissionModuleGrantRevoke.vue
@@ -29,11 +29,11 @@
<v-dialog
:value="$store.state.permissions.grantRevoke"
@input="$store.commit('permissions/setGrantRevoke', $event)"
- max-width="700px"
+ max-width="800px"
scrollable
>
<v-card>
- <v-card-title style="padding: 0px">
+ <v-card-title class="dialog-title">
<v-stepper v-model="step" horizontal style="width: 100%; background: transparent;" class="elevation-3">
<v-stepper-header>
<v-stepper-step
@@ -56,36 +56,27 @@
</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>
- <v-stepper-content step="1">
- <v-data-table
- :headers="roleHeaders"
- :items="roles"
- item-key="id"
- hide-actions
- select-all
- :value="rolesSelected"
- @input="setRolesSelected($event)"
- >
+ <v-stepper-content step="1" class="stepper-padding-0">
+ <component-search-table v-model="rolesSelected" :headers="roleHeaders" :items="roles" 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.descr }}</td>
+ <td>{{ props.data.item.id }}</td>
+ <td>{{ props.data.item.name }}</td>
+ <td>{{ props.data.item.descr }}</td>
</tr>
</template>
- </v-data-table>
+ </component-search-table>
</v-stepper-content>
<v-stepper-content step="2">
<v-layout row wrap>
@@ -140,10 +131,14 @@
<script>
import { mapState } from 'vuex'
+import ComponentSearchTable from '@/components/ComponentSearchTable'
export default {
name: 'PermissionModuleGrantRevoke',
props: ['grant'],
+ components: {
+ ComponentSearchTable
+ },
data () {
return {
valid: true,
@@ -190,9 +185,6 @@ export default {
completeStepOne () {
this.step = 2
this.stepCompleted = Math.max(1, this.stepCompleted)
- },
- setRolesSelected (value) {
- this.rolesSelected = value
}
},
computed: {
@@ -215,7 +207,18 @@ 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;
+}
.list-header-margin {
margin-bottom: 10px;
}
+.dialog-title {
+ padding: 0px;
+ z-index: 1;
+}
</style>