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.$invalid">
25                {{ $t('global.form.fieldRequired') }}
26              </div>
27              <div v-if="v$.form.macAddress.macAddress.$invalid">
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>
52import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
53import { useVuelidate } from '@vuelidate/core';
54import { required } from '@vuelidate/validators';
55import { macAddress } from 'vuelidate/lib/validators';
56import { useI18n } from 'vue-i18n';
57
58export default {
59  mixins: [VuelidateMixin],
60  props: {
61    macAddress: {
62      type: String,
63      default: '',
64    },
65  },
66  setup() {
67    return {
68      v$: useVuelidate(),
69    };
70  },
71  data() {
72    return {
73      $t: useI18n().t,
74      form: {
75        macAddress: '',
76      },
77    };
78  },
79  watch: {
80    macAddress() {
81      this.form.macAddress = this.macAddress;
82    },
83  },
84  validations() {
85    return {
86      form: {
87        macAddress: {
88          required,
89          macAddress: macAddress(),
90        },
91      },
92    };
93  },
94  methods: {
95    handleSubmit() {
96      this.v$.$touch();
97      if (this.v$.$invalid) return;
98      this.$emit('ok', { MACAddress: this.form.macAddress });
99      this.closeModal();
100    },
101    closeModal() {
102      this.$nextTick(() => {
103        this.$refs.modal.hide();
104      });
105    },
106    resetForm() {
107      this.form.macAddress = this.macAddress;
108      this.v$.$reset();
109      this.$emit('hidden');
110    },
111    onOk(bvModalEvt) {
112      // prevent modal close
113      bvModalEvt.preventDefault();
114      this.handleSubmit();
115    },
116  },
117};
118</script>
119