1<template> 2 <b-modal 3 id="modal-add-ipv4" 4 ref="modal" 5 :title="$t('pageNetwork.table.addIpv4Address')" 6 @hidden="resetForm" 7 > 8 <b-form id="form-ipv4" @submit.prevent="handleSubmit"> 9 <b-row> 10 <b-col sm="6"> 11 <b-form-group 12 :label="$t('pageNetwork.modal.ipAddress')" 13 label-for="ipAddress" 14 > 15 <b-form-input 16 id="ipAddress" 17 v-model="form.ipAddress" 18 type="text" 19 :state="getValidationState($v.form.ipAddress)" 20 @input="$v.form.ipAddress.$touch()" 21 /> 22 <b-form-invalid-feedback role="alert"> 23 <template v-if="!$v.form.ipAddress.required"> 24 {{ $t('global.form.fieldRequired') }} 25 </template> 26 <template v-if="!$v.form.ipAddress.ipAddress"> 27 {{ $t('global.form.invalidFormat') }} 28 </template> 29 </b-form-invalid-feedback> 30 </b-form-group> 31 </b-col> 32 <b-col sm="6"> 33 <b-form-group 34 :label="$t('pageNetwork.modal.gateway')" 35 label-for="gateway" 36 > 37 <b-form-input 38 id="gateway" 39 v-model="form.gateway" 40 type="text" 41 :state="getValidationState($v.form.gateway)" 42 @input="$v.form.gateway.$touch()" 43 /> 44 <b-form-invalid-feedback role="alert"> 45 <template v-if="!$v.form.gateway.required"> 46 {{ $t('global.form.fieldRequired') }} 47 </template> 48 <template v-if="!$v.form.gateway.ipAddress"> 49 {{ $t('global.form.invalidFormat') }} 50 </template> 51 </b-form-invalid-feedback> 52 </b-form-group> 53 </b-col> 54 </b-row> 55 <b-row> 56 <b-col sm="6"> 57 <b-form-group 58 :label="$t('pageNetwork.modal.subnetMask')" 59 label-for="subnetMask" 60 > 61 <b-form-input 62 id="subnetMask" 63 v-model="form.subnetMask" 64 type="text" 65 :state="getValidationState($v.form.subnetMask)" 66 @input="$v.form.subnetMask.$touch()" 67 /> 68 <b-form-invalid-feedback role="alert"> 69 <template v-if="!$v.form.subnetMask.required"> 70 {{ $t('global.form.fieldRequired') }} 71 </template> 72 <template v-if="!$v.form.subnetMask.ipAddress"> 73 {{ $t('global.form.invalidFormat') }} 74 </template> 75 </b-form-invalid-feedback> 76 </b-form-group> 77 </b-col> 78 </b-row> 79 </b-form> 80 <template #modal-footer="{ cancel }"> 81 <b-button variant="secondary" @click="cancel()"> 82 {{ $t('global.action.cancel') }} 83 </b-button> 84 <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk"> 85 {{ $t('global.action.add') }} 86 </b-button> 87 </template> 88 </b-modal> 89</template> 90 91<script> 92import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 93import { useVuelidate } from '@vuelidate/core'; 94 95import { ipAddress, required } from '@vuelidate/validators'; 96 97export default { 98 mixins: [VuelidateMixin], 99 props: { 100 defaultGateway: { 101 type: String, 102 default: '', 103 }, 104 }, 105 setup() { 106 return { 107 v$: useVuelidate(), 108 }; 109 }, 110 data() { 111 return { 112 form: { 113 ipAddress: '', 114 gateway: '', 115 subnetMask: '', 116 }, 117 }; 118 }, 119 watch: { 120 defaultGateway() { 121 this.form.gateway = this.defaultGateway; 122 }, 123 }, 124 validations() { 125 return { 126 form: { 127 ipAddress: { 128 required, 129 ipAddress, 130 }, 131 gateway: { 132 required, 133 ipAddress, 134 }, 135 subnetMask: { 136 required, 137 ipAddress, 138 }, 139 }, 140 }; 141 }, 142 methods: { 143 handleSubmit() { 144 this.$v.$touch(); 145 if (this.$v.$invalid) return; 146 this.$emit('ok', { 147 Address: this.form.ipAddress, 148 Gateway: this.form.gateway, 149 SubnetMask: this.form.subnetMask, 150 }); 151 this.closeModal(); 152 }, 153 closeModal() { 154 this.$nextTick(() => { 155 this.$refs.modal.hide(); 156 }); 157 }, 158 resetForm() { 159 this.form.ipAddress = null; 160 this.form.gateway = this.defaultGateway; 161 this.form.subnetMask = 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