xref: /openbmc/webui-vue/src/views/Settings/Network/ModalMacAddress.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
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 #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    modelValue: {
62      type: Boolean,
63      default: false,
64    },
65    macAddress: {
66      type: String,
67      default: '',
68    },
69  },
70  emits: ['ok', 'hidden', 'update:modelValue'],
71  setup() {
72    return {
73      v$: useVuelidate(),
74    };
75  },
76  data() {
77    return {
78      $t: useI18n().t,
79      form: {
80        macAddress: '',
81      },
82    };
83  },
84  watch: {
85    macAddress() {
86      this.form.macAddress = this.macAddress;
87    },
88    modelValue: {
89      handler(newValue) {
90        if (newValue) {
91          this.$nextTick(() => {
92            this.$refs.modal?.show();
93          });
94        }
95      },
96      immediate: true,
97    },
98  },
99  validations() {
100    return {
101      form: {
102        macAddress: {
103          required,
104          macAddress: macAddress(),
105        },
106      },
107    };
108  },
109  methods: {
110    handleSubmit() {
111      this.v$.$touch();
112      if (this.v$.$invalid) return;
113      this.$emit('ok', { MACAddress: this.form.macAddress });
114      this.closeModal();
115    },
116    closeModal() {
117      this.$nextTick(() => {
118        this.$refs.modal.hide();
119      });
120    },
121    resetForm() {
122      this.form.macAddress = this.macAddress;
123      this.v$.$reset();
124      this.$emit('update:modelValue', false);
125      this.$emit('hidden');
126    },
127    onOk(bvModalEvt) {
128      // prevent modal close
129      bvModalEvt.preventDefault();
130      this.handleSubmit();
131    },
132  },
133};
134</script>
135