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