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