1*b440616cSSandeepa Singh<template> 2*b440616cSSandeepa Singh <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm"> 3*b440616cSSandeepa Singh <template #modal-title> 4*b440616cSSandeepa Singh <template v-if="roleGroup"> 5*b440616cSSandeepa Singh {{ $t('pageLdap.modal.editRoleGroup') }} 6*b440616cSSandeepa Singh </template> 7*b440616cSSandeepa Singh <template v-else> 8*b440616cSSandeepa Singh {{ $t('pageLdap.modal.addNewRoleGroup') }} 9*b440616cSSandeepa Singh </template> 10*b440616cSSandeepa Singh </template> 11*b440616cSSandeepa Singh <b-container> 12*b440616cSSandeepa Singh <b-row> 13*b440616cSSandeepa Singh <b-col sm="8"> 14*b440616cSSandeepa Singh <b-form id="role-group" @submit.prevent="handleSubmit"> 15*b440616cSSandeepa Singh <!-- Edit role group --> 16*b440616cSSandeepa Singh <template v-if="roleGroup !== null"> 17*b440616cSSandeepa Singh <dl class="mb-4"> 18*b440616cSSandeepa Singh <dt>{{ $t('pageLdap.modal.groupName') }}</dt> 19*b440616cSSandeepa Singh <dd>{{ form.groupName }}</dd> 20*b440616cSSandeepa Singh </dl> 21*b440616cSSandeepa Singh </template> 22*b440616cSSandeepa Singh 23*b440616cSSandeepa Singh <!-- Add new role group --> 24*b440616cSSandeepa Singh <template v-else> 25*b440616cSSandeepa Singh <b-form-group 26*b440616cSSandeepa Singh :label="$t('pageLdap.modal.groupName')" 27*b440616cSSandeepa Singh label-for="role-group-name" 28*b440616cSSandeepa Singh > 29*b440616cSSandeepa Singh <b-form-input 30*b440616cSSandeepa Singh id="role-group-name" 31*b440616cSSandeepa Singh v-model="form.groupName" 32*b440616cSSandeepa Singh :state="getValidationState($v.form.groupName)" 33*b440616cSSandeepa Singh @input="$v.form.groupName.$touch()" 34*b440616cSSandeepa Singh /> 35*b440616cSSandeepa Singh <b-form-invalid-feedback role="alert"> 36*b440616cSSandeepa Singh {{ $t('global.form.fieldRequired') }} 37*b440616cSSandeepa Singh </b-form-invalid-feedback> 38*b440616cSSandeepa Singh </b-form-group> 39*b440616cSSandeepa Singh </template> 40*b440616cSSandeepa Singh 41*b440616cSSandeepa Singh <b-form-group 42*b440616cSSandeepa Singh :label="$t('pageLdap.modal.groupPrivilege')" 43*b440616cSSandeepa Singh label-for="privilege" 44*b440616cSSandeepa Singh > 45*b440616cSSandeepa Singh <b-form-select 46*b440616cSSandeepa Singh id="privilege" 47*b440616cSSandeepa Singh v-model="form.groupPrivilege" 48*b440616cSSandeepa Singh :options="accountRoles" 49*b440616cSSandeepa Singh :state="getValidationState($v.form.groupPrivilege)" 50*b440616cSSandeepa Singh @input="$v.form.groupPrivilege.$touch()" 51*b440616cSSandeepa Singh > 52*b440616cSSandeepa Singh <template v-if="!roleGroup" #first> 53*b440616cSSandeepa Singh <b-form-select-option :value="null" disabled> 54*b440616cSSandeepa Singh {{ $t('global.form.selectAnOption') }} 55*b440616cSSandeepa Singh </b-form-select-option> 56*b440616cSSandeepa Singh </template> 57*b440616cSSandeepa Singh </b-form-select> 58*b440616cSSandeepa Singh <b-form-invalid-feedback role="alert"> 59*b440616cSSandeepa Singh {{ $t('global.form.fieldRequired') }} 60*b440616cSSandeepa Singh </b-form-invalid-feedback> 61*b440616cSSandeepa Singh </b-form-group> 62*b440616cSSandeepa Singh </b-form> 63*b440616cSSandeepa Singh </b-col> 64*b440616cSSandeepa Singh </b-row> 65*b440616cSSandeepa Singh </b-container> 66*b440616cSSandeepa Singh <template #modal-footer="{ cancel }"> 67*b440616cSSandeepa Singh <b-button variant="secondary" @click="cancel()"> 68*b440616cSSandeepa Singh {{ $t('global.action.cancel') }} 69*b440616cSSandeepa Singh </b-button> 70*b440616cSSandeepa Singh <b-button form="role-group" type="submit" variant="primary" @click="onOk"> 71*b440616cSSandeepa Singh <template v-if="roleGroup"> 72*b440616cSSandeepa Singh {{ $t('global.action.save') }} 73*b440616cSSandeepa Singh </template> 74*b440616cSSandeepa Singh <template v-else> 75*b440616cSSandeepa Singh {{ $t('global.action.add') }} 76*b440616cSSandeepa Singh </template> 77*b440616cSSandeepa Singh </b-button> 78*b440616cSSandeepa Singh </template> 79*b440616cSSandeepa Singh </b-modal> 80*b440616cSSandeepa Singh</template> 81*b440616cSSandeepa Singh 82*b440616cSSandeepa Singh<script> 83*b440616cSSandeepa Singhimport { required, requiredIf } from 'vuelidate/lib/validators'; 84*b440616cSSandeepa Singhimport VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 85*b440616cSSandeepa Singh 86*b440616cSSandeepa Singhexport default { 87*b440616cSSandeepa Singh mixins: [VuelidateMixin], 88*b440616cSSandeepa Singh props: { 89*b440616cSSandeepa Singh roleGroup: { 90*b440616cSSandeepa Singh type: Object, 91*b440616cSSandeepa Singh default: null, 92*b440616cSSandeepa Singh validator: (prop) => { 93*b440616cSSandeepa Singh if (prop === null) return true; 94*b440616cSSandeepa Singh return ( 95*b440616cSSandeepa Singh Object.prototype.hasOwnProperty.call(prop, 'groupName') && 96*b440616cSSandeepa Singh Object.prototype.hasOwnProperty.call(prop, 'groupPrivilege') 97*b440616cSSandeepa Singh ); 98*b440616cSSandeepa Singh }, 99*b440616cSSandeepa Singh }, 100*b440616cSSandeepa Singh }, 101*b440616cSSandeepa Singh data() { 102*b440616cSSandeepa Singh return { 103*b440616cSSandeepa Singh form: { 104*b440616cSSandeepa Singh groupName: null, 105*b440616cSSandeepa Singh groupPrivilege: null, 106*b440616cSSandeepa Singh }, 107*b440616cSSandeepa Singh }; 108*b440616cSSandeepa Singh }, 109*b440616cSSandeepa Singh computed: { 110*b440616cSSandeepa Singh accountRoles() { 111*b440616cSSandeepa Singh return this.$store.getters['userManagement/accountRoles']; 112*b440616cSSandeepa Singh }, 113*b440616cSSandeepa Singh }, 114*b440616cSSandeepa Singh watch: { 115*b440616cSSandeepa Singh roleGroup: function (value) { 116*b440616cSSandeepa Singh if (value === null) return; 117*b440616cSSandeepa Singh this.form.groupName = value.groupName; 118*b440616cSSandeepa Singh this.form.groupPrivilege = value.groupPrivilege; 119*b440616cSSandeepa Singh }, 120*b440616cSSandeepa Singh }, 121*b440616cSSandeepa Singh validations() { 122*b440616cSSandeepa Singh return { 123*b440616cSSandeepa Singh form: { 124*b440616cSSandeepa Singh groupName: { 125*b440616cSSandeepa Singh required: requiredIf(function () { 126*b440616cSSandeepa Singh return !this.roleGroup; 127*b440616cSSandeepa Singh }), 128*b440616cSSandeepa Singh }, 129*b440616cSSandeepa Singh groupPrivilege: { 130*b440616cSSandeepa Singh required, 131*b440616cSSandeepa Singh }, 132*b440616cSSandeepa Singh }, 133*b440616cSSandeepa Singh }; 134*b440616cSSandeepa Singh }, 135*b440616cSSandeepa Singh methods: { 136*b440616cSSandeepa Singh handleSubmit() { 137*b440616cSSandeepa Singh this.$v.$touch(); 138*b440616cSSandeepa Singh if (this.$v.$invalid) return; 139*b440616cSSandeepa Singh this.$emit('ok', { 140*b440616cSSandeepa Singh addNew: !this.roleGroup, 141*b440616cSSandeepa Singh groupName: this.form.groupName, 142*b440616cSSandeepa Singh groupPrivilege: this.form.groupPrivilege, 143*b440616cSSandeepa Singh }); 144*b440616cSSandeepa Singh this.closeModal(); 145*b440616cSSandeepa Singh }, 146*b440616cSSandeepa Singh closeModal() { 147*b440616cSSandeepa Singh this.$nextTick(() => { 148*b440616cSSandeepa Singh this.$refs.modal.hide(); 149*b440616cSSandeepa Singh }); 150*b440616cSSandeepa Singh }, 151*b440616cSSandeepa Singh resetForm() { 152*b440616cSSandeepa Singh this.form.groupName = null; 153*b440616cSSandeepa Singh this.form.groupPrivilege = null; 154*b440616cSSandeepa Singh this.$v.$reset(); 155*b440616cSSandeepa Singh this.$emit('hidden'); 156*b440616cSSandeepa Singh }, 157*b440616cSSandeepa Singh onOk(bvModalEvt) { 158*b440616cSSandeepa Singh // prevent modal close 159*b440616cSSandeepa Singh bvModalEvt.preventDefault(); 160*b440616cSSandeepa Singh this.handleSubmit(); 161*b440616cSSandeepa Singh }, 162*b440616cSSandeepa Singh }, 163*b440616cSSandeepa Singh}; 164*b440616cSSandeepa Singh</script> 165