1b34349d4SDixsie Wolmers<template> 2b34349d4SDixsie Wolmers <b-modal 3b34349d4SDixsie Wolmers id="modal-dns" 4b34349d4SDixsie Wolmers ref="modal" 5b34349d4SDixsie Wolmers :title="$t('pageNetwork.table.addDnsAddress')" 6b34349d4SDixsie Wolmers @hidden="resetForm" 7b34349d4SDixsie Wolmers > 8b34349d4SDixsie Wolmers <b-form id="form-dns" @submit.prevent="handleSubmit"> 9b34349d4SDixsie Wolmers <b-row> 10b34349d4SDixsie Wolmers <b-col sm="6"> 11b34349d4SDixsie Wolmers <b-form-group 12b34349d4SDixsie Wolmers :label="$t('pageNetwork.modal.staticDns')" 13b34349d4SDixsie Wolmers label-for="staticDns" 14b34349d4SDixsie Wolmers > 15b34349d4SDixsie Wolmers <b-form-input 16b34349d4SDixsie Wolmers id="staticDns" 17b34349d4SDixsie Wolmers v-model="form.staticDns" 18b34349d4SDixsie Wolmers type="text" 19de23ea23SSurya V :state="getValidationState(v$.form.staticDns)" 20de23ea23SSurya V @input="v$.form.staticDns.$touch()" 21b34349d4SDixsie Wolmers /> 22b34349d4SDixsie Wolmers <b-form-invalid-feedback role="alert"> 23*4626aec4SSurya Venkatesan <template v-if="v$.form.staticDns.required.$invalid"> 24b34349d4SDixsie Wolmers {{ $t('global.form.fieldRequired') }} 25b34349d4SDixsie Wolmers </template> 26*4626aec4SSurya Venkatesan <template v-if="v$.form.staticDns.ipAddress.$invalid"> 27b34349d4SDixsie Wolmers {{ $t('global.form.invalidFormat') }} 28b34349d4SDixsie Wolmers </template> 29b34349d4SDixsie Wolmers </b-form-invalid-feedback> 30b34349d4SDixsie Wolmers </b-form-group> 31b34349d4SDixsie Wolmers </b-col> 32b34349d4SDixsie Wolmers </b-row> 33b34349d4SDixsie Wolmers </b-form> 34b34349d4SDixsie Wolmers <template #modal-footer="{ cancel }"> 35b34349d4SDixsie Wolmers <b-button variant="secondary" @click="cancel()"> 36b34349d4SDixsie Wolmers {{ $t('global.action.cancel') }} 37b34349d4SDixsie Wolmers </b-button> 38b34349d4SDixsie Wolmers <b-button form="form-dns" type="submit" variant="primary" @click="onOk"> 39b34349d4SDixsie Wolmers {{ $t('global.action.add') }} 40b34349d4SDixsie Wolmers </b-button> 41b34349d4SDixsie Wolmers </template> 42b34349d4SDixsie Wolmers </b-modal> 43b34349d4SDixsie Wolmers</template> 44b34349d4SDixsie Wolmers 45b34349d4SDixsie Wolmers<script> 46b34349d4SDixsie Wolmersimport VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; 477d6b44cbSEd Tanousimport { useVuelidate } from '@vuelidate/core'; 487d6b44cbSEd Tanous 497d6b44cbSEd Tanousimport { ipAddress, required } from '@vuelidate/validators'; 50de23ea23SSurya Vimport { useI18n } from 'vue-i18n'; 51b34349d4SDixsie Wolmers 52b34349d4SDixsie Wolmersexport default { 53b34349d4SDixsie Wolmers mixins: [VuelidateMixin], 547d6b44cbSEd Tanous setup() { 557d6b44cbSEd Tanous return { 567d6b44cbSEd Tanous v$: useVuelidate(), 577d6b44cbSEd Tanous }; 587d6b44cbSEd Tanous }, 59b34349d4SDixsie Wolmers data() { 60b34349d4SDixsie Wolmers return { 61de23ea23SSurya V $t: useI18n().t, 62b34349d4SDixsie Wolmers form: { 63b34349d4SDixsie Wolmers staticDns: null, 64b34349d4SDixsie Wolmers }, 65b34349d4SDixsie Wolmers }; 66b34349d4SDixsie Wolmers }, 67b34349d4SDixsie Wolmers validations() { 68b34349d4SDixsie Wolmers return { 69b34349d4SDixsie Wolmers form: { 70b34349d4SDixsie Wolmers staticDns: { 71b34349d4SDixsie Wolmers required, 72b34349d4SDixsie Wolmers ipAddress, 73b34349d4SDixsie Wolmers }, 74b34349d4SDixsie Wolmers }, 75b34349d4SDixsie Wolmers }; 76b34349d4SDixsie Wolmers }, 77b34349d4SDixsie Wolmers methods: { 78b34349d4SDixsie Wolmers handleSubmit() { 79de23ea23SSurya V this.v$.$touch(); 80de23ea23SSurya V if (this.v$.$invalid) return; 81b34349d4SDixsie Wolmers this.$emit('ok', [this.form.staticDns]); 82b34349d4SDixsie Wolmers this.closeModal(); 83b34349d4SDixsie Wolmers }, 84b34349d4SDixsie Wolmers closeModal() { 85b34349d4SDixsie Wolmers this.$nextTick(() => { 86b34349d4SDixsie Wolmers this.$refs.modal.hide(); 87b34349d4SDixsie Wolmers }); 88b34349d4SDixsie Wolmers }, 89b34349d4SDixsie Wolmers resetForm() { 90b34349d4SDixsie Wolmers this.form.staticDns = null; 91de23ea23SSurya V this.v$.$reset(); 92b34349d4SDixsie Wolmers this.$emit('hidden'); 93b34349d4SDixsie Wolmers }, 94b34349d4SDixsie Wolmers onOk(bvModalEvt) { 95b34349d4SDixsie Wolmers // prevent modal close 96b34349d4SDixsie Wolmers bvModalEvt.preventDefault(); 97b34349d4SDixsie Wolmers this.handleSubmit(); 98b34349d4SDixsie Wolmers }, 99b34349d4SDixsie Wolmers }, 100b34349d4SDixsie Wolmers}; 101b34349d4SDixsie Wolmers</script> 102