| Dixsie Wolmers | 12dc20c | 2021-12-03 14:29:26 -0600 | [diff] [blame] | 1 | <template> |
| 2 | <b-modal |
| 3 | id="modal-mac-address" |
| 4 | ref="modal" |
| 5 | :title="$t('pageNetwork.modal.editMacAddressTitle')" |
| 6 | @hidden="resetForm" |
| 7 | > |
| 8 | <b-form id="mac-settings" @submit.prevent="handleSubmit"> |
| 9 | <b-row> |
| 10 | <b-col sm="6"> |
| 11 | <b-form-group |
| 12 | :label="$t('pageNetwork.macAddress')" |
| 13 | label-for="macAddress" |
| 14 | > |
| 15 | <b-form-input |
| 16 | id="mac-address" |
| 17 | v-model.trim="form.macAddress" |
| 18 | data-test-id="network-input-macAddress" |
| 19 | type="text" |
| 20 | :state="getValidationState($v.form.macAddress)" |
| 21 | @change="$v.form.macAddress.$touch()" |
| 22 | /> |
| 23 | <b-form-invalid-feedback role="alert"> |
| 24 | <div v-if="!$v.form.macAddress.required"> |
| 25 | {{ $t('global.form.fieldRequired') }} |
| 26 | </div> |
| 27 | <div v-if="!$v.form.macAddress.macAddress"> |
| 28 | {{ $t('global.form.invalidFormat') }} |
| 29 | </div> |
| 30 | </b-form-invalid-feedback> |
| 31 | </b-form-group> |
| 32 | </b-col> |
| 33 | </b-row> |
| 34 | </b-form> |
| 35 | <template #modal-footer="{ cancel }"> |
| 36 | <b-button variant="secondary" @click="cancel()"> |
| 37 | {{ $t('global.action.cancel') }} |
| 38 | </b-button> |
| 39 | <b-button |
| 40 | form="mac-settings" |
| 41 | type="submit" |
| 42 | variant="primary" |
| 43 | @click="onOk" |
| 44 | > |
| 45 | {{ $t('global.action.add') }} |
| 46 | </b-button> |
| 47 | </template> |
| 48 | </b-modal> |
| 49 | </template> |
| 50 | |
| 51 | <script> |
| 52 | import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; |
| 53 | import { macAddress, required } from 'vuelidate/lib/validators'; |
| 54 | |
| 55 | export default { |
| 56 | mixins: [VuelidateMixin], |
| 57 | props: { |
| 58 | macAddress: { |
| 59 | type: String, |
| 60 | default: '', |
| 61 | }, |
| 62 | }, |
| 63 | data() { |
| 64 | return { |
| 65 | form: { |
| 66 | macAddress: '', |
| 67 | }, |
| 68 | }; |
| 69 | }, |
| 70 | watch: { |
| 71 | macAddress() { |
| 72 | this.form.macAddress = this.macAddress; |
| 73 | }, |
| 74 | }, |
| 75 | validations() { |
| 76 | return { |
| 77 | form: { |
| 78 | macAddress: { |
| 79 | required, |
| 80 | macAddress: macAddress(), |
| 81 | }, |
| 82 | }, |
| 83 | }; |
| 84 | }, |
| 85 | methods: { |
| 86 | handleSubmit() { |
| 87 | this.$v.$touch(); |
| 88 | if (this.$v.$invalid) return; |
| 89 | this.$emit('ok', { MACAddress: this.form.macAddress }); |
| 90 | this.closeModal(); |
| 91 | }, |
| 92 | closeModal() { |
| 93 | this.$nextTick(() => { |
| 94 | this.$refs.modal.hide(); |
| 95 | }); |
| 96 | }, |
| 97 | resetForm() { |
| 98 | this.form.macAddress = this.macAddress; |
| 99 | this.$v.$reset(); |
| 100 | this.$emit('hidden'); |
| 101 | }, |
| 102 | onOk(bvModalEvt) { |
| 103 | // prevent modal close |
| 104 | bvModalEvt.preventDefault(); |
| 105 | this.handleSubmit(); |
| 106 | }, |
| 107 | }, |
| 108 | }; |
| 109 | </script> |