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